:root{
  --bg:#0a0a0a;          /* fondo base (modo oscuro por defecto) */
  --panel:#0c0c0f;       /* panel principal */
  --panel-2:#09090b;     /* degradado del panel */
  --accent:#ef4444;      /* rojo marca (acentos) */
  --accent-2:#b91c1c;    /* rojo más oscuro (hover/sombra) */
  --text:#f3f4f6;        /* color de texto principal */
  --muted:#9ca3af;       /* texto secundario */
  --danger:#ef4444;      /* color de error/alerta */
  --bot:#121217;         /* fondo del mensaje del bot */
  --me:#ef4444;          /* acento para mensajes del usuario */

  --radius:18px;         /* radios globales */
  --pad:clamp(10px, 1.2vw, 16px); /* padding adaptativo */
  --fs:clamp(14px, 1.6vw, 15px);  /* font-size base */
  --fs-sm:clamp(11.5px, 1.2vw, 12.5px); /* font-size pequeño */
  --avatar:clamp(70px, 8vw, 80px);      /* tamaño del avatar */

  --logo-max: 620px;     /* ancho máximo del logo en preloader */
  --logo-scale: 1.6;     /* escala final del logo (animación) */
}


:root[data-theme="light"]{
  /* Overrides para tema claro */
  --bg:#ffffff;
  --panel:#ffffff;
  --panel-2:#ffffff;
  --accent:#dc2626;
  --accent-2:#991b1b;
  --text:#0f172a;
  --muted:#6b7280;
  --danger:#dc2626;
  --bot:#ffffff;
  --me:#fff5f5;
}

/* da degradado a fondo en el tema dark y también centran el div card */
*{ box-sizing:border-box }
html,body{ height:100% }

body{
  margin:0;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(239,68,68,.08), transparent 60%),
    radial-gradient(900px 700px at 100% 0%, rgba(185,28,28,.10), transparent 55%),
    linear-gradient(180deg, var(--bg), #050505 60%);
  color:var(--text);
  font: var(--fs)/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  display:flex; align-items:center; justify-content:center;
  padding: clamp(10px,2vw,20px);
}

:root[data-theme="light"] body{
  /* Fondo más claro y limpio en light */
  background:
    radial-gradient(900px 600px at 100% 0%, rgba(220,38,38,.05), transparent 60%),
    radial-gradient(900px 600px at 0% 100%, rgba(153,27,27,.04), transparent 60%),
    var(--bg);
}

/* personaliza la selección de texto y la thumb del scrollbar */
::selection{ background:rgba(239,68,68,.35); color:#fff }
:root[data-theme="light"] ::selection{ background:rgba(220,38,38,.18); color:#111827 }
::-webkit-scrollbar{ height:10px; width:10px }
::-webkit-scrollbar-thumb{
  background: linear-gradient(#b91c1c,#7f1d1d); border-radius:10px
}
:root[data-theme="light"] ::-webkit-scrollbar-thumb{
  background:linear-gradient(#ef4444,#b91c1c)
}

/* propiedades de div card para grid de las 4 filas de los botones */
.card{
  width:min(920px, 95vw);
  height:min(78svh, 700px);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid rgba(239,68,68,.12);
  border-radius:var(--radius);
  box-shadow: 0 18px 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
  display:grid; grid-template-rows:auto auto 1fr auto;
  overflow:hidden;
}

/* fondo y efectos para los botones en el div card en tema light*/
:root[data-theme="light"] .card{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid #e5e7eb;
  box-shadow:0 10px 30px rgba(16,24,40,.06);
}

/* Acomodo de avatar y estado Ready */
.header{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-bottom:1px solid rgba(239,68,68,.14);
  background: linear-gradient(180deg, #0d0d10e6, #0a0a0de6);
  position:relative;
}
:root[data-theme="light"] .header{
  background:#fffffff2;
  border-bottom:1px solid #e5e7eb;
}


/* estilos de avatar */
.avatar{
  width:var(--avatar); height:var(--avatar); border-radius:50%;
  background-color:#c7052f;
  background-image: url("../img/botpicture1.png");
  background-size:contain; background-position:center; background-repeat:no-repeat;
  box-shadow:0 0 0 3px #0b0f14cc, 0 0 16px #ef444480, 0 0 32px #ef444440;
  flex:0 0 auto;
}

:root[data-theme="dark"] .avatar {
  background-color: transparent;
}

/* estilos de titulo y subtitulo */
.title{ font-weight:650; letter-spacing:.2px; font-size:clamp(14px,2vw,16px); color:var(--text) }
.subtitle{ color:var(--muted); font-size:var(--fs-sm) }


/* animación de pulso y propiedades */
.status{
  position:absolute; right:16px; top:14px; color:var(--muted);
  font-size:var(--fs-sm); display:flex; align-items:center; gap:6px;
}
.pulse{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 0 var(--accent);
  animation:pulse 1.8s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 var(--accent)}
  70%{box-shadow:0 0 0 10px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

/* accesos rápidos de quickbar */
.quick{
  display:grid; gap:8px; padding:10px 12px;
  border-bottom:1px solid rgba(239,68,68,.12);
  background:#060606cc;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.quick button{
  padding:8px 12px; border-radius:10px; border:1px solid rgba(239,68,68,.20);
  background:linear-gradient(180deg,#111114,#0a0a0d);
  color:var(--text); cursor:pointer; font-size:clamp(12px,1.5vw,14px);
  transition:transform .08s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.quick button:hover{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(239,68,68,.12) inset, 0 6px 20px rgba(239,68,68,.15);
  transform:translateY(-1px);
}

/* estilos de quickbar en tema light */
:root[data-theme="light"] .quick{
  background:#fff;
  border-bottom:1px solid #e5e7eb;
}
:root[data-theme="light"] .quick button{
  background:#fff;
  color:var(--text);
  border:1px solid #e5e7eb;
  box-shadow:none;
}
:root[data-theme="light"] .quick button:hover{
  border-color:var(--accent);
  background:#fff7f7;
  box-shadow:0 6px 20px rgba(220,38,38,.10);
}

/* fondo del log donde están los mensajes */
.log{
  padding:16px; overflow:auto; display:flex; flex-direction:column; gap:10px;
  background:
    radial-gradient(600px 400px at 100% 100%, rgba(239,68,68,.12), transparent 60%),
    radial-gradient(600px 400px at 0% 0%, rgba(185,28,28,.08), transparent 50%);
}
:root[data-theme="light"] .log{
  background:
    radial-gradient(600px 400px at 100% 100%, rgba(220,38,38,.06), transparent 60%),
    radial-gradient(600px 400px at 0% 0%, rgba(153,27,27,.04), transparent 50%);
}

/* chats en forma de burbujas */
.msg{
  max-width:78%; padding:10px 12px; border-radius:14px; position:relative;
  backdrop-filter: blur(2px);
  box-shadow:0 6px 18px #0006, inset 0 1px 0 rgba(255,255,255,.04);
  word-wrap:break-word; white-space:pre-wrap;
  font-size:clamp(13px,1.6vw,15px);
}
.bot{ background:linear-gradient(180deg, var(--bot), #0e0e13); border:1px solid rgba(239,68,68,.12) }
.me { background:linear-gradient(180deg, rgba(239,68,68,.25), rgba(185,28,28,.2)); border:1px solid rgba(239,68,68,.45); align-self:flex-end }

/* overrides light que ayudan al cambio de tema */
:root[data-theme="light"] .bot{
  background:linear-gradient(180deg, #fff, #fbfbfb);
  border:1px solid #e5e7eb;
  box-shadow:0 6px 18px rgba(16,24,40,.06), inset 0 1px 0 rgba(255,255,255,.7);
}
:root[data-theme="light"] .me{
  background:linear-gradient(180deg, #fff, #fff5f5);
  border:1px solid rgba(220,38,38,.35);
}
.msg small{ color:var(--muted); display:block; margin-top:6px; font-size:clamp(10px,1.2vw,11px) }

/* indicador de "escribiendo" */
.typing{ display:inline-flex; gap:6px; align-items:center; }
.dot{ width:6px; height:6px; border-radius:50%; background:#9ca3af88; animation:bounce 1.3s infinite }
.dot:nth-child(2){ animation-delay:.15s } .dot:nth-child(3){ animation-delay:.3s }
@keyframes bounce{ 0%,100%{ transform: translateY(0); opacity:.5 } 50%{ transform: translateY(-4px); opacity:1 } }

/* medios y enlaces */
.msg-media{
  max-width:100%;
  border-radius:10px;
  display:block;
  margin:8px 0;
}
.msg-link{ margin-top:8px; }
.msg-link a{
  display:inline-flex; align-items:center; gap:6px;
  text-decoration:none;
  color: var(--accent);
  border-bottom: 1px dashed currentColor;
}
.msg-link a:hover{ border-bottom-style: solid; }

/* opciones "chips" */
.option-group{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px }
.option-chip{
  padding:8px 12px; border-radius:10px; border:1px solid rgba(239,68,68,.25);
  background:linear-gradient(180deg,#111114,#0a0a0d); color:var(--text); cursor:pointer;
  font-size:clamp(12px,1.5vw,14px);
}
.option-chip:hover{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(239,68,68,.12) inset, 0 6px 20px rgba(239,68,68,.15);
}
.nav-chip{
  padding:6px 10px; border-radius:10px; border:1px dashed rgba(239,68,68,.35);
  background:transparent; color:var(--text); cursor:pointer; font-size:12px;
}
.nav-chip:hover{ border-color:var(--accent) }


/* light para chips/nav */
:root[data-theme="light"] .option-chip{
  background:#fff; color:var(--text); border:1px solid #e5e7eb; box-shadow:none;
}
:root[data-theme="light"] .option-chip:hover{
  background:#fff7f7; border-color:var(--accent); box-shadow:0 6px 20px rgba(220,38,38,.10);
}
:root[data-theme="light"] .nav-chip{
  background:#fff; color:var(--text); border:1px dashed #e5e7eb;
}
:root[data-theme="light"] .nav-chip:hover{
  border-color:var(--accent); background:#fff7f7;
}

/* botones de tema/idioma en header */
#themeToggleBtn,
#langToggleBtn{
  position:absolute;
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:12px;
  border:none;
  background:linear-gradient(180deg,#111114,#0a0a0d);
  color:var(--text);
  cursor:pointer;
  padding:0;
  transition: box-shadow .15s ease;
}
#themeToggleBtn:hover,
#langToggleBtn:hover{ box-shadow:0 6px 18px rgba(239,68,68,.18) }

#themeToggleBtn{ right:72px;  top:10px; }
#langToggleBtn { right:120px; top:10px; }

#themeToggleBtn img,
#langToggleBtn img{
  width:20px; height:20px; display:block; object-fit:contain;
}

#langToggleBtn img{ object-fit:cover; border-radius:3px }

/* lights pills claras */
:root[data-theme="light"] #themeToggleBtn,
:root[data-theme="light"] #langToggleBtn{
  background:linear-gradient(180deg,#ffffff,#f3f4f6);
  border:none;
}

/* preloader y animaciones del logo */
#preloader{
  position:fixed; inset:0; z-index:9999;
  background:#fff;
  display:grid; place-items:center;
  transition:opacity .5s ease, visibility .5s ease;
}
:root[data-theme="dark"] #preloader{ background:#000 }

/* logo preloader */
.logo-img{
  width: min(70vw, var(--logo-max));
  height: auto;
  filter: drop-shadow(0 0 20px rgba(239,68,68,.25));
  transform-origin:center;
  opacity:0; transform: scale(.9);
  will-change: transform, opacity;
  animation: popIn .9s cubic-bezier(.2,.8,.2,1) .1s forwards;
}
.logo-img.pulse{
  animation: popIn 1s cubic-bezier(.9,.8,.8,1) .5s forwards,
             breathe 2.4s ease-in-out 1s infinite;
}
#preloader.hidden{ opacity:0; visibility:hidden }

@keyframes popIn{
  0%   { transform: scale(.6);  opacity:0; }
  60%  { transform: scale(calc(var(--logo-scale) * 1.25)); opacity:1; }
  100% { transform: scale(var(--logo-scale)); opacity:1; }
}
@keyframes breathe{
  0%,100%{ transform: scale(var(--logo-scale)); }
  50%    { transform: scale(calc(var(--logo-scale) * 1.03)); }
}


/* barra de progreso en el preloader */
#topbar{ position:fixed; top:0; left:0; width:100%; height:4px; z-index:10000; pointer-events:none }
#topbar span{
  display:block; width:0%; height:100%;
  background:linear-gradient(90deg,#7f1d1d,#ef4444,#7f1d1d);
  background-size:200% 100%;
  box-shadow:0 0 10px #ef4444, 0 0 30px #ef444480, 0 0 60px #ef444440;
  animation:shimmer 1.2s linear infinite, glow 1.8s ease-in-out infinite alternate;
  transition:width .5s ease;
}
@keyframes shimmer { from{background-position:0 0} to{background-position:200% 0} }
@keyframes glow { from{box-shadow:0 0 8px #ef4444,0 0 0 #0000} to{box-shadow:0 0 16px #ef4444,0 0 40px #ef444480} }

/* extras globales */
.error{ color:var(--danger) }
.footnote{ color:var(--muted); font-size:var(--fs-sm); padding:6px 14px 12px }

/* diseño responsive y accesibilidad */
@media (max-width:820px){
  .card{ height:min(82svh, 720px) }
  .status{ position:static; margin-left:auto }
  #themeToggleBtn{ position:static; margin-left:auto; order:3 }
  #langToggleBtn { position:static; margin-left:8px;  order:4 }
}
@media (max-width:640px){
  body{ padding:8px }
  .card{ width:100%; height:calc(var(--vh, 1svh) * 100); border-radius:14px }
  .header{ padding:10px 12px; gap:10px }
  .subtitle{ display:none }
  .msg{ max-width:100% }
  .quick{ grid-template-columns:1fr 1fr }
}
@media (max-width:400px){
  .quick{ grid-template-columns:1fr }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
  #topbar span{ animation:none !important }
}

/* ===== Mobile ultra (≈ iPhone 12 mini / 378px) ===== */
@media (max-width: 420px){
  .header{
    flex-wrap: wrap;               /* permite 2 filas */
    row-gap: 8px;
  }

  /* La etiqueta de estado ocupa su propia fila */
  .header .status{
    order: 2;
    margin-left: 0;
    flex-basis: 100%;              /* rompe línea */
  }

  /* Controles: Quejas + Tema + Idioma en la 2ª fila, a la derecha */
  #openComplaintsBtn{              /* Quejas */
    order: 3;
    position: static !important;   /* anula el absolute del desktop */
    margin-left: auto;             /* empuja el grupo a la derecha */
    height: 36px;
    padding: 0 12px;
  }

  #themeToggleBtn{                 /* Tema */
    order: 4;
    position: static;
    margin-left: 8px;
    width: 40px; height: 40px;     /* mejor touch target */
  }

  #langToggleBtn{                  /* Idioma */
    order: 5;
    position: static;
    margin-left: 8px;
    width: 40px; height: 40px;     /* mejor touch target */
  }
}

/* === LIGHT THEME - MATCH MOCK (header rojo + tabs rojos) === */
:root[data-theme="light"] .header{
  /* rojo con degradado como en el mock */
  background: linear-gradient(180deg,#ef4444,#b91c1c);
  border-bottom: none;
}
:root[data-theme="light"] .header .title{ color:#fff; }
:root[data-theme="light"] .header .subtitle{ color:#fffb; }
:root[data-theme="light"] .header .status{ color:#fff; }
:root[data-theme="light"] .avatar{
  /* sombrita suave blanca en lugar de roja fuerte */
  box-shadow:0 0 0 2px #ffffff33, 0 6px 20px #00000022;
}

/* Botones del header (tema/idioma) como pills con borde blanco */
:root[data-theme="light"] #themeToggleBtn,
:root[data-theme="light"] #langToggleBtn{
  background: transparent;
  border:1px solid rgba(255,255,255,.6);
  color:#fff;
  box-shadow:none;
}
:root[data-theme="light"] #themeToggleBtn:hover,
:root[data-theme="light"] #langToggleBtn:hover{
  box-shadow:0 0 0 3px rgba(255,255,255,.18);
}

/* Quickbar pegada al header rojo, con botones tipo tabs */
:root[data-theme="light"] .quick{
  background: linear-gradient(180deg,#ef4444,#b91c1c);
  border-bottom:none;
  padding:12px;
}
:root[data-theme="light"] .quick button{
  background: #991b1b;           /* rojo oscuro */
  color:#fff;
  border:1px solid #7f1d1d;
  box-shadow: inset 0 0 0 0 transparent, 0 6px 14px rgba(0,0,0,.15);
}
:root[data-theme="light"] .quick button:hover{
  background:#7f1d1d;
  border-color:#7f1d1d;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}

/* Burbujas del chat se mantienen claras sobre fondo blanco */
:root[data-theme="light"] .log{
  background:
    radial-gradient(600px 400px at 100% 100%, rgba(220,38,38,.06), transparent 60%),
    radial-gradient(600px 400px at 0% 0%, rgba(153,27,27,.04), transparent 50%);
}

/* === LIGHT THEME con colores personalizados === */

/* Fondo header y quickbar */
:root[data-theme="light"] .header {
  background: #db0432;
  border-bottom: none;
}
:root[data-theme="light"] .quick {
  background: #db0432;
  border-top: none;
  border-bottom: none;
}

/* Texto header */
:root[data-theme="light"] .header .title,
:root[data-theme="light"] .header .subtitle,
:root[data-theme="light"] .header .status {
  color: #fff;
}

/* Iconos (lang, theme, quejas) sin contorno */
:root[data-theme="light"] #themeToggleBtn,
:root[data-theme="light"] #langToggleBtn,
:root[data-theme="light"] .btn-quejas {
  background: transparent;
  border: none !important;
  color: #fff;
  box-shadow: none;
}
:root[data-theme="light"] #themeToggleBtn:hover,
:root[data-theme="light"] #langToggleBtn:hover,
:root[data-theme="light"] .btn-quejas:hover {
  background: rgba(255,255,255,0.1);
}

/* Botones de quickbar */
:root[data-theme="light"] .quick button {
  background: #c7052f;
  color: #fff;
  border: none;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
:root[data-theme="light"] .quick button:hover {
  background: #a3241d;
}

/* Botones de opciones en el chat */
:root[data-theme="light"] .option-chip {
  background: #c7052f;
  color: #fff;
  border: none;
}
:root[data-theme="light"] .option-chip:hover {
  background: #a3241d;
}

/* Mensajes del bot en blanco */
:root[data-theme="light"] .bot {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 6px 18px rgba(16,24,40,.06), inset 0 1px 0 rgba(255,255,255,.7);
}

:root[data-theme="light"] .msg-link a {
  color: var(--accent); /* Usa el rojo definido para el tema claro */
  border-bottom: 1px dashed var(--accent);
}
:root[data-theme="light"] .msg-link a:hover {
  border-bottom-style: solid;
  color: var(--accent-2); /* Un rojo más oscuro al pasar el mouse */
}

/* Global keyframes: solo uno */
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 var(--pulse-color, var(--accent)); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Por defecto usa --accent */
.pulse {
  width:6px; height:6px; border-radius:50%;
  background:var(--pulse-color, var(--accent));
  box-shadow:0 0 0 0 var(--pulse-color, var(--accent));
  animation:pulse 1.8s infinite;
}

/* Tema light: solo para pulse */
:root[data-theme="light"] {
  --pulse-color: #fff;
}