/* ==========================================================================
   Páginas internas: cotizador y diagnóstico. Solo variables de tokens.css.
   ========================================================================== */

.pagina-cabecera { padding-block: var(--esp-6) var(--esp-6); }
.pagina-titulo { font-size: var(--texto-display); margin-block: var(--esp-2) var(--esp-4); max-width: 18ch; }
.pagina-cabecera p { max-width: 62ch; }

/* ---------- Cotizador ---------- */
.cot { display: grid; gap: var(--esp-6); align-items: start; }
@media (min-width: 960px) { .cot { grid-template-columns: minmax(0, 7fr) minmax(280px, 4fr); gap: var(--esp-7); } }

.cot__progreso { display: grid; gap: var(--esp-2); margin-bottom: var(--esp-5); }
.cot__progreso .etiqueta { margin: 0; color: var(--color-texto-suave); }
.cot__form { display: grid; gap: var(--esp-5); }
.cot-paso { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--esp-4); }
.cot-paso[hidden] { display: none; }
.cot-paso legend { padding: 0; margin-bottom: var(--esp-4); }
.cot-paso legend h2 { font-size: var(--texto-h2); }
.cot-paso h2:focus-visible { outline-offset: 6px; }

.cot-opciones { display: grid; gap: var(--esp-3); }
@media (min-width: 640px) { .cot-opciones { grid-template-columns: 1fr 1fr; } }
.opcion--tarjeta, .opcion--fila {
  padding: var(--esp-3) var(--esp-4);
  background: var(--color-superficie);
  border: 2px solid var(--color-borde); border-radius: var(--radio-medio);
  transition: border-color var(--dur-rapida) var(--curva-salida), background-color var(--dur-rapida);
}
.opcion--tarjeta:hover, .opcion--fila:hover { border-color: var(--color-marca); }
.opcion--tarjeta:has(input:checked), .opcion--fila:has(input:checked) { border-color: var(--color-marca); background: var(--color-chip-fondo); }
.opcion--tarjeta:has(input:focus-visible), .opcion--fila:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
.opcion--tarjeta .opcion__texto { font-weight: 700; }
.opcion--tarjeta .opcion__texto small, .opcion--fila .opcion__texto small { font-weight: 400; }

