/* ============================================================================
   DASHBOARD DEL BOT — ESTILO
   ============================================================================
   Se carga después de marca.css, componentes.css y asistente.css (copias de
   assets/ que hace scripts/comun-bot.mjs). No redeclara ni un color ni un
   tamaño de letra: todo es `--tipo-*`, `--texto-*`, `--esp-*` y los biseles
   y aros de marca.css por escalones de alto. Sin sombras, sin esquinas
   redondeadas (salvo los avatares, como `.cuenta-avatar`).

   LA REFERENCIA ES /muestra (somostrufas.org/muestra), por encima de la
   skill: contenedores (.caja en lo opaco, aro --filo-* en lo pequeño), un
   <input> lleva el bisel y su aro en una ENVOLTURA (.control), movimiento
   que respeta prefers-reduced-motion, y el asistente a pantalla completa
   para lo que se rellena en varios pasos.

   LO QUE NO ES TOKEN Y VIVE AQUÍ, igual que en el panel (panel.css) y con
   la misma excepción escrita en la skill: los pasos de 4 px de dentro de un
   control (`--esp-1…4`), el relleno de una tarjeta de ficha (`--esp-tarjeta`),
   la altura de un control y las medidas del armazón.
   ========================================================================== */

:root{
  color-scheme:dark;

  --esp-1:.25rem; --esp-2:.5rem; --esp-3:.75rem; --esp-4:1rem;
  --esp-tarjeta:1.5rem;
  --alto-control:2.5rem;

  /* El armazón: la franja (solo en la demo, html.modo-demo), la barra de
     arriba y la barra de módulos. */
  --franja-h:0rem;
  --cab-h:3.75rem;
  --lateral-w:16.5rem;
  --arriba:calc(var(--franja-h) + var(--cab-h));
  --logo-h:1.5rem;

  /* Veladuras, las del panel: crema o amarillo con alfa sobre cualquier
     marrón. Calculadas a mano (sin color-mix) para que nunca se queden sin
     color. */
  --velo-1:rgba(242,232,220,.045);
  --velo-2:rgba(242,232,220,.08);
  --velo-vivo:rgba(255,198,33,.10);

  /* LOS DEL PANEL QUE PIDE EL EDITOR DE BLOQUES (bloques.css es una copia de
     panel/assets/bloques.css, que los toma de panel.css): los mismos
     valores, para que el editor se vea igual en los dos sitios. */
  --velo-3:rgba(242,232,220,.025);
  --velo-alerta:rgba(154,147,141,.12);
  --linea-suave:rgba(74,54,43,.6);
  --borde-vivo:rgba(255,198,33,.45);
  --borde-alerta:rgba(154,147,141,.45);
  --sup-0:var(--ink); --sup-1:var(--surface); --sup-2:var(--surface-2);
  --t-rapido:.12s; --t-medio:.2s; --t-lento:.3s;

  --curva:cubic-bezier(.22,1,.36,1);
}
html.modo-demo{--franja-h:1.75rem}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--yellow-bajo) transparent;scrollbar-width:thin}
html::-webkit-scrollbar{width:4px;height:4px}
html::-webkit-scrollbar-thumb{background:var(--yellow-bajo)}
html::-webkit-scrollbar-thumb:hover{background:var(--yellow)}
html::-webkit-scrollbar-thumb:active{background:var(--yellow-alto)}
body{
  background:var(--ink);color:var(--texto-1);
  font-family:'Poppins',sans-serif;font-weight:300;font-size:var(--tipo-cuerpo);line-height:1.55;
  padding-top:var(--franja-h);min-height:100vh;overflow-x:hidden;
}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ol,ul{list-style:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.vista:focus{outline:none}

.solo-lector{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:var(--esp-4);top:-10rem;z-index:200;padding:var(--esp-2) var(--esp-4);background:var(--yellow);color:var(--sobre-amarillo);font-weight:600}
.saltar:focus{top:calc(var(--franja-h) + var(--esp-2))}

/* ---------- ICONOS ---------- */
.ico{display:inline-flex;width:1.25em;height:1.25em;flex:none;vertical-align:-.25em}
.ico svg{width:100%;height:100%;display:block}
.ico-lleno svg{fill:currentColor}

/* ============================================================================
   LA FRANJA DE VISTA PREVIA
   Gris claro con tinta oscura: avisa y no se pulsa (la «banda clara con
   tinta» de --gris-4). Fija, encima de todo, en todas las pantallas.
   ========================================================================== */
.franja{
  position:fixed;top:0;left:0;right:0;z-index:90;height:var(--franja-h);
  display:flex;align-items:center;justify-content:center;
  background:var(--gris-4);color:var(--ink);
  font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.franja-in{display:inline-flex;gap:var(--esp-2);align-items:center;white-space:nowrap}
.franja b{font-weight:600}
.franja-salir{margin-left:var(--esp-4);padding:0 var(--esp-2);border:0;background:transparent;color:var(--ink);font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}

/* ============================================================================
   LA BARRA DE ARRIBA
   ========================================================================== */
.cab{
  position:sticky;top:var(--franja-h);z-index:70;height:var(--cab-h);
  display:flex;align-items:center;gap:var(--esp-4);padding:0 var(--esp-rejilla);
  background:var(--ink);border-bottom:1px solid var(--line);
}
.cab-marca{display:inline-flex;align-items:center;gap:var(--esp-3);flex:none}
.cab-marca img{height:var(--logo-h);width:auto;object-fit:contain}
.cab-centro{flex:1;min-width:0;display:flex;justify-content:flex-start}
.cab-cuenta{flex:none;display:flex;align-items:center}
.cab-entrar .ico{width:1.4em;height:1.4em}
.cab-avatar{
  display:inline-grid;place-items:center;width:1.625rem;height:1.625rem;border-radius:50%;flex:none;
  background:var(--brown);color:var(--texto-1);font-family:var(--fuente-display-e);font-weight:800;font-size:var(--tipo-control);
}
.cab-usuario{max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:none;letter-spacing:0;font-weight:500}
.cuenta-chevron-svg .ico{width:.9em;height:.9em}
.cuenta-boton{gap:var(--esp-2)}

/* El selector de servidor: un control sin caja; el menú es el de la cuenta. */
.srv-boton{
  display:inline-flex;align-items:center;gap:var(--esp-2);max-width:100%;min-width:0;
  padding:var(--esp-1) var(--esp-2);background:transparent;border:0;cursor:pointer;color:var(--texto-1);
}
.srv-boton:hover .srv-boton-flecha{color:var(--yellow)}
.srv-boton-nombre{font-weight:500;font-size:var(--tipo-descripcion);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.srv-boton-flecha{color:var(--texto-3);transition:color .15s,transform .2s}
.srv-boton[aria-expanded="true"] .srv-boton-flecha{transform:rotate(180deg)}
.srv-selector{min-width:0}
.srv-menu{left:0;right:auto;min-width:16rem}
.srv-item-in{display:inline-flex;align-items:center;gap:var(--esp-3);min-width:0}
.srv-item-in span:last-child{overflow:hidden;text-overflow:ellipsis}
.srv-item[aria-current="true"]{color:var(--texto-1)}
.srv-item-ok{color:var(--yellow)}

/* El icono de un servidor: su imagen o sus iniciales, con el bisel del
   escalón de su alto. */
.srv-ico{
  display:inline-grid;place-items:center;flex:none;overflow:hidden;
  background:var(--brown);color:var(--texto-1);
  font-family:var(--fuente-display-e);font-weight:800;letter-spacing:.01em;line-height:1;
}
.srv-ico img{width:100%;height:100%;object-fit:contain;padding:12%}
.srv-ico-xs{width:1.5rem;height:1.5rem;clip-path:var(--bevel-xs);font-size:var(--tipo-etiqueta)}
.srv-ico-sm{width:1.75rem;height:1.75rem;clip-path:var(--bevel-xs);font-size:var(--tipo-leyenda)}
.srv-ico-md{width:2.75rem;height:2.75rem;clip-path:var(--bevel-sm);font-size:var(--tipo-entradilla)}
.srv-ico-lg{width:4.25rem;height:4.25rem;clip-path:var(--bevel);font-size:var(--tipo-dato)}

/* ============================================================================
   EL ARMAZÓN DE UN SERVIDOR: barra de módulos + contenido
   ========================================================================== */
.app.con-lateral{display:grid;grid-template-columns:var(--lateral-w) minmax(0,1fr)}
.vista{min-width:0;padding:var(--esp-bloque) var(--esp-bloque) calc(var(--esp-seccion) + var(--esp-bloque))}
.vista>*{max-width:80rem;margin-inline:auto}

.lateral{
  position:sticky;top:var(--arriba);align-self:start;height:calc(100vh - var(--arriba));overflow-y:auto;
  display:flex;flex-direction:column;gap:var(--esp-4);padding:var(--esp-rejilla) 0;
  border-right:1px solid var(--line);background:var(--ink);
  scrollbar-width:none;
}
.lateral::-webkit-scrollbar{display:none}
.lateral-srv{display:flex;align-items:center;gap:var(--esp-3);padding:0 var(--esp-rejilla) var(--esp-4);border-bottom:1px solid var(--line)}
.lateral-srv-txt{min-width:0}
.lateral-srv-nombre{font-weight:600;font-size:var(--tipo-descripcion);line-height:1.3;overflow-wrap:anywhere}
.lateral-srv-meta{font-size:var(--tipo-leyenda);color:var(--texto-3)}
.lateral-lista{display:flex;flex-direction:column}
.lateral-item{
  position:relative;display:flex;align-items:center;gap:var(--esp-3);
  padding:var(--esp-3) var(--esp-rejilla);font-size:var(--tipo-descripcion);font-weight:400;color:var(--texto-3);
  transition:color .15s,background .15s;
}
.lateral-item::before{content:'';position:absolute;left:0;top:var(--esp-2);bottom:var(--esp-2);width:2px;background:var(--yellow);transform:scaleY(0);transition:transform .25s var(--mov-rebote)}
.lateral-item:hover{color:var(--texto-1);background:var(--velo-1)}
.lateral-item:hover .lateral-ico{transform:translateX(2px)}
.lateral-item[aria-current="page"]{color:var(--texto-1);background:var(--surface);font-weight:500}
.lateral-item[aria-current="page"]::before{transform:scaleY(1)}
.lateral-item[aria-current="page"] .lateral-ico{color:var(--yellow)}
.lateral-n{font-family:var(--fuente-display-e);font-weight:800;font-size:var(--tipo-control);letter-spacing:.01em;color:var(--texto-3);width:1.4em}
.lateral-ico{transition:transform .2s var(--mov-rebote)}
.lateral-nombre{flex:1}
.lateral-pill{flex:none}
.lateral-volver{
  margin-top:auto;display:flex;align-items:center;gap:var(--esp-2);padding:var(--esp-3) var(--esp-rejilla);
  font-size:var(--tipo-leyenda);color:var(--texto-3);border-top:1px solid var(--line);
}
.lateral-volver:hover{color:var(--texto-1)}

.sub-barra{display:none}
.velo{display:none}

/* ============================================================================
   LA CABECERA DE UN MÓDULO, LAS PESTAÑAS Y LOS BLOQUES
   ========================================================================== */
.mod-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--esp-rejilla);flex-wrap:wrap;margin-bottom:var(--esp-rejilla)}
.mod-cab-txt{min-width:0;flex:1 1 22rem}
.mod-cab .eyebrow{margin-bottom:var(--esp-3)}
.mod-titulo{
  font-family:var(--fuente-display);font-weight:800;text-transform:uppercase;
  font-size:var(--tipo-titulo);line-height:.9;overflow-wrap:anywhere;
}
.mod-bajada{margin-top:var(--esp-3);font-size:var(--tipo-entradilla);color:var(--texto-2);max-width:40rem}
.modulo{display:flex;flex-direction:column}
.modulo>*+*{margin-top:var(--esp-rejilla)}
.mod-cuerpo{display:flex;flex-direction:column;gap:var(--esp-rejilla)}
.modulo-apagado .bloque,.modulo-apagado .mod-cuerpo{opacity:.5}

.estado-bot{display:inline-flex;align-items:center;gap:var(--esp-2);font-size:var(--tipo-leyenda);font-weight:500;color:var(--texto-2);text-transform:uppercase;letter-spacing:.14em}
.estado-punto{width:.5rem;height:.5rem;background:var(--yellow);transform:rotate(45deg)}
@media (prefers-reduced-motion:no-preference){
  .estado-punto{animation:latido 2.4s ease-in-out infinite alternate}
  @keyframes latido{from{opacity:1}to{opacity:.35}}
}

.pestanas{overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin-bottom:var(--esp-2)}
.pestanas::-webkit-scrollbar{display:none}
.pestanas-in{display:flex;gap:var(--esp-1);min-width:max-content}
.pestana{
  display:inline-flex;align-items:center;gap:var(--esp-2);padding:var(--esp-3) var(--esp-4);
  font-size:var(--tipo-control);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3);
  transition:color .15s,box-shadow .2s;white-space:nowrap;
}
.pestana:hover{color:var(--texto-1)}
.pestana[aria-current="page"]{color:var(--texto-1);box-shadow:inset 0 -2px 0 var(--yellow)}
.pestana[aria-current="page"] .ico{color:var(--yellow)}

