/* ═══════════════════════════════════════════════════════════════════
   Portal de Gestiones — Contraloría de Servicios DGAC

   Es la hoja de estilos del mockup aprobado (Mockup-Portal-Gestiones-DGAC.html),
   sin las piezas que solo sirven a la demostración (barra de control,
   galería de pantallas, marcas del 8F12). Si el mockup cambia, este archivo
   se actualiza con él: el portal y el mockup deben verse iguales.

   Libre Franklin se sirve desde el propio portal: la CSP no deja cargar
   fuentes de terceros.
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/libre-franklin-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/libre-franklin-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/libre-franklin-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/libre-franklin-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/libre-franklin-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/libre-franklin-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/libre-franklin-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/libre-franklin-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════
   Tokens del sistema de diseño de www.dgac.go.cr
   (/WEB/css/base/utilities.css). Se conservan los nombres
   originales para que el traspaso a la institución sea directo.
   Apariencia única (clara), igual que el sitio institucional.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --color-azul-1:  #072538;
  --color-azul-3:  #0E2F49;
  --color-azul-6:  #153F63;
  --color-azul-9:  #144D7F;
  --color-azul-10: #115189;
  --color-azul-11: #226EB1;
  --color-azul-12: #3D9CEF;
  --color-azul-14: #B4DCFF;
  --color-azul-15: #E2F1FF;
  --color-azul-17: #EBF6FF;

  --color-amarillo-1: #F7AC23;
  --color-amarillo-4: #F8C068;
  --ambar-fondo: #FFF4E0;
  --ambar-texto: #8A5A00;

  --color-gris-1:  #0B0B0C;
  --color-gris-4:  #494955;
  --color-gris-5:  #5C5C6D;
  --color-gris-6:  #6E6E87;
  --color-gris-10: #D1D0D8;
  --color-gris-11: #E6E6E9;
  --color-gris-13: #F5F5F5;
  --color-gris-14: #FCFCFC;

  --color-blanco:   #FFFFFF;
  --color-blanco-2: #FEFEFE;

  --color-rojo-alerta:   #EC0808;
  --color-rojo-4:        #FFD2D2;
  --rojo-texto:          #7A0505;
  --color-verde-alerta-1:#2CAB00;
  --color-verde-alerta-3:#D3FFD4;
  --color-verde-alerta-4:#F5FFF5;
  --verde-texto:         #1D6B00;

  --radio-elementos-lg: 0.75rem;
  --radio-elementos-sm: 0.375rem;
  --alto-control: 3.25rem;
  --pad-control: 1.3rem;

  --ancho-contenido: 68rem;
  --medida-lectura: 40rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-blanco);
  color: var(--color-azul-10);
  font-family: "Libre Franklin", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 700; line-height: 1.25; text-wrap: balance; margin: 0; color: var(--color-azul-3); }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.0625rem; }
p { margin: 0; }
a { color: var(--color-azul-11); }

:focus-visible { outline: 3px solid var(--color-amarillo-1); outline-offset: 2px; border-radius: var(--radio-elementos-sm); }

.tabular { font-variant-numeric: tabular-nums; }

.wrap { max-width: var(--ancho-contenido); margin: 0 auto; padding-inline: 1.5rem; }
@media (max-width: 40rem) { .wrap { padding-inline: 1rem; } }
.narrow { max-width: var(--medida-lectura); }

/* ══ Cabecera institucional ══ */
.barra-ministerio { background: var(--color-azul-3); border-bottom: 2px solid var(--color-amarillo-1); color: var(--color-azul-14); font-size: .75rem; font-weight: 500; letter-spacing: .04em; padding-block: .5rem; }
.barra-ministerio .wrap { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.barra-ministerio strong { color: var(--color-blanco); font-weight: 600; }

.header-superior { background: var(--color-blanco); padding-block: 1.5rem; }
.header-superior .wrap { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: 1rem; }
.escudo { width: 3.25rem; height: 3.25rem; flex: none; border-radius: 50%; background: var(--color-azul-10); display: grid; place-items: center; color: var(--color-blanco); font-size: 1.5rem; }
.marca-texto span { display: block; font-size: .75rem; font-weight: 500; color: var(--color-gris-6); }
.marca-texto strong { display: block; font-size: 1.375rem; font-weight: 700; color: var(--color-azul-3); line-height: 1.3; }
.header-espaciador { flex: 1 1 auto; }
.header-tel { font-size: .875rem; font-weight: 600; color: var(--color-azul-10); }

.header-inferior { background: var(--color-gris-13); border-top: 1px solid var(--color-gris-11); padding-block: .9rem; }
.miga { font-size: .8125rem; font-weight: 500; color: var(--color-gris-5); display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.miga a { color: var(--color-azul-11); text-decoration: none; }
.miga a:hover { text-decoration: underline; }
.miga [aria-current] { color: var(--color-azul-3); font-weight: 600; }

.seccion { padding-block: 3rem; }
.seccion-clara { background: var(--color-gris-13); }

.hero { background: var(--color-azul-3); border-bottom: 2px solid var(--color-amarillo-1); color: var(--color-blanco); padding-block: 3.5rem; }
.hero h1 { color: var(--color-blanco); max-width: 22ch; }
.hero p { color: var(--color-azul-14); font-size: 1.0625rem; max-width: 46ch; margin-top: 1rem; }
.hero-etiqueta { display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-amarillo-1); margin-bottom: 1rem; }

.rotulo { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-azul-11); margin-bottom: .75rem; }
.entrada { font-size: 1.0625rem; color: var(--color-gris-5); max-width: 46ch; }

