/* =========================================================
   Cotizador de salud — Emporio Agencia de Seguros
   Identidad 2.0 (Manual de identidad Emporio 2.0, octubre 2026).
   Tokens idénticos a los de la web nueva (emporio-web/src/styles/tokens.css).

   Esta hoja es SOLO del cotizador (index.html). El panel de administración
   sigue usando css/styles.css + css/admin.css, sin cambios.

   Reglas de alcance:
   - Todo lo visual del cotizador vive bajo #app (más .toast). Así no se cuela
     en el PDF, que pdf.js arma en un contenedor aparte dentro de <body> y que
     depende de que body siga en 'Nunito Sans' (ver "Base heredada").
   - Titulares: MADE Awelier Black vía variable --font-titulos (cámbiala aquí).
   - Texto e interfaz: Poppins. Sin emojis.
   ========================================================= */

:root {
  /* Color */
  --azul-noche: #0D183F;   /* principal: fondos, titulares, botones */
  --azul: #4A6FA5;         /* Azul Emporio: pestañas, íconos, acentos */
  --cielo: #8DB8E8;        /* arcos, fondos de apoyo */
  --bruma: #E6EFFA;        /* fondos suaves, tarjetas */
  --gris: #F2F2F3;         /* franjas neutras */
  --texto: #2A3358;        /* texto corrido */
  --blanco: #FFFFFF;
  --rojo-sello: #D8453A;   /* SOLO el sello "100% REAL" */
  --texto-suave: #5C6688;  /* textos secundarios (contraste AA sobre blanco y Gris) */
  --borde-campo: #7D88A8;  /* borde de campos y opciones: 3:1 sobre blanco (WCAG 1.4.11) */
  --linea: #E3E8F2;        /* divisores y bordes decorativos */
  --azul-noche-hover: #1C2A5E;
  --azul-hover: #3F6194;

  /* Tipografía — para cambiar la fuente de titulares, reemplaza los archivos
     de assets/fonts/ y cambia estas variables. */
  --font-titulos: 'MADEAwelier-Black', Georgia, serif;           /* titulares (Black) */
  --font-titulos-bold: 'MADEAwelier-Bold', Georgia, serif;       /* títulos de tarjetas (Bold) */
  --font-titulos-regular: 'MADEAwelier-Regular', Georgia, serif; /* frases de apoyo */
  --font-texto: 'Poppins', 'Helvetica Neue', Arial, sans-serif;  /* texto, botones, interfaz */

  /* Forma firma: esquina en arco (140 px en escritorio, se encoge en móvil) */
  --radio-arco: clamp(56px, 9.7vw, 140px);

  /* Retícula */
  --ancho-max: 1312px;
  --margen: clamp(16px, 4.5vw, 64px);

  --sombra-panel: 0 18px 44px rgba(13, 24, 63, .09);
  --sombra-tarjeta: 0 10px 28px rgba(13, 24, 63, .07);
}

/* ---------- Base heredada (no cambiar: el PDF depende de ella) ----------
   pdf.js inserta su contenedor directamente en <body> y hereda de aquí la
   fuente 'Nunito Sans' y el box-sizing. Son los mismos valores que tenía
   css/styles.css para no alterar el PDF. */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--gris);
  color: #0D0F25;
  font-family: 'Nunito Sans', sans-serif;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto; }
}

/* ---------- Base del cotizador ---------- */
#app {
  font-family: var(--font-texto);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto);
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

#app img { max-width: 100%; }
#app a { color: inherit; }
#app button, #app input, #app select { font-family: inherit; }

/* Los archivos de MADE Awelier traen un peso por familia: nunca sintetizar negritas */
#app h1, #app h2, #app h3, #app .titular, #app .titular-bold { font-synthesis: none; }

#app :focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 6px; }
#app .sobre-oscuro :focus-visible { outline-color: var(--cielo); }
#app [tabindex="-1"]:focus { outline: none; }

#app .solo-lectores {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

#app .contenedor { max-width: var(--ancho-max); margin: 0 auto; padding: 0 var(--margen); }

#app svg.icono { display: block; flex: none; }

