/* Identidad de CEDIC (cedicdiagnostico.com.ar): rojo #D83920 / #B12D16, barra #a81010, Montserrat + Roboto */
:root {
  --marca: #d83920;
  --marca-oscura: #b12d16;
  --acento: #d83920;
  --fondo-app: #f7f4f3;
  --fondo-chat: #f6f0ee;
  --trama: rgba(216, 57, 32, 0.07);
  --barra: #a81010;
  --barra-texto: #ffffff;
  --barra-sub: rgba(255, 255, 255, 0.85);
  --burbuja-yo: #fbe2dc;
  --burbuja-bot: #ffffff;
  --texto: #303030;
  --texto-suave: #6e6e6e;
  --tilde-leido: #1e88e5;
  --enlace: #b12d16;
  --tarjeta: #ffffff;
  --borde: #ece4e2;
  --redactar: #f2ecea;
  --campo: #ffffff;
  --sombra: 0 1px 0.5px rgba(48, 20, 16, 0.14);
  --chip: #ffffff;
  --chip-texto: #b12d16;
  --aviso: #fdeee9;
  --fuente-titulos: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-texto: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --marca: #e8573c; --marca-oscura: #c9452c; --acento: #ff7a5c; --fondo-app: #161112; --fondo-chat: #120d0e;
    --trama: rgba(255, 255, 255, 0.025); --barra: #2a1716; --barra-texto: #f3eceb; --barra-sub: #b3a6a4;
    --burbuja-yo: #5a2219; --burbuja-bot: #262021; --texto: #ece6e5; --texto-suave: #a39897; --tilde-leido: #64b5f6;
    --enlace: #ff8a70; --tarjeta: #262021; --borde: #3a2f2f; --redactar: #221c1d; --campo: #342b2c;
    --sombra: 0 1px 0.5px rgba(0, 0, 0, 0.35); --chip: #262021; --chip-texto: #ff8a70; --aviso: #3a2620;
  }
}
:root[data-theme="dark"] {
  --marca: #e8573c; --marca-oscura: #c9452c; --acento: #ff7a5c; --fondo-app: #161112; --fondo-chat: #120d0e;
  --trama: rgba(255, 255, 255, 0.025); --barra: #2a1716; --barra-texto: #f3eceb; --barra-sub: #b3a6a4;
  --burbuja-yo: #5a2219; --burbuja-bot: #262021; --texto: #ece6e5; --texto-suave: #a39897; --tilde-leido: #64b5f6;
  --enlace: #ff8a70; --tarjeta: #262021; --borde: #3a2f2f; --redactar: #221c1d; --campo: #342b2c;
  --sombra: 0 1px 0.5px rgba(0, 0, 0, 0.35); --chip: #262021; --chip-texto: #ff8a70; --aviso: #3a2620;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--fondo-app);
  color: var(--texto);
  font: 15px/1.45 var(--fuente-texto);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; }

.pantalla { height: 100dvh; max-width: 760px; margin: 0 auto; }