/* ══ Tarjetas de acción ══ */
.acciones-inicio { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.5rem; }
.tarjeta-accion { background: var(--color-blanco); border: 1px solid var(--color-gris-11); border-radius: var(--radio-elementos-lg); padding: 2rem; text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: .75rem; transition: border-color .15s, box-shadow .15s, transform .15s; }
.tarjeta-accion:hover { border-color: var(--color-azul-10); box-shadow: 0 8px 24px -14px rgba(17,81,137,.55); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .tarjeta-accion:hover { transform: none; } }
.tarjeta-icono { width: 3rem; height: 3rem; border-radius: var(--radio-elementos-lg); background: var(--color-azul-17); color: var(--color-azul-10); display: grid; place-items: center; font-size: 1.375rem; }
.tarjeta-accion p { color: var(--color-gris-5); font-size: .9375rem; }
.tarjeta-ir { font-weight: 600; color: var(--color-azul-10); font-size: .9375rem; margin-top: auto; }

.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2rem; }
.dato { border-top: 2px solid var(--color-amarillo-1); padding-top: 1rem; }
.dato dt { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-azul-3); margin-bottom: .5rem; }
.dato dd { margin: 0; font-size: .9375rem; color: var(--color-gris-5); }
.dato dd strong { color: var(--color-azul-10); }

/* ══ Formularios ══ */
.panel { background: var(--color-blanco); border: 1px solid var(--color-gris-11); border-radius: var(--radio-elementos-lg); padding: 2rem; }
@media (max-width: 40rem) { .panel { padding: 1.25rem; } }

fieldset { border: 0; margin: 0; padding: 0; }
legend { padding: 0; }
.campos { display: flex; flex-direction: column; gap: 1.75rem; }
.campo { display: flex; flex-direction: column; gap: .5rem; }
.fila-etiqueta { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.etiqueta { font-weight: 600; font-size: .9375rem; color: var(--color-azul-3); }
.obligatorio { color: var(--color-rojo-alerta); font-weight: 700; }
.opcional { font-weight: 500; font-size: .8125rem; color: var(--color-gris-6); }
.ayuda { font-size: .875rem; color: var(--color-gris-6); }


input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  font: inherit; color: var(--color-gris-1); background: var(--color-blanco);
  border: 1px solid var(--color-azul-10); border-radius: var(--radio-elementos-lg);
  height: var(--alto-control); padding-inline: var(--pad-control); width: 100%;
}
/* Caret del sitio institucional (/WEB/css/base/components/input.css) */
select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23115189' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 14px 14px;
  padding-right: 2.6rem;
  cursor: pointer;
}

/* Teléfono: prefijo internacional + número */
.grupo-telefono { display: flex; gap: .6rem; max-width: 26rem; }
.grupo-telefono select { flex: 0 0 9.5rem; width: 9.5rem; padding-inline: 1rem 2.2rem; background-position: right .8rem center; }
.grupo-telefono input { flex: 1 1 auto; width: auto; }
@media (max-width: 26rem) { .grupo-telefono { flex-wrap: wrap; } .grupo-telefono select { flex-basis: 100%; width: 100%; } }
textarea { height: auto; min-height: 9rem; padding-block: .9rem; resize: vertical; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: var(--color-gris-6); font-weight: 500; }
input[readonly] { background: var(--color-gris-13); }

.campo-error input, .campo-error textarea { border-color: var(--color-rojo-alerta); border-width: 2px; }
.campo-error .opciones { border: 2px solid var(--color-rojo-alerta); border-radius: var(--radio-elementos-lg); padding: .75rem; }

.msg-error { display: none; font-size: .875rem; font-weight: 600; color: var(--rojo-texto); gap: .4rem; align-items: flex-start; }
.campo-error .msg-error, .msg-error.visible { display: flex; }

.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 44rem) { .opciones { grid-template-columns: 1fr; } }
.opcion { display: flex; gap: .75rem; align-items: flex-start; border: 1px solid var(--color-gris-10); border-radius: var(--radio-elementos-lg); padding: 1rem; cursor: pointer; background: var(--color-blanco); transition: border-color .12s, background .12s; }
.opcion:hover { border-color: var(--color-azul-12); background: var(--color-gris-14); }
.opcion input { margin: .35rem 0 0; accent-color: var(--color-azul-10); flex: none; }
.opcion:has(input:checked) { border-color: var(--color-azul-10); border-width: 2px; background: var(--color-azul-17); padding: calc(1rem - 1px); }
.opcion-nombre { display: block; font-weight: 600; font-size: .9375rem; color: var(--color-azul-3); }
.opcion-desc { font-size: .8125rem; color: var(--color-gris-6); line-height: 1.5; }

.par { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 40rem) { .par { grid-template-columns: 1fr; } }

.casilla { display: flex; gap: .75rem; align-items: flex-start; font-size: .9375rem; color: var(--color-gris-5); }
.casilla input { margin: .3rem 0 0; accent-color: var(--color-azul-10); flex: none; width: 1.1rem; height: 1.1rem; }

.separador { border: 0; border-top: 1px solid var(--color-gris-11); margin-block: .25rem; }

/* ══ Evidencia adjunta ══ */
.zona-adjuntos {
  border: 2px dashed var(--color-azul-12);
  background: var(--color-azul-17);
  border-radius: var(--radio-elementos-lg);
  padding: 1.75rem 1.25rem;
  text-align: center;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.zona-adjuntos:hover, .zona-adjuntos.arrastrando {
  background: var(--color-azul-15);
  border-color: var(--color-azul-10);
}
.zona-adjuntos.arrastrando { border-style: solid; }
.zona-icono { font-size: 1.75rem; line-height: 1; margin-bottom: .5rem; }
.zona-adjuntos b { display: block; color: var(--color-azul-3); font-size: .9375rem; }
.zona-adjuntos small { display: block; font-size: .8125rem; color: var(--color-gris-6); margin-top: .3rem; }
.zona-adjuntos input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }

.lista-adjuntos { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
.adjunto {
  display: flex; gap: .75rem; align-items: center;
  border: 1px solid var(--color-gris-10);
  border-radius: var(--radio-elementos-lg);
  padding: .7rem .9rem; background: var(--color-blanco);
}
.adjunto-icono {
  width: 2.25rem; height: 2.25rem; flex: none;
  border-radius: var(--radio-elementos-sm);
  background: var(--color-azul-15); color: var(--color-azul-10);
  display: grid; place-items: center;
  font-size: .625rem; font-weight: 700; letter-spacing: .02em;
}
.adjunto-datos { flex: 1 1 auto; min-width: 0; }
.adjunto-nombre { font-size: .875rem; font-weight: 600; color: var(--color-azul-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adjunto-peso { font-size: .75rem; color: var(--color-gris-6); font-variant-numeric: tabular-nums; }
.adjunto-quitar {
  font: inherit; font-size: .8125rem; font-weight: 600; flex: none;
  color: var(--rojo-texto); background: transparent;
  border: 1px solid var(--color-gris-10); border-radius: var(--radio-elementos-sm);
  padding: .3rem .7rem; cursor: pointer;
}
.adjunto-quitar:hover { border-color: var(--color-rojo-alerta); background: var(--color-rojo-4); }
.adjuntos-pie { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .8125rem; color: var(--color-gris-6); margin-top: .5rem; font-variant-numeric: tabular-nums; }
.contador { font-size: .8125rem; color: var(--color-gris-6); text-align: right; font-variant-numeric: tabular-nums; }

/* ══ Verificación de correo ══ */
.fila-verificar { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-start; }
.fila-verificar input { flex: 1 1 17rem; width: auto; }
.fila-verificar .boton { flex: none; }

.verificacion {
  border: 1px solid var(--color-azul-12);
  background: var(--color-azul-17);
  border-radius: var(--radio-elementos-lg);
  padding: 1.25rem;
}
.verificacion h4 { font-size: .9375rem; margin-bottom: .35rem; }
.verificacion p { font-size: .875rem; color: var(--color-azul-6); }

.casillas-codigo { display: flex; gap: .5rem; margin-block: 1rem; flex-wrap: wrap; }
.casillas-codigo input {
  width: 3rem; flex: none; text-align: center;
  font-size: 1.375rem; font-weight: 700; letter-spacing: 0;
  padding-inline: 0; font-variant-numeric: tabular-nums;
}
.verificacion-acciones { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; font-size: .875rem; }
.enlace-accion { font: inherit; font-weight: 600; color: var(--color-azul-11); background: none; border: 0; padding: 0; cursor: pointer; }
.enlace-accion:hover { text-decoration: underline; }
.enlace-accion[disabled] { color: var(--color-gris-6); cursor: default; text-decoration: none; }

.verificado-caja {
  display: flex; gap: .75rem; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--color-verde-alerta-1);
  background: var(--color-verde-alerta-4);
  border-radius: var(--radio-elementos-lg);
  padding: .9rem 1.1rem;
}
.verificado-marca {
  width: 1.75rem; height: 1.75rem; flex: none; border-radius: 50%;
  background: var(--color-verde-alerta-1); color: var(--color-blanco);
  display: grid; place-items: center; font-size: .9375rem; font-weight: 700;
}
.verificado-texto { flex: 1 1 12rem; font-size: .9375rem; }
.verificado-texto b { display: block; color: var(--verde-texto); }
.verificado-texto span { color: var(--color-gris-5); font-size: .8125rem; }


/* ══ Botones ══ */
.botonera { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--color-gris-11); }
.boton {
  font: inherit; font-weight: 600; font-size: .9375rem;
  height: var(--alto-control); padding-inline: 1.75rem;
  border-radius: var(--radio-elementos-lg);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  cursor: pointer; border: 1px solid transparent; text-decoration: none;
}
.boton-primario { background: var(--color-azul-10); color: var(--color-blanco-2); }
.boton-primario:hover { background: var(--color-azul-3); }
.boton-secundario { background: var(--color-blanco-2); color: var(--color-azul-10); border-color: var(--color-azul-10); }
.boton-secundario:hover { background: var(--color-azul-17); }
.boton:disabled { background: var(--color-gris-11); color: var(--color-gris-6); border-color: transparent; cursor: not-allowed; }
.boton.cargando { opacity: .85; cursor: progress; }
.boton-compacto { height: 2.75rem; padding-inline: 1.2rem; font-size: .875rem; }

.girador { width: 1.1rem; height: 1.1rem; flex: none; border: 2px solid rgba(255,255,255,.4); border-top-color: var(--color-blanco); border-radius: 50%; animation: girar .7s linear infinite; }
.boton-secundario .girador { border-color: rgba(17,81,137,.3); border-top-color: var(--color-azul-10); }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .girador { animation-duration: 2.5s; } }

.nota-boton { font-size: .875rem; color: var(--color-gris-6); flex-basis: 100%; }