.cot-lista { display: grid; gap: var(--esp-3); }
@media (min-width: 720px) { .cot-lista { grid-template-columns: 1fr 1fr; } }
.cot-fila {
  display: flex; justify-content: space-between; align-items: center; gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  background: var(--color-superficie); border: 2px solid var(--color-borde); border-radius: var(--radio-medio);
}
.cot-fila__nombre { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.opcion--fila .opcion__texto, .cot-fila .opcion__texto { display: grid; gap: 2px; }

.cantidad { display: inline-flex; align-items: center; gap: var(--esp-2); flex: none; }
.cantidad output { min-width: 2.2ch; text-align: center; font-size: 1.125rem; }
.cot-paginas { margin-top: var(--esp-3); padding: var(--esp-3) var(--esp-4); border-left: 3px solid var(--color-marca); display: grid; gap: var(--esp-2); }

.cot__botones { display: flex; justify-content: space-between; gap: var(--esp-3); flex-wrap: wrap; }
.cot__botones [data-siguiente] { margin-left: auto; }

.cot-resumen { padding: var(--esp-5); background: var(--color-superficie); border: var(--borde-ancho) solid var(--color-borde); border-radius: var(--radio-grande); display: grid; gap: var(--esp-1); }
.cot-resumen p { margin: 0; }
.cot-condiciones { list-style: none; padding: 0; margin: var(--esp-2) 0; display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.cot-condiciones:empty { display: none; }
.cot-detalle { gap: var(--esp-4); }
.cot-detalle h3 { font-size: var(--texto-h3); }

/* Lateral: matraz + estimación */
.cot__lateral { position: static; }
@media (min-width: 960px) { .cot__lateral { position: sticky; top: 92px; } }
.cot-lateral__tarjeta { gap: var(--esp-3); justify-items: center; text-align: center; box-shadow: var(--sombra-1); }
.cot-lateral__visual { display: grid; justify-items: center; gap: var(--esp-2); width: 100%; }
.cot-lateral__visual .formula { width: min(100%, 200px); }
.cot-lateral__datos { display: grid; gap: 2px; justify-items: center; }
.cot-lateral__datos p { margin: 0; }
@media (max-width: 959px) {
  .cot__lateral { position: sticky; top: 68px; z-index: 6; order: -1; margin-inline: calc(var(--margen-lateral) * -1); }
  .cot-lateral__tarjeta {
    flex-direction: row; align-items: center; justify-items: start; text-align: left; gap: var(--esp-4);
    border-radius: 0; border-inline: 0; padding: var(--esp-2) var(--margen-lateral);
    background: color-mix(in srgb, var(--color-superficie) 94%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .cot-lateral__visual { width: auto; }
  .cot-lateral__visual .formula { width: 72px; }
  .cot-lateral__datos { justify-items: start; }
  .cot-lateral__datos .resultado__precio { font-size: 1.125rem; }
  .cot-lateral__visual .formula__giro { display: none; }
}

/* ---------- Diagnóstico ---------- */
.diag { display: grid; gap: var(--esp-6); max-width: 820px; }
.diag-form { gap: var(--esp-4); }
.diag-url { display: grid; gap: var(--esp-3); }
@media (min-width: 640px) { .diag-url { grid-template-columns: 1fr auto; align-items: start; } }

.diag-cargando { display: grid; gap: var(--esp-3); }
.diag-cargando .nivel__relleno { width: 40%; animation: diag-avance 2.4s var(--curva-entrada-salida) infinite alternate; }
@keyframes diag-avance { from { width: 15%; } to { width: 92%; } }
@media (prefers-reduced-motion: reduce) { .diag-cargando .nivel__relleno { animation: none; width: 60%; } }

.puntajes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .puntajes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.puntaje { display: grid; gap: var(--esp-2); justify-items: start; padding: var(--esp-4); background: var(--color-superficie); border: 2px solid var(--color-borde); border-radius: var(--radio-grande); }
.puntaje__num { font: 500 2.5rem/1 var(--fuente-mono); font-variant-numeric: tabular-nums; }
.puntaje__estado { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9375rem; }
/* El estado se lee por texto e ícono, no solo por color */
.puntaje--bien { border-color: var(--exito); }
.puntaje--bien .puntaje__estado { color: var(--exito); }
.puntaje--medio { border-color: var(--aviso-borde); }
.puntaje--medio .puntaje__estado { color: var(--chip-demo-texto); }
.puntaje--mal { border-color: var(--error); border-width: 3px; }
.puntaje--mal .puntaje__estado { color: var(--error); }
.puntaje__barra { width: 100%; height: 8px; }

.metricas { display: grid; gap: var(--esp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
@media (min-width: 720px) { .metricas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.metricas div { display: grid; gap: 2px; }
.metricas dt { font: 500 var(--texto-chico)/1.3 var(--fuente-mono); letter-spacing: var(--tracking-etiquetas); text-transform: uppercase; color: var(--color-texto-suave); }
.metricas dd { margin: 0; font: 500 1.25rem/1.2 var(--fuente-mono); }

.diag-resumen { white-space: pre-line; max-width: 70ch; }
.pendientes { margin: 0; padding-left: 1.2em; display: grid; gap: var(--esp-2); }

/* En celular la franja del matraz se queda fija: para que funcione el contenedor es flex, no grid */
@media (max-width: 959px) { .cot { display: flex; flex-direction: column; gap: var(--esp-4); } }

/* Espacio reservado: nada salta cuando llegan los precios y el formulario (CLS) */
.cot__principal { min-height: 85svh; }
.cot-lateral__datos .resultado__precio { min-height: 2.4em; display: flex; align-items: center; }
.cot-lateral__datos > p:last-child { min-height: 3em; }
@media (min-width: 960px) { .cot-lateral__datos .resultado__precio { justify-content: center; } }

/* ---------- Agenda ---------- */
.agenda .cot-paso .fila { gap: var(--esp-2); }
.agenda__lateral .tarjeta { gap: var(--esp-3); }
.agenda__lateral h3 { font-size: var(--texto-h3); }
@media (max-width: 959px) {
  /* En celular la ayuda de la llamada va debajo del formulario, no fija arriba */
  .cot > .agenda__lateral { position: static; order: 2; margin-inline: 0; }
}

/* ---------- Soluciones, rubros y comunas ---------- */
.lista-precios { list-style: none; margin: var(--esp-3) 0; padding: 0; display: grid; gap: var(--esp-2); }
.lista-precios li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-3); padding-block: var(--esp-2); border-bottom: var(--borde-ancho) solid var(--color-borde); }
.lista-precios li:last-child { border-bottom: 0; }
.lista-precios .dato { white-space: nowrap; font-weight: 500; }

/* ---------- Aviso de cookies fijo y botón de enlace ---------- */
.cookies-pie { position: fixed; inset-inline: var(--esp-3); bottom: calc(var(--esp-3) + env(safe-area-inset-bottom)); z-index: 70; max-width: 960px; margin-inline: auto; }
.cookies-pie .cookies { max-height: 34dvh; overflow: auto; } /* no tapa los botones principales (WCAG 2.4.11) */
.enlace-boton { all: unset; cursor: pointer; color: inherit; text-decoration: underline; min-height: 32px; display: inline-flex; align-items: center; }
.enlace-boton:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.pie a, .pie .enlace-boton { min-height: 32px; display: inline-flex; align-items: center; }
.pie .enlace-boton { color: var(--cobalto-claro); }

/* ---------- Cómo trabajamos: línea de tiempo ---------- */
.linea-tiempo { position: relative; }
.linea-tiempo__riel { position: absolute; left: 20px; top: 24px; bottom: 24px; width: 4px; border-radius: 2px; background: var(--color-borde); overflow: hidden; }
.linea-tiempo__progreso { position: absolute; inset: 0; background: var(--color-marca); transform-origin: top; }
.linea-tiempo__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-6); }
.linea-tiempo__paso { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: var(--esp-4); align-items: start; }
.linea-tiempo__paso h3 { font-size: var(--texto-h3); margin: var(--esp-1) 0 var(--esp-2); }
.linea-tiempo__paso p { margin: 0 0 var(--esp-2); }
.linea-tiempo__marca { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--boton-principal-fondo); color: var(--boton-principal-texto); font: 500 .9375rem/1 var(--fuente-mono); border: var(--borde-ancho) solid var(--boton-principal-fondo); transition: background-color var(--dur-media) var(--curva-salida), color var(--dur-media), border-color var(--dur-media); }
/* Con movimiento: las etapas que aún no llegan se ven apagadas (solo el círculo; el texto siempre se lee) */
.linea-tiempo--viva .linea-tiempo__paso:not(.linea-tiempo__paso--activo) .linea-tiempo__marca { background: var(--color-superficie); color: var(--color-texto-suave); border-color: var(--color-borde); }
@media (prefers-reduced-motion: reduce) { .linea-tiempo__marca { transition: none; } }

/* ---------- Asistente con IA ---------- */
.asistente__boton { position: fixed; left: var(--esp-4); bottom: calc(var(--esp-4) + env(safe-area-inset-bottom)); z-index: 55; box-shadow: var(--sombra-2); }
.asistente { position: fixed; left: var(--esp-3); right: var(--esp-3); bottom: calc(var(--esp-3) + env(safe-area-inset-bottom)); z-index: 65; display: grid; grid-template-rows: auto minmax(120px, 1fr) auto; gap: var(--esp-3);
  max-height: min(80dvh, 620px); padding: var(--esp-4); background: var(--color-superficie); color: var(--color-texto); border: var(--borde-ancho) solid var(--color-borde); border-radius: var(--radio-grande); box-shadow: var(--sombra-2); }
@media (min-width: 640px) { .asistente { left: var(--esp-4); right: auto; width: 420px; } }
.asistente__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--esp-3); }
.asistente__cab h2 { font-size: var(--texto-h3); margin: 0; }
.asistente__log { overflow-y: auto; display: grid; gap: var(--esp-2); align-content: start; padding-right: var(--esp-1); }
.asistente__msg { max-width: 92%; padding: 10px 14px; border-radius: var(--radio-medio); background: var(--color-fondo); border: var(--borde-ancho) solid var(--color-borde); }
.asistente__msg p { margin: 0; font-size: .9375rem; max-width: none; white-space: pre-wrap; }
.asistente__msg--usuario { justify-self: end; background: var(--boton-principal-fondo); color: var(--boton-principal-texto); border-color: transparent; }
.asistente__msg--espera p { color: var(--color-texto-suave); }
.asistente__msg--accion { background: transparent; border: 0; padding: 0; max-width: none; }
.asistente__form { display: grid; gap: var(--esp-2); position: relative; }
.asistente__fila { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.asistente__persona, .asistente__wa { flex: 1 1 150px; justify-content: center; }
.asistente__fila .entrada { flex: 1; min-width: 0; }

/* Los datos largos (por ejemplo un horario) pueden pasar a la línea siguiente en vez de ensanchar la pantalla */
.hero__pruebas .chip { white-space: normal; max-width: 100%; }
.cuadricula > * { min-width: 0; }
.pie .enlace-boton { min-height: var(--tamano-tactil); }
.asistente .opcion__texto small { font-size: .8125rem; }
.asistente__quien { margin: 2px 0 0; font: 500 var(--texto-chico)/1.3 var(--fuente-mono); color: var(--color-chip-texto); }
.asistente__autor { font: 500 .75rem/1.2 var(--fuente-mono) !important; color: var(--color-texto-suave); margin-bottom: 2px !important; }
.asistente__msg--humano { border-color: var(--color-marca); }
.asistente__msg--sistema { justify-self: center; max-width: 100%; background: transparent; border: 0; padding: 2px 8px; }
.asistente__msg--sistema p { font-size: .875rem; color: var(--color-texto-suave); text-align: center; }
.asistente__areas { display: grid; gap: var(--esp-2); }
.asistente__areas .opcion { min-height: 44px; }
.asistente__persona { justify-self: start; }
.asistente__nota { margin: 0; font-size: .875rem; }
.asistente { grid-template-rows: auto minmax(120px, 1fr) auto auto auto; }
.asistente { display: flex; flex-direction: column; overflow-y: auto; }
.asistente > * + * { margin-top: var(--esp-3); }
.asistente__log { flex: 1 1 auto; min-height: 140px; }

/* Avatares ilustrados de los asistentes virtuales */
.asistente__autor { display: flex; align-items: center; gap: var(--esp-2); }
.asistente__avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; background: var(--color-chip-fondo); }
.asistente__avatar--grande { width: 44px; height: 44px; }