:root{ --r-lg:20px; --r-md:14px; --r-sm:10px; --ease:cubic-bezier(.22,.61,.36,1); }

[data-tema="oro"]{
  --bg:#0B0906; --bg-2:#120E08; --panel:#16110A; --panel-2:#1D1710;
  --line:#2E2416; --line-2:#3D3020;
  --m-hi:#FBEFC0; --m:#D4AF37; --m-deep:#8A6A18; --m-dark:#3A2C0A; --m-txt:#FBEFC0; --m-brillo:#FBEFC0;
  --txt:#EFE6D2; --txt-2:#A2937A; --txt-3:#8F8067; --sobre-m:#1A1206;
  --glow:rgba(212,175,55,.16); --sheen:rgba(255,244,208,.55); --err:#E08A6B;
}
[data-tema="cobre"]{
  --bg:#0D0705; --bg-2:#150C08; --panel:#1A0F0B; --panel-2:#231510;
  --line:#39211A; --line-2:#4A2C22;
  --m-hi:#FFD9C2; --m:#C87B54; --m-deep:#8A4A2C; --m-dark:#3D1D10; --m-txt:#FFD9C2; --m-brillo:#FFD9C2;
  --txt:#F2E2D8; --txt-2:#B0907F; --txt-3:#9A7D67; --sobre-m:#1E0C05;
  --glow:rgba(200,123,84,.18); --sheen:rgba(255,220,196,.5); --err:#E8A07E;
}
[data-tema="platino"]{
  --bg:#06080C; --bg-2:#0A0E14; --panel:#0E131B; --panel-2:#141B25;
  --line:#1E2833; --line-2:#2B3846;
  --m-hi:#E8F4FF; --m:#9FB6CC; --m-deep:#5A7488; --m-dark:#1B2836; --m-txt:#E8F4FF; --m-brillo:#E8F4FF;
  --txt:#DEE8F2; --txt-2:#8798A8; --txt-3:#768694; --sobre-m:#0A1119;
  --glow:rgba(159,182,204,.14); --sheen:rgba(232,244,255,.5); --err:#E0888A;
}
[data-tema="jade"]{
  --bg:#050A09; --bg-2:#08100E; --panel:#0B1512; --panel-2:#10201A;
  --line:#1B302A; --line-2:#284238;
  --m-hi:#DFF5E6; --m:#6FB894; --m-deep:#2F6B52; --m-dark:#12291F; --m-txt:#DFF5E6; --m-brillo:#DFF5E6;
  --txt:#DCEDE4; --txt-2:#84A396; --txt-3:#698D82; --sobre-m:#04120C;
  --glow:rgba(193,74,50,.17); --sheen:rgba(223,245,230,.42); --err:#E39073;
}
[data-tema="nacar"]{
  --bg:#F4EFE6; --bg-2:#EDE6D9; --panel:#FBF8F2; --panel-2:#F3EDE1;
  --line:#DDD2BF; --line-2:#C0AF92;
  --m-hi:#FFFFFF; --m:#B39A5F; --m-deep:#8A7340; --m-dark:#CBB88F; --m-txt:#7C683B; --m-brillo:#4A3915;
  --txt:#2E2618; --txt-2:#6D6250; --txt-3:#736957; --sobre-m:#2E2618;
  --glow:rgba(179,154,95,.16); --sheen:rgba(255,255,255,.9); --err:#A6503A;
}

*{box-sizing:border-box; min-width:0}
html,body{height:100%; max-width:100%; overflow-x:hidden}
body{
  margin:0; padding:22px; overflow:hidden;
  background:
    radial-gradient(900px 500px at 12% -8%, var(--glow), transparent 62%),
    radial-gradient(700px 420px at 92% 108%, var(--glow), transparent 60%),
    linear-gradient(168deg, var(--bg-2), var(--bg) 55%);
  color:var(--txt); font-family:Sora,'Segoe UI',system-ui,sans-serif; font-weight:300;
  transition:background .5s var(--ease), color .5s var(--ease);
  display:flex; flex-direction:column; gap:18px;
}

.barra{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.marca{
  font-size:14px; letter-spacing:.42em; text-transform:uppercase; font-weight:400;
  background:linear-gradient(96deg,var(--m-deep),var(--m-txt) 26%,var(--m-brillo) 47%,var(--m-txt) 68%,var(--m-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.temas{display:flex; flex-wrap:wrap; gap:7px; margin-left:auto}
.tema{
  font:inherit; font-size:12px; letter-spacing:.09em; cursor:pointer;
  padding:8px 15px; border-radius:99px; color:var(--txt-2);
  background:var(--panel); border:1px solid var(--line);
  transition:color .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.tema:hover{color:var(--txt); border-color:var(--line-2)}
.tema[aria-pressed="true"]{
  color:var(--m-txt); border-color:var(--m-deep);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  box-shadow:inset 0 1px 0 var(--sheen), 0 0 18px -6px var(--m);
}

.tablero{flex:1; display:grid; grid-template-columns:1fr 1fr; gap:18px; min-height:0}

.panel{
  border-radius:var(--r-lg); padding:1px; min-height:0;
  background:linear-gradient(150deg,var(--line-2),var(--line) 34%,var(--m-dark) 72%,var(--line-2));
}
.panel-int{
  height:100%; border-radius:calc(var(--r-lg) - 1px); padding:16px;
  background:linear-gradient(172deg,var(--panel-2),var(--panel) 46%);
  box-shadow:inset 0 1px 0 var(--sheen), inset 0 -22px 44px -30px #000;
  display:flex; flex-direction:column; gap:13px; min-height:0;
}

.cab{display:flex; flex-wrap:wrap; align-items:center; gap:9px}
.rotulo{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--txt-3)}
.idioma{
  font:inherit; font-size:13px; margin-left:auto; cursor:pointer; max-width:190px;
  padding:7px 11px; border-radius:var(--r-sm); color:var(--txt);
  background:var(--bg-2); border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--sheen);
}
.mini{
  font:inherit; font-size:11px; letter-spacing:.06em; cursor:pointer;
  padding:7px 11px; border-radius:var(--r-sm); color:var(--txt-2);
  background:transparent; border:1px solid var(--line);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.mini:hover{color:var(--m-txt); border-color:var(--m-deep)}

.hilo{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:10px; padding-right:4px;
}
.hilo::-webkit-scrollbar{width:7px}
.hilo::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:99px}
.hilo::-webkit-scrollbar-track{background:transparent}

.msg{
  position:relative; border-radius:var(--r-md); padding:10px 12px;
  font-size:14px; line-height:1.55; max-width:92%; word-break:break-word;
  border:1px solid var(--line);
  background:linear-gradient(170deg,var(--panel-2),var(--panel));
  box-shadow:inset 0 1px 0 var(--sheen);
}
.msg.propio{align-self:flex-end; border-color:var(--m-dark)}
.msg.propio::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(112deg,transparent 42%,var(--glow) 50%,transparent 58%);
}
.quien{
  display:block; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--txt-3); margin-bottom:5px;
}
.cuerpo{display:block; white-space:pre-wrap}
.copiar{
  position:relative; z-index:1;
  font:inherit; font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px; letter-spacing:.1em; margin-top:7px; padding:4px 9px;
  cursor:pointer; border-radius:7px; color:var(--txt-3);
  background:transparent; border:1px solid var(--line);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.copiar:hover{color:var(--m-txt); border-color:var(--m-deep)}
.msg.fallo{border-color:var(--err)}
.msg.fallo .cuerpo{color:var(--err); font-size:13px}

.msg.cargando .cuerpo{
  font-style:italic;
  background:linear-gradient(96deg,var(--txt-3) 38%,var(--m-txt) 50%,var(--txt-3) 62%) 0/240% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:barre 2.1s linear infinite;
}
@keyframes barre{to{background-position:-240% 0}}

.pie{display:flex; gap:9px}
.campo{
  flex:1; min-width:0; font:inherit; font-size:14px; color:var(--txt);
  padding:12px 14px; border-radius:var(--r-md);
  background:var(--bg-2); border:1px solid var(--line);
  box-shadow:inset 0 2px 7px -4px #000;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.campo::placeholder{color:var(--txt-3)}
.campo:focus{
  outline:none; border-color:var(--m-deep);
  box-shadow:inset 0 2px 7px -4px #000, 0 0 0 3px var(--glow);
}
.enviar{
  position:relative; overflow:hidden; font:inherit; font-size:13px; cursor:pointer;
  letter-spacing:.1em; padding:12px 21px; border-radius:var(--r-md);
  color:var(--sobre-m); border:1px solid var(--m-deep);
  background:linear-gradient(178deg,var(--m-hi) -12%,var(--m) 42%,var(--m-deep) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 5px -2px var(--m-dark), 0 5px 16px -9px var(--m);
  transition:transform .18s var(--ease), box-shadow .25s var(--ease);
}
.enviar::after{
  content:""; position:absolute; top:-60%; left:-130%; width:52%; height:220%;
  transform:rotate(19deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
}
.enviar:hover::after{animation:destello .78s var(--ease)}
@keyframes destello{to{left:150%}}
.enviar:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 7px 22px -9px var(--m)}
.enviar:active{transform:translateY(1px)}

.enviar:focus-visible,.tema:focus-visible,.mini:focus-visible,
.copiar:focus-visible,.idioma:focus-visible{outline:2px solid var(--m); outline-offset:2px}

@media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

.ajustes{
  display:none; margin-top:2px; border-radius:var(--r-lg); padding:1px;
  background:linear-gradient(150deg,var(--line-2),var(--line) 34%,var(--m-dark) 72%,var(--line-2));
}
.ajustes.abierto{display:block}
.ajustes-int{
  border-radius:calc(var(--r-lg) - 1px); padding:16px 18px;
  background:linear-gradient(172deg,var(--panel-2),var(--panel) 46%);
  box-shadow:inset 0 1px 0 var(--sheen);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px 20px;
}
.grupo{display:flex; flex-direction:column; gap:6px; min-width:0}
.grupo label{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--txt-3)}
.grupo input,.grupo select{
  font:inherit; font-size:13px; color:var(--txt); width:100%;
  padding:9px 11px; border-radius:var(--r-sm);
  background:var(--bg-2); border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--sheen);
}
.grupo input:focus,.grupo select:focus{
  outline:none; border-color:var(--m-deep); box-shadow:0 0 0 3px var(--glow);
}
.pista{font-size:11px; color:var(--txt-3); line-height:1.5}
.pista.alerta{color:var(--err)}
.fila{display:flex; gap:8px; align-items:center}
.fila .mini{white-space:nowrap}

/* --- Pantalla de acceso (solo web) --- */
body.pantalla-acceso{display:flex; align-items:center; justify-content:center; padding:24px}
.acceso{width:100%; max-width:420px}
.acceso .panel-int{padding:28px}
.acceso .marca{font-size:16px}
.acceso form{display:flex; flex-direction:column}
.aviso-error{
  border-radius:var(--r-sm); padding:10px 12px; margin-bottom:14px;
  font-size:13px; color:var(--err); border:1px solid var(--err);
  background:color-mix(in srgb, var(--err) 8%, transparent);
}
.barra .mini{text-decoration:none; display:inline-block}
.barra .pista{margin-left:auto; white-space:nowrap}
.barra .temas{margin-left:0}

/* --- Panel de administración --- */
body.pantalla-admin{overflow:auto; display:block}
/* La barra tambien se limita al ancho del contenido: si va a sangre
   completa mientras los paneles quedan centrados, el conjunto descuadra. */
body.pantalla-admin .barra{max-width:1100px; margin:0 auto 18px}
.admin-cuerpo{max-width:1100px; margin:0 auto}
.aviso-ok{
  border-radius:var(--r-sm); padding:10px 12px; margin-bottom:14px; font-size:13px;
  color:var(--m-txt); border:1px solid var(--m-deep);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
}
.rejilla{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px 16px; align-items:end}
.rejilla .enviar{width:100%}
.rejilla .grupo:has(.casilla){justify-content:flex-end}
.casilla{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--txt); letter-spacing:0; text-transform:none}
.casilla input{width:auto}
.tabla{width:100%; border-collapse:collapse; font-size:13px}
.tabla th{
  text-align:left; padding:8px 10px; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--txt-3); border-bottom:1px solid var(--line);
  font-weight:400;
}
.tabla td{padding:10px; border-bottom:1px solid var(--line); vertical-align:top}
.tabla tr.inactivo{opacity:.55}
.etiqueta{
  display:inline-block; font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  padding:2px 7px; border-radius:99px; margin-left:5px;
  border:1px solid var(--m-deep); color:var(--m-txt);
}
.etiqueta.rojo{border-color:var(--err); color:var(--err)}
.mini.rojo{color:var(--err); border-color:var(--err)}
.acciones .linea{display:flex; gap:5px; align-items:center; margin-bottom:5px}
.acciones input{
  font:inherit; font-size:12px; padding:6px 9px; border-radius:var(--r-sm);
  background:var(--bg-2); border:1px solid var(--line); color:var(--txt);
}

/* --- Diálogo de cambio de contraseña --- */
.dialogo{border:none; background:transparent; padding:0; max-width:380px; width:92%}
.dialogo::backdrop{background:rgba(0,0,0,.6); backdrop-filter:blur(3px)}
.dialogo .panel-int{padding:22px}
.dialogo .linea{display:flex; gap:8px; align-items:center}
.dialogo .enviar{padding:10px 18px}


/* ------------------------------------------------------------------ */
/* Móvil y pantallas estrechas                                         */
/* El diseño de escritorio fija la altura y hace scroll DENTRO de cada  */
/* panel. En un móvil eso no cabe: aquí se invierte el modelo y es la   */
/* página entera la que se desplaza.                                    */
@media (max-width: 860px) {
  body{
    height:auto; min-height:100%; overflow:visible;
    padding:12px; gap:12px;
  }
  .barra{gap:9px; row-gap:10px}
  .marca{font-size:12px; letter-spacing:.28em; width:100%}
  .temas{margin-left:0; width:100%}
  .tema{padding:7px 12px; font-size:11px; flex:1 1 auto; text-align:center}
  .barra .pista{margin-left:0; white-space:normal; font-size:11px}
  .barra .mini{flex:0 0 auto}

  .tablero{grid-template-columns:1fr; gap:12px}
  .panel-int{padding:13px; min-height:0}

  /* El rótulo ocupa su línea y el selector la suya: los tres elementos
     juntos no caben en 380 px sin cortarse. */
  .rotulo{width:100%}
  .idioma{margin-left:0; max-width:none; width:100%; order:3}
  .cab .mini{flex:1 1 auto; text-align:center}

  /* Sin altura fija la conversación crecería sin fin y los campos de
     texto quedarían fuera de la pantalla. */
  .hilo{max-height:46vh; overflow-y:auto}
  .msg{max-width:100%}

  .pie{gap:7px}
  .campo{font-size:16px}          /* menos de 16px hace que iOS haga zoom */
  .enviar{padding:12px 16px; font-size:12px}

  /* Panel de administración */
  body.pantalla-admin .barra, .admin-cuerpo{max-width:100%}
  .rejilla{grid-template-columns:1fr}
  .tabla{display:block; overflow-x:auto; white-space:nowrap}
  .tabla td, .tabla th{white-space:normal}
  .acciones .linea{flex-wrap:wrap}
  .acciones input{width:100%; min-width:120px}
}

@media (max-width: 420px) {
  .tema{flex:1 1 40%}
  .hilo{max-height:38vh}
}