.boton-volver { font: inherit; font-size: .9375rem; font-weight: 500; color: var(--color-azul-11); background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.boton-volver:hover { text-decoration: underline; }

/* ══ Mensajes ══ */
.alerta { border-radius: var(--radio-elementos-lg); padding: 1rem 1.25rem; font-size: .9375rem; font-weight: 500; display: flex; gap: .75rem; align-items: flex-start; }
.alerta-error { border: 1px solid var(--color-rojo-alerta); background: var(--color-rojo-4); color: var(--rojo-texto); }
.alerta-exito { border: 1px solid var(--color-verde-alerta-1); background: var(--color-verde-alerta-3); color: var(--verde-texto); }
.alerta-info { border: 1px solid var(--color-azul-12); background: var(--color-azul-17); color: var(--color-azul-6); }


/* ══ Comprobante ══ */
.marca-exito { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--color-verde-alerta-3); border: 2px solid var(--color-verde-alerta-1); color: var(--verde-texto); display: grid; place-items: center; font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }
.comprobante { background: var(--color-azul-3); border-radius: var(--radio-elementos-lg); border-bottom: 4px solid var(--color-amarillo-1); padding: 2rem; text-align: center; margin-block: 1.75rem; }
.comprobante-rotulo { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-azul-14); }
.comprobante-numero { font-size: clamp(2rem, 7vw, 2.75rem); font-weight: 700; letter-spacing: .05em; color: var(--color-blanco); margin-block: .6rem 1.25rem; font-variant-numeric: tabular-nums; }
.boton-copiar { font: inherit; font-size: .875rem; font-weight: 600; background: transparent; color: var(--color-blanco); border: 1px solid var(--color-azul-14); border-radius: var(--radio-elementos-lg); height: 2.75rem; padding-inline: 1.4rem; cursor: pointer; }
.boton-copiar:hover { background: var(--color-azul-6); }

.resumen { border-top: 1px solid var(--color-gris-11); margin-top: 2rem; }
.resumen-fila { display: flex; gap: 1rem; justify-content: space-between; padding-block: .85rem; border-bottom: 1px solid var(--color-gris-11); font-size: .9375rem; flex-wrap: wrap; }
.resumen-fila dt { margin: 0; color: var(--color-gris-5); display: flex; gap: .5rem; align-items: baseline; }
.resumen-fila dd { margin: 0; font-weight: 600; color: var(--color-azul-3); text-align: right; }

.pasos { counter-reset: paso; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.pasos li { counter-increment: paso; display: flex; gap: 1rem; align-items: flex-start; padding-block: .6rem; font-size: .9375rem; color: var(--color-gris-5); }
.pasos li::before { content: counter(paso); flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--color-azul-17); color: var(--color-azul-10); font-size: .8125rem; font-weight: 700; display: grid; place-items: center; }

/* ══ Consulta y estado ══ */
.form-consulta { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-consulta input { flex: 1 1 15rem; width: auto; letter-spacing: .05em; font-weight: 600; }

.estado-encabezado { display: flex; gap: 1.25rem; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-gris-11); }
.insignia { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; border-radius: var(--radio-elementos-lg); padding: .4rem 1rem; white-space: nowrap; }
.insignia::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; flex: none; }
.insignia-tramite { background: var(--ambar-fondo); color: var(--ambar-texto); border: 1px solid var(--color-amarillo-1); }
.insignia-resuelta { background: var(--color-verde-alerta-3); color: var(--verde-texto); border: 1px solid var(--color-verde-alerta-1); }
.insignia-excepcion { background: var(--color-azul-17); color: var(--color-azul-10); border: 1px solid var(--color-azul-12); }

.medidor { margin-top: 1.75rem; }
.medidor-pista { height: .625rem; border-radius: 999px; background: var(--color-gris-11); overflow: hidden; }
.medidor-relleno { height: 100%; border-radius: 999px; background: var(--color-amarillo-1); }
.medidor-relleno.completo { background: var(--color-verde-alerta-1); }
.medidor-relleno.ampliado { background: var(--color-azul-12); }
.medidor-pie { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .875rem; font-weight: 500; color: var(--color-gris-5); margin-top: .6rem; font-variant-numeric: tabular-nums; }
.medidor-pie strong { color: var(--color-azul-3); }

.linea-tiempo { list-style: none; margin: 2rem 0 0; padding: 0; }
.linea-tiempo li { position: relative; padding: 0 0 1.75rem 2rem; border-left: 2px solid var(--color-azul-15); }
.linea-tiempo li:last-child { border-left-color: transparent; padding-bottom: 0; }
.linea-tiempo li::before { content: ""; position: absolute; left: -.5rem; top: .3rem; width: .875rem; height: .875rem; border-radius: 50%; background: var(--color-azul-10); border: 3px solid var(--color-blanco); box-shadow: 0 0 0 1px var(--color-azul-10); }
.linea-tiempo li.futuro::before { background: var(--color-blanco); box-shadow: 0 0 0 1px var(--color-gris-10); }
.linea-tiempo li.hito::before { background: var(--color-verde-alerta-1); box-shadow: 0 0 0 1px var(--color-verde-alerta-1); }
.lt-fecha { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-azul-11); font-variant-numeric: tabular-nums; }
.lt-titulo { display: block; font-weight: 600; color: var(--color-azul-3); margin-top: .15rem; }
.lt-detalle { font-size: .875rem; color: var(--color-gris-5); }
.linea-tiempo li.futuro .lt-fecha { color: var(--color-gris-6); }
.linea-tiempo li.futuro .lt-titulo { font-weight: 400; color: var(--color-gris-5); }

.respuesta-final { background: var(--color-gris-13); border-left: 4px solid var(--color-verde-alerta-1); border-radius: var(--radio-elementos-lg); padding: 1.5rem; margin-top: 1.75rem; }
.respuesta-final h4 { margin-bottom: .6rem; }
.respuesta-final p { font-size: .9375rem; color: var(--color-gris-4); }
.respuesta-final p + p { margin-top: .75rem; }

