/* ==========================================================================
   Portal de Información — sistema de diseño propio
   --------------------------------------------------------------------------
   Sin frameworks ni CDN: todo el CSS es de este proyecto y se sirve desde el
   propio dominio. No hay peticiones a terceros, lo que además evita el aviso
   de cookies.

   Lenguaje visual: superficies claras y aireadas, tipografía fluida de
   contraste alto, esquinas suaves, sombras en capas y un acento verde
   profundo. Modo oscuro nativo. Contraste conforme a WCAG 2.1 AA en ambos
   modos; ningún significado se transmite solo mediante color.
   ========================================================================== */

:root {
  /* --- neutros cálidos --- */
  --l-0: #ffffff;
  --l-1: #fcfcfb;
  --l-2: #f6f6f4;
  --l-3: #eeeeeb;
  --l-4: #e2e2de;
  --texto: #16191c;
  --texto-2: #545a60;
  --texto-3: #8b9198;
  --borde: #e6e6e2;
  --borde-2: #d3d3cd;

  /* --- acento: verde profundo --- */
  --acento: #0f6b52;
  --acento-int: #0b5340;
  --acento-suave: #e6f2ee;
  --acento-borde: #b9dbd0;
  --sobre-acento: #ffffff;

  /* --- señales --- */
  --bien: #14664a;
  --bien-fondo: #e7f3ed;
  --ojo: #8a5a08;
  --ojo-fondo: #fdf2dd;
  --mal: #a02b28;
  --mal-fondo: #fceceb;
  --dato: #1f4e79;
  --dato-fondo: #e9f0f7;

  /* --- forma --- */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 20px;
  --r-pill: 999px;

  --s-1: 0 1px 2px rgba(16, 24, 32, .05);
  --s-2: 0 1px 3px rgba(16, 24, 32, .05), 0 6px 16px -6px rgba(16, 24, 32, .10);
  --s-3: 0 2px 6px rgba(16, 24, 32, .06), 0 14px 34px -12px rgba(16, 24, 32, .16);
  --s-foco: 0 0 0 3px rgba(15, 107, 82, .22);

  --medida: 66ch;
  --sans: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont,
          "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --display: "Inter Tight", "SF Pro Display", -apple-system,
             BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --transicion: 160ms cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --l-0: #16191c;
    --l-1: #1a1e21;
    --l-2: #21252a;
    --l-3: #282d33;
    --l-4: #333940;
    --texto: #edeff0;
    --texto-2: #a8afb6;
    --texto-3: #7b838b;
    --borde: #2b3035;
    --borde-2: #3b424a;

    --acento: #4fd1a6;
    --acento-int: #7ee0bd;
    --acento-suave: #16302a;
    --acento-borde: #245244;
    --sobre-acento: #08221b;

    --bien: #62cfa2;
    --bien-fondo: #142a22;
    --ojo: #e0b96a;
    --ojo-fondo: #2b2416;
    --mal: #f09d98;
    --mal-fondo: #2e1d1c;
    --dato: #8fbde8;
    --dato-fondo: #17242f;

    --s-1: 0 1px 2px rgba(0, 0, 0, .4);
    --s-2: 0 1px 3px rgba(0, 0, 0, .4), 0 6px 18px -6px rgba(0, 0, 0, .5);
    --s-3: 0 2px 8px rgba(0, 0, 0, .45), 0 18px 40px -14px rgba(0, 0, 0, .6);
    --s-foco: 0 0 0 3px rgba(79, 209, 166, .28);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font: 400 clamp(16px, .5vw + 15px, 17.5px)/1.65 var(--sans);
  color: var(--texto);
  background: var(--l-1);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05", "ss01";
}

/* fondo con un velo de color muy tenue, para que la página no sea plana */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 12% -8%, var(--acento-suave), transparent 65%),
    radial-gradient(48rem 34rem at 96% 4%, var(--dato-fondo), transparent 60%);
  opacity: .8;
}

/* ------------------------------------------------------------- tipografía */

h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 640; line-height: 1.14;
  letter-spacing: -.022em; margin: 0 0 .5em; color: var(--texto);
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 3.4vw + 1rem, 3rem); }
h2 { font-size: clamp(1.4rem, 1.2vw + 1rem, 1.9rem); margin-top: 2.4em; }
h3 { font-size: 1.14rem; margin-top: 2em; letter-spacing: -.012em; }
h4 { font-size: .98rem; }
p  { margin: 0 0 1.15em; max-width: var(--medida); text-wrap: pretty; }

a { color: var(--acento); text-decoration-color: color-mix(in srgb, var(--acento) 40%, transparent);
    text-decoration-thickness: 1.5px; text-underline-offset: 3px;
    transition: color var(--transicion); }
a:hover { color: var(--acento-int);
          text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px;
                 border-radius: var(--r-xs); }

code, kbd { font: 500 .87em/1.4 var(--mono); background: var(--l-3);
            padding: .12em .38em; border-radius: var(--r-xs); }
hr { border: 0; height: 1px; background: var(--borde); margin: 3rem 0; }
small { font-size: .86rem; color: var(--texto-2); }
strong { font-weight: 620; }

.eyebrow { font: 620 .78rem/1 var(--sans); letter-spacing: .1em;
           text-transform: uppercase; color: var(--acento);
           display: block; margin-bottom: .9rem; }
.entradilla { font-size: clamp(1.05rem, .5vw + 1rem, 1.22rem);
              color: var(--texto-2); max-width: 60ch; line-height: 1.6; }

/* ------------------------------------------------------------- estructura */

.salto-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--acento); color: var(--sobre-acento);
  padding: .8rem 1.3rem; border-radius: var(--r-sm); font-weight: 600;
}
.salto-contenido:focus { left: .75rem; top: .75rem; }

.lienzo { max-width: 1140px; margin: 0 auto; padding: 0 1.5rem; }
.lienzo--estrecho { max-width: 760px; }
.seccion { padding: 3rem 0; }
.apilado > * + * { margin-top: 1.25rem; }
.centrado { text-align: center; }
.oculto-visualmente { position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --------------------------------------------------------------- cabecera */

.cabecera {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--l-0) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--borde);
}
.cabecera__fila { display: flex; align-items: center; gap: 1.25rem;
                  min-height: 68px; flex-wrap: wrap; }

.marca { display: inline-flex; align-items: center; gap: .6rem;
         text-decoration: none; color: var(--texto);
         font: 660 1.16rem/1 var(--display); letter-spacing: -.03em; }
.marca:hover { color: var(--texto); }
.marca__sello {
  width: 30px; height: 30px; border-radius: 8px; display: grid;
  place-items: center; font: 700 .95rem/1 var(--sans);
  color: var(--sobre-acento);
  background: linear-gradient(150deg, var(--acento), color-mix(in srgb, var(--acento) 60%, var(--dato)));
  box-shadow: var(--s-1);
}
/* Última palabra del nombre, resaltada. El nombre lo fija APP_SITE_NAME, así
   que la clase se llama por su función y no por la marca de turno. */
.marca span.marca__acento { color: var(--acento); }

.navegacion { display: flex; align-items: center; gap: .2rem;
              margin-left: auto; flex-wrap: wrap; }
.navegacion a:not(.boton):not(.testigo-saldo) {
  color: var(--texto-2); text-decoration: none;
  font: 520 .92rem/1 var(--sans); padding: .55rem .8rem;
  border-radius: var(--r-sm); transition: background var(--transicion),
  color var(--transicion); }
.navegacion a:not(.boton):not(.testigo-saldo):hover {
  background: var(--l-2); color: var(--texto); }
.navegacion a:not(.boton)[aria-current="page"] {
  color: var(--acento); font-weight: 620; background: var(--acento-suave); }
/* El botón de la cabecera es más compacto que en el cuerpo de la página. */
.navegacion .boton { padding: .58rem 1.05rem; font-size: .9rem; }

.testigo-saldo {
  display: inline-flex; align-items: baseline; gap: .3rem;
  font: 560 .84rem/1 var(--sans); padding: .5rem .8rem;
  border-radius: var(--r-pill); border: 1px solid var(--borde-2);
  color: var(--texto-2); text-decoration: none; white-space: nowrap;
  background: var(--l-0);
}
.testigo-saldo:hover { border-color: var(--acento); color: var(--texto); }
.testigo-saldo strong { color: var(--texto); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ héroe */

.heroe { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem); }
.heroe h1 { max-width: 24ch; margin-bottom: .7rem; }
.heroe__marcadores { display: flex; gap: 1.75rem; flex-wrap: wrap;
                     margin-top: 2rem; }
.marcador { display: flex; flex-direction: column; gap: .1rem; }
.marcador__valor { font: 640 1.5rem/1 var(--display); letter-spacing: -.03em;
                   font-variant-numeric: tabular-nums; }