/* ---------- Titulares (MADE Awelier) ---------- */
#app .titular {
  margin: 0;
  font-family: var(--font-titulos);
  font-weight: normal;
  line-height: 1.06;
  letter-spacing: -.006em;
  word-spacing: .06em;
  font-feature-settings: 'lnum' 1;
  color: var(--azul-noche);
}
#app .titular-panel { font-size: clamp(28px, 2.7vw, 36px); }
#app .titular-bold {
  margin: 0;
  font-family: var(--font-titulos-bold);
  font-weight: normal;
  line-height: 1.18;
  font-feature-settings: 'lnum' 1;
  color: var(--azul-noche);
}
#app .sobre-oscuro .titular, #app .sobre-oscuro .titular-bold { color: var(--blanco); }

#app .etiqueta {
  font-weight: 700; font-size: 13px; line-height: 18px;
  letter-spacing: .09em; text-transform: uppercase;
}

#app .subtitulo { margin: 10px 0 28px; font-size: 16px; color: var(--texto); }

/* ---------- Cabecera ---------- */
#app .cabecera { background: var(--blanco); border-bottom: 1px solid var(--linea); }
#app .cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 80px; }
#app .cabecera__logo { display: inline-flex; flex: none; border-radius: 6px; }
#app .cabecera__logo img { display: block; height: 46px; width: auto; }
#app .cabecera__acciones { display: flex; align-items: center; gap: 24px; }
#app .cabecera__volver {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 2px;
  font-weight: 500; font-size: 14.5px; color: var(--azul-noche); text-decoration: none;
}
#app .cabecera__volver:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Banda principal (solo paso 1 y vista compartida) ---------- */
#app .hero {
  position: relative;
  overflow: hidden;
  background: var(--azul-noche);
  color: var(--blanco);
  border-bottom-right-radius: var(--radio-arco);
}
#app .hero__fila { position: relative; padding-top: 52px; padding-bottom: 74px; }
#app .hero__texto { position: relative; z-index: 1; max-width: min(760px, calc(100% - 250px)); }
#app .hero__pestana {
  display: inline-block; margin: 0 0 22px;
  background: var(--azul); color: var(--blanco);
  font-weight: 600; font-size: 14px; line-height: 1.3;
  padding: 9px 18px; border-radius: 6px 6px 6px 0;
}
#app .hero__titulo { font-size: clamp(34px, 4.2vw, 56px); }
#app .hero__bajada { margin: 18px 0 0; max-width: 620px; font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, .86); }
#app .hero__teo {
  position: absolute; bottom: 0; right: calc(var(--margen) + 40px);
  height: 170px; overflow: hidden; pointer-events: none;
}
#app .hero__teo img { display: block; height: 340px; width: auto; max-width: none; }

/* ---------- Cuerpo ---------- */
#app .cuerpo { padding-top: 34px; }

/* ---------- Indicador de pasos ---------- */
#app .pasos { list-style: none; margin: 0 0 28px; padding: 0; display: flex; gap: 18px; }
#app .paso { flex: 1; display: flex; align-items: center; gap: 14px; min-width: 0; }
#app .paso::after { content: ""; flex: 1; height: 2px; background: #CBD6E8; border-radius: 2px; }
#app .paso:last-child::after { display: none; }
#app .paso--hecho::after { background: var(--azul); }
#app .paso__num {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bruma); color: var(--azul);
  font-weight: 800; font-size: 19px; line-height: 1;
}
#app .paso--activo .paso__num { background: var(--azul-noche); color: var(--blanco); }
#app .paso--hecho .paso__num { background: var(--azul); color: var(--blanco); }
#app .paso__nombre { font-weight: 500; font-size: 15px; color: var(--texto-suave); white-space: nowrap; }
#app .paso--activo .paso__nombre { font-weight: 700; color: var(--azul-noche); }
#app .paso--hecho .paso__nombre { color: var(--azul-noche); }

/* ---------- Distribución de los pasos 1 y 2 ---------- */
#app .paso-layout { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 28px; align-items: start; }
#app .lateral { display: flex; flex-direction: column; gap: 20px; }

/* ---------- Paneles ---------- */
#app .panel {
  background: var(--blanco);
  border-radius: 20px;
  padding: 40px;
  box-shadow: var(--sombra-panel);
  margin-bottom: 20px;
}
#app .panel--arco { border-top-left-radius: var(--radio-arco); padding-top: 48px; }
#app .panel--arco > .titular:first-child,
#app .panel--arco > .encabezado-panel:first-child { padding-left: calc(var(--radio-arco) * .22); }
#app .panel--arco > .encabezado-panel:first-child .titular { padding-left: 0; }

/* ---------- Formularios ---------- */
#app .fila-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
#app .campo { display: flex; flex-direction: column; gap: 8px; margin: 0 0 22px; min-width: 0; }
#app .campo > label, #app .etiqueta-campo { font-weight: 600; font-size: 14px; line-height: 1.4; color: var(--azul-noche); }