/* ══ Pie institucional ══ */
footer.pie { margin-top: 4rem; }
.ola { display: block; width: 100%; height: 4rem; }
.pie-cuerpo { background: var(--color-azul-3); color: var(--color-azul-14); padding-block: 2.5rem 3rem; font-size: .875rem; }
.pie-cuerpo .wrap { display: flex; gap: 2.5rem; justify-content: space-between; flex-wrap: wrap; }
.pie-cuerpo strong { color: var(--color-blanco); display: block; font-size: 1rem; margin-bottom: .35rem; }
.pie-cuerpo a { color: var(--color-azul-14); }

/* ══ Bloque institucional ══ */
.institucional { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 52rem) { .institucional { grid-template-columns: 1fr; gap: 2rem; } }
.institucional p + p { margin-top: 1rem; }
.institucional p { color: var(--color-gris-5); }

.puede-no-puede { display: flex; flex-direction: column; gap: 1rem; }
.lista-marcada { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.lista-marcada li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9375rem; color: var(--color-gris-5); }
.lista-marcada li::before { flex: none; font-weight: 700; line-height: 1.5; }
.lista-si li::before { content: "✓"; color: var(--color-verde-alerta-1); }
.lista-no li::before { content: "✕"; color: var(--color-gris-6); }
.caja-lista {
  border: 1px solid var(--color-gris-11);
  border-radius: var(--radio-elementos-lg);
  padding: 1.25rem 1.5rem;
  background: var(--color-blanco);
}
.caja-lista h4 { font-size: .9375rem; }

/* ══ Llamada a la acción única ══ */
.llamada {
  display: flex; gap: 2rem; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--color-gris-11);
  border-top: 4px solid var(--color-amarillo-1);
  border-radius: var(--radio-elementos-lg);
  background: var(--color-blanco);
  padding: 2rem;
}
.llamada-texto { flex: 1 1 22rem; }
.llamada-texto p { color: var(--color-gris-5); margin-top: .5rem; }
.llamada .boton { flex: none; }

/* ══ Preguntas frecuentes ══ */
.faq { display: flex; flex-direction: column; gap: .625rem; margin-top: 1.75rem; }
.faq details {
  border: 1px solid var(--color-gris-11);
  border-radius: var(--radio-elementos-lg);
  background: var(--color-blanco);
  overflow: hidden;
}
.faq details[open] { border-color: var(--color-azul-12); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 1.1rem 1.25rem;
  font-weight: 600; font-size: .9375rem; color: var(--color-azul-3);
  display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--color-gris-14); }
.faq summary::after {
  content: "+"; flex: none;
  font-size: 1.375rem; font-weight: 400; line-height: 1;
  color: var(--color-azul-10);
  transition: transform .18s ease;
}
.faq details[open] summary::after { content: "−"; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }
.faq-cuerpo {
  padding: 0 1.25rem 1.25rem;
  font-size: .9375rem; color: var(--color-gris-5);
  border-top: 1px solid var(--color-gris-11);
  padding-top: 1rem;
}
.faq-cuerpo p + p { margin-top: .75rem; }
.faq-cuerpo b { color: var(--color-azul-3); }

/* Enlace de consulta en la cabecera */
.header-acciones { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.enlace-consulta {
  font-size: .875rem; font-weight: 600; color: var(--color-azul-10);
  text-decoration: none;
  border: 1px solid var(--color-azul-10);
  border-radius: var(--radio-elementos-lg);
  padding: .55rem 1.1rem;
  background: none; font-family: inherit; cursor: pointer;
}
.enlace-consulta:hover { background: var(--color-azul-17); }

/* ══ Carrusel del inicio ══════════════════════════════════════
   Referencias: contraloria.poder-judicial.go.cr (tarjeta oscura
   sobre la imagen) y mopt.go.cr (imagen a sangre, flechas y
   puntos). Se toma de cada uno lo que sirve: la legibilidad del
   primero, la limpieza del segundo.
   ════════════════════════════════════════════════════════════ */
.carrusel {
  position: relative;
  background: var(--color-azul-3);
  border-bottom: 2px solid var(--color-amarillo-1);
  overflow: hidden;
}
.carrusel-pista { position: relative; min-height: 30rem; }
@media (max-width: 30rem) { .carrusel-pista { min-height: 34rem; } }

.diapositiva {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease;
  display: flex; align-items: center;
}
.diapositiva.activa { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .diapositiva { transition: none; } }

.diapositiva-imagen {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
/* Velo oscuro: sin él, el texto blanco no se lee sobre cualquier fotografía. */
.diapositiva-velo {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(14,47,73,.94) 0%, rgba(14,47,73,.86) 42%, rgba(14,47,73,.35) 78%, rgba(14,47,73,.15) 100%);
}
@media (max-width: 48rem) {
  .diapositiva-velo { background: linear-gradient(180deg, rgba(14,47,73,.55) 0%, rgba(14,47,73,.93) 55%); }
}

.diapositiva-contenido {
  position: relative; z-index: 1;
  max-width: 40rem; padding-block: 3rem;
}
.diapositiva-etiqueta {
  display: inline-block;
  font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-amarillo-1);
  margin-bottom: 1rem;
}
.diapositiva-titulo {
  color: var(--color-blanco);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700; line-height: 1.15; text-wrap: balance;
  margin: 0;
}
.diapositiva-texto {
  color: var(--color-azul-14);
  font-size: 1.0625rem; line-height: 1.6;
  margin-top: 1rem; max-width: 46ch;
}
@media (max-width: 48rem) { .diapositiva-texto { font-size: .9375rem; line-height: 1.55; } }
.diapositiva-enlace {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.5rem;
  background: var(--color-amarillo-1); color: var(--color-azul-3);
  border-radius: var(--radio-elementos-lg);
  padding: .8rem 1.5rem;
  font-weight: 700; font-size: .9375rem; text-decoration: none;
}
.diapositiva-enlace:hover { background: var(--color-amarillo-4); color: var(--color-azul-1); }