.marcador__pie { font: 560 .78rem/1.3 var(--sans); color: var(--texto-3);
                 text-transform: uppercase; letter-spacing: .07em; }

/* --------------------------------------------------------------- tarjetas */

.tarjeta {
  background: var(--l-0); border: 1px solid var(--borde);
  border-radius: var(--r-md); padding: clamp(1.15rem, 2vw, 1.6rem);
  box-shadow: var(--s-2);
}
.tarjeta > :first-child { margin-top: 0; }
.tarjeta > :last-child { margin-bottom: 0; }
.tarjeta--enlace { text-decoration: none; color: inherit; display: block;
  transition: transform var(--transicion), box-shadow var(--transicion),
              border-color var(--transicion); }
.tarjeta--enlace:hover { transform: translateY(-2px); box-shadow: var(--s-3);
                         border-color: var(--acento-borde); color: inherit; }
.tarjeta--acento { background: var(--acento-suave);
                   border-color: var(--acento-borde); box-shadow: none; }
.tarjeta--hueca { background: var(--l-2); box-shadow: none; }

.rejilla { display: grid; gap: 1.15rem; }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }

.cifra { display: block; font: 640 clamp(1.7rem, 2.4vw, 2.2rem)/1 var(--display);
         letter-spacing: -.035em; font-variant-numeric: tabular-nums;
         margin-bottom: .25rem; }
.cifra__pie { font: 560 .8rem/1.35 var(--sans); color: var(--texto-3);
              text-transform: uppercase; letter-spacing: .07em; }

/* ---------------------------------------------------------------- botones */

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; font: 600 .95rem/1 var(--sans); padding: .78rem 1.35rem;
  border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background var(--transicion), border-color var(--transicion),
              transform var(--transicion), box-shadow var(--transicion);
}
.boton:active { transform: translateY(1px); }
.boton--principal { background: var(--acento); color: var(--sobre-acento);
                    box-shadow: var(--s-1); }
.boton--principal:hover { background: var(--acento-int);
                          color: var(--sobre-acento); box-shadow: var(--s-2); }
.boton--secundario { background: var(--l-0); color: var(--texto);
                     border-color: var(--borde-2); }
.boton--secundario:hover { background: var(--l-2); color: var(--texto);
                           border-color: var(--borde-2); }
.boton--sobrio { background: none; color: var(--texto-2); padding: .55rem .8rem; }
.boton--sobrio:hover { background: var(--l-2); color: var(--texto); }
.boton--peligro { background: none; color: var(--mal); border-color: var(--mal); }
.boton--peligro:hover { background: var(--mal-fondo); color: var(--mal); }
.boton--ancho { width: 100%; }
.boton--grande { font-size: 1.02rem; padding: .95rem 1.7rem; }
.boton[disabled], .boton[aria-disabled="true"] { opacity: .45;
  cursor: not-allowed; transform: none; }

.acciones { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }

/* ----------------------------------------------------------------- avisos */

.aviso {
  --tinte: var(--l-3); --lapiz: var(--texto-2);
  background: var(--tinte); color: var(--texto);
  border: 1px solid color-mix(in srgb, var(--lapiz) 22%, transparent);
  border-left: 3px solid var(--lapiz);
  padding: 1rem 1.2rem; border-radius: var(--r-xs) var(--r-sm) var(--r-sm) var(--r-xs);
  margin: 1.5rem 0; font-size: .95rem;
}
.aviso p { margin-bottom: .5rem; max-width: 78ch; }
.aviso p:last-child { margin-bottom: 0; }
.aviso__titulo { display: block; font-weight: 640; margin-bottom: .25rem;
                 color: var(--lapiz); }
.aviso--info { --tinte: var(--dato-fondo); --lapiz: var(--dato); }
.aviso--bien { --tinte: var(--bien-fondo); --lapiz: var(--bien); }
.aviso--ojo  { --tinte: var(--ojo-fondo);  --lapiz: var(--ojo); }
.aviso--mal  { --tinte: var(--mal-fondo);  --lapiz: var(--mal); }

/* ------------------------------------------------------------ formularios */

label { display: block; font: 600 .9rem/1.4 var(--sans); margin-bottom: .4rem; }
.campo { margin-bottom: 1.3rem; }
.campo__ayuda { font-size: .86rem; color: var(--texto-2); margin: .4rem 0 0;
                max-width: var(--medida); }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="search"],