#app input[type="text"], #app input[type="tel"], #app input[type="number"], #app select {
  width: 100%; min-height: 52px; padding: 12px 16px;
  font-size: 15.5px; line-height: 1.3; color: var(--azul-noche);
  background: var(--blanco);
  border: 1.5px solid var(--borde-campo);
  border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#app input::placeholder { color: var(--texto-suave); opacity: 1; }
#app input:not(:placeholder-shown):not(:disabled) { border-color: var(--azul); }
#app input:focus, #app select:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(74, 111, 165, .35); }
#app input:disabled, #app select:disabled { background: var(--gris); color: var(--texto); border-color: #CBD6E8; cursor: not-allowed; }
#app select {
  appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D183F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
#app select:disabled { background-image: none; }

/* Opciones (pastillas) */
#app .opciones-pill { display: flex; flex-wrap: wrap; gap: 10px; }
#app .pill {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 12px 18px;
  background: var(--blanco); color: var(--azul-noche);
  border: 1.5px solid var(--borde-campo); border-radius: 12px;
  font-weight: 600; font-size: 14.5px; line-height: 1.25; text-align: left;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
#app .pill:hover { background: var(--bruma); }
#app .pill .pill__icono { color: var(--azul); }
#app .pill.seleccionado { background: var(--azul-noche); border-color: var(--azul-noche); color: var(--blanco); }
#app .pill.seleccionado .pill__icono { color: var(--cielo); }
#app .pill__texto { display: block; }
#app .pill__sub { display: block; margin-top: 3px; font-weight: 400; font-size: 12.5px; opacity: .88; }
#app .opciones-pill--cuadricula .pill { flex: 1 1 calc(50% - 5px); }
#app .opciones-pill[aria-disabled="true"] { opacity: .65; pointer-events: none; }

/* ---------- Botones (siempre redondos, una acción principal por bloque) ---------- */
#app .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 13px 26px;
  border: 2px solid var(--azul-noche); border-radius: 999px;
  background: transparent; color: var(--azul-noche);
  font-weight: 600; font-size: 15px; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
#app .btn-primario { background: var(--azul-noche); color: var(--blanco); }
#app .btn-primario:hover { background: var(--azul-noche-hover); border-color: var(--azul-noche-hover); }
#app .btn-secundario { background: transparent; color: var(--azul-noche); }
#app .btn-secundario:hover { background: var(--bruma); }
#app .btn-escribir { background: var(--azul); border-color: var(--azul); color: var(--blanco); }
#app .btn-escribir:hover { background: var(--azul-hover); border-color: var(--azul-hover); }
#app .btn-claro { background: var(--blanco); border-color: var(--blanco); color: var(--azul-noche); }
#app .btn-claro:hover { background: var(--bruma); border-color: var(--bruma); }
#app .btn-grande { padding: 17px 32px; font-size: 16px; }
#app .btn-pequeno { padding: 10px 20px; font-size: 14px; min-height: 40px; }
#app .btn-agregar { border-style: dashed; border-color: var(--azul); }
#app .btn[disabled] { opacity: .45; cursor: not-allowed; }
#app .btn[disabled]:hover { background: inherit; }
#app .btn-primario[disabled]:hover { background: var(--azul-noche); border-color: var(--azul-noche); }

#app .acciones-paso { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
#app .acciones-paso--fin { justify-content: flex-end; }

/* ---------- Lateral: resumen y ayuda de Teo ---------- */
#app .tarjeta-resumen { background: var(--blanco); border: 1px solid var(--linea); border-radius: 16px; padding: 24px 26px; }
#app .tarjeta-resumen__titulo { margin: 0 0 6px; font-weight: 700; font-size: 15px; color: var(--azul-noche); }
#app .tarjeta-resumen dl { margin: 0; }
#app .resumen-fila { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linea); font-size: 14.5px; }
#app .resumen-fila dt { color: var(--texto-suave); }
#app .resumen-fila dd { margin: 0; font-weight: 600; color: var(--azul-noche); text-align: right; }
#app .nota-privacidad { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font-size: 13.5px; color: var(--texto); }
#app .nota-privacidad .icono { color: var(--azul); }