/* ── Bienvenida / permiso ───────────────────────── */
.bienvenida { display: flex; align-items: center; justify-content: center; padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); overflow-y: auto; }
.bienvenida-cuerpo { width: 100%; max-width: 420px; text-align: center; }
.logo { width: 190px; height: auto; }
.bienvenida h1 { font-family: var(--fuente-titulos); font-weight: 600; font-size: 22px; margin: 18px 0 4px; letter-spacing: -0.01em; }
.bajada { color: var(--texto-suave); margin: 0 0 24px; }
.tarjeta-permiso { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px; padding: 24px 20px; text-align: left; }
.tarjeta-permiso h2 { font-family: var(--fuente-titulos); font-weight: 600; font-size: 18px; margin: 12px 0 6px; }
.tarjeta-permiso p { margin: 0 0 16px; color: var(--texto-suave); }
.campana { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--acento) 16%, transparent); color: var(--marca); }
.boton-principal { width: 100%; border: 0; border-radius: 24px; font-family: var(--fuente-titulos); letter-spacing: 0.01em; padding: 13px 18px; background: var(--marca); color: #fff; font-weight: 600; font-size: 16px; }
.boton-principal:active { background: var(--marca-oscura); }
.boton-principal:disabled { opacity: 0.6; cursor: default; }
.boton-secundario { margin-top: 16px; width: 100%; border: 1px solid var(--marca); border-radius: 24px; padding: 11px 18px; background: transparent; color: var(--marca); font-weight: 600; }
.boton-texto { display: block; margin: 12px auto 0; border: 0; background: none; color: var(--texto-suave); text-decoration: underline; padding: 6px; }
.estado { min-height: 1.4em; margin: 12px 0 0 !important; font-size: 14px; }
.estado.error { color: #c0392b; }
.pasos { margin: 0 0 8px; padding-left: 22px; }
.pasos li { margin-bottom: 8px; }
.icono-en-linea { vertical-align: -3px; color: #1e88e5; }

/* ── Chat ───────────────────────────────────────── */
.chat { display: flex; flex-direction: column; background: var(--fondo-chat); }
.barra { display: flex; align-items: center; gap: 12px; background: var(--barra); color: var(--barra-texto); padding: calc(10px + env(safe-area-inset-top)) 12px 10px 14px; flex: none; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: #fff; flex: none; display: grid; place-items: center; }
.avatar img { width: 26px; height: 26px; }
.barra-texto { flex: 1; min-width: 0; }
.barra-nombre { font-family: var(--fuente-titulos); font-weight: 600; font-size: 16px; }
.barra-estado { font-size: 13px; color: var(--barra-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boton-icono { position: relative; border: 0; background: none; color: var(--barra-texto); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.boton-icono:active { background: rgba(255, 255, 255, 0.12); }
.punto { position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: #f5a623; box-shadow: 0 0 0 2px var(--barra); }

.mensajes {
  flex: 1; overflow-y: auto; padding: 10px 16px 6px; display: flex; flex-direction: column; gap: 2px;
  background-color: var(--fondo-chat);
  background-image: radial-gradient(var(--trama) 1.5px, transparent 1.6px), radial-gradient(var(--trama) 1.5px, transparent 1.6px);
  background-size: 26px 26px; background-position: 0 0, 13px 13px;
  overscroll-behavior: contain;
}
.aviso-cifrado { align-self: center; max-width: 92%; text-align: center; background: var(--aviso); color: var(--texto); font-size: 12.5px; border-radius: 8px; padding: 6px 10px; margin: 6px 0 10px; box-shadow: var(--sombra); }
.separador-dia { align-self: center; background: var(--tarjeta); color: var(--texto-suave); font-size: 12.5px; border-radius: 8px; padding: 4px 10px; margin: 10px 0 6px; box-shadow: var(--sombra); }

.burbuja { position: relative; max-width: min(82%, 520px); padding: 6px 8px 8px 9px; border-radius: 8px; box-shadow: var(--sombra); word-wrap: break-word; overflow-wrap: anywhere; margin-top: 4px; }
.burbuja.yo { align-self: flex-end; background: var(--burbuja-yo); border-top-right-radius: 2px; }
.burbuja.bot { align-self: flex-start; background: var(--burbuja-bot); border-top-left-radius: 2px; }
.burbuja.seguida { margin-top: 1px; border-radius: 8px; }
.burbuja .cuerpo { white-space: normal; }
.burbuja .cuerpo a { color: var(--enlace); }
.burbuja .meta { float: right; margin: 6px 0 -4px 10px; font-size: 11px; color: var(--texto-suave); display: inline-flex; align-items: center; gap: 3px; line-height: 1; }
.tilde { width: 16px; height: 11px; }
.tilde.leido { color: var(--tilde-leido); }
.burbuja.error { opacity: 0.75; }
.burbuja .reintentar { display: block; margin-top: 4px; border: 0; background: none; color: #c0392b; font-size: 12.5px; padding: 0; text-decoration: underline; }

.escribiendo { align-self: flex-start; background: var(--burbuja-bot); border-radius: 8px; border-top-left-radius: 2px; padding: 10px 12px; box-shadow: var(--sombra); margin-top: 4px; display: flex; gap: 4px; }
.escribiendo span { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-suave); animation: rebote 1.2s infinite ease-in-out; }
.escribiendo span:nth-child(2) { animation-delay: 0.15s; }
.escribiendo span:nth-child(3) { animation-delay: 0.3s; }
@keyframes rebote { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .escribiendo span { animation: none; } }

.sugerencias { display: flex; gap: 8px; overflow-x: auto; padding: 6px 12px; flex: none; scrollbar-width: none; }
.sugerencias button { flex: none; border: 1px solid var(--borde); background: var(--chip); color: var(--chip-texto); border-radius: 18px; padding: 7px 14px; font-weight: 500; box-shadow: var(--sombra); }

.redactar { display: flex; align-items: flex-end; gap: 8px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--redactar); flex: none; }
.redactar textarea { flex: 1; resize: none; border: 0; outline: none; border-radius: 22px; padding: 11px 16px; background: var(--campo); color: var(--texto); font: inherit; font-size: 16px; line-height: 1.35; max-height: 140px; }
.redactar textarea::placeholder { color: var(--texto-suave); }
.boton-enviar { flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--marca); color: #fff; display: grid; place-items: center; }
.boton-enviar:disabled { opacity: 0.5; cursor: default; }
.boton-enviar svg { margin-left: 2px; }

.aviso-flotante { position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: calc(100% - 32px); background: #323739; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 14px; z-index: 10; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }