/* Dílogo — sistema visual compartido (inicio, facilitador, participante, proyección).
   Todo deriva de la marca aprobada: índigo = estructura y acción principal, teal = conversación en vivo y éxito,
   lavanda = contexto y ayudas, blanco cálido = fondo. Las variables --q-* son las que usa resultados.css. */

:root{
  /* Marca */
  --dilogo-indigo:#1E2156; --dilogo-teal:#2CB1A3; --dilogo-lavender:#B7A7F6;
  --dilogo-warm-white:#FAF8F3; --dilogo-graphite:#2E2E35;

  /* Superficies */
  --surface-page:#FAF8F3; --surface-card:#FFFFFF;
  --surface-indigo-soft:#F1F1F8; --surface-teal-soft:#EAF8F6; --surface-lavender-soft:#F3F0FE;

  /* Texto */
  --text-primary:#1E2156; --text-secondary:#68687A; --text-muted:#9292A2;
  --teal-ink:#1C7F74;            /* teal legible sobre fondos claros (texto) */
  --lavender-ink:#5B4BC4;        /* lavanda legible sobre fondos claros (texto) */

  /* Bordes */
  --border-subtle:#E4E2EA; --border-strong:#CBC8DA;

  /* Acciones y estados */
  --primary:#1E2156; --primary-hover:#292D70; --primary-active:#171A45;
  --conversation:#2CB1A3; --context:#B7A7F6;
  --success:#2CB1A3; --warning:#D49A40; --danger:#C95B68;
  --danger-soft:#FBEFF1; --danger-line:#F0CDD2; --danger-ink:#A23C4A;

  /* Radios, sombra, foco */
  --radius-xs:6px; --radius-sm:10px; --radius-md:14px; --radius-lg:18px; --radius-xl:24px; --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(30,33,86,.03), 0 10px 30px rgba(30,33,86,.06);
  --focus:0 0 0 3px rgba(183,167,246,.55);

  /* Espaciado (sistema de 4 px) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px;

  /* Movimiento */
  --t-fast:150ms; --t-base:200ms;

  --font:"Manrope", Inter, system-ui, sans-serif;
  --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Alias que usa resultados.css */
  --q-acento:var(--primary); --q-acento-hover:var(--primary-hover); --q-acento-suave:var(--surface-lavender-soft);
  --q-acento-sel:#E8E2FD; --q-acento-borde:#D9D1FA; --q-acento-velo:#F8F6FF;
  --q-t2:#249A8E; --q-t2-suave:var(--surface-teal-soft);
  --q-lienzo:#FFFFFF; --q-superficie:var(--surface-page); --q-superficie-2:var(--surface-indigo-soft);
  --q-borde:var(--border-subtle); --q-borde-fuerte:var(--border-strong);
  --q-texto:var(--text-primary); --q-texto-medio:#4A4C74; --q-texto-tenue:var(--text-secondary); --q-texto-inverso:#fff;
  --q-fuente:var(--font); --q-fuente-titulo:var(--font); --q-fuente-mono:var(--mono);
  --q-sombra:0 1px 2px rgba(30,33,86,.04), 0 6px 18px rgba(30,33,86,.05);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; min-width:320px; font-family:var(--font); font-size:15px; line-height:1.55; font-weight:400; color:var(--text-primary); background:var(--surface-page);}
[hidden]{display:none !important;}
button,input,select,textarea{font:inherit; color:inherit;}
button{cursor:pointer;}
button:disabled{opacity:.45; cursor:not-allowed;}
h1,h2,h3,h4,p{margin-top:0;}
h1{font-size:clamp(28px,4.2vw,44px); font-weight:700; line-height:1.1; letter-spacing:-.03em; margin-bottom:var(--s-3);}
h2{font-size:clamp(22px,2.6vw,30px); font-weight:700; line-height:1.2; letter-spacing:-.025em;}
h3{font-size:20px; font-weight:700; letter-spacing:-.015em;}
p{color:var(--text-secondary);}
a{color:inherit;}
img{max-width:100%;}
:focus-visible{outline:2px solid var(--dilogo-indigo); outline-offset:2px; box-shadow:var(--focus);}
.small{font-size:13px;}
.micro{font-size:11.5px;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.icono{flex-shrink:0; vertical-align:-.2em;}

/* ---- Marca y barra superior ---- */
.topbar{height:64px; padding:0 var(--s-6); background:rgba(250,248,243,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--border-subtle); display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); position:sticky; top:0; z-index:20;}
.marca-boton{border:0; background:transparent; padding:0; display:flex; align-items:center; gap:var(--s-3); border-radius:var(--radius-sm);}
.marca-icono{height:36px; width:auto; display:block;}
.marca-logo{height:30px; width:auto; display:block;}
.topbar-actions{display:flex; align-items:center; gap:var(--s-3);}