#app .teo-ayuda {
  position: relative; overflow: hidden;
  display: flex; gap: 16px; align-items: flex-end;
  background: var(--bruma);
  border-radius: 16px 16px 60px 16px;
  padding: 24px 26px 24px 24px;
}
#app .teo-ayuda__titulo { margin: 0; font-weight: 700; font-size: 15px; color: var(--azul-noche); }
#app .teo-ayuda__texto { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--texto); }
#app .teo-ayuda__img { flex: none; width: 100px; height: 104px; overflow: hidden; margin: 0 -8px -24px 0; }
#app .teo-ayuda__img img { display: block; height: 156px; width: auto; max-width: none; margin-left: 0; }

/* ---------- Paso 2: asegurados ---------- */
#app .stat-chips { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 22px; }
#app .stat-chip { background: var(--bruma); border-radius: 12px; padding: 10px 16px; font-size: 13.5px; color: var(--texto); }
#app .stat-chip strong { display: block; font-family: var(--font-titulos); font-weight: normal; font-size: 26px; line-height: 1.15; color: var(--azul-noche); font-feature-settings: 'lnum' 1; }

#app .tarjeta-asegurado {
  display: grid;
  grid-template-columns: 44px minmax(0, 1.6fr) minmax(84px, .7fr) minmax(0, 1.2fr);
  gap: 16px;
  align-items: end;
  padding: 20px 22px;
  margin-bottom: 14px;
  background: var(--blanco);
  border: 1.5px solid #CBD6E8;
  border-radius: 16px;
}
#app .tarjeta-asegurado .campo { margin: 0; }
#app .tarjeta-asegurado__avatar {
  align-self: end; margin-bottom: 4px;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bruma); color: var(--azul-noche);
}
#app .tarjeta-asegurado .campo-genero { grid-column: 2 / 4; }
#app .tarjeta-asegurado .campo-genero .pill { min-height: 44px; padding: 10px 16px; }
#app .tarjeta-asegurado__titular { grid-column: 4; justify-self: end; align-self: center; font-size: 13px; font-weight: 600; color: var(--texto-suave); }
#app .btn-quitar {
  grid-column: 4; justify-self: end; align-self: center;
  min-height: 44px; padding: 10px 8px;
  background: none; border: 0; border-radius: 8px;
  color: var(--azul-noche); font-weight: 600; font-size: 14px;
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
#app .btn-quitar:hover { background: var(--bruma); }

/* Selector manual de planes (solo modo asesor) */
#app .selector-planes { margin-top: 28px; padding: 22px; background: var(--gris); border-radius: 16px; }
#app .selector-planes__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
#app .selector-planes__titulo { margin: 0; font-weight: 700; font-size: 15px; color: var(--azul-noche); }
#app .selector-planes__ayuda { margin: 2px 0 0; font-size: 13px; color: var(--texto-suave); }
#app .interruptor-fila { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--texto); }
#app .interruptor {
  position: relative; flex: none;
  width: 52px; height: 30px; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--borde-campo);
  transition: background-color .2s ease;
}
#app .interruptor::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%; background: var(--blanco);
  transition: transform .2s ease;
}
#app .interruptor[aria-checked="true"] { background: var(--azul-noche); }
#app .interruptor[aria-checked="true"]::after { transform: translateX(22px); }
#app .selector-planes__instruccion { margin: 0 0 10px; }
#app .selector-planes__instruccion.etiqueta { font-size: 12px; color: var(--texto-suave); }
#app .lista-planes-seleccion { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
#app .tarjeta-seleccion-plan {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; text-align: left; cursor: pointer;
  background: var(--blanco); color: var(--azul-noche);
  border: 1.5px solid var(--borde-campo); border-radius: 12px;
  transition: background-color .15s ease, border-color .15s ease;
}
#app .tarjeta-seleccion-plan:hover { background: var(--bruma); }
#app .tarjeta-seleccion-plan[aria-pressed="true"] { border: 2px solid var(--azul-noche); background: var(--bruma); padding: 11.5px 13.5px; }
#app .casilla {
  flex: none; width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--borde-campo); background: var(--blanco); color: var(--blanco);
}
#app .tarjeta-seleccion-plan[aria-pressed="true"] .casilla { background: var(--azul-noche); border-color: var(--azul-noche); }
#app .tarjeta-seleccion-plan__nombre { display: block; font-weight: 700; font-size: 14px; line-height: 1.3; }
#app .tarjeta-seleccion-plan__aseg { display: block; font-weight: 600; font-size: 12.5px; color: var(--azul); }
#app .tarjeta-seleccion-plan__tipo { display: block; font-size: 12px; color: var(--texto-suave); }
#app .selector-planes__contador { margin: 12px 0 0; font-size: 13.5px; color: var(--texto); }

/* ---------- Paso 3: resultados ---------- */
#app .insignia {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 12px; line-height: 1.2;
  padding: 6px 12px; border-radius: 999px;
}
#app .insignia-cielo { background: var(--cielo); color: var(--azul-noche); }
#app .insignia-noche { background: var(--azul-noche); color: var(--blanco); }
#app .insignia-bruma { background: var(--bruma); color: var(--azul-noche); font-weight: 600; }
#app .etiqueta-seleccion-manual { margin: 0 0 16px; }

#app .resumen-perfil {
  margin: 0 0 24px; padding: 14px 18px;
  background: var(--bruma); border-radius: 12px;
  font-size: 14.5px; line-height: 1.7; color: var(--texto);
}
#app .resumen-perfil strong { color: var(--azul-noche); }

#app .grid-planes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; align-items: start; }

#app .tarjeta-plan {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px;
  background: var(--blanco);
  border: 1.5px solid var(--linea);
  border-radius: 20px;
  box-shadow: var(--sombra-tarjeta);
}
#app .tarjeta-plan.sugerido { border: 2px solid var(--azul-noche); padding: 23.5px; box-shadow: 0 18px 44px rgba(13, 24, 63, .14); }

#app .seleccion-tarjeta {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  margin-right: 100px; padding: 6px 12px 6px 8px;
  background: var(--gris); border-radius: 999px;
  font-weight: 600; font-size: 13.5px; color: var(--azul-noche); cursor: pointer;
}
#app .seleccion-tarjeta input, #app .anexo-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--azul-noche); cursor: pointer; }

#app .logo-esquina { position: absolute; top: 20px; right: 20px; width: 84px; line-height: 0; }
#app .logo-esquina img { display: block; width: 100%; height: auto; }

#app .badges-plan { display: flex; flex-wrap: wrap; gap: 8px; padding-right: 96px; }
#app .badges-plan:empty { display: none; }
#app .badge-destacado { display: inline-flex; font-weight: 700; font-size: 12px; line-height: 1.2; padding: 6px 12px; border-radius: 999px; background: var(--cielo); color: var(--azul-noche); }
#app .badge-especial { display: inline-flex; font-weight: 600; font-size: 12px; line-height: 1.2; padding: 6px 12px; border-radius: 999px; background: var(--bruma); color: var(--azul-noche); }

#app .cabecera-plan { padding-right: 96px; }
#app .seleccion-tarjeta ~ .badges-plan, #app .seleccion-tarjeta ~ .cabecera-plan { padding-right: 0; }
#app .pie__texto { margin: 0; }
#app .nombre-plan { margin: 0; font-family: var(--font-titulos-bold); font-weight: normal; font-size: 22px; line-height: 1.18; color: var(--azul-noche); font-feature-settings: 'lnum' 1; }
#app .tipo-plan { margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--texto-suave); }

#app .precio {
  font-family: var(--font-titulos); font-weight: normal;
  font-size: 40px; line-height: 1.05; color: var(--azul-noche);
  font-feature-settings: 'lnum' 1;
}
#app .precio span { white-space: nowrap; font-family: var(--font-texto); font-size: 13.5px; font-weight: 500; color: var(--texto-suave); letter-spacing: 0; }
#app .precio-nota { margin-top: -6px; font-size: 12.5px; color: var(--texto-suave); }
#app .precio-total { align-self: flex-start; padding: 8px 12px; background: var(--gris); border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--azul-noche); }

#app .lista-coberturas { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--texto); }
#app .lista-coberturas li { display: flex; gap: 10px; align-items: flex-start; }
#app .lista-coberturas li .icono { margin-top: 2px; color: var(--azul); }

#app .razon-recomendacion { padding: 12px 14px; background: var(--bruma); border-radius: 12px; font-size: 13.5px; line-height: 1.55; color: var(--texto); }
#app .razon-recomendacion strong { color: var(--azul-noche); }

#app .anexo-check {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1.5px solid var(--borde-campo); border-radius: 12px;
  font-size: 14px; line-height: 1.4; color: var(--texto); cursor: pointer;
}

#app .observaciones-plan { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; background: var(--gris); border-radius: 12px; font-size: 13px; line-height: 1.5; color: var(--texto); }
#app .observaciones-plan .icono { margin-top: 1px; color: var(--azul); }