select, textarea {
  width: 100%; font: 400 1rem/1.5 var(--sans); color: var(--texto);
  background: var(--l-0); border: 1px solid var(--borde-2);
  border-radius: var(--r-sm); padding: .7rem .85rem;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
input::placeholder, textarea::placeholder { color: var(--texto-3); }
textarea { resize: vertical; min-height: 120px; font-family: inherit; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--acento); box-shadow: var(--s-foco);
}
select { appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--texto-3) 50%),
                    linear-gradient(135deg, var(--texto-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 51%, calc(100% - 13px) 51%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 2.3rem; }

.casilla { display: flex; gap: .65rem; align-items: flex-start;
           font: 400 .95rem/1.55 var(--sans); margin-bottom: .85rem; }
.casilla input { width: auto; flex-shrink: 0; margin-top: .3rem;
                 accent-color: var(--acento); }
fieldset { border: 1px solid var(--borde); border-radius: var(--r-md);
           padding: 1.2rem 1.35rem; margin: 0 0 1.5rem; }
legend { font: 640 .88rem/1 var(--sans); padding: 0 .45rem;
         text-transform: uppercase; letter-spacing: .06em;
         color: var(--texto-3); }
.fila-campos { display: grid; gap: 1rem;
               grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); }

/* ------------------------------------------------------ caja de pregunta */

.caja-pregunta {
  background: var(--l-0); border: 1px solid var(--borde-2);
  border-radius: var(--r-lg); padding: 1.3rem 1.4rem;
  box-shadow: var(--s-3);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.caja-pregunta:focus-within { border-color: var(--acento);
                              box-shadow: var(--s-3), var(--s-foco); }
.caja-pregunta textarea {
  border: none; padding: 0; background: none; min-height: 88px;
  font-size: clamp(1.05rem, .6vw + 1rem, 1.18rem); line-height: 1.55;
}
.caja-pregunta textarea:focus { outline: none; box-shadow: none; }
.caja-pregunta__pie { display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap; border-top: 1px solid var(--borde); margin-top: 1rem;
  padding-top: 1rem; }
.caja-pregunta__coste { font-size: .87rem; color: var(--texto-2);
  margin-right: auto; display: inline-flex; align-items: center;
  gap: .55rem; flex-wrap: wrap; }
.caja-pregunta__coste .medidor { margin: 0; }

.sugerencias { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.15rem 0 0;
               padding: 0; list-style: none; }
.sugerencias button {
  font: 450 .875rem/1.45 var(--sans); text-align: left; cursor: pointer;
  background: var(--l-0); border: 1px solid var(--borde);
  color: var(--texto-2); padding: .5rem .85rem; border-radius: var(--r-pill);
  transition: border-color var(--transicion), color var(--transicion),
              background var(--transicion);
}
.sugerencias button:hover { border-color: var(--acento); color: var(--acento);
                            background: var(--acento-suave); }

.detalle-filtros { margin-top: 1rem; }
.detalle-filtros summary { cursor: pointer; font: 560 .89rem/1 var(--sans);
  color: var(--texto-2); padding: .5rem 0; list-style: none; }
.detalle-filtros summary::-webkit-details-marker { display: none; }
.detalle-filtros summary::before { content: "＋ "; color: var(--acento); }
.detalle-filtros[open] summary::before { content: "− "; }
.detalle-filtros summary:hover { color: var(--texto); }

/* -------------------------------------------------------------- respuesta */

.respuesta { font-size: 1.06rem; line-height: 1.78; }
.respuesta > :first-child { margin-top: 0; }

/* Bloques que trae el Markdown del modelo: encabezados de apartado, listas,
   citas literales de una resolución y tablas de desglose. Los encabezados van
   más contenidos que los de la página, porque aquí son secciones de un texto,
   no títulos de la interfaz. */
.respuesta h1, .respuesta h2 { font-size: 1.3rem; margin-top: 2rem; }
.respuesta h3, .respuesta h4 { font-size: 1.08rem; margin-top: 1.6rem; }
.respuesta ul, .respuesta ol { margin: 0 0 1.15em; padding-left: 1.4rem;
                               max-width: var(--medida); }
.respuesta li { margin-bottom: .4em; }
.respuesta li > ul, .respuesta li > ol { margin: .4em 0 0; }
.respuesta blockquote {
  margin: 1.3rem 0; padding: .1rem 0 .1rem 1.1rem;
  border-left: 3px solid var(--borde); color: var(--texto-2);
}
.respuesta pre {
  background: var(--l-2); border: 1px solid var(--borde);
  border-radius: var(--r-md); padding: .9rem 1rem; overflow-x: auto;
  font: 500 .87em/1.6 var(--mono);
}
.respuesta pre code { background: none; padding: 0; }
.respuesta .tabla-envoltorio { margin: 1.3rem 0; }
.respuesta th { white-space: normal; }

.marca-cita {
  display: inline-block; font: 640 .72rem/1 var(--mono); vertical-align: .32em;
  background: var(--dato-fondo); color: var(--dato); padding: .25em .42em;
  border-radius: var(--r-xs); text-decoration: none; margin: 0 .12em;
  transition: background var(--transicion), color var(--transicion);
}
.marca-cita:hover { background: var(--dato); color: var(--l-0); }

.fuentes { list-style: none; padding: 0; margin: 0; }
.fuentes > li { border-top: 1px solid var(--borde); padding: 1rem 0; }
.fuentes > li:first-child { border-top: none; padding-top: 0; }
.fuente__cabeza { display: flex; gap: .7rem; align-items: baseline;
                  flex-wrap: wrap; }
.fuente__numero { font: 640 .76rem/1.7 var(--mono); background: var(--dato-fondo);
  color: var(--dato); min-width: 1.9em; text-align: center;
  border-radius: var(--r-xs); flex-shrink: 0; }
.fuente__titulo { font-weight: 600; }
.fuente__meta { font-size: .86rem; color: var(--texto-2); margin: .35rem 0 0; }

/* -------------------------------------------------------------- etiquetas */

.etiqueta {
  display: inline-flex; align-items: center; gap: .32rem;
  font: 600 .765rem/1 var(--sans); padding: .35em .65em;
  border-radius: var(--r-xs); background: var(--l-3); color: var(--texto-2);
  border: 1px solid transparent; letter-spacing: .005em;
}
.etiqueta--favorable { background: var(--bien-fondo); color: var(--bien); }
.etiqueta--adverso   { background: var(--mal-fondo);  color: var(--mal); }
.etiqueta--neutro    { background: var(--dato-fondo); color: var(--dato); }
.etiqueta--ojo       { background: var(--ojo-fondo);  color: var(--ojo); }
.etiqueta--acento    { background: var(--acento-suave); color: var(--acento); }
.etiquetas { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ----------------------------------------------------------------- tablas */

.tabla-envoltorio { overflow-x: auto; margin: 1.3rem 0;
  border: 1px solid var(--borde); border-radius: var(--r-md);
  background: var(--l-0); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .78rem .95rem;
         border-bottom: 1px solid var(--borde); vertical-align: top; }
th { background: var(--l-2); font: 620 .78rem/1.3 var(--sans);
     text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3);
     white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--transicion); }