/* Flechas: se ven contra cualquier fotografía */
.carrusel-flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  background: rgba(14,47,73,.55); color: var(--color-blanco);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%; cursor: pointer;
}
.carrusel-flecha:hover { background: var(--color-azul-10); border-color: var(--color-amarillo-1); }
.carrusel-flecha svg { width: 1.25rem; height: 1.25rem; }
.carrusel-flecha.anterior { left: 1rem; }
.carrusel-flecha.siguiente { right: 1rem; }
/* En pantallas pequeñas el texto ocupa todo el ancho: las flechas bajan junto a los puntos
   para no taparlo. */
@media (max-width: 48rem) {
  .carrusel-flecha { width: 2.5rem; height: 2.5rem; top: auto; bottom: .55rem; transform: none; }
  .diapositiva-contenido { padding-bottom: 4.5rem; }
}

.carrusel-puntos {
  position: absolute; bottom: 1.25rem; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: center; gap: .5rem;
}
.carrusel-punto {
  width: 2.25rem; height: .3rem;
  border: 0; border-radius: 999px; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.4);
}
.carrusel-punto[aria-current="true"] { background: var(--color-amarillo-1); }
.carrusel-punto:hover { background: rgba(255,255,255,.75); }

/* ══ Panel de administración del carrusel (el CMS) ══ */
.btn-cms {
  position: absolute; top: 1rem; right: 1rem; z-index: 4;
  font: inherit; font-size: .75rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  background: rgba(14,47,73,.7); color: var(--color-amarillo-1);
  border: 1px solid var(--color-amarillo-1);
  border-radius: 999px; padding: .45rem 1rem; cursor: pointer;
}
.btn-cms:hover { background: var(--color-amarillo-1); color: var(--color-azul-3); }

.cms-fondo {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(11,11,12,.6);
  display: none; align-items: flex-start; justify-content: center;
  padding: 2rem 1rem; overflow-y: auto;
}
.cms-fondo.abierto { display: flex; }
.cms-panel {
  background: var(--color-blanco);
  border-radius: var(--radio-elementos-lg);
  max-width: 46rem; width: 100%;
  box-shadow: 0 24px 60px -20px rgba(11,11,12,.6);
}
.cms-cabecera {
  background: var(--color-azul-3);
  border-bottom: 2px solid var(--color-amarillo-1);
  border-radius: var(--radio-elementos-lg) var(--radio-elementos-lg) 0 0;
  padding: 1.25rem 1.5rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.cms-cabecera h3 { color: var(--color-blanco); font-size: 1.125rem; margin: 0; }
.cms-cabecera p { color: var(--color-azul-14); font-size: .8125rem; margin: .25rem 0 0; }
.cms-cerrar {
  margin-left: auto; background: transparent; border: 1px solid rgba(255,255,255,.4);
  color: var(--color-blanco); border-radius: 50%;
  width: 2rem; height: 2rem; cursor: pointer; display: grid; place-items: center;
}
.cms-cerrar:hover { background: rgba(255,255,255,.15); }
.cms-cuerpo { padding: 1.5rem; }

.cms-lista { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.cms-ficha {
  font: inherit; font-size: .8125rem; font-weight: 600;
  background: var(--color-blanco); color: var(--color-gris-5);
  border: 1px solid var(--color-gris-10);
  border-radius: var(--radio-elementos-lg);
  padding: .5rem 1rem; cursor: pointer;
}
.cms-ficha[aria-current="true"] {
  background: var(--color-azul-17); border-color: var(--color-azul-10);
  color: var(--color-azul-3);
}
.cms-previa {
  height: 7rem; border-radius: var(--radio-elementos-lg);
  background-size: cover; background-position: center;
  border: 1px solid var(--color-gris-11);
  margin-bottom: 1rem;
}
.cms-nota {
  font-size: .8125rem; color: var(--ambar-texto);
  background: var(--ambar-fondo); border: 1px dashed var(--color-amarillo-1);
  border-radius: var(--radio-elementos-sm);
  padding: .6rem .8rem; margin-top: 1rem;
}

/* ══ Requisitos de la gestión ══ */
.requisitos { counter-reset: req; list-style: none; margin: 1.25rem 0 0; padding: 0; }
.requisitos li {
  counter-increment: req;
  display: flex; gap: .9rem; align-items: flex-start;
  padding-block: .6rem;
  font-size: .9375rem; color: var(--color-gris-5);
  border-bottom: 1px solid var(--color-gris-11);
}
.requisitos li:last-child { border-bottom: 0; }
.requisitos li::before {
  content: counter(req);
  flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--color-azul-17); color: var(--color-azul-10);
  font-size: .75rem; font-weight: 700;
  display: grid; place-items: center;
}


/* ══ Teléfonos directos ══ */
.telefonos { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .75rem; }
.telefono-directo {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--color-azul-17); color: var(--color-azul-10);
  border: 1px solid var(--color-azul-12);
  border-radius: var(--radio-elementos-lg);
  padding: .5rem 1rem;
  font-weight: 700; font-variant-numeric: tabular-nums;
  text-decoration: none; font-size: .9375rem;
}
.telefono-directo:hover { background: var(--color-azul-15); color: var(--color-azul-3); }
.telefono-directo svg { width: 1rem; height: 1rem; }