#app .btn-brochure { align-self: flex-start; font-weight: 600; font-size: 14px; color: var(--azul-noche); text-decoration: underline; text-underline-offset: 4px; }
#app .btn-brochure:hover { color: var(--azul); }

#app .cta-tarifa-confirmar { padding: 14px; background: var(--bruma); border-radius: 12px; font-size: 14px; color: var(--texto); text-align: center; }
#app .cta-tarifa-confirmar .btn-brochure { display: inline-block; margin-top: 6px; }

#app .sin-planes { margin: 0; font-size: 15px; color: var(--texto); }

/* Bloque de contacto (modo cliente) */
#app .cta-lead {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: center;
  margin: 32px 0 0; padding: 40px 44px;
  background: var(--azul-noche); color: var(--blanco);
  border-radius: 20px; border-bottom-right-radius: var(--radio-arco);
}
#app .cta-lead__etiqueta { margin: 0 0 12px; color: var(--cielo); }
#app .cta-lead__titulo { font-size: clamp(28px, 2.8vw, 38px); }
#app .cta-lead__texto { margin: 12px 0 0; max-width: 460px; font-size: 15.5px; line-height: 1.65; color: rgba(255, 255, 255, .86); }
#app .cta-lead__teo { margin-top: 18px; height: 120px; overflow: hidden; }
#app .cta-lead__teo img { display: block; height: 240px; width: auto; max-width: none; }
#app .cta-lead__form { display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; }
#app .cta-lead__form label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 14px; color: var(--blanco); }
#app .cta-lead__form input { border-color: var(--blanco); }
#app .cta-lead__form .btn { width: 100%; }
#app .cta-lead__estado { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .9); }

/* ---------- Autorización de tratamiento de datos (casilla obligatoria, sin marcar) ---------- */
#app .autorizacion { margin: 6px 0 22px; padding: 18px 20px; background: var(--bruma); border-radius: 14px; }
#app .autorizacion__fila { display: flex; gap: 12px; align-items: flex-start; }
#app .autorizacion__casilla { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--azul-noche); cursor: pointer; }
#app .autorizacion__texto { font-size: 13.5px; line-height: 1.6; color: var(--texto); cursor: pointer; }
#app .autorizacion__obligatorio { color: var(--azul-noche); font-weight: 700; }
#app .autorizacion__texto a { color: var(--azul-noche); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#app .autorizacion__nota { margin: 0; font-size: 14px; color: var(--texto-suave); }
#app .autorizacion__nota[hidden] { display: none; }
#app .acciones-paso--fin .autorizacion__nota { flex: 1 1 220px; text-align: right; }
#app .etiqueta-opcional { font-weight: 400; color: var(--texto-suave); }
#app .ayuda-campo { margin: -2px 0 2px; font-size: 13.5px; line-height: 1.55; color: var(--texto-suave); }
#app .autorizacion__cuerpo { flex: 1 1 auto; min-width: 0; }
#app .autorizacion__texto { display: block; margin: 0; }
#app .autorizacion__detalle { margin-top: 6px; }
#app .autorizacion__detalle summary {
  display: inline-block; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--azul-noche);
  text-decoration: underline; text-underline-offset: 3px; list-style: none;
}
#app .autorizacion__detalle summary::-webkit-details-marker { display: none; }
#app .autorizacion__detalle summary::after { content: " ▾"; text-decoration: none; display: inline-block; margin-left: 4px; }
#app .autorizacion__detalle[open] summary::after { content: " ▴"; }
#app .autorizacion__detalle p { margin-top: 6px; }
#app .autorizacion__politica { margin-top: 6px; }
#app .autorizacion__cuerpo p.autorizacion__texto { cursor: auto; }
#app .cta-lead__form .autorizacion__detalle summary { color: var(--blanco); }
#app .campos-empresa { margin: -4px 0 6px; padding: 18px 20px 0; border-left: 3px solid var(--azul); background: var(--bruma); border-radius: 0 14px 14px 0; }
#app .campos-empresa[hidden] { display: none; }
#app .campo-error { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--azul-noche); }
#app .campo-error[hidden] { display: none; }
#app input[aria-invalid="true"] { border-color: var(--azul-noche); box-shadow: 0 0 0 2px var(--azul-noche); }
#app .autorizacion__nota-asesor { margin: -10px 0 22px; font-size: 13.5px; color: var(--texto-suave); }
#app .cta-lead__form .autorizacion { margin: 0; padding: 0; background: none; }
#app .cta-lead__form .autorizacion__texto { margin: 0; font-weight: 400; font-size: 13px; color: rgba(255, 255, 255, .9); }
#app .cta-lead__form .autorizacion__casilla { accent-color: var(--cielo); }
#app .cta-lead__form .autorizacion__obligatorio,
#app .cta-lead__form .autorizacion__texto a { color: var(--blanco); }
#app .cta-lead__form .autorizacion__nota { color: rgba(255, 255, 255, .85); }
#app .cta-lead__exito { padding: 8px 0; text-align: center; }
#app .cta-lead__exito .icono { margin: 0 auto 12px; color: var(--cielo); }
#app .cta-lead__exito-titulo { margin: 0 0 8px; font-family: var(--font-titulos); font-weight: normal; font-size: 26px; line-height: 1.15; color: var(--blanco); }
#app .cta-lead__exito-texto { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .86); }

