/* SmartVisa — Gestor DS-160 · marca Grupo LS.
   Tokens y reglas: docs/PROMPT_DISENO.md.
   Fuentes autoalojadas (static/fonts/): sin CDN ni Google Fonts. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/Archivo.3084864834b6.ttf") format("truetype");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-SemiBold.4c2f3714b6a4.ttf") format("truetype");
}

/* Tokens de marca (brief §2); el contraste de los pares
   texto/fondo lo verifica clientes/tests/test_ui.py. */
:root {
  --c-navy: #0E1B2E;
  --c-noche: #172A46;
  --c-electrico: #4B6FFF;
  --c-electrico-txt: #8EA4FF;
  --c-claro: #F2F5F8;
  --c-gris: #D6DEE8;
  --c-gris-2: #9AA3B0;
  --c-pizarra: #4B5A72;
  --e-rojo: #ff8888;
  --e-rojo-bg: #2a1515;
  --e-ambar: #ffcc44;
  --e-ambar-bg: #2a2a15;
  --e-verde: #88ff88;
  --e-verde-bg: #152a15;
  --e-info: #88dddd;
  --e-info-bg: #152a2a;
  --radio-tarjeta: 6px;
  --radio-control: 4px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-navy);
  color: var(--c-gris);
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  line-height: 1.5;
}

.wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1100px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 16px;
}

h1,
h2,
h3 {
  margin: 0 0 16px;
  color: var(--c-claro);
  font-family: "Archivo", "Segoe UI", system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.2;
}

h2 {
  font-size: 1.35rem;
}

h3 {
  margin-bottom: 12px;
  font-size: 1.05rem;
}

a {
  color: var(--c-electrico-txt);
}

/* Foco visible para todo lo interactivo */
:focus-visible {
  outline: 2px solid var(--c-electrico);
  outline-offset: 2px;
}

/* Skip-link */
.skip-link {
  position: absolute;
  top: 16px;
  left: -9999px;
  z-index: 100;
  padding: 8px 16px;
  background: var(--c-electrico);
  color: #fff;
  border-radius: var(--radio-control);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  left: 16px;
}

/* Encabezado y marca */
.hd {
  padding: 16px 0 12px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--c-electrico);
}

.wordmark {
  display: block;
  color: var(--c-claro);
  font-family: "Archivo", "Segoe UI", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.2;
  text-decoration: none;
}

.wordmark:hover {
  color: #fff;
}

.rotulo {
  display: block;
  margin-top: 4px;
  color: var(--c-electrico-txt);
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Navegación */
.nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.nav a {
  padding: 4px 0;
  color: var(--c-gris);
  border-bottom: 2px solid transparent;
  text-decoration: none;
}

.nav a:hover {
  color: var(--c-electrico-txt);
}

.nav a[aria-current="page"] {
  color: var(--c-claro);
  font-weight: 700;
  border-bottom-color: var(--c-electrico);
}

.nav-derecha {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.nav-derecha form {
  display: inline;
  margin: 0;
}

.usuario {
  color: var(--c-gris-2);
  font-size: 0.9rem;
}

/* Botones */
.btn,
.btn-o {
  display: inline-block;
  border-radius: var(--radio-control);
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}

.btn {
  padding: 10px 20px;
  background: var(--c-electrico);
  color: #fff;
  border: none;
  font-size: 0.95rem;
  font-weight: 700;
}

.btn:hover {
  background: #3A5BDE;
  color: #fff;
}

.btn-o {
  padding: 8px 16px;
  background: transparent;
  color: var(--c-gris);
  border: 1px solid var(--c-pizarra);
  font-size: 0.9rem;
}

.btn-o:hover {
  color: var(--c-electrico-txt);
  border-color: var(--c-electrico-txt);
}

.btn-peligro {
  padding: 8px 16px;
  min-height: 40px;
  background: transparent;
  color: var(--e-rojo);
  border: 1px solid var(--e-rojo);
  border-radius: var(--radio-control);
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn-peligro:hover {
  background: var(--e-rojo-bg);
  color: var(--e-rojo);
  border-color: var(--e-rojo);
}

/* Alertas (mismas clases que ya usan las plantillas) */
.alert-error,
.alert-warning,
.alert-success,
.alert-info {
  margin: 12px 0;
  padding: 12px 16px;
  border: 1px solid;
  border-radius: var(--radio-control);
}

.alert-error {
  background: var(--e-rojo-bg);
  border-color: #cc3333;
  color: var(--e-rojo);
}

.alert-warning {
  background: var(--e-ambar-bg);
  border-color: #aa8800;
  color: var(--e-ambar);
}

.alert-success {
  background: var(--e-verde-bg);
  border-color: #33aa33;
  color: var(--e-verde);
}

.alert-info {
  background: var(--e-info-bg);
  border-color: #33aaaa;
  color: var(--e-info);
}

/* Error de campo (login): texto rojo bajo el input (brief §5) */
.campo-error {
  display: block;
  margin-top: 4px;
  color: var(--e-rojo);
  font-size: 0.9rem;
}

/* Badges de estado (brief §5) */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radio-control);
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.badge-pendiente {
  background: var(--c-pizarra);
  color: var(--c-gris);
}

.badge-en-proceso {
  background: var(--e-ambar-bg);
  color: var(--e-ambar);
}

.badge-completado {
  background: var(--e-verde-bg);
  color: var(--e-verde);
}

/* Tarjetas */
.sec {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--c-noche);
  border: 1px solid var(--c-pizarra);
  border-radius: var(--radio-tarjeta);
}

.sec h3 {
  margin-bottom: 12px;
  color: var(--c-claro);
}

/* Tablas */
table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--c-pizarra);
}