.bloque{margin-top:var(--esp-bloque)}
.bloque-cab{margin-bottom:var(--esp-4)}
.bloque-titulo{font-family:var(--fuente-display-e);font-weight:700;letter-spacing:.01em;text-transform:uppercase;font-size:var(--tipo-subtitulo);line-height:1}
.bloque-bajada{margin-top:var(--esp-2);font-size:var(--tipo-descripcion);color:var(--texto-2);max-width:44rem}
.bloque-cuerpo{display:flex;flex-direction:column;gap:var(--esp-rejilla)}

.rejilla{display:grid;gap:var(--esp-rejilla)}
.rejilla-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.dos-columnas{display:grid;gap:var(--esp-rejilla);grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}
.dos-columnas-ancha{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.pegado{position:sticky;top:calc(var(--arriba) + var(--esp-rejilla))}
.pila{display:flex;flex-direction:column;gap:var(--esp-rejilla)}

/* ---------- LAS TARJETAS (.caja) ---------- */
.tarjeta{padding:var(--esp-tarjeta);display:flex;flex-direction:column;gap:var(--esp-4);min-width:0}
.tarjeta-cab{display:flex;align-items:flex-start;gap:var(--esp-3)}
.tarjeta-ico{width:1.5rem;height:1.5rem;color:var(--yellow);margin-top:.1rem}
.tarjeta-nombre{flex:1;min-width:0}
.tarjeta-titulo{font-family:var(--fuente-display-e);font-weight:700;letter-spacing:.01em;text-transform:uppercase;font-size:var(--tipo-dato);line-height:1;overflow-wrap:anywhere}
.tarjeta-sub{margin-top:var(--esp-1);font-size:var(--tipo-leyenda);color:var(--texto-3);line-height:1.45}
.tarjeta-mandos{display:flex;align-items:center;gap:var(--esp-2);flex:none}
.tarjeta.apagada>:not(.tarjeta-cab),.tarjeta.apagada .tarjeta-ico{opacity:.45}
.tarjeta.apagada .tarjeta-titulo{color:var(--texto-3)}
.panel-form{padding:var(--esp-tarjeta);display:flex;flex-direction:column;gap:var(--esp-4)}
.mision{cursor:pointer;transition:background .2s}
.mision:hover,.atajo:hover,.srv-tarjeta:hover{--filo-color:var(--texto-3)}
.mision.elegida{--filo-color:var(--yellow);--caja-fondo:var(--surface-2)}
.boton-icono{padding:0;width:2.3rem;height:2.3rem;justify-content:center}
.boton-icono[aria-expanded="true"]{--filo-color:var(--yellow);color:var(--yellow)}

/* ============================================================================
   LOS CAMPOS
   El bisel y su aro van en la envoltura .control (un <input> no tiene
   ::after). Escalón 31–60 px: --bevel-sm, --filo-sm y --filo-foco-sm.
   ========================================================================== */
.campo{display:flex;flex-direction:column;gap:var(--esp-2);min-width:0}
.campo-nombre{font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);transition:color .15s}
.campo:focus-within>.campo-nombre{color:var(--yellow)}
.campo-ayuda{font-size:var(--tipo-leyenda);color:var(--texto-3);line-height:1.45}

.control{
  position:relative;display:flex;align-items:center;min-width:0;height:var(--alto-control);
  background:var(--velo-1);clip-path:var(--bevel-sm);--filo-color:var(--line);
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));transition:background .15s;
}
.control:hover{--filo-color:var(--texto-3)}
.control:focus-within{--filo-color:var(--yellow);background:var(--velo-2)}
@supports (clip-path:polygon(evenodd,0 0,1px 1px,0 1px)){
  .control::after{content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-sm);background:var(--filo-color)}
  .control:focus-within::after{clip-path:var(--filo-foco-sm)}
}
.control input,.control select,.control textarea{
  flex:1;min-width:0;height:100%;background:transparent;border:0;outline:none;
  padding:0 var(--esp-3);font-weight:400;font-size:var(--tipo-cuerpo);color:var(--texto-1);
}
.control input::placeholder,.control textarea::placeholder{color:var(--texto-3)}
.control-largo{height:auto}
.control-largo textarea{padding:var(--esp-3);resize:vertical;min-height:4.5rem;line-height:1.5}
.control-prefijo{padding-left:var(--esp-3);color:var(--texto-3);font-weight:500}
.control-prefijo+input,.control-prefijo+select{padding-left:var(--esp-1)}
.control-lista select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.25rem}
.control-lista select option{background:var(--surface);color:var(--texto-1)}
.control-flecha{position:absolute;right:var(--esp-3);color:var(--texto-3);pointer-events:none}
.control-lista:focus-within .control-flecha{color:var(--yellow)}
.control-numero input{text-align:center;font-variant-numeric:tabular-nums;padding:0 var(--esp-1);-moz-appearance:textfield}
.control-numero input::-webkit-outer-spin-button,.control-numero input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.control-sufijo{font-size:var(--tipo-leyenda);color:var(--texto-3);white-space:nowrap;padding-right:var(--esp-1);max-width:40%;overflow:hidden;text-overflow:ellipsis}
.control-paso{
  flex:none;display:grid;place-items:center;width:var(--alto-control);height:100%;
  background:transparent;border:0;color:var(--texto-3);cursor:pointer;transition:color .15s,background .15s;
}
.control-paso:hover{color:var(--yellow);background:var(--velo-1)}
.control-paso:active .ico{transform:scale(.85)}
.control-paso:focus-visible{outline:none;color:var(--yellow);background:var(--velo-vivo)}

.fila-campos{display:grid;gap:var(--esp-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr));align-items:start}
.fila-anadir{display:flex;align-items:flex-end;gap:var(--esp-3);flex-wrap:wrap}
.fila-anadir>.campo{flex:1 1 14rem}
.apagado{opacity:.45;pointer-events:none}

/* ---------- EL INTERRUPTOR ----------
   24 px de alto: escalón de etiqueta (--bevel-xs, --filo-xs). La perilla
   salta con el rebote de la marca. */
.interruptor{
  position:relative;flex:none;width:2.75rem;height:1.5rem;border:0;cursor:pointer;
  background:var(--velo-2);clip-path:var(--bevel-xs);--filo-color:var(--line);
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));transition:background .2s;
}
.interruptor:hover{--filo-color:var(--texto-3)}
.interruptor-perilla{
  position:absolute;top:.25rem;left:.25rem;width:1rem;height:1rem;clip-path:var(--bevel-xs);
  background:var(--texto-3);transition:transform .32s var(--mov-rebote),background .2s;
}
.interruptor[aria-checked="true"]{background:var(--yellow);--filo-color:var(--yellow)}
.interruptor[aria-checked="true"] .interruptor-perilla{transform:translateX(1.25rem);background:var(--sobre-amarillo)}
@supports (clip-path:polygon(evenodd,0 0,1px 1px,0 1px)){
  .interruptor::after{content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-xs);background:var(--filo-color)}
  .interruptor:focus-visible{outline:none;--filo-color:var(--yellow)}
  .interruptor:focus-visible::after{clip-path:var(--filo-foco-xs)}
  .interruptor[aria-checked="true"]:focus-visible{--filo-color:var(--sobre-amarillo)}
}

.fila-si{display:flex;align-items:center;gap:var(--esp-3);padding:var(--esp-3) 0;border-top:1px solid var(--line)}
.panel-form>.fila-si:first-child,.tarjeta>.fila-si:first-child{border-top:0;padding-top:0}
.fila-si-ico{color:var(--texto-3)}
.fila-si-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.fila-si-titulo{font-size:var(--tipo-descripcion);font-weight:500;color:var(--texto-1)}
.fila-si-ayuda{font-size:var(--tipo-leyenda);color:var(--texto-3)}

/* ---------- EL SEGMENTADO ---------- */
.segmentado{display:flex;flex-wrap:wrap;gap:var(--esp-2)}
.segmento{
  position:relative;display:inline-flex;align-items:center;gap:var(--esp-2);
  padding:var(--esp-2) var(--esp-4);min-height:2.3rem;border:0;cursor:pointer;
  font-size:var(--tipo-control);font-weight:500;color:var(--texto-3);
  background:var(--velo-1);clip-path:var(--bevel-sm);--filo-color:var(--line);
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));transition:color .15s,background .15s;
}
.segmento:hover{color:var(--texto-1)}
.segmento[aria-checked="true"]{color:var(--texto-1);background:var(--velo-vivo);--filo-color:var(--yellow)}
.segmento[aria-checked="true"] .ico{color:var(--yellow)}
@supports (clip-path:polygon(evenodd,0 0,1px 1px,0 1px)){
  .segmento::after{content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-sm);background:var(--filo-color)}
  .segmento:focus-visible{outline:none;--filo-color:var(--yellow)}
  .segmento:focus-visible::after{clip-path:var(--filo-foco-sm)}
}

/* ---------- EL DESLIZADOR ---------- */
.deslizador{display:flex;align-items:center;gap:var(--esp-3);height:var(--alto-control)}
.deslizador input{
  flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:4px;cursor:pointer;
  background:linear-gradient(to right,var(--yellow) var(--lleno,50%),var(--line) var(--lleno,50%));
}
.deslizador input::-webkit-slider-thumb{-webkit-appearance:none;width:1rem;height:1rem;background:var(--yellow);clip-path:var(--bevel-xs);transition:transform .2s var(--mov-rebote)}
.deslizador input::-moz-range-thumb{width:1rem;height:1rem;border:0;border-radius:0;background:var(--yellow)}
.deslizador input:active::-webkit-slider-thumb{transform:scale(1.25)}
.deslizador input:focus-visible{outline:2px solid var(--yellow);outline-offset:6px}
.deslizador-cifra{min-width:4.5em;text-align:right;font-weight:600;font-size:var(--tipo-descripcion);font-variant-numeric:tabular-nums;color:var(--texto-1)}

/* ---------- LAS NOTAS, EL VACÍO Y LOS ENLACES ---------- */
.nota{font-size:var(--tipo-leyenda);color:var(--texto-3);line-height:1.5}
.nota-ancha{max-width:48rem}
.nota-aviso{
  display:flex;align-items:flex-start;gap:var(--esp-3);padding:var(--esp-4) var(--esp-rejilla);
  --filo-color:var(--gris-2);--caja-fondo:var(--gris-1);font-size:var(--tipo-descripcion);color:var(--texto-2);line-height:1.5;
}
.nota-aviso>.ico{color:var(--gris-3);margin-top:.1rem}
.nota-aviso b{font-weight:600;color:var(--texto-1)}
.vacio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--esp-2);padding:var(--esp-caja) var(--esp-4)}
.vacio-ico{width:2.25rem;height:2.25rem;color:var(--texto-3);margin-bottom:var(--esp-2)}
.vacio-titulo{font-weight:600;color:var(--texto-1)}
.vacio-texto{font-size:var(--tipo-descripcion);color:var(--texto-2);max-width:26rem}
.vacio .btn{margin-top:var(--esp-3)}
.perdida{padding-top:var(--esp-bloque)}
.enlace{display:inline-flex;align-items:center;gap:var(--esp-2);font-size:var(--tipo-descripcion);color:var(--texto-2);text-decoration:underline;text-underline-offset:3px}
.enlace:hover{color:var(--yellow)}
.enlace-quitar{
  align-self:flex-start;display:inline-flex;align-items:center;gap:var(--esp-2);padding:var(--esp-1) 0;
  background:none;border:0;cursor:pointer;font-size:var(--tipo-leyenda);color:var(--texto-3);
}
.enlace-quitar:hover{color:var(--texto-1)}

/* ============================================================================
   LA MONEDA Y EL MENSAJE DE DISCORD SIMULADO
   En la paleta de la marca, no en la de Discord.
   ========================================================================== */
.emoji{display:inline-block;width:1.25em;height:1.25em;vertical-align:-.25em;object-fit:contain;flex:none}
.emoji-txt{width:auto;height:auto;vertical-align:baseline;line-height:1}
.emoji-grande{width:1.1em;height:1.1em;font-size:1em}
.emoji-enorme{width:1em;height:1em;font-size:var(--tipo-cifra)}
.emoji-enorme.emoji-txt{width:auto;height:auto}
.cantidad{display:inline-flex;align-items:center;gap:.3em}
.cantidad b{font-weight:600;color:var(--texto-1)}

.dc{--caja-fondo:var(--surface);padding:var(--esp-4) var(--esp-rejilla) var(--esp-rejilla)}
.dc-rotulo{display:flex;align-items:center;gap:var(--esp-2);padding-bottom:var(--esp-3);margin-bottom:var(--esp-4);border-bottom:1px solid var(--line);
  font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3)}
.dc-canal{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:500}
.dc-mensajes{display:flex;flex-direction:column;gap:var(--esp-4)}
.dc-msg{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:var(--esp-3)}
.dc-avatar{
  width:2.5rem;height:2.5rem;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:var(--brown);color:var(--texto-1);font-weight:600;
}
.dc-avatar.es-bot{background:var(--surface-2)}
.dc-avatar img{width:70%;height:70%;object-fit:contain}
.dc-cab{display:flex;align-items:baseline;gap:var(--esp-2);flex-wrap:wrap}
.dc-autor{font-weight:500;color:var(--texto-1);font-size:var(--tipo-descripcion)}
.dc-autor.es-bot{color:var(--yellow)}
.dc-app{font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.1rem .35rem;background:var(--brown);color:var(--texto-1);clip-path:var(--bevel-xs)}
.dc-hora{font-size:var(--tipo-leyenda);color:var(--texto-3)}
.dc-texto{font-size:var(--tipo-descripcion);color:var(--texto-2);overflow-wrap:anywhere}
.dc-texto b{font-weight:500;color:var(--yellow-alto)}
.dc-embed{
  margin-top:var(--esp-2);max-width:28rem;padding:var(--esp-3) var(--esp-4);
  background:var(--surface-2);border-left:3px solid var(--yellow);font-size:var(--tipo-descripcion);color:var(--texto-2);
  display:flex;flex-direction:column;gap:var(--esp-2);overflow-wrap:anywhere;
}
.dc-embed-titulo{font-weight:600;color:var(--texto-1)}
.dc-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:var(--esp-2) var(--esp-4)}
.dc-campo dt{font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3)}
.dc-campo dd{color:var(--texto-1)}
.dc-embed-pie{font-size:var(--tipo-leyenda);color:var(--texto-3)}
.dc-lista{list-style:decimal;padding-left:1.3em;display:flex;flex-direction:column;gap:var(--esp-1)}
.dc-lista b{font-weight:500;color:var(--texto-1)}
.dc-lista .es-elegida{color:var(--yellow)}
.dc-respuesta{display:flex;align-items:center;gap:var(--esp-1);margin:0 0 var(--esp-1) 1.25rem;font-size:var(--tipo-leyenda);color:var(--texto-3)}
.dc-respuesta b{font-weight:500;color:var(--texto-2)}
.dc-respuesta code{font-family:inherit;color:var(--texto-1)}
.dc-respuesta-ico{transform:rotate(180deg) scaleY(-1)}
.dc-boton{
  align-self:flex-start;margin-left:3.25rem;padding:var(--esp-2) var(--esp-4);clip-path:var(--bevel-sm);
  background:var(--brown);color:var(--texto-1);font-size:var(--tipo-control);font-weight:500;
}

/* ============================================================================
   LA ENTRADA
   ========================================================================== */
.entrada{padding-top:var(--esp-4)}
.entrada-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--esp-bloque);align-items:center;min-height:calc(100vh - var(--arriba) - var(--esp-seccion) * 2)}
.entrada-txt .eyebrow{margin-bottom:var(--esp-4)}
.entrada-titulo{font-family:var(--fuente-display);font-weight:800;text-transform:uppercase;font-size:var(--tipo-hero);line-height:.88}
.entrada-titulo em{display:block;font-style:normal;color:var(--yellow)}
.entrada-bajada{margin-top:var(--esp-rejilla);font-size:var(--tipo-entradilla);color:var(--texto-2);max-width:32rem}
.entrada-acciones{display:flex;flex-wrap:wrap;gap:var(--esp-3);margin-top:var(--esp-caja)}
.entrada-entrar .ico{width:1.5em;height:1.5em}
.entrada-nota{margin-top:var(--esp-4);font-size:var(--tipo-leyenda);color:var(--texto-3);max-width:30rem}
.entrada-escena{display:flex;flex-direction:column;align-items:center;gap:var(--esp-rejilla);min-width:0}
.entrada-moneda-caja{display:flex;flex-direction:column;align-items:center;gap:var(--esp-2)}
.entrada-moneda{width:min(11rem,40vw);aspect-ratio:1;background:none;border:0;cursor:pointer;transition:transform .25s var(--curva)}
.entrada-moneda img{width:100%;height:auto}
.entrada-moneda:active{transform:scale(.94)}
.entrada-contador{min-height:1.2em;font-family:var(--fuente-display-e);font-weight:700;letter-spacing:.01em;text-transform:uppercase;font-size:var(--tipo-dato);color:var(--yellow)}
.entrada-mensajes{width:100%;display:flex;flex-direction:column;gap:var(--esp-3)}
.entrada-msg{--caja-fondo:var(--surface);padding:var(--esp-4)}
.entrada-msg:nth-child(2){margin-left:var(--esp-bloque)}
.entrada-funciones{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:var(--esp-bloque);
  border-top:1px solid var(--line);
}
.entrada-funciones li{display:flex;flex-direction:column;gap:var(--esp-2);padding:var(--esp-rejilla) var(--esp-rejilla) 0;border-left:1px solid var(--line)}
.entrada-funciones li:first-child{border-left:0;padding-left:0}
.entrada-f-ico{width:1.75rem;height:1.75rem;color:var(--yellow)}
.entrada-funciones b{font-family:var(--fuente-display-e);font-weight:700;letter-spacing:.01em;text-transform:uppercase;font-size:var(--tipo-dato);line-height:1}
.entrada-funciones span{font-size:var(--tipo-descripcion);color:var(--texto-2)}

/* ============================================================================
   LOS SERVIDORES
   ========================================================================== */
.srv-grupo{margin-top:var(--esp-bloque);margin-bottom:var(--esp-4);padding-bottom:var(--esp-3);border-bottom:1px solid var(--line);
  font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3)}
.srv-rejilla{display:grid;gap:var(--esp-rejilla);grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.srv-tarjeta{
  padding:var(--esp-tarjeta);display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--esp-4);align-items:center;
  transition:transform .3s var(--curva);
}
.srv-tarjeta:not(.con-bot){--caja-fondo:var(--ink)}
.srv-tarjeta-nombre{font-family:var(--fuente-display-e);font-weight:700;letter-spacing:.01em;text-transform:uppercase;font-size:var(--tipo-dato);line-height:1;overflow-wrap:anywhere}
.srv-tarjeta-meta{margin-top:var(--esp-2);display:flex;align-items:center;gap:var(--esp-2);font-size:var(--tipo-leyenda);color:var(--texto-3)}
.srv-tarjeta-tags{display:flex;flex-wrap:wrap;gap:var(--esp-2);margin-top:var(--esp-3)}
.srv-tarjeta-accion{grid-column:1 / -1;justify-content:center}
.srv-tarjeta.con-bot:hover{--filo-color:var(--yellow)}
.srv-tarjeta .btn-primary .ico{transition:transform .2s var(--mov-rebote)}
.srv-tarjeta:hover .btn-primary .ico{transform:translateX(3px)}
.nota-aviso+.srv-grupo{margin-top:var(--esp-bloque)}
.servidores>.nota-aviso{margin-top:var(--esp-rejilla)}

/* ============================================================================
   RESUMEN
   ========================================================================== */
.cifras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cifra-celda{padding:var(--esp-rejilla);border-left:1px solid var(--line);min-width:0}
.cifra-celda:first-child{border-left:0;padding-left:0}
.cifra-nombre{display:flex;align-items:center;gap:var(--esp-2);font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3)}
.cifra{margin-top:var(--esp-2);font-family:var(--fuente-display-e);font-weight:800;letter-spacing:.01em;font-size:var(--tipo-numeral);line-height:1;font-variant-numeric:tabular-nums}
.rejilla-resumen{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);margin-top:var(--esp-bloque)}
.moneda-total{display:flex;align-items:center;gap:var(--esp-3);font-family:var(--fuente-display);font-weight:800;font-size:var(--tipo-cifra);line-height:.9}
.moneda-cifra{font-variant-numeric:tabular-nums}
.moneda-total .emoji-grande{width:.8em;height:.8em}
.leyenda{display:flex;flex-wrap:wrap;gap:var(--esp-2) var(--esp-rejilla);font-size:var(--tipo-leyenda);color:var(--texto-2)}
.leyenda li{display:inline-flex;align-items:center;gap:var(--esp-2)}
.leyenda i{width:.625rem;height:.625rem;display:inline-block}
.leyenda b{font-weight:600;color:var(--texto-1)}
.leyenda-sube i{background:var(--yellow)}
.leyenda-baja i{background:var(--gris-3)}
.grafico{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:2px;height:11rem}
.grafico-dia{display:grid;grid-template-rows:3fr 1fr auto;min-width:0;border-bottom:0}
.grafico-sube{align-self:end;height:var(--alto);background:var(--yellow);border-bottom:1px solid var(--ink);transition:background .15s}
.grafico-baja{align-self:start;height:min(100%,calc(var(--alto) * 3));background:var(--gris-3);transition:background .15s}
.grafico-eje{text-align:center;font-size:var(--tipo-etiqueta);color:var(--texto-3);padding-top:var(--esp-1)}
.grafico-dia:hover .grafico-sube{background:var(--yellow-alto)}
.grafico-dia:hover .grafico-baja{background:var(--gris-4)}
.grafico-dia:hover .grafico-eje{color:var(--texto-1)}
@media (prefers-reduced-motion:no-preference){
  .grafico-sube{animation:crecer .9s var(--curva) both;transform-origin:bottom}
  .grafico-baja{animation:crecer .9s var(--curva) both;transform-origin:top}
  @keyframes crecer{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}
.top{display:flex;flex-direction:column}
.top-fila{display:grid;grid-template-columns:2rem minmax(0,1fr) auto auto;align-items:center;gap:var(--esp-3);padding:var(--esp-3) 0;border-top:1px solid var(--line)}
.top-fila:first-child{border-top:0}
.top-n{font-family:var(--fuente-display-e);font-weight:800;font-size:var(--tipo-dato);line-height:1;color:var(--texto-3)}
.top-fila.es-primero .top-n{color:var(--yellow)}
.top-nombre{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-saldo{display:inline-flex;align-items:center;gap:var(--esp-1);font-weight:600;font-variant-numeric:tabular-nums}
.atajos{display:grid;gap:var(--esp-rejilla);grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.atajo{padding:var(--esp-tarjeta);display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;gap:var(--esp-1) var(--esp-3);align-items:center}
.atajo-ico{grid-row:1 / 3;width:1.75rem;height:1.75rem;color:var(--yellow)}
.atajo-nombre{font-family:var(--fuente-display-e);font-weight:700;letter-spacing:.01em;text-transform:uppercase;font-size:var(--tipo-dato);line-height:1}
.atajo-dato{grid-column:2;font-size:var(--tipo-leyenda);color:var(--texto-3)}
.atajo-flecha{grid-row:1 / 3;grid-column:3;color:var(--texto-3);transition:transform .25s var(--mov-rebote),color .15s}
.atajo:hover .atajo-flecha{transform:translateX(4px);color:var(--yellow)}
.atajo:focus-visible{outline:none;--filo-color:var(--yellow)}

/* ============================================================================
   ECONOMÍA
   ========================================================================== */
.eco-muestra{display:flex;flex-direction:column;align-items:center;gap:var(--esp-2);padding:var(--esp-2) 0 var(--esp-3);perspective:600px;border-bottom:1px solid var(--line)}
.eco-muestra-nombre{font-family:var(--fuente-display-e);font-weight:700;letter-spacing:.01em;text-transform:uppercase;font-size:var(--tipo-dato);color:var(--texto-2)}
.emojis{display:grid;gap:var(--esp-2);grid-template-columns:repeat(auto-fill,minmax(2.75rem,1fr))}
.emoji-op{
  position:relative;aspect-ratio:1;display:grid;place-items:center;border:0;cursor:pointer;
  font-size:var(--tipo-dato);background:var(--velo-1);clip-path:var(--bevel-sm);--filo-color:var(--line);
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));transition:transform .2s var(--mov-rebote),background .15s;
}
.emoji-op img{width:62%;height:62%;object-fit:contain}
.emoji-op:hover{transform:translateY(-2px);background:var(--velo-2)}
.emoji-op[aria-checked="true"]{--filo-color:var(--yellow);background:var(--velo-vivo)}
@supports (clip-path:polygon(evenodd,0 0,1px 1px,0 1px)){
  .emoji-op::after{content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-sm);background:var(--filo-color)}
  .emoji-op:focus-visible{outline:none;--filo-color:var(--yellow)}
  .emoji-op:focus-visible::after{clip-path:var(--filo-foco-sm)}
}
.emojis .vacio{grid-column:1 / -1}

.chips{display:flex;flex-wrap:wrap;gap:var(--esp-2)}
.chip-quitable{
  position:relative;display:inline-flex;align-items:center;gap:var(--esp-2);padding:var(--esp-1) var(--esp-1) var(--esp-1) var(--esp-3);
  font-size:var(--tipo-descripcion);background:var(--velo-1);clip-path:var(--bevel-xs);--filo-color:var(--line);
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));
}
.chip-quitable>.ico{color:var(--yellow)}
@supports (clip-path:polygon(evenodd,0 0,1px 1px,0 1px)){
  .chip-quitable::after{content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-xs);background:var(--filo-color)}
}
.chip-x{position:relative;z-index:1;display:grid;place-items:center;width:1.5rem;height:1.5rem;border:0;background:none;color:var(--texto-3);cursor:pointer}
.chip-x:hover{color:var(--texto-1)}

.canales{display:flex;flex-direction:column}
.canales-cab,.canal-fila{display:grid;grid-template-columns:minmax(0,1fr) 5.5rem 9rem;gap:var(--esp-3);align-items:center}
.canales-cab{font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);padding-bottom:var(--esp-2)}
.canal-fila{padding:var(--esp-2) 0;border-top:1px solid var(--line)}
.canal-nombre{display:inline-flex;align-items:center;gap:var(--esp-2);min-width:0;font-size:var(--tipo-descripcion)}
.canal-nombre span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.canal-nombre .ico{color:var(--texto-3)}
.canal-estado{border:0;cursor:pointer;font-family:inherit;justify-self:start;position:relative}
.canal-estado:hover{filter:brightness(1.2)}

.calc-caja{padding:var(--esp-tarjeta);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--esp-caja)}
.calc-mandos,.calc-condiciones{display:flex;flex-direction:column;gap:var(--esp-4)}
.calc{display:flex;flex-direction:column;gap:var(--esp-4)}
.calc-formula{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--esp-3)}
.calc-formula small{display:block;font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);margin-bottom:var(--esp-1)}
.calc-formula b{font-family:var(--fuente-display-e);font-weight:800;letter-spacing:.01em;font-size:var(--tipo-numeral);line-height:1;white-space:nowrap}
.calc-op{font-family:var(--fuente-display-e);font-weight:700;font-size:var(--tipo-dato);color:var(--texto-3);line-height:1.2}
.calc-total b{color:var(--yellow);display:inline-flex;align-items:center;gap:.2em}
.calc-partes{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.calc-partes li{display:flex;justify-content:space-between;gap:var(--esp-3);padding:var(--esp-2) 0;border-bottom:1px solid var(--line);font-size:var(--tipo-descripcion);color:var(--texto-2)}
.calc-partes b{font-weight:600;color:var(--texto-1)}
.calc-partes .es-negativo b{color:var(--gris-3)}
.limites-cuenta{font-size:var(--tipo-descripcion);color:var(--texto-2)}
.limites-cuenta b{font-weight:600;color:var(--texto-1)}
.limites-excluidos{font-size:var(--tipo-descripcion);color:var(--texto-2)}
.limites-excluidos b{font-family:var(--fuente-display-e);font-weight:800;font-size:var(--tipo-numeral);color:var(--texto-1);margin-right:var(--esp-2)}

/* ============================================================================
   NIVELES
   ========================================================================== */
.curva-caja{border-top:1px solid var(--line);padding-top:var(--esp-4)}
.curva{width:100%;height:auto;display:block;touch-action:pan-y}
.curva-guia{stroke:var(--line);stroke-width:1}
.curva-eje{fill:var(--texto-3);font-family:'Poppins',sans-serif;font-size:var(--tipo-leyenda)}
.curva-area{fill:var(--velo-vivo)}
.curva-linea{fill:none;stroke:var(--yellow);stroke-width:2;stroke-linejoin:round}
.curva-premio rect{fill:var(--yellow);stroke:var(--surface);stroke-width:2}
.curva-cruz{stroke:var(--texto-3);stroke-width:1;stroke-dasharray:3 3}
.curva-punto{fill:var(--yellow);stroke:var(--surface);stroke-width:2}
.curva-lectura{fill:var(--texto-1);font-family:'Poppins',sans-serif;font-weight:600;font-size:var(--tipo-leyenda)}
.curva-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(6rem,1fr));border-top:1px solid var(--line)}
.curva-datos>div{padding:var(--esp-3) var(--esp-4) 0;border-left:1px solid var(--line)}
.curva-datos>div:first-child{border-left:0;padding-left:0}
.curva-datos dt{font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3)}
.curva-datos dd{font-family:var(--fuente-display-e);font-weight:700;letter-spacing:.01em;font-size:var(--tipo-dato);line-height:1.1}
.fila-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr))}
.premios{display:flex;flex-direction:column;gap:var(--esp-3)}
.premio{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--esp-4);align-items:center;padding:var(--esp-4) var(--esp-rejilla)}
.premio-nivel{display:flex;flex-direction:column;align-items:center;min-width:3.5rem}
.premio-nivel small{font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3)}
.premio-nivel b{font-family:var(--fuente-display-e);font-weight:800;font-size:var(--tipo-numeral);line-height:1;color:var(--yellow)}
.premio-campos{display:grid;grid-template-columns:7.5rem minmax(0,1fr) auto;gap:var(--esp-4);align-items:end}
.premio-campos .fila-si{border-top:0;padding:0 0 var(--esp-2)}
.huecos{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2)}
.hueco{border:0;cursor:pointer;font-family:inherit;position:relative;text-transform:none;letter-spacing:.04em}
.hueco:hover{background:var(--velo-vivo)}

/* ============================================================================
   MISIONES, RECOMPENSAS Y SORTEOS
   ========================================================================== */
.misiones{display:grid;gap:var(--esp-rejilla);grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr));align-content:start}
.misiones>.vacio{grid-column:1 / -1}
.mision-tags{display:flex;flex-wrap:wrap;gap:var(--esp-2)}
.mision-premio{display:flex;flex-wrap:wrap;gap:var(--esp-2) var(--esp-4);font-size:var(--tipo-descripcion);color:var(--texto-2)}
.mision-hechas{font-size:var(--tipo-leyenda);color:var(--texto-3);margin-top:auto}
.mision-editor{display:flex;flex-direction:column;gap:var(--esp-4);border-top:1px solid var(--line);padding-top:var(--esp-4);cursor:auto}
.mini-datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.mini-datos>div{padding:var(--esp-3) var(--esp-3) 0;border-left:1px solid var(--line)}
.mini-datos>div:first-child{border-left:0;padding-left:0}
.mini-datos dt{font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3)}
.mini-datos dd{font-family:var(--fuente-display-e);font-weight:700;letter-spacing:.01em;font-size:var(--tipo-dato);line-height:1.1}
.bonos-rol{display:flex;flex-direction:column;gap:var(--esp-2)}
.bonos-rol li{display:grid;grid-template-columns:minmax(0,1fr) 9rem auto;gap:var(--esp-3);align-items:center}
.bonos-rol-nombre{font-size:var(--tipo-descripcion);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tienda-precio{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-3);flex-wrap:wrap}
.tienda-cifra{display:inline-flex;align-items:center;gap:var(--esp-2);font-family:var(--fuente-display-e);font-weight:800;letter-spacing:.01em;font-size:var(--tipo-numeral);line-height:1}
.tienda-cifra .emoji-grande{width:.8em;height:.8em}

/* El asistente: el campo con su unidad al lado. */
.as-con-sufijo{display:flex;align-items:center;gap:var(--esp-3)}
.as-con-sufijo .as-campo{flex:1;min-width:0}
.as-con-sufijo span{font-size:var(--tipo-entradilla);color:var(--texto-3);white-space:nowrap}
.as-opcion .ico{width:1.6em;height:1.6em;color:var(--yellow)}

/* ============================================================================
   EVENTOS Y AJUSTES
   ========================================================================== */
.agenda{display:flex;flex-direction:column;gap:var(--esp-bloque)}
.agenda-dia{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:var(--esp-4)}
.agenda-fecha{display:flex;flex-direction:column;align-items:flex-start;position:sticky;top:calc(var(--arriba) + var(--esp-rejilla));align-self:start}
.agenda-fecha b{font-family:var(--fuente-display-e);font-weight:800;font-size:var(--tipo-numeral);line-height:1;color:var(--yellow)}
.agenda-fecha span{font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3)}
.agenda-eventos{display:grid;gap:var(--esp-rejilla)}
.evento-canal{display:flex;align-items:center;gap:var(--esp-2);font-size:var(--tipo-leyenda);color:var(--texto-3)}
.evento-falta{margin-left:auto;color:var(--texto-2);font-weight:500}
.fila-si.es-pronto{opacity:.7}

.gestores{display:flex;flex-direction:column;gap:var(--esp-3)}
.gestor{padding:var(--esp-4) var(--esp-rejilla);display:flex;flex-direction:column;gap:var(--esp-3)}
.gestor.es-fijo{--caja-fondo:var(--ink)}
.gestor-cab{display:flex;align-items:center;gap:var(--esp-3);flex-wrap:wrap}
.gestor-cab>.ico{color:var(--yellow)}
.gestor-cab b{flex:1;min-width:0;font-weight:600}
.gestor-modulos{display:flex;flex-wrap:wrap;gap:var(--esp-2)}
.ficha-mod{
  position:relative;display:inline-flex;align-items:center;gap:var(--esp-2);padding:var(--esp-2) var(--esp-3);border:0;cursor:pointer;
  font-size:var(--tipo-leyenda);font-weight:500;color:var(--texto-3);background:var(--velo-1);clip-path:var(--bevel-sm);--filo-color:var(--line);
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));transition:color .15s,background .15s;
}
.ficha-mod:hover{color:var(--texto-1)}
.ficha-mod[aria-pressed="true"]{color:var(--texto-1);background:var(--velo-vivo);--filo-color:var(--yellow)}
.ficha-mod[aria-pressed="true"] .ico{color:var(--yellow)}
@supports (clip-path:polygon(evenodd,0 0,1px 1px,0 1px)){
  .ficha-mod::after{content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-sm);background:var(--filo-color)}
  .ficha-mod:focus-visible{outline:none;--filo-color:var(--yellow)}
  .ficha-mod:focus-visible::after{clip-path:var(--filo-foco-sm)}
}
.peligro{--filo-color:var(--gris-2);--caja-fondo:var(--gris-1)}
.peligro-fila{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-4);flex-wrap:wrap;padding:var(--esp-4) var(--esp-rejilla)}
.peligro-fila+.peligro-fila{border-top:1px solid var(--gris-2)}
.peligro-fila b{font-weight:600}
.peligro .nota{color:var(--gris-4)}

/* ============================================================================
   LA BARRA DE GUARDAR, LOS AVISOS, EL DIÁLOGO Y LA CHISPA
   ========================================================================== */
.guardar{position:fixed;z-index:80;bottom:var(--esp-rejilla);left:0;right:0;display:flex;justify-content:center;padding:0 var(--esp-4);pointer-events:none}
.app.con-lateral~.guardar{left:var(--lateral-w)}
.guardar-in{
  pointer-events:auto;display:flex;align-items:center;gap:var(--esp-4);width:min(100%,48rem);
  padding:var(--esp-3) var(--esp-3) var(--esp-3) var(--esp-rejilla);--filo-color:var(--yellow);--caja-fondo:var(--surface-2);
}
.guardar-punto{width:.5rem;height:.5rem;flex:none;background:var(--yellow);transform:rotate(45deg)}
.guardar-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.guardar-txt b{font-weight:600;font-size:var(--tipo-descripcion);white-space:nowrap}
.guardar-nota{font-size:var(--tipo-leyenda);color:var(--texto-3)}
.guardar-botones{display:flex;gap:var(--esp-2);flex:none}
@media (prefers-reduced-motion:no-preference){
  .guardar:not([hidden]) .guardar-in{animation:subir .35s var(--mov-rebote)}
  .guardar-punto{animation:latido 1.2s ease-in-out infinite alternate}
  @keyframes subir{from{transform:translateY(120%)}to{transform:none}}
}
.avisos{position:fixed;z-index:95;bottom:var(--esp-rejilla);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:var(--esp-2);width:min(calc(100% - 2rem),26rem);pointer-events:none}
html.con-cambios .avisos{bottom:calc(var(--esp-rejilla) + 5.5rem)}
.aviso{display:flex;align-items:center;gap:var(--esp-3);padding:var(--esp-3) var(--esp-4);--caja-fondo:var(--surface-2);font-size:var(--tipo-descripcion);color:var(--texto-1);clip-path:var(--bevel-sm)}
.aviso::before{clip-path:var(--bevel-sm)}
.aviso-ico{color:var(--yellow)}
.chispa{position:fixed;z-index:2000;width:.375rem;height:.375rem;background:var(--yellow);pointer-events:none}

.dialogo{margin:auto;padding:0;border:0;background:transparent;color:var(--texto-1);width:min(30rem,calc(100% - 2rem));max-width:none}
.dialogo::backdrop{background:rgba(23,17,13,.82)}
.dialogo-in{padding:var(--esp-caja);display:flex;flex-direction:column;gap:var(--esp-3);--caja-fondo:var(--surface)}
.dialogo-titulo{font-family:var(--fuente-display);font-weight:800;text-transform:uppercase;font-size:var(--tipo-titulo);line-height:.9}
.dialogo-texto{font-size:var(--tipo-cuerpo);color:var(--texto-2)}
.dialogo-botones{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--esp-3);margin-top:var(--esp-3)}
@media (prefers-reduced-motion:no-preference){
  .dialogo[open] .dialogo-in{animation:aparecer-dlg .35s var(--curva)}
  @keyframes aparecer-dlg{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
}
.nota-sin-js{padding:var(--esp-bloque);color:var(--texto-2)}

/* ============================================================================
   PANTALLAS MEDIANAS Y PEQUEÑAS
   ========================================================================== */
@media (max-width:1180px){
  .dos-columnas,.dos-columnas-ancha{grid-template-columns:minmax(0,1fr)}
  .pegado{position:static}
  .rejilla-resumen{grid-template-columns:minmax(0,1fr)}
  .calc-caja{grid-template-columns:minmax(0,1fr)}
}

/* < 1024: la barra de módulos se vuelve un cajón desde la izquierda. */
@media (max-width:1023px){
  .app.con-lateral{display:block}
  .vista{padding:var(--esp-caja) var(--esp-rejilla) calc(var(--esp-seccion) + var(--esp-bloque))}
  .sub-barra{
    display:flex;position:sticky;top:var(--arriba);z-index:60;align-items:center;gap:var(--esp-3);
    padding:var(--esp-2) var(--esp-rejilla);background:var(--ink);border-bottom:1px solid var(--line);
  }
  .sub-barra-boton{gap:var(--esp-2)}
  .sub-barra-n{font-family:var(--fuente-display-e);font-weight:800;color:var(--yellow)}
  .lateral{
    position:fixed;z-index:85;top:var(--arriba);left:0;bottom:0;height:auto;width:min(18rem,85vw);
    transform:translateX(-102%);visibility:hidden;transition:transform .32s var(--curva),visibility 0s .32s;
  }
  .app.cajon-abierto .lateral{transform:none;visibility:visible;transition:transform .32s var(--curva)}
  .velo{display:block;position:fixed;z-index:84;inset:var(--arriba) 0 0 0;background:rgba(23,17,13,.7);opacity:0;pointer-events:none;transition:opacity .25s}
  .app.cajon-abierto .velo{opacity:1;pointer-events:auto}
  .app.con-lateral~.guardar{left:0}
  .entrada-hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .entrada-funciones{grid-template-columns:repeat(2,minmax(0,1fr))}
  .entrada-funciones li:nth-child(3){border-left:0;padding-left:0}
  .cifras{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cifra-celda:nth-child(3){border-left:0;padding-left:0}
  .cifra-celda:nth-child(n+3){border-top:1px solid var(--line)}
}

@media (max-width:640px){
  :root{--cab-h:3.5rem}
  .cab{padding:0 var(--esp-4);gap:var(--esp-3)}
  .cab-marca .pill,.cab-usuario,.franja-mas{display:none}
  .srv-boton-nombre{max-width:7.5rem}
  .vista{padding:var(--esp-rejilla) var(--esp-4) calc(var(--esp-seccion) + var(--esp-bloque))}
  .sub-barra{padding:var(--esp-2) var(--esp-4)}
  .tarjeta,.panel-form,.calc-caja{padding:var(--esp-4)}
  .entrada-msg:nth-child(2){margin-left:var(--esp-rejilla)}
  .entrada-funciones{grid-template-columns:minmax(0,1fr)}
  .entrada-funciones li{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-bottom:var(--esp-4)}
  .entrada-funciones li:first-child{border-top:0}
  .agenda-dia{grid-template-columns:minmax(0,1fr)}
  .agenda-fecha{position:static;flex-direction:row;align-items:baseline;gap:var(--esp-3)}
  .canales-cab{display:none}
  .canal-fila{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--esp-2)}
  .canal-fila>.campo{grid-column:1 / -1}
  .premio{grid-template-columns:minmax(0,1fr) auto}
  .premio-nivel{display:none}
  .premio-campos{grid-template-columns:minmax(0,1fr);gap:var(--esp-3)}
  .bonos-rol li{grid-template-columns:minmax(0,1fr) auto}
  .bonos-rol li>.campo{grid-column:1 / -1;grid-row:2}
  .guardar{bottom:0;padding:0}
  .guardar-in{width:100%;padding:var(--esp-3) var(--esp-4)}
  .guardar-nota{display:none}
  html.con-cambios .avisos{bottom:5rem}
  .dialogo-in{padding:var(--esp-rejilla)}
  .dialogo-botones .btn{flex:1;justify-content:center}
  /* El umbral de iOS para no ampliar al enfocar: no es un tamaño de la escala
     (la misma excepción que el panel). */
  .control input,.control select,.control textarea{font-size:1rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}
}

/* ---------- RETOQUES TRAS MIRAR LAS CAPTURAS ---------- */
/* componentes.css rellena los svg del botón de cuenta (el logo de Discord):
   la flecha de aquí es de trazo. */
.cuenta-boton .ico svg{fill:none;width:100%;height:100%}
.cuenta-boton .ico-lleno svg{fill:currentColor}
/* «Pronto» en la barra cabe sin salirse: la píldora no se encoge, el nombre sí. */
.lateral-nombre{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lateral-pill{letter-spacing:.08em;padding:.2rem .45rem}
/* El emoji al lado de una cifra display va a la altura de la cifra. */
.calc-total .emoji,.tienda-cifra .emoji{width:.8em;height:.8em}
/* Los campos de un embed: varias piezas seguidas con su hueco. */
.dc-campo dd{display:flex;flex-wrap:wrap;align-items:center;gap:.15em .6em}
@media (max-width:440px){
  .srv-boton-nombre{display:none}
}