#app .seccion-no-encuentras {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 24px; padding: 22px 24px;
  background: var(--gris); border-radius: 16px;
}
#app .seccion-no-encuentras p { margin: 0; font-size: 15px; color: var(--texto); }

#app .panel-empresa { padding: 28px; border: 1.5px solid var(--linea); border-radius: 16px; text-align: center; }
#app .panel-empresa p { max-width: 560px; margin: 0 auto 20px; font-size: 15px; line-height: 1.6; color: var(--texto); }
#app .logos-empresa { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
#app .logos-empresa img { height: 32px; width: auto; }

/* Barra fija del asesor (PDF / link) */
#app .barra-flotante {
  position: sticky; bottom: 12px; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 24px; padding: 14px 18px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 20px;
  box-shadow: 0 12px 32px rgba(13, 24, 63, .16);
}
#app .barra-flotante__texto { font-weight: 600; font-size: 14.5px; color: var(--azul-noche); }
#app .barra-flotante__acciones { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Modo asesor y vista compartida ---------- */
#app .barra-asesor {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin: 0 0 28px; padding: 18px 22px;
  background: var(--azul-noche); color: var(--blanco); border-radius: 16px;
}
#app .barra-asesor .fila-campos { flex: 1; min-width: 280px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
#app .barra-asesor .campo { margin: 0; }
#app .barra-asesor .campo > label { color: var(--cielo); font-size: 13px; }
#app .barra-asesor input {
  min-height: 46px; background: rgba(255, 255, 255, .08); color: var(--blanco);
  border-color: rgba(255, 255, 255, .55);
}
#app .barra-asesor input:not(:placeholder-shown) { border-color: var(--cielo); }
#app .barra-asesor input:focus { border-color: var(--cielo); box-shadow: 0 0 0 3px rgba(141, 184, 232, .35); }
#app .barra-asesor input::placeholder { color: rgba(255, 255, 255, .72); }

#app .banner-solo-lectura {
  display: flex; gap: 12px; align-items: center;
  margin: 0 0 28px; padding: 16px 20px;
  background: var(--bruma); color: var(--azul-noche); border-radius: 16px;
  font-size: 14.5px; line-height: 1.6;
}
#app .banner-solo-lectura .icono { color: var(--azul); }
#app .acciones-solo-lectura { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* ---------- Pie ---------- */
#app .pie { margin-top: 56px; background: var(--blanco); border-top: 1px solid var(--linea); }
#app .pie__fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; min-height: 84px; padding-top: 18px; padding-bottom: 18px; font-size: 14px; color: var(--texto); }
#app .pie__logo { display: block; height: 38px; width: auto; }
#app .pie a, #app .pie__cookies { color: var(--azul-noche); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
#app .pie__cookies { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }

/* ---------- Aviso de cookies (fuera de #app: no se vuelve a dibujar con la página) ---------- */
.aviso-cookies {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000;
  display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap;
  max-width: 820px; margin: 0 auto; padding: 18px 22px;
  background: var(--azul-noche); color: var(--blanco); border-radius: 16px;
  box-shadow: 0 16px 40px rgba(13, 24, 63, .28);
  font-family: var(--font-texto); font-size: 14px; line-height: 1.55;
}
.aviso-cookies[hidden] { display: none; }
.aviso-cookies__contenido { flex: 1 1 340px; min-width: 0; }
.aviso-cookies__texto, .aviso-cookies__actual { margin: 0; }
.aviso-cookies__actual { margin-top: 6px; font-size: 13px; color: rgba(255, 255, 255, .85); }
.aviso-cookies a { color: var(--blanco); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.aviso-cookies__lectores {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.aviso-cookies__botones { display: flex; gap: 12px; flex: 0 0 auto; }
/* Los dos botones son idénticos (mismo tamaño, peso y color): ninguna opción se destaca. */
.aviso-cookies__boton {
  min-width: 120px; min-height: 44px; padding: 10px 20px;
  border: 2px solid var(--blanco); border-radius: 999px; background: var(--blanco); color: var(--azul-noche);
  font-family: var(--font-texto); font-weight: 600; font-size: 14.5px; cursor: pointer;
}
.aviso-cookies__boton:hover { background: var(--bruma); border-color: var(--bruma); }
.aviso-cookies :focus-visible { outline: 3px solid var(--cielo); outline-offset: 3px; }
@media (max-width: 560px) {
  .aviso-cookies { left: 12px; right: 12px; bottom: 12px; padding: 16px; }
  .aviso-cookies__botones { flex: 1 1 100%; }
  .aviso-cookies__boton { flex: 1 1 0; min-width: 0; }
}

/* ---------- Aviso emergente ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 999; max-width: calc(100% - 32px);
  padding: 12px 22px; border-radius: 999px;
  background: var(--azul-noche); color: var(--blanco);
  font-family: var(--font-texto); font-weight: 500; font-size: 14px; line-height: 1.4; text-align: center;
  box-shadow: 0 12px 32px rgba(13, 24, 63, .22);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.toast.mostrar { opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  #app .paso-layout { grid-template-columns: minmax(0, 1fr) 320px; }
}

@media (max-width: 960px) {
  #app .paso-layout { grid-template-columns: 1fr; }
  #app .lateral { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  #app .cta-lead { grid-template-columns: 1fr; gap: 24px; padding: 32px 28px 36px; }
  #app .cta-lead__teo { display: none; }
  #app .barra-asesor .fila-campos { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  #app .cabecera__fila { min-height: 68px; }
  #app .cabecera__logo img { height: 38px; }
  #app .cabecera__volver { display: none; }
  #app .hero__fila { padding-top: 34px; padding-bottom: 48px; }
  #app .hero__texto { max-width: calc(100% - 140px); }
  #app .hero__bajada { font-size: 15.5px; }
  #app .hero__teo { right: var(--margen); height: 104px; }
  #app .hero__teo img { height: 208px; }
  #app .cuerpo { padding-top: 24px; }
  #app .pasos { gap: 10px; margin-bottom: 20px; }
  #app .paso { flex: 0 0 auto; gap: 8px; }
  #app .paso::after { flex: 0 0 18px; }
  #app .paso--activo { flex: 1 1 auto; }
  #app .paso--activo::after { flex: 1 1 18px; min-width: 12px; }
  #app .paso:not(.paso--activo) .paso__nombre { display: none; }
  #app .paso__num { width: 38px; height: 38px; font-size: 19px; }
  #app .paso__nombre { font-size: 14px; }
  #app .panel { padding: 24px 20px; border-radius: 18px; }
  #app .panel--arco { padding-top: 32px; }
  #app .lateral { grid-template-columns: 1fr; }
  #app .tarjeta-asegurado { grid-template-columns: 1fr 1fr; padding: 16px; }
  #app .tarjeta-asegurado__avatar { display: none; }
  #app .tarjeta-asegurado .campo-nombre { grid-column: 1 / -1; }
  #app .tarjeta-asegurado .campo-genero { grid-column: 1 / -1; }
  #app .tarjeta-asegurado__titular, #app .btn-quitar { grid-column: 1 / -1; justify-self: start; }
  #app .grid-planes { grid-template-columns: 1fr; }
  #app .precio { font-size: 36px; }
  #app .barra-flotante { border-radius: 16px; }
  #app .barra-flotante__acciones .btn { flex: 1 1 auto; }
}

@media (max-width: 560px) {
  #app .fila-campos { grid-template-columns: 1fr; }
  #app .opciones-pill--cuadricula .pill { flex-basis: 100%; }
  #app .hero__texto { max-width: none; }
  #app .hero__teo { display: none; }
  #app .cabecera__acciones .btn .texto-boton { display: none; }
  #app .cabecera__acciones .btn { padding: 10px 12px; }
  #app .acciones-paso .btn { flex: 1 1 auto; }
  #app .cta-lead { padding: 28px 20px 32px; }
  #app .pie__fila { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  #app *, .toast { transition: none !important; }
}