th {
  color: var(--c-electrico-txt);
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

tbody tr:hover {
  background: var(--c-noche);
}

/* Formularios */
.fr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.fr.full {
  grid-template-columns: 1fr;
}

label {
  display: block;
  margin-bottom: 4px;
  color: var(--c-gris-2);
  font-size: 0.8rem;
  font-weight: 500;
}

input,
select,
textarea {
  width: 100%;
  padding: 8px 10px;
  background: var(--c-navy);
  color: var(--c-gris);
  border: 1px solid var(--c-pizarra);
  border-radius: var(--radio-control);
  font-size: 0.95rem;
  font-family: inherit;
}

input::placeholder,
textarea::placeholder {
  color: var(--c-gris-2);
}

/* Lista de valores del detalle (detalle.html) */
.dl {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 4px 16px;
  margin: 0;
}

.dl dt {
  color: var(--c-gris-2);
  font-size: 0.9rem;
}

.dl dd {
  margin: 0;
  color: var(--c-gris);
  font-weight: 500;
}

/* Pie con sello del grupo */
.pie {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 24px 0 16px;
}

.pie img {
  height: 32px;
  width: auto;
}

/* Inicio (brief §5): cabecera con acción y tarjetas de conteo por estado */
.inicio-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.tarjetas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.tarjeta-conteo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  background: var(--c-noche);
  border: 1px solid var(--c-pizarra);
  border-radius: var(--radio-tarjeta);
  text-decoration: none;
}

.tarjeta-conteo:hover {
  border-color: var(--c-electrico-txt);
}

.tarjeta-conteo-num {
  color: var(--c-claro);
  font-family: "Archivo", "Segoe UI", system-ui, sans-serif;
  font-weight: 800;
  font-size: 2.25rem;
  line-height: 1;
}

.tarjeta-conteo-label {
  color: var(--c-gris-2);
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Login (brief §5): tarjeta centrada, sin navegación */
.login-pantalla {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 16px;
}

.login-card {
  width: 100%;
  max-width: 420px;
  padding: 32px;
  background: var(--c-noche);
  border: 1px solid var(--c-pizarra);
  border-radius: var(--radio-tarjeta);
}

.login-marca {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-pizarra);
}

.login-card h2 {
  margin: 0 0 16px;
}

.login-card .campo {
  margin: 0 0 16px;
}

.login-accion {
  margin: 16px 0 0;
}

/* Páginas de error 404 / 500 (brief §5) */
.error-pantalla {
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 16px;
  text-align: center;
}