/* ══ Línea de tiempo con dependencia ══ */
.lt-dependencia {
  display: inline-block; margin-top: .3rem;
  font-size: .75rem; font-weight: 700;
  background: var(--color-azul-15); color: var(--color-azul-10);
  border-radius: var(--radio-elementos-sm);
  padding: .1rem .5rem;
}
.linea-tiempo li.futuro .lt-dependencia {
  background: var(--color-gris-13); color: var(--color-gris-6);
}

/* ══ Cita constitucional con imagen intercambiable ══ */
.cita-bloque {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: 3rem; align-items: center;
}
@media (max-width: 56rem) { .cita-bloque { grid-template-columns: 1fr; gap: 2rem; } }

.cita-texto {
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  line-height: 1.5; font-weight: 600;
  color: var(--color-azul-3);
  text-wrap: balance;
  border-left: 4px solid var(--color-amarillo-1);
  padding-left: 1.5rem;
  margin: 0;
}
.cita-fuente {
  display: block; margin-top: 1rem;
  font-size: .875rem; font-weight: 600;
  color: var(--color-gris-6);
  letter-spacing: .02em;
}
.cita-remate {
  margin-top: 1.75rem;
  background: var(--color-azul-17);
  border: 1px solid var(--color-azul-12);
  border-radius: var(--radio-elementos-lg);
  padding: 1.1rem 1.25rem;
  font-size: .9375rem; color: var(--color-azul-6);
}
.cita-remate b { color: var(--color-azul-3); }

/* Cualquier imagen que el CMS pueda cambiar */
.imagen-editable { position: relative; }
.imagen-editable img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radio-elementos-lg);
  border: 1px solid var(--color-gris-11);
  background: var(--color-blanco);
}
.imagen-editable-boton {
  position: absolute; bottom: .75rem; right: .75rem;
  font: inherit; font-size: .75rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  background: rgba(14,47,73,.82); color: var(--color-amarillo-1);
  border: 1px solid var(--color-amarillo-1);
  border-radius: 999px; padding: .45rem 1rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
}
.imagen-editable-boton:hover { background: var(--color-amarillo-1); color: var(--color-azul-3); }
.imagen-editable-boton svg { width: .9rem; height: .9rem; }
.imagen-editable input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.imagen-pie {
  font-size: .8125rem; color: var(--color-gris-6);
  margin-top: .6rem; text-align: center;
}

/* ══ Evidencia en video ══ */
.zona-video {
  border: 2px dashed var(--color-azul-12);
  background: var(--color-azul-17);
  border-radius: var(--radio-elementos-lg);
  padding: 1.5rem 1.25rem; text-align: center; cursor: pointer; display: block;
}
.zona-video:hover, .zona-video.arrastrando { background: var(--color-azul-15); border-color: var(--color-azul-10); }
.zona-video input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.zona-video svg { width: 1.75rem; height: 1.75rem; color: var(--color-azul-10); }

.video-elegido {
  display: flex; gap: .75rem; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--color-gris-10);
  border-radius: var(--radio-elementos-lg);
  padding: .9rem 1rem; background: var(--color-blanco);
}
.video-icono {
  width: 2.75rem; height: 2.75rem; flex: none;
  border-radius: var(--radio-elementos-sm);
  background: var(--color-azul-15); color: var(--color-azul-10);
  display: grid; place-items: center;
}
.video-icono svg { width: 1.25rem; height: 1.25rem; }
.video-barra { height: .4rem; border-radius: 999px; background: var(--color-gris-11); overflow: hidden; margin-top: .5rem; }
.video-barra span { display: block; height: 100%; background: var(--color-azul-12); border-radius: 999px; width: 0; transition: width .2s; }
.insignia-nube {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .75rem; font-weight: 700;
  background: var(--color-azul-15); color: var(--color-azul-10);
  border-radius: var(--radio-elementos-sm); padding: .15rem .5rem;
}
.insignia-nube svg { width: .85rem; height: .85rem; }

/* ══ Sesión de administración ══════════════════════════════
   El portal es público; solo lo administrable pide sesión.
   Nada del contenido ciudadano queda detrás de una clave.
   ════════════════════════════════════════════════════════ */
.btn-cms, .btn-admin-faq { display: inline-flex; }

.barra-admin {
  background: var(--color-azul-1);
  color: var(--color-azul-14);
  padding-block: .6rem;
  font-size: .8125rem;
}
.barra-admin .wrap { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.barra-admin strong { color: var(--color-amarillo-1); }
.barra-admin button {
  font: inherit; font-size: .8125rem; font-weight: 600;
  background: transparent; color: var(--color-azul-14);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--radio-elementos-lg);
  padding: .35rem .9rem; cursor: pointer;
}
.barra-admin button:hover { border-color: var(--color-amarillo-1); color: var(--color-amarillo-1); }

.btn-admin-faq {
  align-items: center; gap: .4rem;
  font: inherit; font-size: .75rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--color-azul-17); color: var(--color-azul-10);
  border: 1px solid var(--color-azul-10);
  border-radius: 999px; padding: .45rem 1rem; cursor: pointer;
  margin-left: auto;
}
.btn-admin-faq:hover { background: var(--color-azul-10); color: var(--color-blanco); }

.enlace-admin {
  font-size: .8125rem; color: var(--color-azul-14);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; font-family: inherit;
}
.enlace-admin:hover { color: var(--color-blanco); }