/* ---- Página ---- */
.page{width:min(1120px, calc(100% - 48px)); margin:0 auto; padding:var(--s-12) 0 var(--s-16);}
.page-narrow{width:min(920px, calc(100% - 48px));}
.page-wide{width:min(1240px, calc(100% - 48px));}
.eyebrow{display:inline-block; color:var(--lavender-ink); font-weight:600; text-transform:uppercase; letter-spacing:.07em; font-size:11.5px; margin-bottom:var(--s-3);}
.section-heading{margin-bottom:var(--s-8);}
.split-heading{display:flex; justify-content:space-between; gap:var(--s-6); align-items:flex-end; flex-wrap:wrap;}
.split-heading p{margin-bottom:0;}

/* ---- Botones ---- */
.btn,.primary,.secondary,.ghost,.danger-soft{display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2); min-height:44px; padding:0 var(--s-5); border-radius:var(--radius-sm); font-weight:600; font-size:14.5px; line-height:1.2; border:1px solid transparent; text-decoration:none; text-align:center; transition:background var(--t-fast) ease, border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;}
.primary{color:#fff; background:var(--primary);}
.primary:hover:not(:disabled){background:var(--primary-hover);}
.primary:active:not(:disabled){background:var(--primary-active);}
.secondary{background:var(--surface-card); border-color:var(--border-strong); color:var(--primary);}
.secondary:hover:not(:disabled){background:var(--surface-indigo-soft);}
.ghost{background:transparent; color:var(--text-primary);}
.ghost:hover:not(:disabled){background:var(--surface-indigo-soft);}
.danger-soft{background:var(--danger-soft); color:var(--danger-ink); border-color:var(--danger-line);}
.danger-soft:hover:not(:disabled){background:#F8E3E6;}
.sm{min-height:36px; padding:0 var(--s-3); font-size:13.5px; border-radius:var(--radius-sm);}
.wide{width:100%;}
.icon-btn{width:36px; height:36px; min-height:36px; padding:0; border-radius:var(--radius-sm); border:1px solid var(--border-subtle); background:var(--surface-card); color:var(--text-secondary); display:inline-grid; place-items:center; transition:background var(--t-fast) ease, color var(--t-fast) ease;}
.icon-btn:hover:not(:disabled){background:var(--surface-indigo-soft); color:var(--primary);}
@media (pointer:coarse){ .sm{min-height:44px;} .icon-btn{width:44px; height:44px; min-height:44px;} }

/* ---- Formularios ---- */
label.campo-et{display:grid; gap:var(--s-2); font-size:13.5px; font-weight:600; margin:0 0 var(--s-5); color:var(--text-primary);}
input,select,textarea{border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface-card); padding:12px 14px; color:var(--text-primary); outline:none; width:100%; min-height:44px; transition:border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;}
input:focus,select:focus,textarea:focus{border-color:var(--dilogo-indigo); box-shadow:var(--focus);}
input::placeholder,textarea::placeholder{color:var(--text-muted);}
textarea{resize:vertical; line-height:1.5;}
input[type=checkbox],input[type=radio]{width:auto; min-height:0; accent-color:var(--dilogo-indigo);}
.nota{font-size:13px; color:var(--text-secondary); margin:var(--s-2) 0 0;}
.fila-doble{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4);}
.opcion-fila{display:flex; gap:var(--s-3); align-items:flex-start; padding:var(--s-3) var(--s-4); border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-card); margin-bottom:var(--s-3); cursor:pointer;}
.opcion-fila:has(input:checked){border-color:var(--dilogo-indigo); background:var(--surface-lavender-soft);}
.opcion-fila input{margin-top:4px;}
.opcion-fila strong{display:block; font-size:14.5px;}
.opcion-fila span{display:block; font-size:13px; color:var(--text-secondary);}
.opcion-fila.deshabilitada{opacity:.6; cursor:not-allowed;}

/* ---- Tarjetas y elementos sueltos ---- */
.card{background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:var(--s-6); box-shadow:var(--shadow-card);}
.badge{display:inline-flex; align-items:center; gap:6px; white-space:nowrap; border-radius:var(--radius-pill); background:var(--surface-lavender-soft); color:var(--lavender-ink); padding:4px 10px; font-size:12px; font-weight:600;}
.badge::before{content:none;}
.badge.dot::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor;}
.badge.teal{background:var(--surface-teal-soft); color:var(--teal-ink);}
.badge.indigo{background:var(--surface-indigo-soft); color:var(--primary);}
.badge.neutral{background:var(--surface-indigo-soft); color:var(--text-secondary);}
.badge.warning{background:#FBF3E4; color:#8A5F17;}
.badge.live::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--dilogo-teal); animation:latido 1.8s ease-in-out infinite;}
@keyframes latido{0%,100%{opacity:1;} 50%{opacity:.35;}}
.aviso{margin:0 0 var(--s-4); padding:var(--s-3) var(--s-4); border-radius:var(--radius-sm); font-size:14px; font-weight:600; background:var(--danger-soft); color:var(--danger-ink); border:1px solid var(--danger-line);}
.aviso.ok{background:var(--surface-teal-soft); color:var(--teal-ink); border-color:#BFE7E1;}
.tip{margin-top:var(--s-5); padding:var(--s-4); border-radius:var(--radius-md); background:var(--surface-lavender-soft); color:var(--primary);}
.tip strong{font-size:13px;}
.tip p{font-size:13px; margin:var(--s-1) 0 0; color:var(--text-secondary);}
.tabs{display:flex; gap:var(--s-2); margin-bottom:var(--s-4); flex-wrap:wrap;}
.tabs button{border:1px solid var(--border-subtle); background:var(--surface-card); padding:6px 14px; min-height:36px; border-radius:var(--radius-pill); color:var(--text-secondary); font-size:13px; font-weight:600;}
.tabs button.active{background:var(--primary); color:#fff; border-color:var(--primary);}
.barra{display:block; height:6px; border-radius:var(--radius-pill); background:var(--surface-indigo-soft); overflow:hidden;}
.barra i{display:block; height:100%; width:0; background:var(--dilogo-teal); border-radius:inherit; transition:width 220ms ease;}
.mono{font-family:var(--mono); letter-spacing:.06em;}

/* ---- Cajón lateral y modal ---- */
.drawer-backdrop{position:fixed; inset:0; background:rgba(30,33,86,.28); z-index:50; display:flex; justify-content:flex-end; animation:aparece var(--t-base) ease;}
.drawer{width:min(460px,94vw); height:100%; background:var(--surface-card); padding:var(--s-8) var(--s-6); box-shadow:-24px 0 60px rgba(30,33,86,.14); position:relative; overflow:auto; animation:entra-derecha var(--t-base) ease;}
.drawer-close{position:absolute; right:var(--s-4); top:var(--s-4);}
.drawer h2{font-size:24px; margin-bottom:var(--s-3); padding-right:var(--s-10);}
.quote-card{background:var(--surface-lavender-soft); border-left:3px solid var(--dilogo-lavender); border-radius:var(--radius-sm); padding:var(--s-3) var(--s-4); color:var(--text-primary); overflow-wrap:anywhere; margin-bottom:var(--s-4);}
.privacy-note{font-size:13px; background:var(--surface-indigo-soft); color:var(--text-secondary); padding:var(--s-3); border-radius:var(--radius-sm); margin:var(--s-3) 0 var(--s-4);}
.privacy-note.alerta{background:var(--danger-soft); color:var(--danger-ink); border:1px solid var(--danger-line); font-weight:600;}
@keyframes aparece{from{opacity:0;} to{opacity:1;}}
@keyframes entra-derecha{from{transform:translateX(24px); opacity:.6;} to{transform:none; opacity:1;}}

/* ---- Estados de marca: cargando, vacío, error, reconexión ---- */
.par-burbujas{display:inline-flex; align-items:center; width:64px; height:32px; position:relative;}
.par-burbujas i{position:absolute; width:28px; height:28px; border-radius:50%; top:2px;}
.par-burbujas i:first-child{left:0; background:var(--dilogo-teal);}
.par-burbujas i:last-child{left:20px; background:var(--dilogo-lavender); mix-blend-mode:multiply;}
.par-burbujas.anima i:first-child{animation:une-izq 1.8s ease-in-out infinite;}
.par-burbujas.anima i:last-child{animation:une-der 1.8s ease-in-out infinite;}
@keyframes une-izq{0%,100%{transform:translateX(0);} 50%{transform:translateX(10px);}}
@keyframes une-der{0%,100%{transform:translateX(0);} 50%{transform:translateX(-10px);}}
.estado-centrado{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:var(--s-3); padding:var(--s-12) var(--s-4);}
.estado-centrado h2{margin:var(--s-2) 0 0; font-size:22px;}
.estado-centrado p{margin:0; max-width:420px;}
.detalle-tecnico{font-size:12px; color:var(--text-muted); font-family:var(--mono); margin-top:var(--s-2);}
.banner-reconexion{position:fixed; left:50%; bottom:var(--s-5); transform:translateX(-50%); z-index:90; display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3) var(--s-5); border-radius:var(--radius-pill); background:var(--primary); color:#fff; font-size:14px; font-weight:600; box-shadow:0 12px 32px rgba(30,33,86,.24); max-width:calc(100vw - 32px);}
.banner-reconexion.ok{background:var(--dilogo-teal); color:#0B3B36;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}
@media (max-width:780px){
  .topbar{padding:0 var(--s-4);}
  .page,.page-narrow,.page-wide{width:min(100% - 32px,100%); padding-top:var(--s-8);}
  .fila-doble{grid-template-columns:1fr;}
}