/* ==========================================================================
   EventScope CO2 · tema de la interfaz sobre Bootstrap 5.3
   Identidad (briefing de marca, 27/09/2026): geometría deportiva, tres scopes, precisión y datos
     azul marino #0F172A (principal, estructura y textos de título)
     verde       #00D084 (acción y marca; siempre con texto azul marino encima, nunca blanco)
     cian        #38BDF8 (datos, foco y acentos; sobre fondo claro se usa el tono #0369A1)
   Todas las combinaciones de texto cumplen WCAG AA (4,5:1 o más).
   ========================================================================== */

/* ---- Tipografías servidas desde el propio servidor ---------------------- */
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-latin-400-normal.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: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-latin-ext-400-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-latin-700-normal.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: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-latin-ext-700-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin-600-normal.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: 'Bricolage Grotesque'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin-ext-600-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin-800-normal.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: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin-ext-800-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }

/* ---- Variables de marca sobre Bootstrap ---------------------------------- */
:root {
  /* Colores de la identidad */
  --esc-marino: #0F172A;
  --esc-marino-2: #1E293B;
  --esc-verde: #00D084;
  --esc-verde-hover: #00B874;
  --esc-verde-texto: #047857;
  --esc-verde-oscuro: #065F46;
  --esc-verde-suave: #E3FAF0;
  --esc-cian: #38BDF8;
  --esc-cian-texto: #0369A1;
  --esc-cian-oscuro: #075985;
  --esc-cian-suave: #E0F2FE;
  /* Neutros fríos */
  --esc-fondo: #F3F6FA;
  --esc-fondo-2: #F8FAFC;
  --esc-borde: #E2E8F0;
  --esc-linea: #CBD5E1;
  --esc-texto: #1E293B;
  --esc-texto-2: #475569;
  --esc-lateral-texto: #E2E8F0;
  --esc-lateral-texto-2: #94A3B8;
  /* Estados */
  --esc-ambar-fondo: #FEF3C7;
  --esc-ambar-texto: #78350F;
  --esc-ambar-borde: #F59E0B;
  --esc-error-fondo: #FEE2E2;
  --esc-error-texto: #991B1B;
  --esc-error-borde: #DC2626;
  --esc-degradado: linear-gradient(90deg, var(--esc-verde), var(--esc-cian));

  --bs-body-font-family: 'Atkinson Hyperlegible', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-color: var(--esc-texto);
  --bs-body-bg: var(--esc-fondo);
  --bs-secondary-color: var(--esc-texto-2);
  --bs-border-color: var(--esc-borde);
  --bs-primary: var(--esc-marino);
  --bs-primary-rgb: 15, 23, 42;
  --bs-success: var(--esc-verde-texto);
  --bs-success-rgb: 4, 120, 87;
  --bs-info: var(--esc-cian);
  --bs-info-rgb: 56, 189, 248;
  --bs-link-color: var(--esc-cian-texto);
  --bs-link-color-rgb: 3, 105, 161;
  --bs-link-hover-color: var(--esc-marino);
  --bs-link-hover-color-rgb: 15, 23, 42;
  --bs-border-radius: .75rem;
  --bs-border-radius-lg: 1rem;
  --bs-focus-ring-color: rgba(56, 189, 248, .55);
  --bs-heading-color: var(--esc-marino);
}
[lang="zh"] { --bs-body-font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'Atkinson Hyperlegible', system-ui, sans-serif; }

h1, h2, h3, .titulo { color: var(--esc-marino); font-family: 'Bricolage Grotesque', 'IBM Plex Sans Arabic', var(--bs-body-font-family); font-weight: 800; letter-spacing: -.01em; }
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] .titulo { font-family: 'IBM Plex Sans Arabic', sans-serif; font-weight: 700; letter-spacing: 0; }
[lang="zh"] h1, [lang="zh"] h2, [lang="zh"] h3 { font-family: var(--bs-body-font-family); font-weight: 700; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.3rem; }

/* ---- Botones --------------------------------------------------------------- */
.btn { min-height: 44px; font-weight: 700; border-radius: .75rem; padding-inline: 1.1rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.btn-sm { min-height: 36px; border-radius: .6rem; padding-inline: .8rem; font-size: .9rem; }
.btn-primary { --bs-btn-bg: var(--esc-marino); --bs-btn-border-color: var(--esc-marino); --bs-btn-hover-bg: var(--esc-marino-2); --bs-btn-hover-border-color: var(--esc-marino-2); --bs-btn-active-bg: var(--esc-marino-2); --bs-btn-disabled-bg: var(--esc-marino); --bs-btn-disabled-border-color: var(--esc-marino); }
/* Acción principal: verde de marca con texto azul marino (el blanco sobre #00D084 no llega al contraste mínimo) */
.btn-success, .btn-accion { --bs-btn-color: var(--esc-marino); --bs-btn-bg: var(--esc-verde); --bs-btn-border-color: var(--esc-verde); --bs-btn-hover-color: var(--esc-marino); --bs-btn-hover-bg: var(--esc-verde-hover); --bs-btn-hover-border-color: var(--esc-verde-hover); --bs-btn-active-bg: var(--esc-verde-hover); --bs-btn-active-color: var(--esc-marino); --bs-btn-disabled-color: var(--esc-marino); --bs-btn-disabled-bg: var(--esc-verde); --bs-btn-disabled-border-color: var(--esc-verde); }
.btn-outline-success { --bs-btn-color: var(--esc-verde-texto); --bs-btn-border-color: var(--esc-verde-texto); --bs-btn-hover-color: var(--esc-marino); --bs-btn-hover-bg: var(--esc-verde); --bs-btn-hover-border-color: var(--esc-verde); --bs-btn-active-bg: var(--esc-verde-hover); --bs-btn-active-color: var(--esc-marino); }
.btn-outline-secondary { --bs-btn-color: var(--esc-texto-2); --bs-btn-border-color: var(--esc-linea); --bs-btn-hover-color: var(--esc-marino); --bs-btn-hover-bg: var(--esc-borde); --bs-btn-hover-border-color: var(--esc-linea); }
.btn-outline-primary { --bs-btn-color: var(--esc-marino); --bs-btn-border-color: var(--esc-marino); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--esc-marino); --bs-btn-hover-border-color: var(--esc-marino); --bs-btn-active-bg: var(--esc-marino-2); }
.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: var(--esc-linea); }
.btn-lg { min-height: 54px; font-size: 1.1rem; }

/* ---- Formularios ---------------------------------------------------------- */
.form-control, .form-select { min-height: 48px; border-radius: .75rem; border-color: var(--esc-linea); font-size: 1rem; background-color: #fff; }
.form-control[readonly] { background-color: var(--esc-fondo-2); }
.form-control:focus, .form-select:focus { border-color: var(--esc-cian-texto); box-shadow: 0 0 0 .2rem rgba(56, 189, 248, .35); }
.form-label { font-weight: 700; margin-bottom: .35rem; }
.form-text { color: var(--esc-texto-2); }
.form-check-input:checked { background-color: var(--esc-marino); border-color: var(--esc-marino); }
.form-check-input:focus { border-color: var(--esc-cian-texto); box-shadow: 0 0 0 .2rem rgba(56, 189, 248, .35); }
.form-switch .form-check-input:checked { background-color: var(--esc-verde-texto); border-color: var(--esc-verde-texto); }
.form-check-input { width: 1.25em; height: 1.25em; }
textarea.form-control { min-height: 96px; }
.campo-codigo { font-size: 1.6rem; letter-spacing: .35em; text-align: center; font-family: 'Atkinson Hyperlegible', monospace; }

/* ---- Tarjetas, tablas y estados --------------------------------------------- */
.card { border: 0; border-radius: 1rem; box-shadow: 0 1px 0 var(--esc-borde); }
.card-header { background: transparent; border-bottom: 1px solid var(--esc-borde); font-weight: 700; padding: 1rem 1.25rem; }
.card-body { padding: 1.25rem; }
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .7rem .6rem; border-bottom-color: var(--esc-borde); vertical-align: middle; }
.table thead th { font-size: .85rem; color: var(--esc-texto-2); font-weight: 700; border-bottom-color: var(--esc-borde); white-space: nowrap; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--esc-fondo-2); }
.estado { display: inline-block; padding: .2rem .6rem; border-radius: .6rem; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.estado-ok { background: var(--esc-verde-suave); color: var(--esc-verde-oscuro); }
.estado-aviso { background: var(--esc-ambar-fondo); color: var(--esc-ambar-texto); }
.estado-error { background: var(--esc-error-fondo); color: var(--esc-error-texto); }
.estado-info { background: var(--esc-cian-suave); color: var(--esc-cian-oscuro); }
.estado-neutro { background: var(--esc-borde); color: #334155; }
.alert { border-radius: .9rem; border: 0; }
.alert-success { background: var(--esc-verde-suave); color: var(--esc-verde-oscuro); }
.alert-warning { background: var(--esc-ambar-fondo); color: var(--esc-ambar-texto); }
.alert-info { background: var(--esc-cian-suave); color: var(--esc-cian-oscuro); }
.alert-danger { background: var(--esc-error-fondo); color: var(--esc-error-texto); }
.cifra { color: var(--esc-marino); font-variant-numeric: tabular-nums; font-family: 'Bricolage Grotesque', var(--bs-body-font-family); font-weight: 800; font-size: 2rem; line-height: 1.1; }
.texto-2 { color: var(--esc-texto-2); }
code, .mono { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .9em; }
.codigos-recuperacion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.5rem; font-size: 1.15rem; letter-spacing: .08em; }

/* ---- Estructura: barra lateral + contenido ----------------------------------- */
.estructura { display: flex; min-height: 100vh; }
.lateral { width: 260px; flex-shrink: 0; background: var(--esc-marino); color: var(--esc-lateral-texto); display: flex; flex-direction: column; background-image: radial-gradient(120% 60% at 0% 100%, rgba(56, 189, 248, .10), transparent 60%); padding: 1.25rem .9rem; gap: .2rem; }
.lateral .marca { padding: .25rem .5rem 1.25rem; }
.lateral .marca img { height: 52px; width: auto; max-width: 100%; display: block; }
.lateral .seccion { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--esc-lateral-texto-2); padding: 1rem .75rem .35rem; }
.lateral a.enlace { display: flex; align-items: center; gap: .75rem; min-height: 44px; padding: 0 .75rem; border-radius: .6rem; color: var(--esc-lateral-texto); text-decoration: none; }
.lateral a.enlace:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.lateral a.enlace[aria-current="page"] { background: rgba(56, 189, 248, .14); color: #fff; font-weight: 700; box-shadow: inset 3px 0 0 var(--esc-verde); }
[dir="rtl"] .lateral a.enlace[aria-current="page"] { box-shadow: inset -3px 0 0 var(--esc-verde); }
.lateral a.enlace[aria-current="page"] svg { color: var(--esc-verde); }
.lateral a.enlace:focus-visible { outline: 2px solid var(--esc-cian); outline-offset: 2px; }
.lateral a.enlace svg { flex-shrink: 0; }
.lateral .pie { margin-top: auto; border-top: 1px solid rgba(148, 163, 184, .25); padding: .9rem .5rem 0; display: flex; gap: .6rem; align-items: center; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--esc-verde); color: var(--esc-marino); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.principal { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.barra-superior { display: flex; align-items: center; gap: .75rem; padding: .75rem 1.5rem; }
.contenido { padding: .5rem 1.5rem 2.5rem; max-width: 1280px; width: 100%; }
.cabecera-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.cabecera-pagina h1 { margin: 0; }
.migas { font-size: .9rem; color: var(--esc-texto-2); margin-bottom: .25rem; }
.migas a { color: var(--esc-texto-2); }
.boton-menu { display: none; }

@media (max-width: 991.98px) {
  .lateral { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 1040; transform: translateX(-100%); transition: transform .2s ease; }
  [dir="rtl"] .lateral { transform: translateX(100%); }
  body.menu-abierto .lateral { transform: none; }
  body.menu-abierto::after { content: ''; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 1030; }
  .boton-menu { display: inline-flex; }
  .contenido, .barra-superior { padding-inline: 1rem; }
}

/* ---- Pantallas de acceso ------------------------------------------------------ */
.acceso { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 1.5rem 1rem 2rem; }
.acceso .arriba { width: 100%; max-width: 460px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.acceso .arriba img { height: 56px; width: auto; }
.acceso .tarjeta-acceso { position: relative; overflow: hidden; width: 100%; max-width: 460px; background: #fff; border-radius: 1.25rem; padding: 2rem 1.5rem 1.75rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06); }
/* Franja de marca: verde -> cian */
.acceso .tarjeta-acceso::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--esc-degradado); }
.acceso .pie-acceso { margin-top: 1.5rem; font-size: .85rem; color: var(--esc-texto-2); text-align: center; }
.selector-idioma .form-select { min-height: 44px; width: auto; border-radius: 22px; padding-inline-end: 2.25rem; background-color: #fff; }

/* ---- Utilidades ---------------------------------------------------------------- */
.visually-hidden-focusable:focus { position: fixed !important; top: .5rem; inset-inline-start: .5rem; z-index: 2000; background: #fff; padding: .5rem 1rem; border-radius: .5rem; }
.matriz td, .matriz th { text-align: center; }
.matriz td:first-child, .matriz th:first-child { text-align: start; }
.diff { font-size: .85rem; white-space: pre-wrap; word-break: break-word; margin: 0; }
.qr-2fa { width: 200px; height: 200px; background: #fff; padding: 8px; border-radius: .75rem; border: 1px solid var(--esc-borde); }

/* ---- Espacio del cliente (fase 2) ------------------------------------------------ */
.pestanas { display: flex; gap: .25rem; border-bottom: 2px solid var(--esc-borde); overflow-x: auto; scrollbar-width: thin; }
.pestanas a { padding: .7rem 1rem; min-height: 44px; display: inline-flex; align-items: center; color: var(--esc-texto-2); text-decoration: none; font-weight: 700; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.pestanas a:hover { color: var(--esc-cian-texto); }
.pestanas a[aria-current="page"] { color: var(--esc-marino); border-bottom-color: var(--esc-verde); }
.barra-progreso { display: flex; height: 10px; border-radius: 6px; background: var(--esc-borde); overflow: hidden; }
.barra-progreso.grande { height: 16px; }
.barra-progreso .p-validadas { background: var(--esc-verde); }
.barra-progreso .p-enviadas { background: var(--esc-cian); }
.barra-progreso .p-curso { background: var(--esc-ambar-borde); }
.borde-aviso { border-inline-start: 5px solid var(--esc-ambar-borde); }
.lista-pasos { padding-inline-start: 1.25rem; }
.lista-pasos li { margin-bottom: .35rem; }
.lista-pasos li.hecho { color: var(--esc-verde-oscuro); }
.lista-pasos li.hecho::marker { content: '✓  '; }
.caja-codigo { background: var(--esc-fondo-2); border: 1px solid var(--esc-borde); border-radius: 1rem; padding: 1rem 1.25rem; }
.codigo-grande { font-family: 'Atkinson Hyperlegible', ui-monospace, monospace; font-size: 2rem; font-weight: 700; letter-spacing: .12em; color: var(--esc-marino); direction: ltr; unicode-bidi: isolate; }
.qr-codigo { width: 240px; height: 240px; background: #fff; padding: 10px; border-radius: .75rem; border: 1px solid var(--esc-borde); image-rendering: pixelated; }
.lista-historial { list-style: none; padding: 0; margin: 0; }
.lista-historial li { padding: .45rem 0; border-bottom: 1px solid var(--esc-borde); }
.lista-historial li:last-child { border-bottom: 0; }
.acciones-fila { position: relative; display: inline-block; text-align: start; }
.acciones-fila > summary { list-style: none; }
.acciones-fila > summary::-webkit-details-marker { display: none; }
.acciones-fila .panel-acciones { position: absolute; inset-inline-end: 0; z-index: 20; width: 300px; background: #fff; border: 1px solid var(--esc-borde); border-radius: .9rem; padding: 1rem; box-shadow: 0 8px 24px rgba(15, 23, 42, .14); }
.fila-error > td { background: #FEF2F2; }
.vista-marca { border: 1px solid var(--esc-borde); border-radius: 1rem; overflow: hidden; background: #fff; }
.vista-marca .vm-cabecera { background: var(--m1); color: var(--m1t, #fff); padding: .9rem 1rem; min-height: 64px; display: flex; align-items: center; }
.vista-marca .vm-cabecera img { max-height: 44px; max-width: 200px; background: #fff; border-radius: .4rem; padding: .2rem .4rem; }
.vista-marca .vm-cuerpo { padding: 1rem; }
.vista-marca .vm-boton { display: inline-block; background: var(--m2); color: var(--m2t, #fff); font-weight: 700; padding: .55rem 1.1rem; border-radius: .75rem; }
.form-control-color { min-height: 48px; padding: .3rem; }
.nav-pills .nav-link { border-radius: .75rem; font-weight: 700; color: var(--esc-texto-2); min-height: 40px; display: inline-flex; align-items: center; }
.nav-pills .nav-link.active { background: var(--esc-marino); color: #fff; }
.list-group-item.active { background: var(--esc-marino); border-color: var(--esc-marino); }

/* ---- Identidad EventScope CO2: acentos de datos ------------------------------------ */
.card-header { color: var(--esc-marino); }
.badge.text-bg-primary { background-color: var(--esc-marino) !important; }
.badge.text-bg-success { background-color: var(--esc-verde) !important; color: var(--esc-marino) !important; }
.badge.text-bg-info { background-color: var(--esc-cian) !important; color: var(--esc-marino) !important; }
.progress { --bs-progress-bg: var(--esc-borde); --bs-progress-bar-bg: var(--esc-verde); }
.page-link { color: var(--esc-cian-texto); }
.page-item.active .page-link { background-color: var(--esc-marino); border-color: var(--esc-marino); }
::selection { background: rgba(56, 189, 248, .30); }
:focus-visible { outline-color: var(--esc-cian-texto); }

/* ---- Portal del declarante (fase 3): móvil primero ---------------------------------- */
.portal { background: var(--esc-fondo); }
.portal-ancho { width: 100%; max-width: 760px; margin-inline: auto; padding-inline: 1rem; }
.portal-cabecera { background: #fff; border-bottom: 1px solid var(--esc-borde); position: sticky; top: 0; z-index: 100; }
.portal-cabecera::after { content: ""; display: block; height: 3px; background: var(--esc-degradado); }
.portal-cabecera .portal-ancho { min-height: 64px; }
.portal-logo { height: 40px; width: auto; max-width: 150px; object-fit: contain; }
.portal-evento { font-size: .95rem; color: var(--esc-texto-2); }
.portal-contenido { padding-top: 1.25rem; padding-bottom: 2rem; }
.portal-pie { padding-bottom: 2rem; font-size: .85rem; color: var(--esc-texto-2); display: flex; gap: 1rem; justify-content: space-between; flex-wrap: wrap; }
.boton-redondo { width: 44px; height: 44px; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--esc-marino); flex-shrink: 0; }
.boton-redondo:hover { background: var(--esc-fondo); }
[dir="rtl"] .boton-redondo svg, [dir="rtl"] .icono-direccional { transform: scaleX(-1); }
.portal h1 { font-size: 1.8rem; line-height: 1.12; }
.portal .subtitulo { font-size: 1.05rem; color: var(--esc-texto-2); }
.portal-bienvenida { background: var(--esc-marino); color: #fff; border-radius: 1.25rem; padding: 1.4rem 1.4rem 1.5rem; position: relative; overflow: hidden; }
.portal-bienvenida::after { content: ""; position: absolute; inset: auto -40px -60px auto; width: 180px; height: 180px; border-radius: 50%; border: 14px solid rgba(0, 208, 132, .22); }
.portal-bienvenida h1 { color: #fff; margin: .4rem 0 .6rem; }
.portal-bienvenida p { color: #E2E8F0; margin: 0; white-space: pre-line; }
.portal-etiqueta { display: inline-block; padding: .2rem .65rem; border-radius: .7rem; background: rgba(255, 255, 255, .14); font-weight: 700; font-size: .85rem; }
.tarjeta { background: #fff; border-radius: 1.1rem; padding: 1rem 1.1rem; border: 1px solid var(--esc-borde); }
.tarjeta + .tarjeta { margin-top: .75rem; }
.texto-legal { max-height: 14rem; overflow: auto; white-space: pre-line; font-size: .95rem; background: var(--esc-fondo-2); border: 1px solid var(--esc-borde); border-radius: .8rem; padding: .8rem 1rem; }
.casilla-grande { display: flex; gap: .75rem; align-items: flex-start; font-size: 1rem; cursor: pointer; }
.casilla-grande input { width: 1.5rem; height: 1.5rem; flex-shrink: 0; margin: .1rem 0 0; }

/* Apartados */
.lista-apartados { display: flex; flex-direction: column; gap: .65rem; }
.apartado { display: flex; align-items: center; gap: .9rem; min-height: 76px; padding: .75rem .9rem; border-radius: 1rem; background: #fff; border: 1px solid var(--esc-borde); color: var(--esc-texto); text-decoration: none; }
.apartado:hover { border-color: var(--esc-cian-texto); color: var(--esc-texto); }
.apartado:focus-visible { outline: 3px solid var(--esc-cian); outline-offset: 2px; }
.apartado.a-medias { border: 2px solid var(--esc-ambar-borde); }
.apartado.opcional { background: var(--esc-fondo-2); border-style: dashed; border-color: var(--esc-linea); }
.apartado .icono { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--esc-borde); color: var(--esc-marino); }
.apartado.hecho .icono { background: var(--esc-verde-suave); color: var(--esc-verde-oscuro); }
.apartado.a-medias .icono { background: var(--esc-ambar-fondo); color: var(--esc-ambar-texto); }
.apartado.opcional .icono { background: var(--esc-cian-suave); color: var(--esc-cian-oscuro); }
.apartado .nombre { font-weight: 700; font-size: 1.05rem; }
.apartado .detalle { font-size: .9rem; color: var(--esc-texto-2); }
/* 0.19.5: obligatorio sin completar (ámbar) y con algo que solucionar (rojo); franja al inicio de la línea (también en RTL) */
.apartado.pendiente { background: #FFFBEB; border: 2px solid var(--esc-ambar-borde); border-inline-start-width: 7px; }
.apartado.pendiente .icono { background: #FDE68A; color: var(--esc-ambar-texto); }
.apartado.pendiente .obligatorio { color: #92400E; font-weight: 700; }
.apartado.con-problema { background: #FEF2F2; border: 2px solid var(--esc-error-borde); border-inline-start-width: 7px; }
.apartado.con-problema .icono { background: #FECACA; color: var(--esc-error-texto); }
.apartado.pendiente:hover { border-color: #D97706; }
.apartado.con-problema:hover { border-color: #B91C1C; }
.apartado .aviso-apartado { color: var(--esc-error-texto); font-weight: 600; font-size: .9rem; }
.estado-pendiente { background: var(--esc-ambar-borde); color: #451A03; font-weight: 700; }
.estado-revisar { background: var(--esc-error-borde); color: #fff; font-weight: 700; }
.progreso-declaracion { height: 12px; border-radius: 6px; background: var(--esc-borde); overflow: hidden; }
.progreso-declaracion > div { height: 100%; border-radius: 6px; background: var(--esc-verde); }
.guardado { font-size: .85rem; color: var(--esc-verde-oscuro); display: inline-flex; gap: .35rem; align-items: center; min-height: 24px; }
.guardado.guardando { color: var(--esc-texto-2); }
.guardado.error { color: var(--esc-error-texto); }

/* Registros de un apartado */
.registro { background: #fff; border-radius: 1rem; border: 1px solid var(--esc-borde); padding: .9rem 1rem; }
.registro.con-aviso { border: 2px solid var(--esc-ambar-borde); }
.registro.borrador { border: 2px dashed var(--esc-ambar-borde); }
.registro .titulo-registro { font-weight: 700; font-size: 1.05rem; }
.registro .resumen-registro { color: var(--esc-texto-2); font-size: .95rem; }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: .7rem; background: var(--esc-fondo); font-size: .85rem; }
.boton-anadir { min-height: 58px; border-radius: 1rem; border: 2px dashed var(--esc-marino); background: #fff; color: var(--esc-marino); display: flex; align-items: center; justify-content: center; gap: .6rem; font-weight: 700; font-size: 1.05rem; text-decoration: none; width: 100%; }
.boton-anadir:hover { background: var(--esc-cian-suave); color: var(--esc-marino); }

/* Campos del formulario */
.campo-formulario { margin-bottom: 1.1rem; }
.campo-formulario .form-label { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.campo-formulario .obligatorio { color: var(--esc-error-texto); margin-inline-start: .15rem; }
.ayuda-campo { margin-top: .35rem; }
.ayuda-campo > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; color: var(--esc-cian-texto); font-size: .9rem; font-weight: 700; }
.ayuda-campo > summary::-webkit-details-marker { display: none; }
.ayuda-campo .caja-ayuda { background: var(--esc-cian-suave); color: var(--esc-cian-oscuro); border-radius: .8rem; padding: .7rem .9rem; font-size: .95rem; }
.ayuda-campo .caja-ayuda .ejemplo { background: #fff; color: var(--esc-texto); border-radius: .6rem; padding: .5rem .7rem; margin-top: .5rem; }
.cantidad-unidad { display: flex; gap: .5rem; }
.cantidad-unidad .form-control { flex: 1 1 60%; }
.cantidad-unidad .form-select { flex: 0 1 40%; min-width: 7rem; }
.contador { display: flex; align-items: center; gap: .6rem; }
.contador button { width: 48px; height: 48px; border-radius: 24px; font-size: 1.6rem; line-height: 1; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contador .btn-menos { border: 2px solid var(--esc-marino); background: #fff; color: var(--esc-marino); }
.contador .btn-mas { border: 0; background: var(--esc-marino); color: #fff; }
.contador input { width: 5.5rem; text-align: center; font-weight: 800; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.fila-contador { display: flex; align-items: center; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--esc-borde); }
.fila-contador:last-child { border-bottom: 0; }
.fila-contador .etiqueta { flex-grow: 1; font-weight: 700; }
.opciones-botones { display: flex; flex-wrap: wrap; gap: .5rem; }
.opciones-botones .btn-check + .btn { border: 1px solid var(--esc-linea); background: #fff; color: var(--esc-texto); font-weight: 400; }
.opciones-botones .btn-check:checked + .btn { background: var(--esc-marino); border-color: var(--esc-marino); color: #fff; font-weight: 700; }
.opciones-botones .btn-check:focus-visible + .btn { outline: 3px solid var(--esc-cian); outline-offset: 2px; }
.aviso-coherencia { background: var(--esc-ambar-fondo); color: var(--esc-ambar-texto); border-radius: .8rem; padding: .75rem .9rem; }
.aviso-coherencia.confirmado { background: var(--esc-fondo-2); color: var(--esc-texto-2); }
.barra-acciones { position: sticky; bottom: 0; background: linear-gradient(to top, var(--esc-fondo) 75%, rgba(243, 246, 250, 0)); padding: 1rem 0 1.1rem; margin-top: 1rem; z-index: 50; }
.barra-acciones .btn { width: 100%; min-height: 56px; font-size: 1.1rem; border-radius: 1rem; }
.bloque-oculto { display: none !important; }
.observacion-portal { background: var(--esc-cian-suave); border-inline-start: 4px solid var(--esc-cian-texto); border-radius: .6rem; padding: .65rem .85rem; margin-top: .6rem; }
.tarjeta-observaciones { border: 2px solid var(--esc-cian); }

/* Justificante y verificación */
.sello-entrega { border: 2px solid var(--esc-verde-texto); border-radius: 1.25rem; padding: 1.25rem; background: #fff; }
.sello-entrega .icono-sello { width: 56px; height: 56px; border-radius: 50%; background: var(--esc-verde); color: var(--esc-marino); display: inline-flex; align-items: center; justify-content: center; }
.hilo-consulta { display: flex; flex-direction: column; gap: .75rem; }
.mensaje-consulta { max-width: 88%; padding: .7rem .9rem; border-radius: 1rem; background: #fff; border: 1px solid var(--esc-borde); white-space: pre-line; }
.mensaje-consulta.propio { align-self: flex-end; background: var(--esc-cian-suave); border-color: transparent; }
.mensaje-consulta .meta { font-size: .8rem; color: var(--esc-texto-2); margin-bottom: .2rem; }
.punto-nuevo { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--esc-cian-texto); }
@media (min-width: 768px) {
  .portal h1 { font-size: 2.1rem; }
  .barra-acciones .btn { width: auto; min-width: 16rem; }
}
@media print {
  .portal-cabecera, .portal-pie, .barra-acciones, .selector-idioma { display: none !important; }
}
.min-w-0 { min-width: 0; }

/* Cuadro de mando (fase 5B) */
.grafico { position: relative; width: 100%; min-height: 120px; }
.grafico-anillo { height: 220px; max-width: 280px; margin: 0 auto; }
@media (min-width: 992px) { .pestanas { flex-wrap: wrap; } }

/* ---- Guía de uso del portal (fase 6C) ---- */
.ayuda-texto h2 { font-size: 1.2rem; margin: 1.6rem 0 .6rem; padding-bottom: .3rem; border-bottom: 2px solid var(--csp-verde, #00D084); scroll-margin-top: 5rem; }
.ayuda-texto h2:first-child { margin-top: 0; }
.ayuda-texto h3 { font-size: 1rem; margin: 1.1rem 0 .4rem; }
.ayuda-texto p, .ayuda-texto li { line-height: 1.55; }
.ayuda-texto ul, .ayuda-texto ol { padding-inline-start: 1.3rem; margin-bottom: .8rem; }
.ayuda-texto li { margin-bottom: .3rem; }
.ayuda-aviso { background: #F1F5F9; border: 1px solid #CBD5E1; border-radius: .75rem; padding: .75rem 1rem; margin: .5rem 0 1rem; }
.ayuda-ui { font-weight: 700; }

/* Vuelos: salida, escalas y llegada con buscador de aeropuertos (0.15.0) */
.vuelo { display: flex; flex-direction: column; gap: .75rem; }
.vuelo-aeropuerto { position: relative; flex: 1 1 auto; min-width: 0; }
.vuelo-aeropuerto .form-control:not(:placeholder-shown) { text-transform: uppercase; font-weight: 600; letter-spacing: .03em; }
.vuelo-info { min-height: 1.15rem; margin-top: .2rem; color: var(--esc-texto-2); }
.vuelo-info.error { color: var(--esc-error-texto); font-weight: 600; }
.vuelo-interruptor { margin: 0; min-height: 32px; display: flex; align-items: center; gap: .5rem; }
.vuelo-escalas { display: flex; flex-direction: column; gap: .75rem; padding-inline-start: .9rem; border-inline-start: 3px solid var(--esc-borde); }
.vuelo-anadir { align-self: flex-start; }
.vuelo-quitar { min-height: 48px; min-width: 48px; display: inline-flex; align-items: center; justify-content: center; }
.vuelo-sugerencias { position: absolute; z-index: 30; top: calc(48px + .25rem); inset-inline: 0; background: #fff; border: 1px solid var(--esc-linea); border-radius: .75rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .14); max-height: 18rem; overflow-y: auto; padding: .25rem; }
.vuelo-sugerencias [role="option"] { display: block; width: 100%; text-align: start; border: 0; background: none; padding: .55rem .6rem; border-radius: .5rem; min-height: 44px; color: var(--esc-texto); }
.vuelo-sugerencias [role="option"]:hover, .vuelo-sugerencias [role="option"].activa { background: var(--esc-borde); }
.vuelo-sugerencias .codigo { font-weight: 700; color: var(--esc-marino); margin-inline-end: .5rem; }
.vuelo-sugerencias .vacio { padding: .55rem .6rem; color: var(--esc-texto-2); }
.vuelo-ruta { font-weight: 700; color: var(--esc-marino); }
.vuelo-ruta:empty { display: none; }