tbody tr:hover { background: var(--l-2); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- barras */

.barra { height: 6px; background: var(--l-3); border-radius: var(--r-pill);
         overflow: hidden; min-width: 80px; }
.barra__relleno { height: 100%; border-radius: var(--r-pill);
                  background: var(--acento); }
.barra__relleno--bien { background: var(--bien); }
.barra__relleno--dato { background: var(--dato); }
.barra__relleno--mal  { background: var(--mal); }

.medidor { display: flex; gap: .28rem; margin: .55rem 0; }
.medidor__unidad { width: 26px; height: 7px; border-radius: var(--r-pill);
                   background: var(--borde-2); }
.medidor__unidad--gastada { background: var(--acento); }

/* -------------------------------------------------------------- documentos */

.lista-documentos { list-style: none; padding: 0; margin: 0; }
.lista-documentos > li { border-bottom: 1px solid var(--borde);
                         padding: 1.25rem 0; }
.lista-documentos > li:last-child { border-bottom: none; }
.documento__titulo { font: 620 1.1rem/1.35 var(--display);
  letter-spacing: -.015em; margin: 0 0 .4rem; max-width: var(--medida); }
.documento__titulo a { color: var(--texto); text-decoration: none; }
.documento__titulo a:hover { color: var(--acento); }
.documento__meta { font-size: .86rem; color: var(--texto-3); margin: 0 0 .55rem;
                   display: flex; gap: .6rem; flex-wrap: wrap;
                   align-items: center; }
.documento__extracto { font-size: .95rem; color: var(--texto-2); margin: 0;
                       max-width: var(--medida); }

/* ------------------------------------------------------------ dos columnas */

.con-lateral { display: grid; gap: 2.5rem; align-items: start;
               grid-template-columns: 248px 1fr; }
@media (max-width: 880px) { .con-lateral { grid-template-columns: 1fr; } }
.lateral { font-size: .93rem; }
@media (min-width: 881px) { .lateral { position: sticky; top: 92px; } }
.lateral h3 { margin: 1.6rem 0 .5rem; font: 620 .76rem/1 var(--sans);
  text-transform: uppercase; letter-spacing: .09em; color: var(--texto-3); }
.lateral h3:first-child { margin-top: 0; }
.lateral ul { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.lateral li { margin-bottom: .15rem; }
.lateral a { display: flex; justify-content: space-between; gap: .6rem;
  color: var(--texto-2); text-decoration: none; padding: .4rem .6rem;
  border-radius: var(--r-xs); transition: background var(--transicion),
  color var(--transicion); }
.lateral a:hover { background: var(--l-2); color: var(--texto); }
.lateral a[aria-current] { background: var(--acento-suave); color: var(--acento);
                           font-weight: 620; }
.cuenta-pequena { color: var(--texto-3); font-variant-numeric: tabular-nums;
                  font-size: .85em; }

/* ------------------------------------------------------------- paginación */

.paginacion { display: flex; gap: .4rem; align-items: center;
              justify-content: center; margin: 2.5rem 0; flex-wrap: wrap; }
.paginacion a, .paginacion span {
  padding: .55rem .85rem; border: 1px solid var(--borde);
  border-radius: var(--r-sm); text-decoration: none; color: var(--texto-2);
  font-size: .9rem; background: var(--l-0);
}
.paginacion a:hover { border-color: var(--acento); color: var(--acento); }
.paginacion .actual { background: var(--acento); color: var(--sobre-acento);
                      border-color: var(--acento); font-weight: 620; }

/* ------------------------------------------------------------------ pasos */

.pasos { display: grid; gap: 1.6rem; counter-reset: paso;
         grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.paso { position: relative; padding-top: 3rem; }
.paso::before {
  counter-increment: paso; content: counter(paso);
  position: absolute; top: 0; left: 0; width: 36px; height: 36px;
  display: grid; place-items: center; border-radius: var(--r-sm);
  font: 660 1rem/1 var(--display); color: var(--sobre-acento);
  background: linear-gradient(150deg, var(--acento),
              color-mix(in srgb, var(--acento) 55%, var(--dato)));
  box-shadow: var(--s-1);
}
.paso h3 { margin: 0 0 .4rem; font-size: 1.06rem; }
.paso p { margin: 0; font-size: .95rem; color: var(--texto-2); max-width: 42ch; }

/* -------------------------------------------------------------------- pie */

.pie { border-top: 1px solid var(--borde); margin-top: 5rem; padding: 3rem 0;
       background: var(--l-0); font-size: .91rem; }
.pie__rejilla { display: grid; gap: 2.2rem;
                grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pie h4 { font: 620 .76rem/1 var(--sans); text-transform: uppercase;
          letter-spacing: .09em; color: var(--texto-3); margin-bottom: .85rem; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: .45rem; }
.pie a { color: var(--texto-2); text-decoration: none; }
.pie a:hover { color: var(--acento); }
.pie__legal { border-top: 1px solid var(--borde); margin-top: 2.4rem;
              padding-top: 1.6rem; color: var(--texto-3); font-size: .85rem; }
.pie__legal p { max-width: 82ch; }

/* --------------------------------------------------------- accesibilidad */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .boton:active, .tarjeta--enlace:hover { transform: none; }
}

@media print {
  .cabecera, .pie, .navegacion, .acciones, .salto-contenido { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  body::before { display: none; }
  .tarjeta, .caja-pregunta { box-shadow: none; border: 1px solid #ccc; }
}

/* ------------------------------------------------------- acceso federado */
/* Sin estilos en línea: la política de contenidos del proxy los bloquea
   (style-src 'self'), así que todo lo visual vive aquí. */

.lienzo--acceso { max-width: 460px; }
.acceso__titulo { margin-bottom: 1.5rem; }

.acceso-sso { display: grid; gap: .5rem; }
.acceso-sso__pie {
  text-align: center; font-size: .85rem; color: var(--texto-3); margin: 0;
}

/* Separador con la palabra centrada entre dos filetes. */
.separador-o {
  display: flex; align-items: center; gap: .9rem;
  margin: 1.6rem 0; color: var(--texto-3); font-size: .85rem;
}
.separador-o::before, .separador-o::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--borde);
}

.boton__icono { width: 1.15em; height: 1.15em; flex: none; }

.acceso__alternativa {
  text-align: center; margin: 1.2rem 0 0; font-size: .92rem;
}