/* ÁBACO Suite · hoja común de las 13 herramientas (sistema de diseño «ÁBACO Suite», Claude Design).
   No se edita en cada herramienta: se copia igual en todas (publico/suite/). Lo propio de cada una va en su hoja.
   Sin recursos externos: fuentes y logos viajan en esta carpeta. */
:root {
  --marino-950: #071a2b;
  --marino-900: #0c2338;
  --marino-800: #12304d;
  --marino-700: #16385a;
  --marino-600: #1f4e79;
  --marino-400: #5f87b3;
  --marino-200: #b9cde3;
  --marino-100: #e8eef5;
  --marino-50: #f4f7fb;
  --lienzo: #f3f5f8;
  --superficie: #ffffff;
  --tinta: #141a22;
  --apagado: #5b6270;
  --borde: #dfe3e9;
  --borde-control: #8b94a3;
  --foco: #2f6fb0;
  --sobre-oscuro: #f4f7fb;
  --apagado-oscuro: #9fb6cf;
  --positivo: #1d7a4d;
  --positivo-suave: #e6f3ec;
  --aviso: #92400e;
  --aviso-suave: #fdf3e2;
  --negativo: #b1400f;
  --negativo-suave: #fbeee7;
  --error: #9b2c2c;
  --error-suave: #fbeaea;
  --gestion: #70c0ff;
  --gestion-tinta: #065da0;
  --gestion-suave: #e9f5ff;
  --inversiones: #5fd598;
  --inversiones-tinta: #006f3d;
  --inversiones-suave: #e8f8ee;
  --licita: #d7b93f;
  --licita-tinta: #725800;
  --licita-suave: #f8f4e3;
  --encadena: #1bd7be;
  --encadena-tinta: #00715e;
  --encadena-suave: #e5f9f4;
  --empleo: #ff9e64;
  --empleo-tinta: #923f00;
  --empleo-suave: #fff0e7;
  --municipio: #ff7867;
  --municipio-tinta: #96372d;
  --municipio-suave: #ffeeeb;
  --turnos: #cfa2ff;
  --turnos-tinta: #6c4494;
  --turnos-suave: #f7f0ff;
  --solar: #f1aa47;
  --solar-tinta: #864b00;
  --solar-suave: #fdf1e4;
  --divisas: #00d0f2;
  --divisas-tinta: #006b88;
  --divisas-suave: #e4f8fd;
  --aporta: #f197de;
  --aporta-tinta: #853a77;
  --aporta-suave: #feeef9;
  --rapisalve: #ff99bd;
  --rapisalve-tinta: #91355a;
  --rapisalve-suave: #ffeef3;
  --valores: #adaeff;
  --valores-tinta: #514ea1;
  --valores-suave: #f1f2ff;
  --campo: #a0cb65;
  --campo-tinta: #456700;
  --campo-suave: #eff7e7;
  --espacio-1: 4px;
  --espacio-2: 8px;
  --espacio-3: 12px;
  --espacio-4: 16px;
  --espacio-6: 24px;
  --espacio-8: 32px;
  --espacio-12: 48px;
  --espacio-16: 64px;
  --espacio-24: 96px;
  --radio-chico: 6px;
  --radio-control: 8px;
  --radio: 12px;
  --radio-grande: 20px;
  --radio-logo: 22%;
  --radio-pildora: 999px;
  --sombra-1: 0 1px 2px rgba(12,35,56,0.06), 0 1px 1px rgba(12,35,56,0.04);
  --sombra-2: 0 10px 28px -10px rgba(12,35,56,0.22);
  --sombra-3: 0 24px 56px -16px rgba(7,26,43,0.40);
  --control: 40px;
  --cabecera: 64px;
  --barra-suite: 36px;
  --contenedor: 1200px;
  --font-titular: "Newsreader", Georgia, "Times New Roman", serif;
  --font-letra: "Public Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-cifras: "IBM Plex Mono", Consolas, "SFMono-Regular", Menlo, "Liberation Mono", monospace;
}
@font-face { font-family: "Public Sans"; src: url("fuentes/PublicSans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("fuentes/PublicSans-latin-wght-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fuentes/Newsreader-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fuentes/Newsreader-latin-wght-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fuentes/IBMPlexMono-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fuentes/IBMPlexMono-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fuentes/IBMPlexMono-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
/* El color de la herramienta: <html data-herramienta="solar"> o cualquier contenedor. */
:root { --h: var(--marino-200); --h-tinta: var(--marino-600); --h-suave: var(--marino-100); }
[data-herramienta="gestion"]     { --h: var(--gestion);     --h-tinta: var(--gestion-tinta);     --h-suave: var(--gestion-suave); }
[data-herramienta="inversiones"] { --h: var(--inversiones); --h-tinta: var(--inversiones-tinta); --h-suave: var(--inversiones-suave); }
[data-herramienta="licita"]      { --h: var(--licita);      --h-tinta: var(--licita-tinta);      --h-suave: var(--licita-suave); }
[data-herramienta="encadena"]    { --h: var(--encadena);    --h-tinta: var(--encadena-tinta);    --h-suave: var(--encadena-suave); }
[data-herramienta="empleo"]      { --h: var(--empleo);      --h-tinta: var(--empleo-tinta);      --h-suave: var(--empleo-suave); }
[data-herramienta="municipio"]   { --h: var(--municipio);   --h-tinta: var(--municipio-tinta);   --h-suave: var(--municipio-suave); }
[data-herramienta="turnos"]      { --h: var(--turnos);      --h-tinta: var(--turnos-tinta);      --h-suave: var(--turnos-suave); }
[data-herramienta="solar"]       { --h: var(--solar);       --h-tinta: var(--solar-tinta);       --h-suave: var(--solar-suave); }
[data-herramienta="divisas"]     { --h: var(--divisas);     --h-tinta: var(--divisas-tinta);     --h-suave: var(--divisas-suave); }
[data-herramienta="aporta"]      { --h: var(--aporta);      --h-tinta: var(--aporta-tinta);      --h-suave: var(--aporta-suave); }
[data-herramienta="rapisalve"]   { --h: var(--rapisalve);   --h-tinta: var(--rapisalve-tinta);   --h-suave: var(--rapisalve-suave); }
[data-herramienta="valores"]     { --h: var(--valores);     --h-tinta: var(--valores-tinta);     --h-suave: var(--valores-suave); }
[data-herramienta="campo"]       { --h: var(--campo);       --h-tinta: var(--campo-tinta);       --h-suave: var(--campo-suave); }

/* Base */
.ab-pagina { margin: 0; background: var(--lienzo); color: var(--tinta); font: 400 15px/24px var(--font-letra); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.ab-pagina *, .ab-pagina *::before, .ab-pagina *::after { box-sizing: border-box; }
.ab-pagina :where(a) { color: var(--marino-600); text-underline-offset: 3px; }
.ab-pagina :where(:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
.ab-contenedor { max-width: var(--contenedor); margin: 0 auto; padding: 0 var(--espacio-4); }
.ab-antetitulo { font-size: 12px; line-height: 16px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--h-tinta); }
.ab-titular { font-family: var(--font-titular); font-weight: 500; font-size: 36px; line-height: 42px; letter-spacing: -.01em; margin: 0; }
.ab-titular em { font-style: italic; color: var(--h-tinta); }
.ab-cifra-texto { font-family: var(--font-cifras); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Barra de la suite (encima de la cabecera) */
.ab-barra { background: var(--marino-950); color: var(--apagado-oscuro); font: 400 13px/1 var(--font-letra); height: var(--barra-suite); position: relative; z-index: 60; }
.ab-barra__dentro { max-width: var(--contenedor); height: 100%; margin: 0 auto; padding: 0 var(--espacio-4); display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-4); }
.ab-barra__suite { display: inline-flex; align-items: center; gap: 8px; color: var(--sobre-oscuro); text-decoration: none; font-weight: 600; white-space: nowrap; }
.ab-barra__suite img { width: 18px; height: 18px; border-radius: 4px; }
.ab-barra__suite span { color: var(--apagado-oscuro); font-weight: 400; }
.ab-barra__suite:hover span { color: var(--sobre-oscuro); }

/* Lanzador: <details> sin JavaScript */
.ab-lanzador { position: relative; }
.ab-lanzador > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px 0 10px; border-radius: var(--radio-pildora); border: 1px solid rgba(185, 205, 227, .30); color: var(--sobre-oscuro); font-weight: 600; user-select: none; }
.ab-lanzador > summary::-webkit-details-marker { display: none; }
.ab-lanzador > summary:hover, .ab-lanzador[open] > summary { background: rgba(244, 247, 251, .08); border-color: rgba(185, 205, 227, .55); }
.ab-lanzador > summary svg { width: 14px; height: 14px; fill: currentColor; }
.ab-lanzador__panel { position: absolute; right: 0; top: calc(100% + 12px); width: min(760px, calc(100vw - 32px)); background: var(--superficie); color: var(--tinta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-3); padding: var(--espacio-6); font-size: 14px; line-height: 20px; }
.ab-lanzador__titulo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.ab-lanzador__titulo b { font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
.ab-lanzador__rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 0; list-style: none; }
.ab-app { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 10px; text-decoration: none; color: inherit; }
.ab-app:hover { background: var(--marino-50); }
.ab-app[aria-current] { background: var(--marino-100); }
.ab-app img { width: 36px; height: 36px; flex: none; border-radius: 22%; }
.ab-app b { display: block; font-weight: 650; font-size: 14px; line-height: 19px; color: var(--tinta); }
.ab-app small { display: block; font-size: 12.5px; line-height: 17px; color: var(--apagado); margin-top: 2px; }

/* Cabecera de cada herramienta */
.ab-cabecera { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--borde); box-shadow: inset 0 3px 0 var(--h); }
.ab-cabecera__dentro { max-width: var(--contenedor); height: var(--cabecera); margin: 0 auto; padding: 0 var(--espacio-4); display: flex; align-items: center; gap: var(--espacio-6); }
.ab-marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); flex: none; }
.ab-marca img { width: 34px; height: 34px; border-radius: 22%; }
.ab-marca__nombre { display: block; font-weight: 700; font-size: 17px; line-height: 20px; letter-spacing: -.01em; color: var(--tinta); }
.ab-marca__suite { display: block; font-size: 10.5px; line-height: 14px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--h-tinta); }
.ab-cabecera__dentro > nav { flex: 1 1 auto; min-width: 0; }
/* El relleno vertical deja dentro de la caja que se desliza el subrayado del enlace activo (si no, overflow-x lo recorta). */
.ab-nav { display: flex; gap: 2px; margin: -14px 0; padding: 14px 0; list-style: none; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ab-nav::-webkit-scrollbar { display: none; }
/* Si no cabe, el último enlace se difumina: se ve que la fila sigue. */
.ab-nav { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.ab-nav a { position: relative; display: block; padding: 8px 12px; border-radius: var(--radio-control); color: var(--apagado); text-decoration: none; font-weight: 550; font-size: 14px; line-height: 20px; white-space: nowrap; }
.ab-nav a:hover { color: var(--tinta); background: var(--marino-50); }
.ab-nav a[aria-current="page"], .ab-nav a.activo { color: var(--tinta); }
.ab-nav a[aria-current="page"]::after, .ab-nav a.activo::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -13px; height: 2px; border-radius: 2px; background: var(--h-tinta); }
.ab-cuenta { display: flex; gap: 8px; align-items: center; flex: none; margin-left: auto; }

/* Botones */
.ab-boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--control); padding: 0 16px; border-radius: var(--radio-control); border: 1px solid transparent; background: var(--marino-600); color: #fff; font: 600 14px/1 var(--font-letra); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s, box-shadow .15s, transform .15s; }
.ab-boton:hover { background: var(--marino-700); color: #fff; }
.ab-boton:active { transform: translateY(1px); }
.ab-boton:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.ab-boton--secundario { background: var(--superficie); color: var(--marino-600); border-color: var(--borde-control); }
.ab-boton--secundario:hover { background: var(--marino-50); color: var(--marino-700); }
.ab-boton--fantasma { background: transparent; color: var(--marino-600); }
.ab-boton--fantasma:hover { background: var(--marino-50); color: var(--marino-700); }
.ab-boton--claro { background: #fff; color: var(--marino-900); }
.ab-boton--claro:hover { background: var(--marino-100); color: var(--marino-900); }
.ab-boton--contorno { background: transparent; color: var(--sobre-oscuro); border-color: rgba(185, 205, 227, .45); }
.ab-boton--contorno:hover { background: rgba(244, 247, 251, .08); color: #fff; border-color: var(--marino-200); }
.ab-boton--grande { height: 48px; padding: 0 22px; font-size: 15px; }
.ab-boton--chico { height: 32px; padding: 0 12px; font-size: 13px; }
.ab-boton[disabled], .ab-boton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* Héroe de portada */
.ab-heroe { position: relative; overflow: hidden; background: var(--marino-900); color: var(--sobre-oscuro); }
.ab-heroe::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(185, 205, 227, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(185, 205, 227, .07) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 75% 20%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 75% 20%, #000, transparent 75%); pointer-events: none; }
.ab-heroe__dentro { position: relative; max-width: var(--contenedor); margin: 0 auto; padding: 88px var(--espacio-4) 96px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; }
.ab-heroe__dentro:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.ab-heroe__dentro > :only-child { max-width: 780px; }
.ab-heroe__antetitulo { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; line-height: 16px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--h); }
.ab-heroe__antetitulo img { width: 28px; height: 28px; border-radius: 22%; }
.ab-heroe h1 { font-family: var(--font-titular); font-weight: 500; font-size: 56px; line-height: 60px; letter-spacing: -.02em; margin: 18px 0 18px; color: #fff; text-wrap: balance; }
.ab-heroe h1 em { font-style: italic; color: var(--h); }
.ab-heroe__entradilla { font-size: 18px; line-height: 28px; color: var(--apagado-oscuro); max-width: 34em; margin: 0; }
.ab-heroe__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.ab-heroe__nota { margin-top: 18px; font-size: 13px; color: var(--apagado-oscuro); }
.ab-vidrio { background: rgba(244, 247, 251, .05); border: 1px solid rgba(185, 205, 227, .18); border-radius: var(--radio-grande); padding: var(--espacio-6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ab-vidrio__titulo { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--apagado-oscuro); margin-bottom: 16px; }
.ab-vidrio__fila { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(185, 205, 227, .14); }
.ab-vidrio__fila span { color: var(--apagado-oscuro); font-size: 14px; }
.ab-vidrio__fila b { font-size: 24px; line-height: 28px; font-weight: 650; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ab-vidrio__fila b small { font-size: 13px; font-weight: 500; color: var(--h); margin-left: 6px; letter-spacing: 0; }

/* Título de pantalla interior */
.ab-titulo-pagina { padding: 40px 0 24px; }
.ab-titulo-pagina .ab-titular { margin-top: 8px; }
.ab-titulo-pagina p { color: var(--apagado); max-width: 42em; margin: 10px 0 0; }

/* Cifras */
.ab-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--espacio-4); }
.ab-cifra { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; box-shadow: var(--sombra-1); }
.ab-cifra__etiqueta { font-size: 12px; line-height: 16px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
.ab-cifra__valor { display: block; margin-top: 10px; font-size: 30px; line-height: 34px; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--tinta); }
.ab-cifra__valor small { font-size: 15px; font-weight: 500; color: var(--apagado); margin-left: 4px; }
.ab-cifra__nota { display: block; margin-top: 6px; font-size: 13px; line-height: 20px; color: var(--apagado); }
.ab-cifra__nota--sube { color: var(--positivo); font-weight: 600; }
.ab-cifra__nota--baja { color: var(--negativo); font-weight: 600; }

/* Tarjetas */
.ab-tarjeta { display: block; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--espacio-6); box-shadow: var(--sombra-1); color: inherit; }
a.ab-tarjeta { text-decoration: none; transition: box-shadow .2s, transform .2s, border-color .2s; }
a.ab-tarjeta:hover { box-shadow: var(--sombra-2); transform: translateY(-2px); border-color: #cdd4de; }
.ab-tarjeta__cabeza { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ab-tarjeta__cabeza img { width: 44px; height: 44px; border-radius: 22%; flex: none; }
.ab-tarjeta h3 { font-size: 17px; line-height: 24px; font-weight: 650; margin: 0; color: var(--tinta); }
.ab-tarjeta p { margin: 0; color: var(--apagado); }
.ab-tarjeta__dominio { display: block; font-family: var(--font-cifras); font-size: 12px; line-height: 16px; color: var(--apagado); }
.ab-tarjeta__pie { margin-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 600; font-size: 14px; color: var(--marino-600); }
.ab-tarjeta__pie .ab-ir { transition: transform .2s; }
a.ab-tarjeta:hover .ab-ir { transform: translateX(3px); }

/* Insignias y chips */
.ab-insignia { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radio-pildora); background: var(--marino-100); color: var(--marino-600); font-size: 12.5px; line-height: 1; font-weight: 600; white-space: nowrap; }
.ab-insignia::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ab-insignia--positivo { background: var(--positivo-suave); color: var(--positivo); }
.ab-insignia--aviso { background: var(--aviso-suave); color: var(--aviso); }
.ab-insignia--negativo { background: var(--negativo-suave); color: var(--negativo); }
.ab-insignia--error { background: var(--error-suave); color: var(--error); }
.ab-insignia--herramienta { background: var(--h-suave); color: var(--h-tinta); }
.ab-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ab-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 5px; border: 1px solid var(--borde); border-radius: var(--radio-pildora); background: var(--superficie); color: var(--tinta); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ab-chip img { width: 20px; height: 20px; border-radius: 22%; }
a.ab-chip:hover { border-color: var(--borde-control); background: var(--marino-50); }

/* Mensajes: siempre con la palabra del estado */
.ab-mensaje { display: flex; gap: 10px; align-items: baseline; padding: 14px 16px; border-radius: var(--radio); background: var(--marino-50); border: 1px solid #d3deea; color: var(--tinta); font-size: 14px; line-height: 21px; }
.ab-mensaje__estado { flex: none; font-weight: 700; color: var(--marino-600); }
.ab-mensaje--ok { background: var(--positivo-suave); border-color: #bfe0cd; }
.ab-mensaje--ok .ab-mensaje__estado { color: var(--positivo); }
.ab-mensaje--aviso { background: var(--aviso-suave); border-color: #f1d9b0; }
.ab-mensaje--aviso .ab-mensaje__estado { color: var(--aviso); }
.ab-mensaje--error { background: var(--error-suave); border-color: #efc4c4; }
.ab-mensaje--error .ab-mensaje__estado { color: var(--error); }

/* Banda de demostración */
.ab-banda-demo { background: var(--aviso-suave); color: var(--aviso); border-bottom: 1px solid #f1d9b0; font-size: 13px; line-height: 20px; }
.ab-banda-demo .ab-contenedor { display: block; padding-top: 8px; padding-bottom: 8px; }
.ab-banda-demo b { font-weight: 700; margin-right: 6px; }
.ab-banda-demo a { margin-left: 6px; }
.ab-banda-demo a { color: var(--aviso); font-weight: 600; }

/* Formularios */
.ab-campo { display: grid; gap: 6px; margin: 0 0 16px; }
.ab-campo > label, .ab-campo__etiqueta { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--tinta); }
.ab-campo input, .ab-campo select, .ab-campo textarea { width: 100%; height: var(--control); padding: 0 12px; border: 1px solid var(--borde-control); border-radius: var(--radio-control); background: var(--superficie); color: var(--tinta); font: 400 15px/22px var(--font-letra); }
.ab-campo textarea { height: auto; min-height: 96px; padding: 9px 12px; resize: vertical; }
.ab-campo input:focus, .ab-campo select:focus, .ab-campo textarea:focus { outline: 3px solid var(--foco); outline-offset: 1px; border-color: var(--marino-600); }
.ab-campo__ayuda { font-size: 13px; line-height: 20px; color: var(--apagado); }
.ab-campo--error input, .ab-campo--error select, .ab-campo--error textarea { border-color: var(--error); }
.ab-campo__error { font-size: 13px; line-height: 20px; font-weight: 600; color: var(--error); }

/* Tablas */
.ab-tabla-marco { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: auto; box-shadow: var(--sombra-1); }
.ab-tabla { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.ab-tabla th { text-align: left; padding: 11px 16px; background: var(--marino-50); border-bottom: 1px solid var(--borde); font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); white-space: nowrap; }
.ab-tabla td { padding: 12px 16px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.ab-tabla tbody tr:last-child td { border-bottom: 0; }
.ab-tabla tbody tr:hover td { background: var(--marino-50); }
.ab-tabla th.num { text-align: right; font-family: var(--font-letra); font-size: 11.5px; }
.ab-tabla td.num { text-align: right; font-family: var(--font-cifras); font-weight: 500; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Acceso con un clic (cuentas de demostración) */
.ab-demo { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; box-shadow: var(--sombra-1); }
.ab-demo__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ab-demo__cabeza h2 { font-size: 17px; line-height: 24px; font-weight: 650; margin: 0; }
.ab-demo__cabeza small { color: var(--apagado); font-size: 13px; }
.ab-demo__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.ab-demo--dos .ab-demo__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ab-demo form { margin: 0; }
.ab-demo__boton { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); color: var(--tinta); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s; }
.ab-demo__boton:hover { border-color: var(--h-tinta); background: var(--h-suave); }
.ab-demo__boton:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.ab-demo__avatar { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--h-suave); color: var(--h-tinta); font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.ab-demo__boton:hover .ab-demo__avatar { background: var(--superficie); }
.ab-demo__texto { flex: 1; min-width: 0; }
.ab-demo__quien { display: block; font-weight: 650; font-size: 14px; line-height: 19px; }
.ab-demo__papel { display: block; font-size: 12.5px; line-height: 17px; color: var(--apagado); }
.ab-demo__correo { display: block; font-family: var(--font-cifras); font-size: 11.5px; line-height: 16px; color: var(--apagado); overflow-wrap: anywhere; }
.ab-demo__ir { flex: none; color: var(--h-tinta); font-weight: 700; transition: transform .15s; }
.ab-demo__boton:hover .ab-demo__ir { transform: translateX(3px); }

/* Pie de página con la suite */
.ab-pie { background: var(--marino-950); color: var(--apagado-oscuro); font: 400 14px/22px var(--font-letra); }
.ab-pie a { color: var(--sobre-oscuro); text-decoration: none; }
.ab-pie a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ab-pie :focus-visible { outline: 3px solid var(--marino-200); outline-offset: 2px; }
.ab-pie__dentro { max-width: var(--contenedor); margin: 0 auto; padding: 56px var(--espacio-4) 28px; }
.ab-pie__arriba { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 2fr); gap: 48px; }
.ab-pie__marca { display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 700; font-size: 17px; margin-bottom: 12px; }
.ab-pie__marca img { width: 40px; height: 40px; border-radius: 22%; }
.ab-pie h2 { margin: 0 0 14px; font-size: 12px; line-height: 16px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--apagado-oscuro); }
.ab-pie p { margin: 0 0 10px; }
.ab-pie ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.ab-pie__suite ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.ab-pie__suite a { display: flex; align-items: center; gap: 10px; }
.ab-pie__suite img { width: 22px; height: 22px; border-radius: 22%; flex: none; }
.ab-pie__suite a[aria-current] { color: var(--h); font-weight: 650; }
.ab-pie__abajo { margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(185, 205, 227, .16); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; }

/* Móvil */
@media (max-width: 960px) {
  .ab-heroe__dentro { grid-template-columns: 1fr; gap: 40px; padding: 64px var(--espacio-4); }
  .ab-heroe h1 { font-size: 40px; line-height: 44px; }
  .ab-pie__arriba { grid-template-columns: 1fr 1fr; }
  .ab-pie__suite { grid-column: 1 / -1; }
  .ab-lanzador__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ab-cabecera__dentro { gap: 12px; }
  .ab-marca__suite { display: none; }
  /* Sin JavaScript no hay menú que sustituya a la navegación: pasa a una segunda fila que se desliza. */
  .ab-cabecera__dentro { flex-wrap: wrap; height: auto; row-gap: 0; padding-top: 12px; }
  .ab-cabecera__dentro > nav { order: 3; flex: 0 0 calc(100% + 32px); min-width: 0; margin: 10px -16px 0; border-top: 1px solid var(--borde); }
  .ab-nav { padding: 0 8px; margin: 0; }
  .ab-nav a { padding: 10px; font-size: 13.5px; }
  .ab-nav a[aria-current="page"]::after, .ab-nav a.activo::after { bottom: 0; }
  .ab-cuenta { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
  .ab-barra__suite span { display: none; }
  .ab-lanzador__panel { position: fixed; top: 44px; left: 16px; right: 16px; width: auto; max-height: calc(100vh - 60px); overflow: auto; }
  .ab-lanzador__rejilla { grid-template-columns: 1fr; }
  .ab-pie__arriba { grid-template-columns: 1fr; }
  .ab-pie__suite ul { grid-template-columns: 1fr 1fr; }
  .ab-demo--dos .ab-demo__lista { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-boton, a.ab-tarjeta, .ab-tarjeta__pie .ab-ir, .ab-demo__boton, .ab-demo__ir { transition: none; }
}

/* Encaje en las herramientas */
html { overflow-x: clip; }
.ab-barra *, .ab-barra *::before, .ab-barra *::after, .ab-cabecera *, .ab-cabecera *::before, .ab-cabecera *::after,
.ab-heroe *, .ab-heroe *::before, .ab-heroe *::after, .ab-pie *, .ab-pie *::before, .ab-pie *::after,
.ab-demo *, .ab-tarjeta *, .ab-cifra *, .ab-mensaje *, .ab-campo * { box-sizing: border-box; }
.ab-barra, .ab-cabecera, .ab-pie { box-sizing: border-box; }
/* Un héroe dentro del contenedor de la página ocupa todo el ancho de la ventana */
.ab-sangrado { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
/* Fila de papeles de una cuenta, bajo la cabecera */
.ab-papeles { background: var(--superficie); border-bottom: 1px solid var(--borde); }
.ab-papeles__dentro { max-width: var(--contenedor); margin: 0 auto; padding: 0 var(--espacio-4); display: flex; gap: 4px; overflow-x: auto; }
.ab-papeles a { display: block; padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--apagado); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.ab-papeles a:hover { color: var(--tinta); }
.ab-papeles a[aria-current], .ab-papeles a.activo { color: var(--tinta); border-bottom-color: var(--h-tinta); }
/* Cuenta con sesión dentro de la cabecera */
.ab-cuenta form { margin: 0; }
.ab-cuenta__nombre { font-size: 14px; font-weight: 600; color: var(--tinta); text-decoration: none; white-space: nowrap; max-width: 16em; overflow: hidden; text-overflow: ellipsis; }
.ab-enlace-boton { background: none; border: 0; padding: 0; font: 600 14px/1 var(--font-letra); color: var(--marino-600); cursor: pointer; }
.ab-enlace-boton:hover { text-decoration: underline; text-underline-offset: 3px; }