.error-codigo {
  margin: 0 0 8px;
  color: var(--c-electrico-txt);
  font-family: "Archivo", "Segoe UI", system-ui, sans-serif;
  font-weight: 800;
  font-size: 4rem;
  line-height: 1;
}

/* Responsive (360 / 768 / 1100 px) */
@media (max-width: 768px) {
  .fr {
    grid-template-columns: 1fr;
  }

  .tarjetas {
    grid-template-columns: 1fr;
  }

  .dl {
    grid-template-columns: 1fr;
  }

  .dl dd {
    margin-bottom: 8px;
  }

  .nav-derecha {
    width: 100%;
    margin-left: 0;
  }

  /* Tablas anchas con scroll horizontal */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media (max-width: 400px) {
  .hd {
    padding: 12px 0 8px;
  }

  .nav {
    gap: 8px;
  }

  .btn,
  .btn-o {
    width: 100%;
    text-align: center;
  }
}

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============ T20: lista de clientes ============ */

.lista-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.lista-acciones {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.lista-total {
  color: var(--c-gris-2);
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.filtro {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px;
  margin-bottom: 20px;
  background: var(--c-noche);
  border: 1px solid var(--c-pizarra);
  border-radius: var(--radio-tarjeta);
}
.filtro-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.filtro-campo-busqueda {
  flex: 1 1 260px;
  min-width: 200px;
}
.filtro-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tabla-scroll {
  overflow-x: auto;
}

/* ============ T22: detalle de cliente ============ */

/* Migas de pan (Clientes › nombre) */
.migas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-bottom: 16px;
}

.migas a {
  color: var(--c-electrico-txt);
  text-decoration: none;
}

.migas a:hover {
  text-decoration: underline;
}

.migas-sep {
  color: var(--c-gris-2);
}

.migas-actual {
  color: var(--c-gris);
}

/* Tarjeta de cabecera: nombre, id, pasaporte, badge, chips y acciones */
.detalle-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 16px;
  background: var(--c-noche);
  border: 1px solid var(--c-pizarra);
  border-radius: var(--radio-tarjeta);
}

.detalle-nombre {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 8px;
}

.detalle-meta {
  margin: 0 0 12px;
  color: var(--c-gris);
}

.detalle-acciones {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Chips de validación: estado semántico (verde en 0) */
.chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.chip {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid;
  border-radius: var(--radio-control);
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chip-ok {
  color: var(--e-verde);
  background: var(--e-verde-bg);
  border-color: var(--e-verde);
}

.chip-error {
  color: var(--e-rojo);
  background: var(--e-rojo-bg);
  border-color: var(--e-rojo);
}

.chip-warning {
  color: var(--e-ambar);
  background: var(--e-ambar-bg);
  border-color: var(--e-ambar);
}

/* Secciones del detalle en <details open> */
.sec-det {
  margin-bottom: 12px;
  background: var(--c-noche);
  border: 1px solid var(--c-pizarra);
  border-radius: var(--radio-tarjeta);
}

.sec-det summary {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  cursor: pointer;
  color: var(--c-claro);
  font-family: "Archivo", "Segoe UI", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
}

.sec-det summary:hover {
  color: #fff;
  text-decoration: underline;
}

.sec-det .dl {
  margin: 0 16px 16px;
}

/* Valor vacío ("—") atenuado */
.dl dd.valor-vacio {
  color: var(--c-gris-2);
  font-weight: 400;
}

.mono {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-weight: 600;
  font-size: 0.8rem;
}
.fila-nombre {
  color: var(--c-claro);
  font-weight: 700;
  text-decoration: none;
}
.fila-nombre:hover {
  color: var(--c-electrico-txt);
  text-decoration: underline;
}

.pagina {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.pagina-info {
  color: var(--c-gris-2);
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.btn-o.deshabilitado {
  color: var(--c-pizarra);
  border-color: var(--c-pizarra);
  cursor: default;
  pointer-events: none;
}

.vacio {
  padding: 40px 16px;
  background: var(--c-noche);
  border: 1px dashed var(--c-pizarra);
  border-radius: var(--radio-tarjeta);
  text-align: center;
}
.vacio h3 {
  margin-bottom: 8px;
}
.vacio p {
  margin-bottom: 16px;
  color: var(--c-gris-2);
}

/* ============ T21: formulario de cliente ============ */

/* Navegación de secciones fija al hacer scroll */
.secciones-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 10px 12px;
  margin-bottom: 20px;
  background: var(--c-noche);
  border: 1px solid var(--c-pizarra);
  border-radius: var(--radio-tarjeta);
}
.secciones-nav a {
  color: var(--c-gris);
  text-decoration: none;
  font-size: 0.85rem;
}
.secciones-nav a:hover,
.secciones-nav a:focus-visible {
  color: var(--c-claro);
  text-decoration: underline;
}

/* Marcador de campo obligatorio */
.req {
  color: var(--e-rojo);
  font-weight: 700;
}

/* Texto solo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Resumen de errores (se muestra solo si hay errores) */
.resumen-errores {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--e-rojo-bg);
  border: 1px solid var(--e-rojo);
  border-radius: var(--radio-tarjeta);
  color: var(--e-rojo);
}
.resumen-errores h3 {
  margin-bottom: 8px;
  color: var(--e-rojo);
}
.resumen-errores ul {
  margin: 0;
  padding-left: 20px;
}
.resumen-errores a {
  color: var(--e-rojo);
  text-decoration: underline;
}

/* Barra de acciones fija al pie mientras se rellena el formulario */
.acciones {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  margin-top: 20px;
  background: var(--c-noche);
  border: 1px solid var(--c-pizarra);
  border-radius: var(--radio-tarjeta);
}

/* Área táctil mínima de 40 px para los controles del formulario */
input,
select,
textarea {
  min-height: 40px;
}
/* Auditoría T21: al saltar por ancla, la minibarra fija no tapa el título de la sección */
.sec {
  scroll-margin-top: 80px;
}
.campo-error:empty {
  display: none;
}

/* ============ T23: cierre — accesibilidad y responsive (360/768/1100 px) ============ */

/* Tamaños táctiles ≥ 40 px para botones (los inputs ya llevan min-height: 40px) */
.btn,
.btn-o {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Tamaños táctiles ≥ 40 px para enlaces en barra, migas y anclas */
.nav a {
  padding: 8px 0; /* 24 px de línea + 16 px = 40 px */
}

.migas a {
  padding: 8px 0;
}

.secciones-nav a {
  padding: 10px 6px; /* ≈20 px de línea + 20 px = ≈40 px */
}

.resumen-errores a {
  padding: 8px 0;
}

/* 360 px (móvil estrecho): tarjeta de login, código de error y sello del pie */
@media (max-width: 360px) {
  .login-card {
    padding: 24px 20px;
  }

  .error-codigo {
    font-size: 3rem;
  }

  .pie img {
    height: 24px;
  }
}

/* Auditoría T23: en pantallas angostas las dos barras fijas ocupaban ~40 % de la pantalla */
@media (max-width: 768px) {
  .secciones-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    padding: 8px 12px;
  }
  .acciones {
    flex-wrap: nowrap;
    padding: 8px 12px;
  }
  .acciones .btn,
  .acciones .btn-o {
    flex: 1 1 0;
    width: auto;
    margin: 0;
  }
}

/* Auditoría T24: el botón deshabilitado no debe parecer activo */
.btn:disabled,
.btn[disabled] {
  background: var(--c-pizarra);
  color: var(--c-gris-2);
  border-color: var(--c-pizarra);
  cursor: not-allowed;
  opacity: 1;
}

/* ============ T25: Ayuda en línea (/ayuda/) ============ */

.ayuda-intro {
  max-width: 70ch;
  margin-bottom: 20px;
}

.ayuda-lista {
  margin: 0 0 12px;
  padding-left: 20px;
}
.ayuda-lista li {
  margin-bottom: 4px;
}

/* Tarjeta por regla (E1–E6 / A1–A6); el id permite enlazar por ancla (T26) */
.regla {
  margin-bottom: 12px;
  padding: 12px 16px;
  background: var(--c-noche);
  border: 1px solid var(--c-pizarra);
  border-radius: var(--radio-tarjeta);
  scroll-margin-top: 80px;
}
.regla h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.regla p {
  margin: 0 0 8px;
}
.regla p:last-child {
  margin-bottom: 0;
}

/* Preguntas frecuentes (desplegables anidados) */
.ayuda-faq details {
  margin-bottom: 8px;
  padding: 8px 12px;
  background: var(--c-noche);
  border: 1px solid var(--c-pizarra);
  border-radius: var(--radio-tarjeta);
}
.ayuda-faq summary {
  cursor: pointer;
}
.ayuda-faq p {
  margin: 8px 0 0;
}

/* ============ T26: Ayuda contextual («¿Qué significa?») ============ */

/* Enlace junto a cada error/advertencia con código de regla; apunta a
   /ayuda/#<código> (ancla de la tarjeta .regla de T25). */
.regla-link {
  color: var(--c-electrico-txt);
  text-decoration: underline;
}
.regla-link:hover,
.regla-link:focus {
  color: var(--c-claro);
}

/* En el resumen de errores del formulario los enlaces ya usan --e-rojo
   (.resumen-errores a): mantener ese color para los de regla. */
.resumen-errores .regla-link {
  color: var(--e-rojo);
}
.resumen-errores .regla-link:hover,
.resumen-errores .regla-link:focus {
  color: var(--c-claro);
}

/* ============ T33: Enlace del portal (detalle + página de enlace) ============ */

/* Contenido de la sección «Enlace del portal» del detalle */
.portal-sec {
  padding: 8px 16px 16px;
}
.portal-sec .chips,
.portal-sec .valor-vacio {
  margin-bottom: 12px;
}
.portal-sec .chips span:not(.chip) {
  color: var(--c-gris);
  font-size: 0.9rem;
}

/* Fila de botones dentro de la sección (no es la barra fija `.acciones`) */
.portal-acciones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.portal-acciones form {
  margin: 0;
}

.portal-nota,
.portal-estado {
  margin: 0 0 12px;
  color: var(--c-gris-2);
  font-size: 0.9rem;
  max-width: 70ch;
}
.portal-nota:last-child {
  margin-bottom: 0;
}

/* Página de enlace (se muestra una sola vez) */
.enlace-caja {
  margin: 16px 0;
  padding: 16px;
  background: var(--c-noche);
  border: 1px solid var(--c-electrico);
  border-radius: var(--radio-tarjeta);
}
.enlace-rotulo {
  display: block;
  margin-bottom: 8px;
  color: var(--c-claro);
  font-weight: 700;
  font-size: 0.9rem;
}
.enlace-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.enlace-texto {
  flex: 1 1 260px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  background: var(--c-navy);
  border: 1px solid var(--c-pizarra);
  border-radius: var(--radio-control);
  color: var(--c-claro);
  word-break: break-all;
  font-size: 0.9rem;
}

/* T41 paso 2 — condiciones del formulario (static/js/condicional.js) */
.na-activo input, .na-activo select { opacity: .5; }
[hidden] { display: none !important; }

/* T42 — listas «Agregar otro» */
.lista { border: 0; padding: 0; margin: 1rem 0; }
.lista legend { font-weight: 600; margin-bottom: .5rem; }
.lista-fila { display: flex; gap: .75rem; align-items: flex-end; margin: .5rem 0; flex-wrap: wrap; }
.lista-eliminar { font-size: .9rem; }

/* I1 — casilla «No aplica» junto a su campo */
.na-casilla { display: inline-flex; gap: .4rem; align-items: center; font-size: .9rem; margin-top: .25rem; }

/* T56 — preguntas de seguridad */
.seguridad { border: 0; padding: 0; margin: 1rem 0; }
.pregunta-seguridad { margin: .75rem 0; padding-bottom: .75rem; border-bottom: 1px solid #ddd; }
.pregunta-seguridad .texto-en { color: #555; font-size: .85rem; }
.pregunta-seguridad label { margin-right: 1rem; }
.pregunta-seguridad textarea { width: 100%; }