@import url('https://fonts.googleapis.com/css2?family=Abel&family=Hanken+Grotesk:wght@700;800&family=Sora:wght@500;600&display=swap');

:root {
  --color-primario: #11367d;
  --color-acento: #fe9239;
  --tinta-titulo: #121212;
  --tinta-cuerpo: #1c2430;
  --tinta-secundaria: #667085;
  --tinta-terciaria: #98a2b3;
  --color-ok: #027a48;
  --color-aviso: #b54708;
  --color-error: #b42318;
  --fondo-chat: #f3f5f4;
  --fondo-panel: #fafafa;
  --fondo-boton-neutro: #f2f4f3;
  --borde-suave: rgba(0, 0, 0, .06);
  --borde-medio: rgba(0, 0, 0, .14);
  --primario-tinte-suave: rgba(17, 54, 125, .1);
  --primario-tinte-borde: rgba(17, 54, 125, .22);
  --radio-control: 8px;
  --radio-panel: 10px;
  --radio-burbuja: 14px;
  --fuente-titulo: 'Hanken Grotesk', sans-serif;
  --fuente-cuerpo: 'Abel', sans-serif;
  --fuente-etiqueta: 'Sora', sans-serif;
}

@keyframes enmoPulse { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
@keyframes enmoSlideInLeft { from { transform: translateX(-100%) } to { transform: translateX(0) } }
@keyframes enmoSlideUp { from { transform: translateY(100%) } to { transform: translateY(0) } }
@keyframes enmoFadeIn { from { opacity: 0 } to { opacity: 1 } }

* { box-sizing: border-box; }
label { display: block; margin: 12px 0 4px; font-weight: 600; font-size: 14px; }
select, input[type="text"], input[type="number"], input[type="email"], input[type="password"] {
  width: 100%; padding: 9px 10px; border: 1px solid var(--borde-medio); border-radius: 8px; font: inherit; background: #fff;
}
select:disabled { background: #f1f3f5; color: var(--tinta-secundaria); }
.ayuda { color: var(--tinta-secundaria); font-size: 13px; margin-top: 4px; }
.oculto { display: none; }

/* --- Chat --- */

/* --- Login --- */
.fondo-login { margin: 0; background: #ffffff; font-family: var(--fuente-cuerpo); }
.login-tarjeta {
  max-width: 360px; margin: 0 auto; min-height: 100vh;
  display: flex; flex-direction: column; padding: 48px 28px 32px; box-sizing: border-box;
}
.login-logo { height: 34px; width: auto; align-self: center; margin-bottom: 28px; }
.login-encabezado { text-align: center; margin-bottom: 8px; }
.login-titulo { font-family: var(--fuente-titulo); font-weight: 800; font-size: 24px; color: var(--tinta-titulo); margin: 0; }
.login-tagline { font-size: 15px; color: var(--color-primario); margin: 6px 0 0; line-height: 1.4; }
.login-subtagline { font-family: var(--fuente-etiqueta); font-size: 12px; color: var(--tinta-secundaria); margin: 6px 0 0; }
.login-form { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.login-form label { font-family: var(--fuente-etiqueta); font-size: 12px; font-weight: 600; color: var(--tinta-titulo); margin-bottom: 6px; display: block; }
.login-form input {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: var(--radio-control);
  border: 1px solid var(--borde-medio); font: 15px var(--fuente-cuerpo);
}
.boton-primario {
  width: 100%; margin-top: 8px; padding: 13px; border: 0; border-radius: var(--radio-control);
  background: var(--color-primario); color: #fff; font-family: var(--fuente-cuerpo);
  font-size: 16px; font-weight: 600; cursor: pointer;
}
.boton-primario:disabled { background: #9aa5b1; cursor: not-allowed; }
.login-pie { margin-top: auto; text-align: center; font-family: var(--fuente-etiqueta); font-size: 11px; color: var(--tinta-terciaria); padding-top: 20px; }

/* --- Shell --- */
body { margin: 0; font-family: var(--fuente-cuerpo); background: #f6f7f9; }
#capaApp { position: relative; height: 100vh; overflow: hidden; background: var(--fondo-chat); max-width: 480px; margin: 0 auto; }
.pantalla { height: 100%; display: flex; flex-direction: column; }
.pantalla[hidden] { display: none; }
.pantalla-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 16px 28px; box-sizing: border-box; }

.encabezado {
  flex: none; background: var(--color-primario); padding: 20px 14px 14px; padding-top: max(20px, env(safe-area-inset-top));
  display: flex; align-items: center; gap: 12px; box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.encabezado-titulo { font-family: var(--fuente-titulo); font-weight: 700; font-size: 17px; color: #ffffff; }
.encabezado-info { flex: 1; min-width: 0; }
.encabezado-estado { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-family: var(--fuente-etiqueta); font-size: 11px; color: rgba(255,255,255,.75); }
.punto-en-linea { width: 6px; height: 6px; border-radius: 3px; background: #7fd99a; display: inline-block; }
.icono-boton, .encabezado-avatar {
  width: 34px; height: 34px; border-radius: 17px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 0; background: transparent; padding: 0; flex: none;
}
.encabezado-avatar { background: rgba(255,255,255,.16); }

/* --- Drawer --- */
.fondo { position: absolute; inset: 0; background: rgba(0,0,0,.42); z-index: 40; animation: enmoFadeIn .2s ease-out; }
.fondo.oculto { display: none; }
.drawer {
  position: absolute; top: 0; left: 0; bottom: 0; width: 78%; background: #ffffff; z-index: 41;
  display: flex; flex-direction: column; box-shadow: 2px 0 20px rgba(0,0,0,.18);
  animation: enmoSlideInLeft .24s cubic-bezier(.16,1,.3,1);
}
.drawer.oculto { display: none; }
.drawer-encabezado { background: var(--color-primario); padding: 20px 18px; padding-top: max(20px, env(safe-area-inset-top)); display: flex; flex-direction: column; gap: 6px; }
.drawer-avatar { width: 44px; height: 44px; border-radius: 22px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; }
.drawer-nombre { font-family: var(--fuente-titulo); font-weight: 700; font-size: 16px; color: #ffffff; margin-top: 6px; }
.drawer-correo { font-family: var(--fuente-etiqueta); font-size: 11.5px; color: rgba(255,255,255,.7); }
.drawer-nav { flex: 1; padding: 10px 0; display: flex; flex-direction: column; }
.drawer-fila {
  display: flex; align-items: center; gap: 12px; padding: 13px 18px; cursor: pointer; border: 0;
  background: transparent; width: 100%; text-align: left; font-family: var(--fuente-cuerpo); font-size: 15px; color: var(--tinta-titulo);
}
.drawer-pie { border-top: 1px solid var(--borde-suave); }
.drawer-fila--peligro { color: var(--color-error); padding: 15px 18px; }

/* --- Hoja inferior --- */
.hoja {
  position: absolute; left: 0; right: 0; bottom: 0; background: #ffffff; z-index: 41;
  border-radius: 16px 16px 0 0; padding: 18px 18px 26px; box-shadow: 0 -2px 20px rgba(0,0,0,.18);
  animation: enmoSlideUp .24s cubic-bezier(.16,1,.3,1); display: flex; flex-direction: column; gap: 10px;
  max-height: 70%; overflow-y: auto; box-sizing: border-box;
}
.hoja.oculto { display: none; }
.hoja-agarradera { width: 36px; height: 4px; border-radius: 2px; background: rgba(0,0,0,.15); align-self: center; margin-bottom: 4px; }

/* --- Chat --- */
.pantalla-cuerpo-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-lista { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.burbuja { border-radius: var(--radio-burbuja); padding: 10px 13px; font-size: 14.5px; line-height: 1.5; color: var(--tinta-cuerpo); }
.burbuja-asistente { align-self: flex-start; max-width: 88%; background: #fff; border: 1px solid var(--borde-suave); border-top-left-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.burbuja-gate { display: flex; flex-direction: column; gap: 12px; }
.etiqueta-micro { font-family: var(--fuente-etiqueta); font-size: 11px; font-weight: 600; color: var(--tinta-secundaria); text-transform: uppercase; letter-spacing: .03em; }
.gate-select { width: 100%; box-sizing: border-box; padding: 9px 10px; border-radius: var(--radio-control); border: 1px solid rgba(17,54,125,.3); font: 14px var(--fuente-cuerpo); background: #fbfcfd; margin-top: 5px; }
.gate-bonif-fila { display: flex; justify-content: space-between; align-items: baseline; }
.valor-bonificacion-acento { font-family: var(--fuente-titulo); font-weight: 700; font-size: 15px; color: var(--color-acento); }
.gate-slider { width: 100%; accent-color: var(--color-primario); margin-top: 5px; }
.gate-listo { display: flex; align-items: center; gap: 6px; font-family: var(--fuente-etiqueta); font-size: 12px; color: var(--color-ok); font-weight: 600; }

.burbuja-agente-envoltorio { align-self: flex-end; max-width: 86%; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.burbuja-agente { background: rgba(17,54,125,.1); border: 1px solid rgba(17,54,125,.18); border-top-right-radius: 4px; color: #0d2a5c; }
.chip-agente { background: var(--primario-tinte-suave); border: 1px solid var(--primario-tinte-borde); border-radius: 999px; padding: 6px 10px; display: flex; align-items: center; gap: 6px; font-family: var(--fuente-etiqueta); font-size: 12px; color: var(--color-primario); }
.agente-pie { display: flex; align-items: center; gap: 4px; padding-right: 2px; font-family: var(--fuente-etiqueta); font-size: 10.5px; color: var(--tinta-terciaria); }

.burbuja-pipeline { display: flex; flex-direction: column; gap: 9px; max-width: 88%; }
.pipeline-titulo { font-weight: 700; }
.pipeline-fila { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.pipeline-icono { display: flex; }
.pipeline-pulso { display: inline-flex; animation: enmoPulse 1.1s ease-in-out infinite; }

.tarjeta-cotizacion { width: 270px; max-width: 90%; box-shadow: 0 2px 8px rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.08); display: flex; flex-direction: column; gap: 10px; }
.cotizacion-encabezado { display: flex; align-items: center; gap: 10px; }
.cotizacion-icono-auto { width: 38px; height: 38px; border-radius: 19px; background: var(--primario-tinte-suave); display: flex; align-items: center; justify-content: center; flex: none; }
.cotizacion-vehiculo { font-family: var(--fuente-titulo); font-weight: 700; font-size: 15px; color: var(--tinta-titulo); }
.cotizacion-version { font-family: var(--fuente-etiqueta); font-size: 11px; color: var(--tinta-secundaria); }
.cotizacion-uso-paquete { font-family: var(--fuente-etiqueta); font-size: 12px; color: var(--tinta-secundaria); }
.separador { height: 1px; background: rgba(0,0,0,.07); }
.cotizacion-pendiente { font-family: var(--fuente-etiqueta); font-size: 12px; color: var(--tinta-secundaria); }
.cotizacion-enviado { display: flex; align-items: center; gap: 7px; font-family: var(--fuente-etiqueta); font-size: 12px; color: var(--color-ok); }
.boton-outline { margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; border-radius: var(--radio-control); border: 1px solid var(--color-primario); background: #fff; color: var(--color-primario); font-family: var(--fuente-cuerpo); font-size: 14px; font-weight: 600; text-decoration: none; }

.chat-adjuntar-menu { flex: none; padding: 8px 12px; display: flex; gap: 8px; background: #fff; border-top: 1px solid var(--borde-suave); }
.boton-adjunto { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; border-radius: 999px; border: 1px solid rgba(17,54,125,.3); background: #fbfcfd; font-family: var(--fuente-cuerpo); font-size: 13px; color: var(--color-primario); cursor: pointer; }
.chat-chips { flex: none; padding: 8px 12px 0; display: flex; gap: 6px; flex-wrap: wrap; background: #fff; }
.chip-adjunto { display: flex; align-items: center; gap: 5px; background: var(--primario-tinte-suave); border: 1px solid var(--primario-tinte-borde); border-radius: 999px; padding: 5px 8px; font-family: var(--fuente-etiqueta); font-size: 11.5px; color: var(--color-primario); }
.chip-quitar { cursor: pointer; display: flex; }

.chat-compositor { flex: none; padding: 8px 12px 14px; display: flex; align-items: flex-end; gap: 8px; background: #fff; }
.circulo-boton { width: 38px; height: 38px; border-radius: 19px; background: var(--fondo-boton-neutro); border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.circulo-boton--primario { background: var(--color-primario); color: #fff; }
.circulo-boton--primario.grabando { background: var(--color-error); }
.chat-compositor textarea { flex: 1; resize: none; min-height: 38px; max-height: 96px; padding: 9px 13px; border-radius: 19px; border: 1px solid rgba(0,0,0,.12); font: 14px var(--fuente-cuerpo); background: #f7f8f8; }
.chat-bloqueado { flex: none; padding: 10px 14px 16px; text-align: center; background: #fff; font-family: var(--fuente-etiqueta); font-size: 11.5px; color: var(--tinta-terciaria); }

/* --- Manual --- */
.form-manual { display: flex; flex-direction: column; gap: 14px; }
.campo label, .campo-inline-label { display: block; font-family: var(--fuente-etiqueta); font-size: 11px; font-weight: 600; color: var(--tinta-secundaria); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 5px; }
.campo select, .campo input {
  width: 100%; box-sizing: border-box; padding: 10px; border-radius: var(--radio-control);
  border: 1px solid var(--borde-medio); font: 14px var(--fuente-cuerpo); background: #fff;
}
.campo select:disabled { background: #f1f3f5; color: var(--tinta-secundaria); }
.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.panel-cobertura { background: var(--fondo-panel); border: 1px solid var(--borde-suave); border-radius: var(--radio-panel); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.valor-bonificacion { font-family: var(--fuente-titulo); font-weight: 700; font-size: 15px; color: var(--tinta-titulo); }
.fila-deducibles { display: flex; gap: 8px; }
.fila-deducibles .deducible { flex: 1; }
.adicional { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid #eef0f2; }
.adicional label { margin: 0; font-weight: 400; flex: 1; font-family: var(--fuente-cuerpo); font-size: 13px; color: var(--tinta-cuerpo); }
.adicional input, .adicional select { width: 120px; }
.errores { background: #fef3f2; border: 1px solid #fda29b; color: var(--color-error); border-radius: var(--radio-control); padding: 12px; }
.exito { background: #ecfdf3; border: 1px solid #6ce9a6; color: var(--color-ok); border-radius: var(--radio-control); padding: 12px; }

/* --- Historial --- */
.historial-lista { padding: 0; }
.historial-vacio { padding: 20px 16px; }
.historial-fila { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--borde-suave); cursor: pointer; background: #fff; }
.historial-avatar { width: 44px; height: 44px; border-radius: 22px; background: var(--primario-tinte-suave); display: flex; align-items: center; justify-content: center; flex: none; }
.historial-info { flex: 1; min-width: 0; }
.historial-vehiculo { font-family: var(--fuente-titulo); font-weight: 700; font-size: 14.5px; color: var(--tinta-titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.historial-sub { font-family: var(--fuente-etiqueta); font-size: 12px; color: var(--tinta-secundaria); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.historial-estado { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.historial-fecha { font-family: var(--fuente-etiqueta); font-size: 10.5px; color: var(--tinta-terciaria); }
.historial-badge { display: flex; align-items: center; gap: 4px; font-family: var(--fuente-etiqueta); font-size: 11px; font-weight: 600; }
.badge-listo { color: var(--color-ok); }
.badge-revision { color: var(--color-aviso); }
.badge-neutro { color: var(--tinta-secundaria); }
.sheet-encabezado { display: flex; align-items: center; gap: 10px; }
.aviso-revision { background: #fffaeb; border: 1px solid #fec84b; color: var(--color-aviso); border-radius: var(--radio-control); padding: 10px; font-size: 13px; }