.faq-cabecera { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* Editor de preguntas frecuentes */
.faq-fila {
  display: flex; gap: .75rem; align-items: center;
  border: 1px solid var(--color-gris-10);
  border-radius: var(--radio-elementos-lg);
  padding: .7rem .9rem; background: var(--color-blanco);
}
.faq-fila-texto { flex: 1 1 12rem; min-width: 0; font-size: .875rem; font-weight: 600; color: var(--color-azul-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faq-orden { display: flex; gap: .25rem; }
.faq-orden button, .faq-quitar {
  font: inherit; font-size: .75rem; font-weight: 600;
  background: transparent; color: var(--color-gris-5);
  border: 1px solid var(--color-gris-10);
  border-radius: var(--radio-elementos-sm);
  width: 1.9rem; height: 1.9rem; cursor: pointer;
  display: grid; place-items: center;
}
.faq-orden button:hover { border-color: var(--color-azul-10); color: var(--color-azul-10); }
.faq-quitar { width: auto; padding-inline: .6rem; color: var(--rojo-texto); }
.faq-quitar:hover { border-color: var(--color-rojo-alerta); background: var(--color-rojo-4); }
.faq-fila.editando { border-color: var(--color-azul-10); border-width: 2px; background: var(--color-azul-17); }

/* ══ Campo de contraseña ══════════════════════════════════
   El marco lo dibuja el CONTENEDOR, no el input. Así el botón
   de ver la contraseña vive dentro del campo en vez de flotar
   encima: no se sale del borde ni tapa lo que se escribe, sea
   cual sea el ancho de la ventana.
   ════════════════════════════════════════════════════════ */
.campo-clave {
  display: flex; align-items: stretch;
  background: var(--color-blanco);
  border: 1px solid var(--color-azul-10);
  border-radius: var(--radio-elementos-lg);
  height: var(--alto-control);
  overflow: hidden;
}
.campo-clave:focus-within {
  outline: 3px solid var(--color-amarillo-1);
  outline-offset: 2px;
}

.campo-clave input {
  flex: 1 1 auto; min-width: 0; width: auto;
  border: 0; background: transparent; height: 100%;
  padding-inline: var(--pad-control) .5rem;
  border-radius: 0;
  letter-spacing: .16em;
  font-size: 1.0625rem;
}
.campo-clave input:focus, .campo-clave input:focus-visible {
  outline: 0; box-shadow: none;
}
/* Con el texto a la vista no hacen falta los puntos separados. */
.campo-clave input[type="text"] { letter-spacing: normal; font-size: 1rem; }

/* El navegador dibuja su propio ojito; sobra habiendo uno propio. */
.campo-clave input::-ms-reveal,
.campo-clave input::-ms-clear { display: none; }
.campo-clave input::-webkit-credentials-auto-fill-button,
.campo-clave input::-webkit-strong-password-auto-fill-button { visibility: hidden; width: 0; margin: 0; }

.ver-clave {
  flex: none;
  font: inherit; font-size: .8125rem; font-weight: 600;
  color: var(--color-azul-10);
  background: var(--color-gris-13);
  border: 0; border-left: 1px solid var(--color-gris-11);
  padding-inline: .9rem;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
}
.ver-clave:hover { background: var(--color-azul-17); }
.ver-clave:focus-visible { outline: 2px solid var(--color-azul-10); outline-offset: -3px; }
.ver-clave svg { width: 1rem; height: 1rem; flex: none; }

/* ═══════════════════════════════════════════════════════════════════
   Piezas propias del portal. En el mockup estas cosas las resolvía la
   barra de control de la demostración o un cuadro de diálogo; en el
   portal real son enlaces y páginas.
   ═══════════════════════════════════════════════════════════════════ */

/* Selector de idioma, en la barra del ministerio */
.idioma { margin-left: auto; display: flex; gap: .25rem; }
.idioma a { color: var(--color-azul-14); text-decoration: none; font-weight: 600; padding: .05rem .55rem; border-radius: var(--radio-elementos-sm); }
.idioma a:hover { color: var(--color-blanco); }
.idioma a[aria-current="true"] { background: var(--color-amarillo-1); color: var(--color-azul-3); }

.marca { text-decoration: none; }
a.enlace-consulta, a.btn-cms, a.btn-admin-faq, a.imagen-editable-boton, a.cms-cerrar, a.boton-volver { text-decoration: none; }

input[type="password"], input[type="file"] { font: inherit; }
input[type="file"].control-archivo {
  width: 100%; height: auto; padding: .6rem .8rem;
  border: 1px solid var(--color-azul-10); border-radius: var(--radio-elementos-lg); background: var(--color-blanco);
}

/* Verificación de correo: el código se escribe en un solo campo */
.campo-codigo { width: 12rem; max-width: 100%; text-align: center; font-weight: 700; font-size: 1.375rem; letter-spacing: .4em; padding-left: calc(var(--pad-control) + .4em); font-variant-numeric: tabular-nums; }

.msg-error.visible { display: flex; }
.alerta { margin-top: 1.5rem; }
.alerta:first-child { margin-top: 0; }

/* Páginas del gestor de contenidos: el panel del mockup, como página */
.admin-pagina { background: var(--color-gris-13); padding-block: 2.5rem 1rem; }
.admin-pagina .cms-panel { margin-inline: auto; }
.admin-pagina .cms-panel.angosto { max-width: 26rem; }
.cms-seccion + .cms-seccion { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--color-gris-11); }
.cms-seccion h4 { font-size: .9375rem; margin-bottom: 1rem; }
.cms-ficha { text-decoration: none; display: inline-block; }
.cms-mensaje { margin-bottom: 1.25rem; }
.faq-orden form, .faq-fila form { margin: 0; display: contents; }
.faq-fila a.faq-quitar { text-decoration: none; color: var(--color-azul-10); }
.idioma-campo { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; color: var(--color-azul-10); background: var(--color-azul-15); border-radius: var(--radio-elementos-sm); padding: .05rem .4rem; margin-left: .35rem; }
.botonera form { display: contents; }

/* Consulta: aviso cuando la consulta en línea aún no existe */
.consulta-pendiente { max-width: 40rem; }

.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }