/* Tipografía del logo de la carta. Va servida por la app, no instalada en el
   computador: el PNG lo hornea el navegador de quien publica y tiene que salir
   igual en cualquier máquina. */
@font-face {
  font-family: "Talina";
  src: url("fonts/talina.otf") format("opentype");
  font-weight: 400;
  font-display: block;
}

/* DELULU PHOTOCARDS - blanco + grises neutros + dorado oficial #D3BC9C */

:root {
  /* Escala NEUTRA, sin matiz calido. Los grises de antes tiraban a beige y,
     sumados al dorado en cada hover y cada fila activa, dejaban toda la app
     en sepia. El dorado se reserva para el acento: bordes de lo seleccionado,
     el logo y poco mas. Es el mismo sistema de reacciones.yaguarcharts.com. */
  --bg: #ffffff;
  --superficie: #fafafa;
  --tinta: #0a0a0a;
  --gris: #71717a;
  --gris-suave: #a1a1aa;
  --borde: #eaeaea;
  --borde-fuerte: #d4d4d8;   /* para lo que tiene que destacar sin usar color */
  --gold: #D3BC9C;         /* dorado oficial YAGUAR: EL acento */
  --gold-hover: #c2a67e;   /* dorado oscurecido, para acentos sobre dorado */
  --tinta-hover: #333338;  /* el hover de los botones solidos negros */
  --realce: #f4f4f5;       /* fondo de hover y de seleccion: gris, NO dorado */
  --gold-soft: var(--realce);   /* nombre viejo, se mantiene por compatibilidad */
  --rojo: #b3423a;
  --verde: #4a8757;        /* semaforo: sano */
  --azul: #3f6f9e;         /* semaforo: MEJOR que sano, la economia se limpia sola */
  --ambar: #c08a2e;        /* semaforo: ojo. Mas oscuro que el dorado, para que no se confunda con el acento de marca */
  --radio: 6px;
  --tr: .18s ease;
}

* { box-sizing: border-box; margin: 0; }

body {
  background: var(--bg);
  color: var(--tinta);
  font: 15px/1.5 -apple-system, "Segoe UI", sans-serif;
}

/* Convencion YAGUAR: los botones NUNCA se mueven, agrandan ni brillan.
   Solo cambio de color con transicion suave. */
button {
  transition: background var(--tr), border-color var(--tr), color var(--tr), opacity var(--tr);
}

/* ---------- header ---------- */
header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--borde);
}

h1, h2, .tab {
  font-family: "Special Gothic Expanded One", sans-serif;
  font-weight: 400;
}

h1 { font-size: 20px; letter-spacing: .5px; }
h1 span { color: var(--gold); }
h1 small { font-size: 10px; color: var(--gris-suave); font-family: monospace; letter-spacing: 0; }

nav { display: flex; gap: 4px; margin-left: auto; }

.tab {
  font-size: 12px;
  padding: 8px 14px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radio);
  cursor: pointer;
  color: var(--gris);
}
.tab:hover { color: var(--tinta); background: var(--superficie); }
.tab.active { border-color: var(--tinta); background: var(--tinta); color: #fff; }
.menu-pop .tab.active { border-color: var(--borde); background: var(--realce); color: var(--tinta); }

/* Menu de la cuenta en el header: el nombre despliega AYUDA, VOLVER A SUITE y
   SALIR. Se llama menu-CUENTA porque .menu-usuario ya existia: es el rotulo del
   cajon movil, y compartir el nombre le contagiaba su margen y su tipografia. */
.menu-cuenta > .tab-menu {
  display: flex; align-items: center; gap: 4px;
  font-size: 13px; color: var(--gris);
  border: 1px solid transparent; border-radius: var(--radio);
  background: none; padding: 0 8px; cursor: pointer;
  /* mismo alto que las pestañas del menu, para compartir la linea media */
  height: 33px; box-sizing: border-box;
}
.menu-cuenta > .tab-menu:focus { outline: none; }
.menu-cuenta > .tab-menu:focus-visible { border-color: var(--gold); }
.menu-cuenta > .tab-menu:hover { border-color: var(--borde); background: var(--superficie); color: var(--tinta); }
.menu-cuenta .menu-pop { min-width: 190px; }
/* un enlace vestido de pestaña se pinta IGUAL que los botones: heredar el
   color lo dejaba mas oscuro que sus vecinos sin ninguna razon */
a.tab { text-decoration: none; color: var(--gris); box-sizing: border-box; }
a.tab:hover { color: var(--tinta); }

/* la ayuda ancha y en dos columnas: el chorizo angosto no lo leia nadie */
.help-dlg { width: 900px; max-width: 94vw; }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; margin: 14px 0 18px; }
.help-grid h3 {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gris); margin: 0 0 6px; border-bottom: 1px solid var(--borde); padding-bottom: 5px;
}
.help-grid p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; }
.help-grid code { background: var(--realce); border-radius: 4px; padding: 0 4px; font-size: 12.5px; }
@media (max-width: 760px) { .help-grid { grid-template-columns: 1fr; } }

main { max-width: 1100px; margin: 0 auto; padding: 24px; }

.panel { display: none; }
.panel.visible { display: block; }
.hidden { display: none !important; }

/* ---------- barra de proyecto ---------- */
.sub-header {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 10px 14px;
  margin-bottom: 16px;
}
.sub-header #status { flex: 1; text-align: center; margin: 0; }
.sh-group { display: flex; align-items: center; gap: 8px; }
.sh-group button {
  padding: 8px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--bg);
  color: var(--gris);
  font-family: "Special Gothic Expanded One", sans-serif;
  font-size: 12px;
  cursor: pointer;
}
.sh-group button:hover { border-color: var(--gold); color: var(--tinta); background: var(--gold-soft); }
.sh-group button.primary { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.sh-group button.primary:hover { background: var(--tinta-hover); border-color: var(--tinta-hover); }
.sh-group button:disabled { opacity: .35; cursor: default; }

.chip {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--radio);
  background: var(--superficie);
  border: 1px solid var(--borde);
  color: var(--gris);
  font-family: "Special Gothic Expanded One", sans-serif;
  transition: background var(--tr), color var(--tr), border-color var(--tr);
}
.chip[data-st="propuesto"] { background: #faf6ef; color: var(--tinta); border-color: var(--gold); }
.chip[data-st="aprobado"] { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.chip[data-st="revision"] { background: #fdf0ee; color: var(--rojo); border-color: var(--rojo); }
.chip[data-st="publicado"] { background: #eef5ec; color: #3f7a3a; border-color: #3f7a3a; }

.banner {
  font-size: 13px;
  padding: 10px 12px;
  border: 1px solid var(--rojo);
  border-radius: var(--radio);
  background: #fdf0ee;
  color: var(--rojo);
  margin-bottom: 16px;
}

#status { font-size: 13px; min-height: 20px; color: var(--gris); }

/* ---------- disenador ---------- */
.designer-body { display: flex; gap: 32px; }

.form {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 20px;
  height: fit-content;
}

.paw-tabs {
  display: flex;
  margin: -20px -20px 6px;
  border-bottom: 1px solid var(--borde);
}
.paw-tabs .r-btn {
  flex: 1;
  padding: 12px 0;
  border: none;
  border-bottom: 3px solid transparent;
  background: none;
  font-family: "Special Gothic Expanded One", sans-serif;
  font-size: 12px;
  color: var(--gris);
  cursor: pointer;
  border-radius: 0;
}
.paw-tabs .r-btn:first-child { border-top-left-radius: var(--radio); }
.paw-tabs .r-btn:last-child { border-top-right-radius: var(--radio); }
.paw-tabs .r-btn:hover { color: var(--tinta); background: var(--superficie); }
.paw-tabs .r-btn.active {
  border-bottom-color: var(--gold);
  background: var(--gold-soft);
  color: var(--tinta);
}

label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--gris); }
label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--tinta); }

input[type="text"], input[type="password"], input[type="email"] {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 8px 10px;
  font-size: 15px;
  background: var(--superficie);
  color: var(--tinta);
  transition: border-color var(--tr), background var(--tr), box-shadow var(--tr);
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--bg);
  box-shadow: 0 0 0 3px rgba(211, 188, 156, .3);
}
input[type="checkbox"] { accent-color: var(--gold); }
input[type="range"] { accent-color: var(--gold); }

/* ---------- preview ---------- */
.preview-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.preview { display: flex; justify-content: center; }
#card {
  width: 375px; height: 525px;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .14));
  cursor: grab;
  touch-action: none;
}
#card.dragging { outline: 3px dashed var(--gold); outline-offset: 4px; }
.mockup { display: flex; gap: 12px; }
.mini-card {
  width: 110px; height: 154px;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .12));
  cursor: pointer;
  transition: opacity var(--tr);
}
.mini-card:hover { opacity: .85; }

/* ---------- toolbars y tablas ---------- */
.toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
select {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 8px 10px;
  background: var(--bg);
  color: var(--tinta);
  transition: border-color var(--tr);
}
select:hover, select:focus { border-color: var(--gold); outline: none; }
#cat-search {
  width: 280px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 8px 10px;
  background: var(--superficie);
  transition: border-color var(--tr), background var(--tr), box-shadow var(--tr);
}
#cat-search:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--bg);
  box-shadow: 0 0 0 3px rgba(211, 188, 156, .3);
}

table.lista {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
table.lista th {
  font-family: "Special Gothic Expanded One", sans-serif;
  font-weight: 400;
  font-size: 11px;
  color: var(--gris-suave);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--borde);
}
table.lista td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--borde);
  font-size: 14px;
  transition: background var(--tr);
}
table.lista tbody tr:hover td { background: var(--superficie); }
table.lista tr.inactive td { opacity: .4; }
img.micro { width: 26px; height: 36px; object-fit: cover; border-radius: 3px; display: block; }

.mini-btn {
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--bg);
  color: var(--gris);
  cursor: pointer;
}
.mini-btn:hover { border-color: var(--gold); color: var(--tinta); background: var(--gold-soft); }

.danger { border-color: var(--rojo) !important; color: var(--rojo) !important; background: var(--bg) !important; }
.danger:hover { background: #fdf0ee !important; }
.danger:disabled { opacity: .4; cursor: default; }

/* ---------- menciones de usuario (estilo FLOW: Inter Tight mayusculas + avatar mini) ---------- */
.autoria {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  letter-spacing: .12em;
  color: rgba(29, 28, 26, .6);
  text-transform: uppercase;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.autoria strong { color: var(--tinta); font-weight: 700; letter-spacing: .08em; }
.avatar-mini {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.avatar-mini-fallback {
  background: var(--gold-soft);
  font-family: 'Inter Tight', sans-serif;
  font-size: 8px;
  font-weight: 700;
  color: var(--tinta);
  text-align: center;
  line-height: 14px;
  text-transform: uppercase;
  letter-spacing: 0;
}

/* ---------- curaduria ---------- */
.cur-item {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px;
  margin-bottom: 14px;
  transition: border-color var(--tr);
}
.cur-item:hover { border-color: var(--gold); }
.cur-cards { display: flex; gap: 8px; }
.cur-cards img { width: 84px; border-radius: 6px; }
.cur-meta { flex: 1; font-size: 14px; }
.cur-by { font-size: 12px; color: var(--gris); }
.cur-by .autoria { font-size: 9px; white-space: normal; }
.cur-actions { display: flex; gap: 8px; align-items: center; }
.cur-actions button {
  padding: 8px 14px;
  border: 1px solid var(--tinta);
  border-radius: var(--radio);
  background: var(--tinta);
  color: #fff;
  font-family: "Special Gothic Expanded One", sans-serif;
  font-size: 11px;
  cursor: pointer;
}
.cur-actions button:hover { background: var(--tinta-hover); border-color: var(--tinta-hover); }
.cur-self { font-size: 12px; color: var(--gris); font-style: italic; max-width: 180px; }
button.ghost { background: var(--bg) !important; color: var(--tinta) !important; }
button.ghost:hover { background: var(--gold-soft) !important; }

/* ---------- administracion ---------- */
/* Titulos de ADMINISTRACION: grandes, en negro y con aire entre secciones,
   para que cada bloque se lea como una seccion aparte y no como una lista. */
#tab-admin h2 {
  font-size: 26px;
  color: var(--tinta);
  margin: 52px 0 18px;
  letter-spacing: .1px;
}
#tab-admin > h2:first-of-type { margin-top: 8px; }
/* los titulos dentro de los modales no cambian */
#tab-admin dialog h2 { font-size: 14px; color: var(--tinta); margin-bottom: 14px; }
.pending { color: var(--gris-suave); font-size: 13px; }
#eras-ul { padding-left: 20px; }

/* ---------- login ---------- */
#login-view {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--bg);
}
#login-view .logo {
  font-family: "Special Gothic Expanded One", sans-serif;
  font-size: 26px;
}
#login-view .logo span { color: var(--gold); }
#login-view form { display: flex; flex-direction: column; gap: 10px; width: 300px; }
#login-view button {
  padding: 10px;
  border: 1px solid var(--tinta);
  border-radius: var(--radio);
  background: var(--tinta);
  color: #fff;
  font-family: "Special Gothic Expanded One", sans-serif;
  font-size: 12px;
  cursor: pointer;
}
#login-view button:hover { background: var(--tinta-hover); border-color: var(--tinta-hover); }
#login-error { color: var(--rojo); font-size: 13px; min-height: 16px; text-align: center; }

/* ---------- overlay de progreso ---------- */
#overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, .75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.ov-box {
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 26px 32px;
  width: 320px;
  text-align: center;
}
#ov-label {
  font-family: "Special Gothic Expanded One", sans-serif;
  font-size: 12px;
  color: var(--gris);
  margin-bottom: 14px;
}
/* ---------- barra de progreso común (progreso.js) ----------
   Todo proceso con carga muestra esta barra con el porcentaje, nunca un texto
   de "tarda tantos segundos" (Leon, 25-sep-2026). Misma pinta que tenía la del
   overlay: relleno dorado sobre un riel claro con borde. */
.prg { width: 100%; }
.prg-barra {
  height: 8px;
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: 999px;
  overflow: hidden;
}
.prg-lleno {
  height: 100%;
  width: 0%;
  background: var(--gold);
  border-radius: 999px;
  transition: width .25s ease;
}
.prg-pie {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--gris);
}
.prg-pie b { color: var(--tinta); font-weight: 700; font-variant-numeric: tabular-nums; }
/* en el overlay la etiqueta ya va arriba: el pie solo lleva el porcentaje */
#ov-prg .prg-pie { justify-content: center; }
#ov-prg .prg-etapa:empty { display: none; }
/* sobre la previa del holder (fondo oscuro encima de la imagen) */
.hd-previa-estado .prg { max-width: 220px; }
.hd-previa-estado .prg-barra { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .3); }
.hd-previa-estado .prg-pie, .hd-previa-estado .prg-pie b { color: #fff; }
/* el botón hace de barra: se llena de izquierda a derecha. Los !important son a
   propósito: cada contenedor define el botón con el atajo `background`, que
   borraría el relleno, y el estado deshabilitado lo apagaría mientras carga. */
button.prg-boton {
  --prg-color: rgba(211, 188, 156, .5);
  background-image: linear-gradient(90deg, var(--prg-color) var(--prg, 0%), transparent var(--prg, 0%)) !important;
  opacity: 1 !important;
  cursor: progress !important;
  font-variant-numeric: tabular-nums;
}
/* sobre el negro principal el dorado se embarra: ahí el relleno es claro */
button.primary.prg-boton { --prg-color: rgba(255, 255, 255, .26); }

/* ---------- dialogos ---------- */
dialog {
  margin: auto;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 28px;
  width: 340px;
  background: var(--bg);
  color: var(--tinta);
}
dialog::backdrop { background: rgba(29, 28, 26, .45); }
dialog h2 { font-size: 14px; color: var(--tinta); margin-bottom: 14px; }
dialog p { font-size: 14px; margin-bottom: 10px; color: var(--gris); }
dialog input { width: 100%; margin-bottom: 14px; }
/* los de marcar no se estiran: la regla de arriba los dejaba de 300 px de ancho
   y el texto quedaba disparado al otro extremo de la fila */
dialog input[type="checkbox"],
dialog input[type="radio"] { width: auto; flex: none; margin: 0; }
dialog button {
  padding: 8px 16px;
  border: 1px solid var(--tinta);
  border-radius: var(--radio);
  background: var(--tinta);
  color: #fff;
  font-family: "Special Gothic Expanded One", sans-serif;
  font-size: 12px;
  cursor: pointer;
}
dialog button:hover:not(:disabled) { background: var(--tinta-hover); border-color: var(--tinta-hover); }
dialog textarea {
  width: 100%;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 8px 10px;
  font: inherit;
  background: var(--superficie);
  margin-bottom: 14px;
  resize: vertical;
  transition: border-color var(--tr), background var(--tr);
}
dialog textarea:focus { outline: none; border-color: var(--gold); background: var(--bg); }
.dlg-actions { display: flex; gap: 8px; justify-content: flex-end; }

dialog.wide { width: 740px; max-width: 92vw; }
/* el editor de packs lleva el sobre al lado: necesita mas ancho que el resto */
dialog#dlg-pack.wide { width: 900px; }
#view-cards { display: flex; gap: 14px; justify-content: center; margin-bottom: 18px; }
#view-cards img { width: 200px; max-width: 28%; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .14)); }
#view-data { margin-bottom: 16px; }
#view-data td.k {
  font-family: "Special Gothic Expanded One", sans-serif;
  font-size: 11px;
  color: var(--gris);
  width: 140px;
}

.release-btn {
  padding: 10px 18px;
  border: 1px solid var(--tinta);
  border-radius: var(--radio);
  background: var(--tinta);
  color: #fff;
  font-family: "Special Gothic Expanded One", sans-serif;
  font-size: 12px;
  cursor: pointer;
}
.release-btn:hover { background: var(--tinta-hover); border-color: var(--tinta-hover); }

.toolbar-derecha { justify-content: flex-end; gap: 10px; }
#cur-buscar {
  margin-right: auto; width: min(340px, 100%);
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie); color: var(--tinta);
  font-size: 14px; padding: 8px 12px;
}
#cur-buscar:focus { outline: none; border-color: var(--gold); }
#cur-filtro {
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--bg); color: var(--gris);
  font-size: 12px; padding: 8px 10px; cursor: pointer;
  font-family: 'Special Gothic Expanded One', sans-serif; letter-spacing: .03em;
}
#cur-filtro:hover { border-color: var(--gold); color: var(--tinta); }
.release-btn:disabled {
  background: var(--gold-soft);
  border-color: var(--borde);
  color: var(--gris-suave);
  cursor: default;
}

/* ---------- pagina WORK ---------- */
.work-tabs { margin: 0 0 16px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--bg); }
.work-tabs .w-btn {
  flex: 1;
  padding: 12px 0;
  border: none;
  border-bottom: 3px solid transparent;
  background: none;
  font-family: "Special Gothic Expanded One", sans-serif;
  font-size: 12px;
  color: var(--gris);
  cursor: pointer;
}
.work-tabs { display: flex; }
.work-tabs .w-btn:hover { color: var(--tinta); background: var(--superficie); }
.work-tabs .w-btn.active { border-bottom-color: var(--gold); background: var(--gold-soft); color: var(--tinta); }
.work-panel { display: flex; gap: 32px; align-items: flex-start; }
.work-lista { flex: 1.2; }
.work-detalle {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.work-detalle h2 { font-size: 13px; color: var(--gris); }
.work-detalle textarea {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  background: var(--superficie);
  resize: vertical;
  transition: border-color var(--tr), background var(--tr);
}
.work-detalle textarea:focus { outline: none; border-color: var(--gold); background: var(--bg); }
.drop-zona {
  border: 2px dashed var(--borde);
  border-radius: var(--radio);
  padding: 34px 10px;
  text-align: center;
  font-family: "Special Gothic Expanded One", sans-serif;
  font-size: 11px;
  color: var(--gris-suave);
  cursor: pointer;
  transition: border-color var(--tr), color var(--tr);
}
.drop-zona:hover, .drop-zona.dragging { border-color: var(--gold); color: var(--gold-hover); }
#idol-preview, #trabajo-preview {
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: var(--radio);
  background:
    repeating-conic-gradient(var(--superficie) 0% 25%, var(--bg) 0% 50%) 0 0 / 20px 20px;
}
.primary-work {
  padding: 10px 0;
  border: 1px solid var(--tinta);
  border-radius: var(--radio);
  background: var(--tinta);
  color: #fff;
  font-family: "Special Gothic Expanded One", sans-serif;
  font-size: 12px;
  cursor: pointer;
}
.primary-work:hover { background: var(--tinta-hover); border-color: var(--tinta-hover); }
img.micro-esc { width: 48px; height: 30px; object-fit: cover; border-radius: 3px; display: block; }
tr.fila-activa td { background: var(--gold-soft) !important; }

/* Idol que ya está en juego pero sin sus 3 recortes: el equipo tiene que
   completarla cuanto antes, así que la fila late en rojo claro. */
@keyframes latido-urgente {
  0%, 100% { opacity: .38; }
  50%      { opacity: 1; }
}
tr.fila-urgente td {
  position: relative;
  background: rgba(206, 58, 58, .10);
}
/* la capa que late va en un pseudo-elemento y solo cambia de opacidad, que el
   navegador compone sin repintar la tabla */
tr.fila-urgente td::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(206, 58, 58, .16);
  animation: latido-urgente 1.6s ease-in-out infinite;
  will-change: opacity;
}
tr.fila-urgente.fila-activa td { background: var(--gold-soft) !important; }
tr.fila-urgente.fila-activa td::after { content: none; }
@media (prefers-reduced-motion: reduce) {
  tr.fila-urgente td::after { animation: none; opacity: .6; }
}

.acciones-corte { display: flex; gap: 8px; align-items: center; }
.acciones-corte .primary-work { flex: 1; }

/* el panel de edicion acompaña el scroll de la lista */
.work-detalle { position: sticky; top: 20px; }

/* IDOLS: panel de trabajo arriba y pegajoso, lista con buscador abajo */
.work-col { flex-direction: column; }
.detalle-arriba {
  position: sticky;
  top: 8px;
  z-index: 10;
  width: 100%;
  align-items: center;
}
.detalle-arriba > * { width: 100%; max-width: 560px; }
#idol-buscar {
  width: 280px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 8px 10px;
  background: var(--superficie);
  transition: border-color var(--tr), background var(--tr), box-shadow var(--tr);
}
#idol-buscar:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--bg);
  box-shadow: 0 0 0 3px rgba(211, 188, 156, .3);
}

/* lienzo con la proporcion real del juego (800x500), reservado desde el inicio */
#idol-canvas {
  width: 100%;
  aspect-ratio: 8 / 5;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: repeating-conic-gradient(var(--superficie) 0% 25%, var(--bg) 0% 50%) 0 0 / 20px 20px;
}
.work-lista { width: 100%; }

/* espacio de trabajo estable: alturas reservadas, nada aparece ni desaparece */
.acciones-corte { min-height: 40px; }
#work-status { min-height: 20px; font-size: 13px; color: var(--gris); }
#idol-canvas { cursor: pointer; }

/* indicador de carga dentro del boton (feedback funcional, no animacion decorativa) */
.spinner-inline {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar .7s linear infinite;
  vertical-align: -2px;
  margin-right: 8px;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---- CONTEXTO: formulario + mockup de Discord arriba, lista abajo ---- */
.ctx-arriba {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 28px;
  align-items: start;
  width: 100%;
}
.ctx-form { position: static; }
.ctx-mock { min-width: 0; }
.dc-chat {
  background: #313338;
  border-radius: 6px;
  padding: 18px 20px;
  color: #dbdee1;
  max-width: 560px;
}
.dc-cabecera { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dc-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gold) center/cover no-repeat; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Special Gothic Expanded One', sans-serif; font-size: 16px;
}
.dc-nombre { color: #fff; font-weight: 700; font-size: 14px; }
.dc-badge {
  background: #5865f2; color: #fff;
  font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 4px;
}
.dc-hora { color: #949ba4; font-size: 11px; }
#mock-canvas { width: 100%; height: auto; border-radius: 6px; display: block; }
.dc-embed {
  margin-top: 10px;
  background: #2b2d31;
  border-left: 4px solid #000;
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 520px;
}
.dc-embed p { margin: 0 0 10px; }
.dc-embed p:last-child { margin-bottom: 0; }
.dc-embed p:empty { display: none; }
.dc-titulo { color: #fff; font-weight: 700; }
/* texto del mensaje fuera del embed, encabezado # de Discord */
.dc-contenido { color: #fff; font-weight: 700; font-size: 22px; margin: 2px 0 6px; }
/* lineas del mensaje fuera del embed (reacciones: nota + pago) */
.dc-lineas { color: #dbdee1; margin-top: 8px; }
.dc-lineas b { color: #fff; }
.dc-emoji { width: 20px; height: 20px; vertical-align: -4px; }
/* linea -# de Discord (subtexto pequeno gris) */
.dc-sub { font-size: 12px; color: #949ba4; }
.dc-link { color: #00a8fc; text-decoration: underline; cursor: pointer; }

/* modo reacciones: sin textos ni geografia, solo foto + pantalla; sin embed en el mockup */
.modo-reaccion #fila-geo, .modo-cumple #fila-geo,
.modo-reaccion #lbl-locacion, .modo-cumple #lbl-locacion,
.modo-reaccion #lbl-intro, .modo-cumple #lbl-intro,
.modo-reaccion #lbl-despedida, .modo-cumple #lbl-despedida,
.modo-reaccion .dc-embed { display: none; }
.modo-reaccion #trabajos-table th:nth-child(2),
.modo-reaccion #trabajos-table td:nth-child(2),
.modo-reaccion #trabajos-table th:nth-child(3),
.modo-reaccion #trabajos-table td:nth-child(3),
.modo-cumple #trabajos-table th:nth-child(2),
.modo-cumple #trabajos-table td:nth-child(2),
.modo-cumple #trabajos-table th:nth-child(3),
.modo-cumple #trabajos-table td:nth-child(3) { display: none; }
/* el saludo de cumpleanos lleva boton, como en Discord */
.dc-boton {
  display: inline-block; margin-top: 12px; padding: 9px 15px; border-radius: 6px;
  background: #5865f2; color: #fff; font-size: 14px; font-weight: 500;
}
.dc-boton-fila { display: block; }
#trabajo-lienzo.marcando-tv { cursor: crosshair; }
#btn-marcar-tv { align-self: flex-start; }
@media (max-width: 1100px) {
  .ctx-arriba { grid-template-columns: 1fr; }
}

/* barra de titulo del formulario de CONTEXTO: boton NUEVO arriba a la derecha */
.proj-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}
.proj-bar h2 { margin: 0; }

#trabajo-preview { cursor: pointer; }

/* la foto del trabajo se encuadra como la muestra Discord: 800x500 con recorte */
#trabajo-preview {
  width: 100%;
  max-height: none;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}

/* escenario del CONTEXTO: espacio fijo reservado desde el inicio (8:5) */
.drop-escena {
  aspect-ratio: 8 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
#trabajo-lienzo {
  width: 100%;
  aspect-ratio: 8 / 5;
  border-radius: var(--radio);
  display: block;
  cursor: grab;
  touch-action: none;
}
#trabajo-lienzo.arrastrando { cursor: grabbing; }

/* panel CONTEXTO estable: todo espacio reservado aunque el elemento no este.
   NUEVO se oculta sin ceder su lugar (visibility en vez de display) */
#btn-trabajo-nuevo.hidden {
  display: inline-block !important;
  visibility: hidden;
  pointer-events: none;
}
#trabajo-status { min-height: 20px; font-size: 13px; color: var(--gris); margin: 0; }

/* pais y ciudad comparten fila en el formulario ensanchado */
.fila-doble {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}
.fila-doble label { width: 100%; min-width: 0; }
.fila-doble select { width: 100%; }

/* CONTEXTO v2: una sola card que abarca formulario + mockup, header arriba */
.ctx-card { width: 100%; flex: none; }
.ctx-header { border-bottom: 1px solid var(--borde); padding-bottom: 12px; }
.work-detalle .ctx-header h2 {
  font-size: 20px;
  color: var(--texto, #1c1a17);
  font-family: 'Special Gothic Expanded One', sans-serif;
  font-weight: 400;
}
.ctx-cuerpo {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 28px;
  align-items: start;
  width: 100%;
}
.ctx-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
@media (max-width: 1100px) {
  .ctx-cuerpo { grid-template-columns: 1fr; }
}

/* acciones del header de CONTEXTO: guardar y nuevo juntos, mismo estilo.
   El de guardar reserva ancho fijo para que sus avisos no muevan nada */
.ctx-header-botones { display: flex; gap: 8px; align-items: center; }
#btn-trabajo-crear { width: 190px; text-align: center; padding-left: 0; padding-right: 0; }

/* sidebar lateral de trabajos: se abre desde la izquierda y no bloquea el panel */
.ctx-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 520px;
  max-width: 90vw;
  background: var(--bg);
  border-right: 1px solid var(--borde);
  box-shadow: 12px 0 32px rgba(0, 0, 0, .12);
  transform: translateX(-105%);
  transition: transform .22s ease;
  z-index: 60;
  display: flex;
  flex-direction: column;
}
.ctx-drawer.abierta { transform: translateX(0); }
.ctx-drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--borde);
}
.ctx-drawer-top h2 {
  font-family: 'Special Gothic Expanded One', sans-serif;
  font-size: 15px;
  font-weight: 400;
}
#btn-ctx-cerrar {
  width: 30px; height: 30px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--bg);
  color: var(--gris);
  cursor: pointer;
  transition: color var(--tr), border-color var(--tr), background var(--tr);
}
#btn-ctx-cerrar:hover { color: var(--tinta); border-color: var(--gold); background: var(--gold-soft); }
.ctx-drawer-body { overflow-y: auto; padding: 10px 20px 20px; }

/* trabajos del sidebar: todo en una linea, locacion con puntos suspensivos */
.ctx-drawer .lista td { white-space: nowrap; }
.ctx-drawer .lista td:nth-child(4) {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* boton circular rojo con X para eliminar filas */
.btn-x {
  position: relative;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: transparent;
  color: var(--gris);
  font-size: 0;
  cursor: pointer;
  transition: color var(--tr), border-color var(--tr),
              background var(--tr), transform var(--tr);
}
/* la X se dibuja con dos barras: centrado geometrico exacto, sin glifo */
.btn-x::before,
.btn-x::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.btn-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
/* cerrar no es eliminar: al pasar el mouse la X se aclara, no se pone roja */
.btn-x:hover {
  color: #fff;
  border-color: var(--tinta);
  background: var(--tinta);
  transform: rotate(90deg);
}
.btn-x:active { transform: rotate(90deg) scale(.92); }
/* la unica X que si borra mantiene el rojo */
.btn-x.danger:hover, .btn-x[data-borra]:hover {
  color: #fff;
  border-color: var(--rojo);
  background: var(--rojo);
}
@media (prefers-reduced-motion: reduce) {
  .btn-x:hover, .btn-x:active { transform: none; }
}

/* dialogos con transicion suave de entrada y salida, en todo el sitio */
dialog {
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition:
    opacity .18s ease,
    transform .18s ease,
    overlay .18s ease allow-discrete,
    display .18s ease allow-discrete;
}
dialog[open] { opacity: 1; transform: none; }
@starting-style {
  dialog[open] { opacity: 0; transform: translateY(10px) scale(.98); }
}
dialog::backdrop {
  transition:
    background .18s ease,
    overlay .18s ease allow-discrete,
    display .18s ease allow-discrete;
}
dialog:not([open])::backdrop { background: rgba(29, 28, 26, 0); }
@starting-style {
  dialog[open]::backdrop { background: rgba(29, 28, 26, 0); }
}

/* buscador del sidebar de trabajos */
.ctx-drawer-top input {
  flex: 1;
  margin: 0 14px;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  font: inherit;
  font-size: 13px;
  transition: border-color var(--tr), background var(--tr);
}
.ctx-drawer-top input:focus { outline: none; border-color: var(--gold); background: var(--bg); }

/* cuerpo del panel IDOLS dentro de la card (mismo esqueleto que CONTEXTO) */
.idols-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  width: 100%;
}
.idols-cuerpo > * { width: 100%; max-width: 560px; }
.drawer-count { font-size: 12px; color: var(--gris); display: block; margin: 4px 0 8px; }
#idols-drawer #idol-buscar { width: auto; flex: 1; margin: 0 14px; }
#idols-drawer .lista td { white-space: nowrap; }

/* eras del administrador agrupadas por grupo */
#eras-ul { list-style: none; padding: 0; }
.era-grupo { margin: 0 0 16px; }
.era-grupo strong {
  font-family: 'Special Gothic Expanded One', sans-serif;
  font-weight: 400;
  font-size: 13px;
}
.era-grupo ul { list-style: disc; margin: 6px 0 0 22px; }
.era-grupo li { font-size: 14px; margin: 2px 0; }

/* buscador de proyectos, a la derecha de la barra */
#proj-buscar {
  margin-left: auto;
  width: 260px;
  padding: 7px 10px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  font: inherit;
  font-size: 13px;
  transition: border-color var(--tr), background var(--tr);
}
#proj-buscar:focus { outline: none; border-color: var(--gold); background: var(--bg); }

/* fichas de grupo e idol */
.link-ficha { cursor: pointer; transition: color var(--tr); }
.link-ficha:hover { color: var(--tinta); }
#dlg-ficha { width: 560px; }
#dlg-ficha .proj-bar { margin-bottom: 6px; }
#ficha-stats { min-height: 18px; }
.ficha-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 12px;
  color: var(--gris);
  font-family: 'Special Gothic Expanded One', sans-serif;
  font-size: 13px;
}
.ficha-media img { width: 100%; height: 100%; object-fit: cover; }
.ficha-media img.hidden + div { display: flex; }
.ficha-media img:not(.hidden) + div { display: none; }
#ficha-idol-zona .ficha-media img { object-fit: contain; }
/* Datos de la idol: cada dato en su fila, con el rotulo arriba del control,
   igual que el resto de los formularios del panel. */
.ficha-datos {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
}
.ficha-campo { display: flex; flex-direction: column; gap: 6px; }
.ficha-campo-fila { display: flex; align-items: center; gap: 10px; }
.ficha-nac-label {
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--tinta);
  font-weight: 600;
}
/* el campo de fecha traia la tipografia del sistema: se iguala a los demas */
.ficha-datos input[type="date"],
.ficha-datos select {
  font-family: inherit;
  font-size: 15px;
  color: var(--tinta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 8px 10px;
  background: var(--superficie);
  width: 200px;
  box-sizing: border-box;
  height: 38px;
  margin: 0;
}
#ficha-edad {
  font-size: 13px;
  color: var(--gris);
}
#ficha-edad.sin-fecha { color: var(--gris-suave); }
#ficha-edad.edad-menor { color: var(--rojo); font-weight: 600; }
.ficha-datos .mini-btn { margin: 0; }
.ficha-buscador { display: flex; gap: 8px; margin: 10px 0; }
.ficha-buscador input { flex: 1; }
.tenor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  min-height: 0;
}
.tenor-grid:empty { display: none; }
.tenor-grid img {
  width: 100%;
  height: 84px;
  object-fit: cover;
  border-radius: var(--radio);
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--tr);
}
.tenor-grid img:hover, .tenor-grid img.sel { border-color: var(--gold); }

/* estado de fichas en los nombres de las listas */
.link-ficha.ficha-falta { color: var(--rojo); }
.link-ficha.ficha-incompleta { color: #a16207; }
.link-ficha.ficha-falta:hover, .link-ficha.ficha-incompleta:hover { color: var(--tinta); }

/* tablas de PROYECTOS y CATALOGO: todo en una linea, largos con puntos suspensivos */
#proj-table td, #cat-table td { white-space: nowrap; }
#proj-table td:nth-child(1), #cat-table td:nth-child(3) {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}
#proj-table td:nth-child(2), #cat-table td:nth-child(4) {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}
#proj-table td:nth-child(3), #cat-table td:nth-child(5) {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* boton circular de abrir: chevron hacia arriba, hover dorado */
.btn-up {
  position: relative;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: transparent;
  color: var(--gris);
  cursor: pointer;
  transition: color var(--tr), border-color var(--tr);
}
.btn-up::before {
  content: '';
  position: absolute;
  top: 56%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.btn-up:hover { color: var(--tinta); border-color: var(--gold); }

/* los botones circulares comparten metrica exacta: misma linea base siempre */
.btn-x, .btn-up {
  display: inline-block;
  vertical-align: middle;
  font-size: 0;
  line-height: 0;
}
#proj-table td:nth-last-child(1), #proj-table td:nth-last-child(2) { text-align: center; }

/* chips de estado en la tabla de proyectos: mismo ancho para todos */
#proj-table .chip {
  display: inline-block;
  width: 118px;
  text-align: center;
  box-sizing: border-box;
}

/* boton flotante para volver arriba en listas largas */
#btn-subir {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: var(--bg);
  color: var(--gris);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .10);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tr), color var(--tr), border-color var(--tr);
  z-index: 50;
}
#btn-subir.visible { opacity: 1; pointer-events: auto; }
#btn-subir::before {
  content: '';
  position: absolute;
  top: 56%;
  left: 50%;
  width: 11px;
  height: 11px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
#btn-subir:hover { color: var(--tinta); border-color: var(--gold); }

/* el chip de estado del disenador calza con la metrica de los botones del header */
.sub-header .chip {
  font-size: 12px;
  padding: 8px 14px;
  box-sizing: border-box;
}

/* ---- revision de curaduria a pantalla completa (estilo FLOW) ---- */
.cur-full {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow-y: auto;
  /* el gradiente vive en el contenedor mismo: en iOS un fondo fixed dentro
     de un scroller se repinta tarde y deja ver la pagina de atras */
  background: linear-gradient(115deg, #fdfbf6, #f6efe4, #fbf3e3, #f2ebdd, #fdfbf6);
  background-size: 320% 320%;
  animation: curgrad 18s ease infinite;
  overscroll-behavior: contain;
}
.cur-full-fondo { display: none; }
@keyframes curgrad {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.cur-full-contenido {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 34px 40px 70px;
}
.cur-full-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}
.cur-full-header h2 {
  font-family: 'Special Gothic Expanded One', sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: var(--tinta);
}
.cur-full-header .flecha { color: var(--gold); margin-right: 6px; }
.btn-x-grande { width: 34px; height: 34px; background: var(--bg); }
.cur-full-cuerpo {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 30px;
  align-items: start;
}
/* La plantilla dibuja la carta al 92% centrada: 4% de margen transparente
   por lado. El marco recorta ese aire con matematica exacta para que la
   photocard quede alineada al pixel con el resto del layout. */
.curf-marco {
  position: relative;
  width: 100%;
  max-width: 386px;
  aspect-ratio: 690 / 966;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 26px;
  box-shadow: 0 16px 34px rgba(29, 28, 26, .16);
}
/* `img` y `canvas`: el lienzo que se dibuja en vivo para los rediseños de la
   comunidad necesita exactamente el mismo recorte que una carta ya publicada,
   porque las dos traen incorporado el margen transparente de 4% por lado. */
.curf-marco img, .curf-marco canvas {
  position: absolute;
  width: 108.696%;
  left: -4.348%;
  top: -4.348%;
}
/* dos capas para el crossfade: la nueva se mezcla sobre la anterior */
.curf-marco img.capa { opacity: 0; transition: opacity .32s ease; }
.curf-marco img.capa.activa { opacity: 1; }
.curf-check {
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px 18px;
}
.curf-check-top {
  display: flex;
  justify-content: space-between;
  font-family: 'Special Gothic Expanded One', sans-serif;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--tinta);
  margin-bottom: 8px;
}
#curf-items, #ctcr-items, #ctcutr-items { list-style: none; padding: 0; margin: 0; }
#curf-items li, #ctcr-items li, #ctcutr-items li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--superficie);
  font-size: 13.5px;
}
#curf-items li:last-child, #ctcr-items li:last-child, #ctcutr-items li:last-child { border-bottom: none; }
#curf-items li.ok .curf-txt, #ctcr-items li.ok .curf-txt, #ctcutr-items li.ok .curf-txt { text-decoration: line-through; color: var(--gris); }
#curf-items li.mal .curf-txt, #ctcr-items li.mal .curf-txt, #ctcutr-items li.mal .curf-txt { color: var(--rojo); }
.curf-btns { display: flex; gap: 6px; flex: none; }
.curf-btns button {
  padding: 3px 11px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--bg);
  color: var(--tinta);
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background var(--tr), color var(--tr), border-color var(--tr);
}
.curf-btns button:hover { border-color: var(--gold); }
.curf-btns button.sel-si { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.curf-btns button.sel-no { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.curf-check-acciones { display: flex; justify-content: flex-end; margin-top: 14px; }
.cur-full-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 26px 0 20px;
}
#curf-paw {
  font-family: 'Special Gothic Expanded One', sans-serif;
  font-size: 15px;
}
/* datos al estilo FLOW: etiquetas doradas en versalitas, valores en mono */
.curf-datos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 30px;
  margin-top: 10px;
}
.dato-k {
  display: block;
  font-family: 'Special Gothic Expanded One', sans-serif;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta);
  margin-bottom: 5px;
}
.dato-v {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--tinta);
}
#curf-resumen-cartas {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin: 36px 0 30px;
}
.curf-marco.chico {
  width: 28%;
  max-width: 290px;
  margin: 0;
  border-radius: 20px;
  box-shadow: 0 12px 26px rgba(29, 28, 26, .15);
}
.curf-resumen-acciones { display: flex; justify-content: center; gap: 14px; }
#curf-resumen-nota { text-align: center; margin-top: 16px; min-height: 18px; color: var(--gris); font-size: 13.5px; }
@media (max-width: 900px) {
  .cur-full-cuerpo { grid-template-columns: 1fr; }
}

/* el modal de revision necesita aire para los puntos prellenados */
#dlg-review { width: 540px; }
#dlg-review textarea {
  width: 100%;
  min-height: 190px;
  box-sizing: border-box;
  font-size: 13.5px;
  line-height: 1.5;
  resize: vertical;
}

/* marca de esquina del slot: neutra libre, holografica en movimiento tomada */
.cur-item { position: relative; overflow: hidden; }
.cur-item::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  background: var(--superficie);
  transition: background var(--tr);
  pointer-events: none;
}
/* esquina activa en las propuestas propias: dorada y clickeable */
.cur-item.mia::after { background: var(--gold-soft); }
.cur-item.mia:hover::after { background: var(--gold); }
.cur-esquina {
  position: absolute; top: 0; right: 0; width: 36px; height: 36px;
  background: none; border: 0; cursor: pointer; z-index: 2; padding: 0;
}
.cur-esquina-pop {
  position: absolute; top: 34px; right: 8px; z-index: 61;
  background: var(--bg); border: 1px solid var(--borde); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .13); padding: 5px;
}
.cur-esquina-pop button {
  display: block; width: 100%; text-align: left; white-space: nowrap;
  font-size: 12px; padding: 8px 14px; background: none;
  border: 1px solid transparent; border-radius: var(--radio);
  color: var(--gris); cursor: pointer;
  font-family: 'Special Gothic Expanded One', sans-serif;
}
.cur-esquina-pop button:hover { color: var(--tinta); background: var(--superficie); }

.cur-item.tomado::after {
  background: linear-gradient(120deg,
    #ffd9e8, #d9e8ff, #d9ffe9, #fff3c9, #ecd9ff, #ffd9e8);
  background-size: 500% 500%;
  animation: holo 6s linear infinite;
}
@keyframes holo {
  0% { background-position: 0% 50%; }
  100% { background-position: 500% 50%; }
}

/* TOMAR y SOLTAR comparten caja fija: el intercambio no mueve la fila */
.btn-tomar {
  width: 96px;
  text-align: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

.curf-btns button:disabled { opacity: .4; cursor: default; }
.curf-btns button:disabled:hover { border-color: var(--borde); }

/* ---- transiciones del visor de curaduria ---- */
/* apertura y cierre con desvanecimiento (display via allow-discrete) */
.cur-full {
  transition: opacity .25s ease, display .25s ease allow-discrete;
}
.cur-full.hidden { opacity: 0; }
@starting-style {
  .cur-full:not(.hidden) { opacity: 0; }
}
.cur-full-contenido { transition: opacity .28s ease; }
@starting-style {
  .cur-full:not(.hidden) .cur-full-contenido { opacity: 0; }
}

/* cambio de paso: un solo fundido sobrio del bloque completo.
   Dentro del checklist NADA se anima salvo el color de los botones. */
.anim-paso { animation: pasoIn .24s ease; }
@keyframes pasoIn {
  from { opacity: 0; }
}
#curf-items li.ok .curf-txt { opacity: .65; }

/* checklist final del resumen */
.curf-check-final {
  max-width: 640px;
  margin: 0 auto 26px;
}
#curf-items-final { list-style: none; padding: 0; margin: 0; }
#curf-items-final li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
}
#curf-items-final li.ok .curf-txt { text-decoration: line-through; color: var(--gris); opacity: .65; }
#curf-items-final li.mal .curf-txt { color: var(--rojo); }
#curf-datos-resumen { margin: 6px 0 34px; }

/* ---- responsive movil ---- */
@media (max-width: 720px) {
  /* slots de curaduria apilados: cartas arriba, meta y acciones abajo */
  .cur-item {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .cur-cards { justify-content: center; }
  .cur-cards img { width: 30%; max-width: 110px; height: auto; }
  .cur-meta { text-align: center; }
  .cur-actions { flex-wrap: wrap; justify-content: center; }

  /* visor de curaduria a pantalla completa */
  .cur-full-contenido { padding: 20px 16px 50px; }
  .cur-full-header h2 { font-size: 17px; }
  .cur-full-cuerpo { gap: 20px; }
  .curf-marco { max-width: 320px; }
  .curf-datos { grid-template-columns: 1fr 1fr; gap: 14px 18px; }
  #curf-resumen-cartas { flex-wrap: wrap; gap: 14px; }
  .curf-marco.chico { width: 46%; max-width: 220px; }

  /* barra de liberar tanda y toolbar */
  .toolbar-derecha { justify-content: center; }

  /* fichas y tablas generales */
  .ctx-cuerpo { grid-template-columns: 1fr; }
  .ctx-header-botones { flex-wrap: wrap; justify-content: flex-end; }
  #btn-trabajo-crear { width: auto; min-width: 150px; padding-left: 10px; padding-right: 10px; }
  .ctx-drawer { width: 100vw; max-width: 100vw; }
  #dlg-review, #dlg-ficha { width: min(540px, 92vw); }
  .tenor-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- menu hamburguesa (solo movil) ---- */
#btn-menu {
  display: none;
  position: relative;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--bg);
  cursor: pointer;
  flex: none;
  transition: border-color var(--tr);
}
#btn-menu:hover { border-color: var(--gold); }
#btn-menu span,
#btn-menu span::before,
#btn-menu span::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  background: var(--tinta);
  transform: translate(-50%, -50%);
}
#btn-menu span::before { transform: translate(-50%, calc(-50% - 5px)); }
#btn-menu span::after { transform: translate(-50%, calc(-50% + 5px)); }

.menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 6px;
  border: none;
  border-bottom: 1px solid var(--superficie);
  background: transparent;
  font-family: 'Special Gothic Expanded One', sans-serif;
  font-size: 15px;
  color: var(--tinta);
  cursor: pointer;
  transition: color var(--tr), background var(--tr);
}
.menu-item:hover { background: var(--gold-soft); }
.menu-item.activo { color: var(--tinta); }
#menu-drawer { width: 300px; }

@media (max-width: 900px) {
  /* `hidden` crea un contenedor de scroll y eso ROMPE position: sticky. `clip`
     evita el scroll horizontal igual sin crearlo; el hidden queda de respaldo
     para navegadores que no entiendan clip. */
  body { overflow-x: hidden; overflow-x: clip; }
  header {
    flex-wrap: nowrap;
    gap: 12px;
    padding: 12px 14px;
  }
  header nav { display: none; }
  #btn-menu { display: inline-block; }
  header h1 { font-size: 17px; white-space: nowrap; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .menu-cuenta { display: none; }
  main { padding: 14px; }

  /* disenador: barra superior en UNA fila compacta, sin texto de estado */
  .sub-header { flex-wrap: nowrap; gap: 8px; justify-content: space-between; }
  .sub-header #status { display: none; }
  .sub-header .sh-group { gap: 6px; }
  .sub-header .sh-group button, .sub-header .chip {
    padding: 8px 10px;
    font-size: 11px;
    white-space: nowrap;
  }
  .designer-body { flex-direction: column; }
  .form { width: 100%; box-sizing: border-box; }
  .preview-col { width: 100%; }
  #card { width: min(100%, 375px); height: auto; aspect-ratio: 750 / 1050; }
  .mockup { justify-content: center; }
  .mini-card { width: 28%; max-width: 110px; height: auto; aspect-ratio: 750 / 1050; }

  /* lienzos de WORK al ancho disponible */
  #idol-canvas, #mock-canvas, #trabajo-lienzo { max-width: 100%; height: auto; }
  .idols-cuerpo > * { max-width: 100%; }
}

/* iOS hace zoom automatico en campos con letra <16px: en movil van a 16px
   exactos y el viewport se queda quieto */
/* NORMA: en movil TODO campo de texto va a 16px exactos, sin excepciones,
   porque bajo eso Safari iOS hace zoom automatico al enfocar */
@media (max-width: 900px) {
  input, textarea, select {
    font-size: 16px !important;
  }
}

/* pie del menu movil: usuario + SALIR y ? con la misma caja */
.menu-pie {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
}
.menu-usuario {
  display: block;
  font-family: 'Special Gothic Expanded One', sans-serif;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--gris);
  margin-bottom: 12px;
}
.menu-pie-botones { display: flex; gap: 8px; }
.menu-pie-botones button { box-sizing: border-box; height: 38px; }
.menu-pie-botones button:first-child { flex: 1; }
.menu-pie-botones button:last-child { width: 46px; }

@media (max-width: 900px) {
  /* en tactil, el gesto vertical sobre los canvas debe scrollear la pagina;
     el ajuste de la foto queda en el arrastre horizontal */
  #card, #trabajo-lienzo, #idol-canvas { touch-action: pan-y; }
}

/* tablas grandes con scroll horizontal propio (la pagina nunca se desborda) */
.tabla-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
@media (max-width: 900px) {
  /* PROYECTOS: primero grupo / idol / era a pantalla; el resto scrolleando */
  #proj-table { min-width: 880px; }
  #proj-table td:nth-child(1), #proj-table th:nth-child(1) { min-width: 96px; max-width: 110px; }
  #proj-table td:nth-child(2), #proj-table th:nth-child(2) { min-width: 88px; max-width: 100px; }
  #proj-table td:nth-child(3), #proj-table th:nth-child(3) { min-width: 120px; max-width: 150px; }
  #cat-table { min-width: 860px; }

  /* barra superior de proyectos: filtro + contador arriba, buscador abajo */
  #tab-proyectos .toolbar { flex-wrap: wrap; gap: 8px; }
  #proj-filter { flex: 1; }
  #proj-count { white-space: nowrap; font-size: 12px; }
  #proj-buscar { margin-left: 0; flex-basis: 100%; width: 100%; box-sizing: border-box; }

  /* barra de CURADURÍA: el buscador arriba a todo el ancho, filtro y MOVER A abajo */
  #tab-curaduria .toolbar { flex-wrap: wrap; gap: 8px; }
  #cur-buscar { margin-right: 0; flex-basis: 100%; width: 100%; box-sizing: border-box; }
  #cur-filtro { flex: 1; min-width: 0; }
}

/* ficha de grupo: buscador y guardar con cajas firmes */
#dlg-ficha .ficha-buscador { align-items: stretch; }
#dlg-ficha .ficha-buscador input {
  height: 44px;
  box-sizing: border-box;
}
#dlg-ficha .ficha-buscador .mini-btn {
  height: 44px;
  padding: 0 18px;
  box-sizing: border-box;
  flex: none;
}
#dlg-ficha .dlg-actions {
  margin-top: 16px;
  display: block;
}
#btn-ficha-guardar {
  display: block;
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  text-align: center;
}

@media (max-width: 900px) {
  /* CATALOGO: checkbox + thumb + grupo + idol + era a pantalla;
     el resto (rareza, prints, pool) se ve scrolleando hacia el lado */
  #cat-table td, #cat-table th { padding: 6px 5px; font-size: 13px; }
  #cat-table td:nth-child(1), #cat-table th:nth-child(1) { min-width: 30px; }
  #cat-table td:nth-child(2), #cat-table th:nth-child(2) { min-width: 42px; }
  #cat-table td:nth-child(3), #cat-table th:nth-child(3) { min-width: 82px; max-width: 92px; }
  #cat-table td:nth-child(4), #cat-table th:nth-child(4) { min-width: 76px; max-width: 88px; }
  #cat-table td:nth-child(5), #cat-table th:nth-child(5) { min-width: 96px; max-width: 118px; }

  /* barra del catalogo: contador (y ELIMINAR si hay seleccion) arriba,
     buscador abajo a lo ancho */
  #tab-catalogo .toolbar { flex-wrap: wrap; gap: 8px; align-items: center; }
  #cat-count { order: 1; flex: 1; white-space: nowrap; font-size: 13px; }
  #btn-cat-delete { order: 2; white-space: nowrap; }
  #cat-search { order: 3; flex-basis: 100%; width: 100%; box-sizing: border-box; }
}

/* probabilidades de drop en administracion */
.pesos-grid {
  display: grid;
  grid-template-columns: 72px 110px 110px;
  gap: 10px 14px;
  align-items: center;
  margin-bottom: 14px;
}
.pesos-cab {
  font-family: 'Special Gothic Expanded One', sans-serif;
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--tinta);
}
.pesos-fila { font-size: 13px; }
.pesos-grid input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  font: inherit;
  font-size: 14px;
  transition: border-color var(--tr), background var(--tr);
}
.pesos-grid input:focus { outline: none; border-color: var(--gold); background: var(--bg); }
.pesos-acciones { margin-bottom: 8px; }
#btn-pesos { width: 260px; text-align: center; }
#pesos-nota { min-height: 18px; font-size: 13px; color: var(--gris); margin-bottom: 26px; }

/* dial del boost: un % que deriva toda la columna */
/* el % de boost es texto del titulo: se edita clickeando el numero */
.pesos-extra {
  display: inline;
  margin-left: 4px;
  letter-spacing: .14em;
}
.pesos-extra input {
  width: 3ch;
  padding: 0;
  border: none;
  border-bottom: 1px dashed var(--gold);
  border-radius: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-align: center;
  transition: border-color var(--tr);
}
.pesos-extra input:focus {
  outline: none;
  border-bottom: 1px solid var(--tinta);
}
.pesos-grid input:disabled { opacity: .55; }
.pesos-grid input.derivado {
  background: var(--gold-soft);
  border-color: var(--borde);
  color: var(--tinta);
  pointer-events: none;
}

/* proyeccion en vivo de la calibracion */
.pesos-proyeccion {
  margin: 4px 0 16px;
  font-size: 13.5px;
  color: var(--tinta);
}
.pesos-proyeccion p { margin: 0 0 6px; min-height: 18px; }
.pesos-proyeccion input {
  width: 54px;
  padding: 3px 6px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  font: inherit;
  font-size: 13px;
  text-align: center;
}
#proy-normal b, #proy-boost b { color: var(--tinta); }

/* calibracion pendiente de aprobacion del staff */
.cal-pendiente {
  max-width: 480px;
  background: var(--bg);
  border: 1px solid var(--gold);
  border-radius: var(--radio);
  padding: 16px 18px;
  margin: 4px 0 20px;
}
.cal-pendiente p { font-size: 13.5px; margin: 0 0 8px; }
#cal-aprobadores { color: var(--gris); min-height: 18px; }
.cal-acciones { margin-top: 10px; }
#btn-cal-aprobar { min-width: 220px; text-align: center; }

/* checklist de firmas de la calibracion: 4 casillas fijas */
.cal-lista { list-style: none; padding: 0; margin: 0 0 12px; }
.cal-lista li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--superficie);
  font-size: 13.5px;
}
.cal-lista li:last-child { border-bottom: none; }
.cal-check {
  width: 20px;
  height: 20px;
  flex: none;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  background: var(--bg);
}
.cal-lista li.firmada .cal-check { background: var(--gold); border-color: var(--gold); }
.cal-lista li.vacia { color: var(--gris); }

/* la mencion del proponente alineada con el texto que la rodea */
#cal-detalle * { vertical-align: middle; }

/* la casilla firmable invita al click */
.cal-lista li.firmable { cursor: pointer; color: var(--tinta); }
.cal-lista li.firmable .cal-check {
  border-color: var(--gold);
  transition: background var(--tr), border-color var(--tr);
}
.cal-lista li.firmable:hover .cal-check { background: var(--gold-soft); }
.cal-lista li.firmando { opacity: .5; pointer-events: none; }

/* cabeceras de la grilla de pesos: sin quiebres, en caja de oracion */
.pesos-cab { white-space: nowrap; }
.pesos-extra { white-space: nowrap; margin-left: 2px; }

/* subpestanas de recorte en IDOLS (mismo lenguaje de las work-tabs) */
.recorte-tabs { margin: -4px 0 4px; }
.recorte-tabs .s-btn {
  flex: 1;
  padding: 9px 0;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-family: 'Special Gothic Expanded One', sans-serif;
  font-size: 12px;
  color: var(--gris);
  cursor: pointer;
  transition: color var(--tr), background var(--tr), border-color var(--tr);
}
.recorte-tabs .s-btn:hover { color: var(--tinta); background: var(--superficie); }
.recorte-tabs .s-btn.active {
  color: var(--tinta);
  border-bottom-color: var(--gold);
  background: var(--gold-soft);
}

/* btn-x con numero (borrar recorte por slot) */
.btn-x.btn-x-num { font-size: 10px; color: var(--gris); }
.btn-x.btn-x-num::before, .btn-x.btn-x-num::after { display: none; }
.btn-x.btn-x-num:hover { color: var(--rojo); border-color: var(--rojo); }

/* modo DATE: una sola historia con saltos de linea, sin despedida */
.modo-date #lbl-despedida { display: none; }
.modo-date #t-intro { min-height: 150px; }
.dc-embed p { white-space: pre-line; }

/* AGREGAR ERA */
.btn-era {
  padding: 8px 16px;
  border: 1px solid var(--tinta);
  border-radius: var(--radio);
  background: var(--tinta);
  color: #fff;
  font-family: 'Special Gothic Expanded One', sans-serif;
  font-size: 12px;
  cursor: pointer;
  transition: background var(--tr), border-color var(--tr);
}
.btn-era:hover { background: var(--tinta-hover); border-color: var(--tinta-hover); }
.btn-era:disabled { opacity: .4; cursor: default; }
#dlg-era { width: 420px; }
#dlg-era label { display: block; margin-bottom: 10px; font-size: 13px; color: var(--gris); }
#dlg-era label input[type="text"] { width: 100%; box-sizing: border-box; margin-top: 4px; }
/* Solista es una propiedad del grupo, asi que va pegado a su campo. El input
   de arriba ya trae 14 px de margen inferior, que aca se compensan. */
#dlg-era .check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tinta);
  margin-top: -8px;
  margin-bottom: 22px;
  cursor: pointer;
  width: fit-content;
}
.era-cab {
  display: flex;
  justify-content: space-between;
  font-family: 'Special Gothic Expanded One', sans-serif;
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--tinta);
  margin: 14px 0 8px;
}
#era-slots { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
#era-slots input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  font: inherit;
  font-size: 14px;
  transition: border-color var(--tr), background var(--tr);
}
#era-slots input:focus { outline: none; border-color: var(--gold); background: var(--bg); }
#dlg-era .dlg-actions { margin-top: 14px; display: block; }
#btn-era-crear { width: 100%; height: 44px; box-sizing: border-box; text-align: center; }
.chip[data-st="sintomar"] { background: var(--bg); border-style: dashed; color: var(--gris); }

/* selectores de animo (dates) y de mano (yaguarpop): mismo sistema de tabs */
.animo-tabs { max-width: 100%; }
.animo-tabs .a-btn,
.animo-tabs .g-btn {
  flex: 1;
  padding: 9px 0;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-family: 'Special Gothic Expanded One', sans-serif;
  font-size: 12px;
  color: var(--gris);
  cursor: pointer;
  transition: color var(--tr), background var(--tr), border-color var(--tr);
}
.animo-tabs .a-btn:hover,
.animo-tabs .g-btn:hover { color: var(--tinta); background: var(--superficie); }
.animo-tabs .a-btn.active,
.animo-tabs .g-btn.active { color: var(--tinta); border-bottom-color: var(--gold); background: var(--gold-soft); }

/* DIVORCIO: tabla de bienes que la corte reparte (gana o pierde segun el animo) */
.premio-caja {
  width: 100%;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  padding: 12px 14px 14px;
  box-sizing: border-box;
}
.premio-cab {
  font-family: 'Special Gothic Expanded One', sans-serif;
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--gris);
  margin-bottom: 8px;
}
.premio-caja.pierde .premio-cab { color: var(--rojo); }
.premio-tabla { width: 100%; border-collapse: collapse; }
.premio-tabla td { padding: 6px 0; font-size: 13px; color: var(--tinta); vertical-align: middle; }
.premio-tabla td:first-child { width: 84px; color: var(--gris); }
.premio-celda { display: flex; gap: 8px; align-items: center; }
.premio-celda select { flex: 1; min-width: 0; }
.premio-celda input[type=number] { width: 110px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.dc-embed .dc-sentencia { color: #dbdee1; }

/* calibracion de afinidad */
.afinidad-grid { grid-template-columns: 200px 110px 110px; }
#btn-afinidad { width: 260px; text-align: center; }
#afinidad-nota { min-height: 18px; font-size: 13px; color: var(--gris); margin-bottom: 26px; }

/* panel de packs: modal de edicion */
.pk-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Editor a la izquierda y el sobre a la derecha: el staff calibra viendo el
   resultado, que es la unica forma de darse cuenta de que un nombre largo se
   apreta o de que la bajada quedo ilegible. */
.pk-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: start; }
.pk-sobre { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 0; }
.pk-sobre-marco {
  position: relative; border: 1px solid var(--borde); border-radius: 6px;
  background: var(--realce); aspect-ratio: 3 / 4; display: grid; place-items: center;
  overflow: hidden; padding: 10px;
}
.pk-sobre-marco img { width: 100%; height: 100%; object-fit: contain; display: block; }
#pk-sobre-vacio { font-size: 12px; color: var(--gris-suave); text-align: center; line-height: 1.5; margin: 0; }
.pk-sobre-cargando { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255,255,255,.72); }
.pk-sobre-cargando span {
  width: 22px; height: 22px; border: 2px solid var(--borde); border-top-color: var(--tinta);
  border-radius: 50%; animation: pkGira .7s linear infinite;
}
@keyframes pkGira { to { transform: rotate(360deg); } }
.pk-sobre-pie { font-size: 12px; color: var(--gris); margin: 0; line-height: 1.5; }
.pk-sobre-pie b { color: var(--tinta); }
.pk-sobre-nota { font-size: 12px; margin: 0; line-height: 1.5; color: var(--gris); }
.pk-sobre-nota.pk-viejo { color: var(--rojo); }
@media (max-width: 860px) {
  .pk-cols { grid-template-columns: 1fr; }
  .pk-sobre { position: static; }
  .pk-sobre-marco { max-width: 260px; }
}
.pk-lbl {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta); font-weight: 600; margin-top: 4px;
}
.pk-receta { display: flex; flex-wrap: wrap; gap: 10px; }
.pk-slot { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gris); }
.pk-slot select { min-width: 110px; }
.pk-calculo {
  margin: 0; padding: 12px; border-radius: var(--radio);
  background: var(--superficie); font-size: 13px; line-height: 1.5; color: var(--gris);
}
.pk-calculo b { color: var(--tinta); }
.pk-alerta { color: var(--rojo); font-weight: 600; }
.pk-calculo.pk-alerta { background: #fdf1f0; color: var(--rojo); }
#packs-table td:nth-child(2), #packs-table td:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }
.animo-tabs .f-btn, .animo-tabs .p-btn, .animo-tabs .m-btn {
  flex: 1; padding: 9px 0; border: none; border-bottom: 2px solid transparent;
  background: transparent; font-family: 'Special Gothic Expanded One', sans-serif;
  font-size: 11px; color: var(--gris); cursor: pointer;
  transition: color var(--tr), background var(--tr), border-color var(--tr);
}
.animo-tabs .f-btn:hover, .animo-tabs .p-btn:hover, .animo-tabs .m-btn:hover {
  color: var(--tinta); background: var(--superficie);
}
.animo-tabs .f-btn.active, .animo-tabs .p-btn.active, .animo-tabs .m-btn.active {
  color: var(--tinta); border-bottom-color: var(--gold); background: var(--gold-soft);
}

/* pestañas de recorte en la ficha del catálogo */
#ficha-slots { margin-bottom: 12px; }
#ficha-slots .fs-btn.vacio { opacity: .45; }

/* ---------- lista de sugerencias del catálogo ---------- */
/* Se ve como un buscador con opciones oficiales, no como el historial gris del
   navegador: así queda claro cuál es el nombre ya cargado en la base. */
.combo-lista {
  position: absolute;
  z-index: 40;
  top: calc(100% - 10px);
  left: 0;
  right: 0;
  max-height: 244px;
  overflow-y: auto;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 10px 24px rgba(29, 28, 26, .12);
  padding: 4px;
}
.combo-op {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 9px 10px;
  border-radius: 4px;
  font-size: 14px;
  color: var(--tinta);
  cursor: pointer;
}
/* la coincidencia se marca solo con color: cambiar el grosor mueve las letras
   y abre huecos que confunden mas de lo que ayudan */
.combo-op i {
  color: var(--tinta);
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
}
/* aviso mientras se busca el nombre oficial fuera del catálogo */
.combo-cargando {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  font-size: 13px;
  color: var(--gris);
}
.combo-rueda {
  width: 12px;
  height: 12px;
  border: 2px solid var(--borde);
  border-top-color: var(--tinta);
  border-radius: 50%;
  animation: combo-gira .7s linear infinite;
  flex: none;
}
@keyframes combo-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .combo-rueda { animation-duration: 2s; } }
.combo-op:hover, .combo-op.activa { background: var(--gold-soft); }

/* atajo para completar un recorte que falta, dentro de la ficha del idol */
/* el atajo necesita aire a los lados: el mini-btn viene muy justo */
#btn-ficha-subir { margin-top: 14px; padding: 10px 26px; }
.ficha-media { display: flex; flex-direction: column; align-items: center; justify-content: center; }


/* Aviso de calidad de la foto, igual que el del panel de SPOTIFY NOW pero en
   claro: mide cuantos pixeles de la foto original cubren el ancho de la carta */
.qbar {
  margin-top: 10px;
  border-radius: var(--radio);
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  transition: background var(--tr), color var(--tr);
}
.qbar.q-excelente { background: rgba(29, 158, 117, .14); color: #1a6e51; }
.qbar.q-buena     { background: rgba(150, 196, 89, .22); color: #55701f; }
.qbar.q-justa     { background: rgba(239, 159, 39, .18); color: #96610d; }
.qbar.q-mala      { background: rgba(179, 66, 58, .14); color: var(--rojo); }


/* El grupo se elige del catálogo y queda fijado como pill: así se ve de una
   que el nombre quedó con su estilización oficial y no como se tecleó */
.pill-elegido {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 8px 8px 8px 14px;
  border: 1px solid var(--gold);
  background: var(--gold-soft);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--tinta);
}
.pill-elegido.manual { border-style: dashed; }
.pill-elegido span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill-elegido button {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .06);
  color: var(--gris);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--tr), color var(--tr), transform var(--tr);
}
.pill-elegido button:hover {
  background: var(--gold-hover);
  color: #fff;
  transform: rotate(90deg);
}
/* la salida para grupos que aún no están en el catálogo */
.combo-manual {
  border-top: 1px solid var(--borde);
  border-radius: 0;
  color: var(--gris);
  font-size: 13px;
}


/* ---- sistema de proyectos: toma por grupo y ruleta ---- */
/* conteo de photocards en rojo hasta completar las 3 */
td.pcs-falta { color: var(--rojo); font-weight: 600; }
/* era pendiente */
.era-pendiente { color: var(--gris-suave); font-style: italic; }
.btn-tomar-proy, .btn-asignar-era {
  padding: 5px 12px;
  border: 1px solid var(--gold);
  border-radius: var(--radio);
  background: var(--gold-soft);
  color: var(--tinta);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .4px;
  cursor: pointer;
  transition: background var(--tr);
}
.btn-tomar-proy:hover, .btn-asignar-era:hover { background: var(--tinta); color: #fff; border-color: var(--tinta); }
/* era que alguien devolvio al pozo: la puede tomar cualquiera, sin sorteo */
.chip-devuelta {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border: 1px dashed var(--gold);
  border-radius: var(--radio);
  color: var(--gold-deep, #7a5f1f);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
}

/* soltar: al lado del nombre de quien tomo la era, discreto para no competir
   con el resto de la fila */
.btn-soltar-proy {
  margin-left: 8px;
  padding: 3px 9px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: transparent;
  color: var(--gris-suave);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  cursor: pointer;
  transition: background var(--tr), color var(--tr), border-color var(--tr);
}
.btn-soltar-proy:hover { border-color: var(--rojo, #c0392b); color: var(--rojo, #c0392b); }

.btn-tomar-proy:disabled {
  border-color: var(--borde);
  background: transparent;
  color: var(--gris-suave);
  cursor: not-allowed;
}
.btn-tomar-proy:disabled:hover { background: transparent; color: var(--gris-suave); }
#dlg-ruleta { width: min(430px, 92vw); }
.ruleta-nota { color: var(--gris); font-size: 14px; margin: 6px 0 14px; }
.ruleta-orden { margin: 0 0 18px 22px; padding: 0; }
.ruleta-orden li { padding: 6px 0; font-size: 15px; border-bottom: 1px solid var(--borde); }
.ruleta-orden li.turno-actual { font-weight: 700; }
.ruleta-orden li.turno-actual::after { content: ' ← le toca elegir'; color: var(--tinta); font-weight: 600; font-size: 13px; }
.ruleta-acciones { display: flex; gap: 10px; }
.ruleta-acciones button { padding-left: 20px; padding-right: 20px; }


/* seleccion de participantes de la ruleta */
.ruleta-seleccion { display: flex; flex-direction: column; gap: 2px; margin: 0 0 16px; }
.ruleta-seleccion label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radio);
  font-size: 15px;
  cursor: pointer;
  transition: background var(--tr);
}
.ruleta-seleccion label:hover { background: var(--gold-soft); }
.ruleta-seleccion input { width: auto; flex: none; margin: 0; accent-color: var(--tinta); }
/* mientras la ruleta gira, los nombres pasan volando */
.ruleta-orden li.girando { color: var(--gris); }
.ruleta-orden li.clavado { animation: ruleta-clava .18s ease-out; }
@keyframes ruleta-clava {
  from { transform: translateX(6px); opacity: .4; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .ruleta-orden li.clavado { animation: none; } }


/* AGREGAR PROYECTO bloqueado mientras corre la ruleta */
.btn-era:disabled { opacity: .45; cursor: not-allowed; }


/* los dos botones de slots, uno al lado del otro */
.era-slots-btns { display: flex; gap: 8px; }
.era-slots-btns .mini-btn { flex: none; }
.era-slots-btns .mini-btn:disabled { opacity: .4; cursor: not-allowed; }
.era-slots-btns .mini-btn:disabled:hover {
  border-color: var(--borde); background: transparent; color: var(--gris);
}

/* ---------- CARD TEMPLATE (solo admin) ---------- */
.tpl-body { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.tpl-lienzo {
  display: flex; justify-content: center; align-items: center;
  padding: 34px; border-radius: var(--radio);
  background: var(--panel); border: 1px solid var(--borde);
  transition: background var(--tr);
}
.tpl-lienzo.oscuro { background: #313338; border-color: #232428; }
#tpl-card { width: 420px; height: 588px; filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .14)); }
.tpl-minis { display: flex; gap: 14px; }
.tpl-mini {
  width: 110px; height: 154px;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .12));
  cursor: pointer;
  opacity: .4;
  transition: opacity var(--tr);
}
.tpl-mini:hover { opacity: .75; }
.tpl-mini.activa { opacity: 1; cursor: default; }
.tpl-mini.vacia { opacity: .15; cursor: default; }
@media (max-width: 720px) {
  #tpl-card { width: min(100%, 340px); height: auto; aspect-ratio: 750 / 1050; }
}



/* CARD TEMPLATE: la barra es una grilla de columnas FIJAS. Nada se reacomoda
   cuando un texto cambia de largo o un número pasa de una cifra a dos. */
.tpl-barra {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px; margin-bottom: 18px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  max-width: 1040px;
}
.tpl-fila { display: grid; gap: 10px; align-items: center; }
.tpl-fila-1 { grid-template-columns: 110px 150px 1fr 125px 140px 170px 155px; }
.tpl-fila-2 { grid-template-columns: 200px 120px 170px 100px 1fr; }
.tpl-fila-3 { grid-template-columns: 90px 1fr 80px; }
.tpl-fila button { width: 100%; padding: 10px 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-fila input[type="text"] { width: 100%; min-width: 0; }
.tpl-fila input[type="range"] { width: 100%; }
.tpl-chip, .tpl-val {
  display: block; min-width: 0; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.tpl-val { font-variant-numeric: tabular-nums; }
.tpl-etiqueta { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-suave, inherit); }

/* CARD TEMPLATE en pantallas chicas: las columnas fijas del escritorio no
   caben, asi que la grilla se reparte en filas de dos y de tres. Los anchos
   siguen siendo fijos dentro de cada fila: nada se mueve al cambiar un texto. */
@media (max-width: 860px) {
  .tpl-barra { max-width: 100%; padding: 12px; gap: 8px; }
  .tpl-fila { gap: 8px; }
  .tpl-fila-1 { grid-template-columns: 1fr 1fr; }
  .tpl-fila-1 #tpl-holo, .tpl-fila-1 #tpl-probar { grid-column: 1 / -1; }
  .tpl-fila-1 #tpl-ficha { grid-column: 1 / -1; }
  .tpl-fila-2 { grid-template-columns: 1fr 1fr 1fr; }
  .tpl-fila-2 #tpl-anotar, .tpl-fila-2 #tpl-muestras { grid-column: 1 / -1; }
  .tpl-fila-3 { grid-template-columns: 70px 1fr 70px; }
  .tpl-fila button { padding: 10px 8px; font-size: 11px; letter-spacing: 0; }
  .tpl-chip, .tpl-val { font-size: 11px; padding: 8px 10px; }
  .tpl-etiqueta { font-size: .7rem; }
  .tpl-lienzo { padding: 16px; }
  .tpl-body { gap: 16px; }
  .tpl-minis { gap: 8px; }
  .tpl-mini { width: 30%; max-width: 110px; height: auto; aspect-ratio: 750 / 1050; }
}

/* teléfono angosto: tres botones por fila ya no caben sin recortarse */
@media (max-width: 520px) {
  .tpl-fila-2 { grid-template-columns: 1fr 1fr; }
  .tpl-fila-2 #tpl-anotar { grid-column: 1 / -1; order: 0; }
  .tpl-fila-2 #tpl-revisar { order: 1; }
  .tpl-fila-2 #tpl-borrar { order: 2; }
  .tpl-fila-2 #tpl-ver { grid-column: 1 / -1; order: 3; }
  .tpl-fila-2 #tpl-muestras { grid-column: 1 / -1; order: 4; }
  .tpl-fila-3 { grid-template-columns: 58px 1fr 62px; }
  .tpl-mini { width: 31%; }
}

.tpl-zona { opacity: .55; }
.tpl-zona.activa { opacity: 1; border-color: var(--gold) !important; color: var(--tinta) !important; background: var(--gold-soft) !important; }

#tpl-holo.activo {
  border-color: var(--gold) !important;
  background: linear-gradient(105deg, #e9dcc3, #f3cdd9, #cfe1f2, #d7efdd, #f1e7ca, #efd3c1, #e9dcc3) !important;
  background-size: 300% 100% !important;
  animation: holoBoton 6s linear infinite;
  color: var(--tinta) !important;
}
@keyframes holoBoton { 0% { background-position: 0% 50% } 100% { background-position: 300% 50% } }



/* ---- Carpetas de tanda ---- */
.btn-lib { padding: 5px 12px; border: 1px solid var(--gold); border-radius: var(--radio); background: var(--gold-soft); color: var(--tinta); font-size: 12px; font-weight: 600; letter-spacing: .4px; cursor: pointer; }
.btn-lib:hover { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.btn-lib.sec { border-color: var(--borde); background: transparent; color: var(--gris-suave); }
.btn-lib:disabled { opacity: .45; cursor: not-allowed; }
.tandas-fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 14px 0 20px; }
.tanda-card { border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; cursor: pointer; transition: border-color var(--tr), box-shadow var(--tr); background: #fff; }
.tanda-card:hover { border-color: var(--gold); }
.tanda-card b { display: block; font-size: 14px; letter-spacing: .3px; margin-bottom: 4px; }
.tanda-card .tanda-n { color: var(--gris-suave); font-size: 12.5px; }
.tanda-card .tanda-fecha { display: block; margin-top: 6px; font-size: 11.5px; color: var(--gold-deep, #7a5f1f); }
.tanda-vista { border: 1px solid var(--gold); border-radius: var(--radio); padding: 18px 18px 20px; margin: 14px 0 20px; background: #fffdf8; }
/* La cabecera de la carpeta habla el MISMO idioma que el resto del sitio: todos
   los botones con la tipografia gothic, el mismo alto y el mismo trazo que
   REVISAR/CANCELAR de la lista. Antes convivian tres estilos distintos. */
.tanda-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--borde); }
.tanda-cab button {
  height: 38px; box-sizing: border-box;
  font-family: "Special Gothic Expanded One", sans-serif;
  font-size: 12px; letter-spacing: .03em;
  padding: 0 16px; border-radius: var(--radio); cursor: pointer;
}
.tanda-cab .btn-lib, .tanda-cab .btn-lib.sec {
  background: var(--bg); border: 1px solid var(--tinta); color: var(--tinta); font-weight: 400;
}
.tanda-cab .btn-lib:hover:not(:disabled) { background: var(--tinta); color: #fff; }
.tanda-cab .btn-lib:disabled { border-color: var(--borde); color: var(--gris-suave); opacity: 1; }
/* El nombre de la carpeta subio a titulo propio (Leon, 18-sep-2026): en la fila
   de botones se comia el espacio y con el toggle nuevo ya no cabia. */
.tanda-vista > .tanda-titulo {
  font-family: "Special Gothic Expanded One", sans-serif;
  font-size: 22px; font-weight: 400; letter-spacing: .02em;
  margin: 0 0 14px; padding-bottom: 6px; cursor: text;
  border-bottom: 1px dashed transparent;
}
.tanda-vista > .tanda-titulo:hover { border-bottom-color: var(--gold); }
/* El interruptor del adelanto. Es un TOGGLE de verdad, no una casilla: la
   casilla se leia como un campo de formulario apagado al lado de los botones. */
.tanda-gen {
  /* flex-shrink 0: la fila es flex-wrap y encogia el label, asi que el texto se
     caia abajo del switch en vez de quedar al lado */
  /* flex-direction EXPLICITO: el panel tiene un `label { flex-direction: column }`
     global para los campos de formulario, y sin esto el texto caia bajo el switch */
  display: inline-flex; flex-direction: row; flex: 0 0 auto; min-width: max-content;
  align-items: center; gap: 10px; height: 38px;
  padding: 0 4px; font-family: "Special Gothic Expanded One", sans-serif;
  font-size: 12px; letter-spacing: .03em; color: var(--tinta);
  cursor: pointer; white-space: nowrap; user-select: none;
}
/* la casilla nativa sigue existiendo (estado, teclado, lectores), solo no se ve */
.tanda-gen input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.tanda-gen-sw {
  position: relative; flex: 0 0 auto; width: 42px; height: 23px;
  border-radius: 999px; background: var(--borde); transition: background .15s;
}
.tanda-gen-sw::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .15s;
}
.tanda-gen input:checked + .tanda-gen-sw { background: var(--gold); }
.tanda-gen input:checked + .tanda-gen-sw::after { transform: translateX(19px); }
.tanda-gen input:focus-visible + .tanda-gen-sw { outline: 2px solid var(--tinta); outline-offset: 2px; }
.tanda-gen:hover .tanda-gen-sw { background: var(--tinta); }
.tanda-gen:hover input:checked + .tanda-gen-sw { background: var(--gold); }
.tanda-gen-txt { flex: 0 0 auto; line-height: 1; }
.tanda-gen input:checked ~ .tanda-gen-txt { color: var(--gold-deep, #7a5f1f); }
/* sin permiso o carpeta vacia: se ve, pero no invita */
.tanda-gen.mudo { cursor: default; color: var(--gris-suave); }
.tanda-gen.mudo .tanda-gen-sw { background: var(--borde); }
.tanda-gen.mudo:hover .tanda-gen-sw { background: var(--borde); }
/* cambio de estado INSTANTANEO: con listas tan pesadas la transicion del hover
   se arrastraba y parecia pegada; el corte seco se lee mas firme */
.tanda-cab button { transition: none; }

/* Las filas fuera de pantalla no se pintan: la lista general lleva 346 filas
   con 3 photocards cada una y la carpeta 36; pintarlas todas hacia que
   cualquier hover o scroll trabajara sobre mil imagenes a la vez. */
.cur-item { content-visibility: auto; contain-intrinsic-size: auto 170px; }
.btn-atras { display: inline-flex; align-items: center; gap: 6px; }

/* franja de version nueva: fija abajo, imposible de no ver, un solo click */
#aviso-version {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 200; max-width: min(92vw, 640px);
  background: var(--tinta); color: #fff;
  border: 0; border-radius: 999px; padding: 12px 22px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
}
#aviso-version:hover { background: #000; }
.btn-atras svg { flex-shrink: 0; }
.tanda-cab .spacer { flex: 1; }
.tanda-titulo { font-weight: 700; font-size: 15px; letter-spacing: .3px; cursor: text; border-bottom: 1px dashed transparent; }
.tanda-titulo:hover { border-bottom-color: var(--gold); }
.tanda-prog { margin: 10px 0 0; font-size: 12.5px; color: var(--gold-deep, #7a5f1f); }
.tanda-prog p { margin: 0; }
.tanda-prep { margin-top: 10px; max-width: 520px; }
.cur-check { width: auto !important; margin-right: 10px; transform: scale(1.15); }
.menu-mover { position: absolute; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: 0 8px 26px rgba(20,22,28,.14); z-index: 40; min-width: 210px; }
.menu-mover button { display: block; width: 100%; text-align: left; padding: 9px 14px; border: 0; background: none; font-size: 13px; cursor: pointer; }
.menu-mover button:hover { background: var(--gold-soft); }

/* ---------- franja de la tanda de renderizado ----------
   Arriba de todo, fina y sin tapar nada: el trabajo lo hace la VM y el panel
   se sigue usando mientras tanto. */
#rnd {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 18px;
  background: var(--bg);
  border-bottom: 1px solid var(--borde);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
#rnd.listo { background: #f2f7f2; border-bottom-color: #cfe3cf; }
/* el texto manda sobre la barra: sin esto la barra (flex:1) se lleva todo el
   ancho y el titulo colapsa a cero, o sea que no se ve */
.rnd-txt { display: flex; gap: 8px; align-items: baseline; flex: 0 1 auto; min-width: 0; }
#rnd-titulo { flex: 0 0 auto; }
#rnd-detalle { min-width: 0; }
/* terminada la tanda, la barra llena sobra: queda el mensaje y el OK */
#rnd.listo .rnd-bar, #rnd.listo #rnd-pct { display: none; }
#rnd-titulo {
  font-family: "Special Gothic Expanded One", sans-serif;
  font-size: 11px; letter-spacing: .04em; white-space: nowrap;
}
#rnd-detalle { font-size: 12px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rnd-bar {
  flex: 1; height: 6px; min-width: 80px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 999px;
  overflow: hidden;
}
#rnd-fill { height: 100%; width: 0%; background: var(--gold); border-radius: 999px; transition: width .4s ease; }
#rnd-pct { font-size: 12px; color: var(--gris); min-width: 38px; text-align: right; }
#rnd-ok {
  padding: 5px 16px; font-size: 11px; letter-spacing: .04em;
  font-family: "Special Gothic Expanded One", sans-serif;
  background: var(--tinta); color: #fff; border: 1px solid var(--tinta);
  border-radius: var(--radio); cursor: pointer;
}
#rnd-ok:hover { background: var(--tinta-hover); border-color: var(--tinta-hover); }
/* la franja empuja el contenido para no taparle el encabezado */
body.con-franja { padding-top: 46px; }

/* ---------- seccion PROGRESO ---------- */
.pg-resumen { font-size: 15px; margin-bottom: 4px; }
.pg-ayuda { font-size: 12px; color: var(--gris); margin-bottom: 22px; max-width: 620px; }
.pg-slot {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px 18px;
  margin-bottom: 12px;
  background: var(--bg);
  display: grid;
  /* la ultima columna se dimensiona para que "Meta sorpresa" quepa en una
     linea junto a su casilla; con auto se hacia mas angosta que la etiqueta */
  grid-template-columns: 150px 1fr 1fr 150px;
  gap: 18px;
  align-items: start;
}
.pg-slot.vigente { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.pg-slot.cerrada { opacity: .62; }
/* Meta lograda: fondo holografico pastel en movimiento. Los tonos van MUY
   claros a proposito: encima sigue habiendo texto que leer. */
.pg-slot.lograda {
  border-color: var(--gold);
  background: linear-gradient(105deg, #f7eedd, #fbe7ee, #e7f0fa, #e9f7ed, #f9f3de, #f7e8dd, #f7eedd);
  background-size: 300% 100%;
  animation: holoBoton 8s linear infinite;
}
.pg-tag.tag-lograda { border-color: var(--gold); background: rgba(255,255,255,.75); font-weight: 700; }
.pg-slot.lograda .pg-acciones { align-items: center; gap: 10px; }
/* en el slot logrado los botones van apilados: primero el evento, debajo el retiro */
.pg-acciones-col { flex-direction: column; align-items: stretch !important; }
.pg-acciones-col .pg-nota { margin-right: 0; }
.pg-slot.lograda .pg-nota { margin-right: auto; }

/* ---- creador de eventos ---- */
/* titulo a la izquierda, volver a la derecha */
#tab-evento .sub-header { justify-content: space-between; }
#tab-evento .sub-header h2 { margin: 0; }

.ev-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.ev-form { display: flex; flex-direction: column; gap: 12px; }
.ev-form input[type="text"], .ev-form input[type="date"], .ev-form input[type="time"],
.ev-form select, .ev-form textarea { width: 100%; }
.ev-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* date y time dibujan sus controles nativos con altos y bordes propios: se les
   da el MISMO traje plano que al resto de los inputs del panel */
.ev-doble input[type="date"], .ev-doble input[type="time"] {
  height: 38px; box-sizing: border-box; -webkit-appearance: none; appearance: none;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 8px 10px;
  font-size: 15px;
  background: var(--superficie);
  color: var(--tinta);
}
.ev-doble input[type="date"]:focus, .ev-doble input[type="time"]:focus {
  outline: none; border-color: var(--gold);
}
.ev-lbl { font-size: 11px; letter-spacing: .08em; color: var(--gris); margin-top: 6px; }
.ev-vista { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 0; }
#ev-preview {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12.5px; line-height: 1.5; resize: vertical; white-space: pre;
}
.ev-acciones { display: flex; gap: 10px; }
.ev-acciones .btn-lib { flex: 1; }
@media (max-width: 900px) { .ev-grid { grid-template-columns: 1fr; } .ev-vista { position: static; } }

/* mockup de Discord: el anuncio como lo va a ver la comunidad */
.dc-mock {
  background: #313338; border-radius: 8px; padding: 18px 20px;
  color: #dbdee1; font-size: 14px; line-height: 1.5;
  font-family: 'gg sans', 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
}
.dc-mock p { margin: 8px 0; color: #dbdee1; }
.dc-h1 { font-size: 21px; font-weight: 800; color: #f2f3f5; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.dc-h1 img { width: 26px; height: 26px; }
.dc-emoji { width: 20px; height: 20px; vertical-align: -4px; }
.dc-men { background: rgba(88, 101, 242, .3); color: #c9cdfb; border-radius: 3px; padding: 0 3px; font-weight: 500; }
.dc-t { background: #3f4147; border-radius: 3px; padding: 0 4px; }
.dc-mock ul { margin: 4px 0 8px 6px; padding-left: 16px; }
.dc-mock li { margin: 2px 0; }
.dc-link { color: #00a8fc; word-break: break-all; }
.dc-peq { font-size: 11.5px; color: #949ba4; }
.dc-mock strong { color: #f9fafb; font-weight: 700; }
.dc-mock em { font-style: italic; }
.dc-code {
  background: #2b2d31; border: 1px solid #1e1f22; border-radius: 4px;
  padding: 0 4px; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px;
}
.ev-crudo summary { cursor: pointer; font-size: 12px; color: var(--gris); }
.ev-crudo textarea { width: 100%; margin-top: 6px; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; white-space: pre; }
.pg-cab { display: flex; flex-direction: column; gap: 6px; }
.pg-cab strong { font-family: "Special Gothic Expanded One", sans-serif; font-size: 13px; }
.pg-tag {
  font-size: 10px; letter-spacing: .05em; padding: 2px 8px;
  border: 1px solid var(--borde); border-radius: 999px; width: fit-content; color: var(--gris);
}
.pg-tag.activa { border-color: var(--gold); color: var(--gold-deep, var(--tinta)); }
.pg-col { min-width: 0; position: relative; }
.pg-col label {
  display: block; font-size: 11px; letter-spacing: .04em;
  color: var(--gris); margin-bottom: 7px; text-transform: uppercase;
}
.pg-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pg-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 999px; padding: 4px 10px; font-size: 12px;
}
.pg-pill.premio { background: #f6efe4; border-color: #e3d3b8; }
.pg-pill button {
  border: 0; background: none; cursor: pointer; color: var(--gris);
  font-size: 14px; line-height: 1; padding: 0;
}
.pg-pill button:hover { color: var(--rojo); }
.pg-buscar, .pg-add input, .pg-add select {
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 6px 10px; font-size: 12px; font-family: inherit; background: var(--bg);
}
.pg-buscar { width: 100%; }
.pg-add { display: flex; gap: 6px; }
.pg-add input { width: 80px; }
.pg-add select { flex: 1; min-width: 0; }
/* las sugerencias flotan para no empujar la fila entera */
.pg-sug {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
  background: var(--bg); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: 0 6px 18px rgba(0,0,0,.1); max-height: 220px; overflow-y: auto; margin-top: 4px;
}
.pg-sug button {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 7px 11px; cursor: pointer; font-size: 12px; font-family: inherit;
}
.pg-sug button:hover { background: var(--superficie); }
.pg-sug button span { color: var(--gris); }
.pg-nota { font-size: 11px; color: var(--gris); align-self: center; }
.pg-paginas { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
#pg-rango { font-size: 12px; color: var(--gris); }
@media (max-width: 1100px) {
  .pg-slot { grid-template-columns: 1fr; }
}
.pg-acciones { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.pg-acciones .btn-lib { width: 100%; }
/* usa la clase `check` del panel, que ya pone la casilla y su texto en fila
   (el `label` global va en columna). Aqui solo el tamano. */
.pg-sorpresa { font-size: 11px; white-space: nowrap; cursor: pointer; gap: 6px; }
.pg-sorpresa input { flex: 0 0 auto; width: 13px; margin: 0; }
.pg-pill em { font-style: normal; color: var(--gris); font-size: 11px; }

/* ---------- seccion EMBAJADORES ---------- */
.eb-cfg {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px; padding: 18px 20px; margin-bottom: 24px;
  border: 1px solid var(--borde); border-radius: 6px; background: var(--superficie);
}
.eb-cfg.solo-lectura { opacity: .8; }
.eb-cfg-col { min-width: 0; }
.eb-cfg-col > label, .eb-sub {
  display: block; font-family: "Special Gothic Expanded One", sans-serif;
  font-size: 11px; letter-spacing: .04em; color: var(--gris); margin-bottom: 9px;
}
.eb-sub { margin-top: 16px; }
.eb-campos {
  display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; font-size: 12px;
}
.eb-campos input, .eb-campos select {
  min-width: 0; padding: 5px 8px; font-size: 12px;
  border: 1px solid var(--borde); border-radius: 6px; background: var(--bg);
}
.eb-campos > input, .eb-campos > select { width: 100%; }
.eb-rango { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--gris); }
.eb-rango input { width: 100%; }
.pg-pill.eb-toggle { cursor: pointer; user-select: none; opacity: .5; }
.pg-pill.eb-toggle.on { opacity: 1; background: #f6efe4; border-color: var(--gold); }
.eb-buscar { max-width: 320px; margin-bottom: 14px; }
.eb-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.eb-tabla th {
  text-align: left; font-family: "Special Gothic Expanded One", sans-serif;
  font-size: 10px; letter-spacing: .04em; color: var(--gris);
  padding: 0 12px 8px; border-bottom: 1px solid var(--borde); font-weight: 400;
}
.eb-tabla td { padding: 9px 12px; border-bottom: 1px solid var(--borde); }
.eb-tabla .num { text-align: right; }
.eb-tabla tr.viva td { background: #fbf7f0; }
.eb-tabla code { font-size: 13px; letter-spacing: .06em; }
.eb-id { color: var(--gris); font-size: 12px; }
.eb-suyo { font-style: normal; font-size: 10px; color: var(--gris); }
.eb-campos-sueltos { margin-top: 12px; }
.eb-nombre { font-weight: 500; }
.hi-tabla td { vertical-align: top; }
.hi-fecha { white-space: nowrap; color: var(--gris); font-variant-numeric: tabular-nums; }
.hi-sec {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--superficie);
  font-size: 10px; letter-spacing: .03em; white-space: nowrap;
}

/* ---------- grupos del menu ---------- */
.menu { position: relative; }
.menu > .tab-menu::after {
  content: ''; display: inline-block; margin-left: 7px; vertical-align: 1px;
  border: 3px solid transparent; border-top-color: currentColor; opacity: .55;
}
.menu.abierto > .tab-menu::after { transform: rotate(180deg); vertical-align: -2px; }
.menu-pop {
  /* 75 para quedar POR ENCIMA del selector de franja de Estadísticas, que es
     sticky en 70. Con 60 el selector le tapaba media lista al bajar el menú
     (Leon, 19-sep-2026). Un menú de navegación siempre va sobre el contenido. */
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 75;
  min-width: 210px; padding: 5px;
  background: var(--bg); border: 1px solid var(--borde); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .13);
}
.menu.abierto .menu-pop { display: block; }
.menu-pop .tab { display: block; width: 100%; text-align: left; white-space: nowrap; }
.hi-tabla td:nth-child(2), .hi-tabla td:nth-child(3) { white-space: nowrap; }

/* Aviso de que el texto de la invitacion nombra un canal distinto al elegido arriba.
   Solo aparece cuando hay contradiccion de verdad: no es una ayuda permanente. */
.ev-aviso { margin: -6px 0 10px; font-size: 12px; line-height: 1.5; color: var(--rojo); }
.ev-aviso[hidden] { display: none; }

/* ===== PEDIDOS (lo que pide la comunidad) ===== */
.pd-barra { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.pd-barra .pg-buscar { margin: 0; flex: 1; min-width: 220px; }
.pd-orden { display: inline-flex; border: 1px solid #d2d2d7; border-radius: 999px; overflow: hidden; flex: 0 0 auto; }
.pd-orden button { border: 0; background: transparent; padding: 9px 14px; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #6e6e73; cursor: pointer; transition: background .18s ease, color .18s ease; }
.pd-orden button.activo { background: #1d1d1f; color: #fff; }
.pd-tabla .pd-num { color: #6e6e73; width: 36px; }
.pd-tabla .pd-n { font-weight: 700; font-variant-numeric: tabular-nums; }
/* el estado de la era se dice SOLO con el color del texto: la fila entera
   pintada y con píldora gritaba demasiado (Leon, 10-sep-2026) */
/* se pinta LO QUE HAY: la era cuando la era está lista, y el grupo cuando lo
   que tenemos es el grupo y falta esa era (Leon, 10-sep-2026) */
/* Los tres estados de un pedido, por semáforo (Leon, 21-sep-2026):
   AZUL en Proyectos (se está dibujando), AMARILLO en Curaduría (esperando
   revisión) y VERDE aprobada. Una vez liberada desaparece de la lista sola,
   porque la gente ya puede tener esas cartas.
   La aprobada va TACHADA además del color: para el staff ese pedido ya está
   resuelto aunque siga listado hasta que se publique. */
.pd-tabla tr.pd-proyectos td:nth-child(2),
.pd-tabla tr.pd-proyectos td:nth-child(3) { color: #2f5a72; }
.pd-tabla tr.pd-curaduria td:nth-child(2),
.pd-tabla tr.pd-curaduria td:nth-child(3) { color: #8a670f; }
.pd-tabla tr.pd-lista td:nth-child(2) { color: #2f6b34; }
.pd-tabla tr.pd-lista td:nth-child(3) { color: #2f6b34; text-decoration: line-through; text-decoration-color: #6aa86f; }
.pd-marca { margin-left: 8px; padding: 2px 7px; border-radius: 20px; font-size: 10px;
  letter-spacing: .05em; vertical-align: middle; text-decoration: none; display: inline-block; }
.pd-marca-pro { background: #dfe9ef; color: #2f5a72; }
.pd-marca-cur { background: #f6eccd; color: #6b5210; }
.pd-marca-ok  { background: #dcedde; color: #2f6b34; }
.pd-pro-txt { color: #2f5a72; }
.pd-cur-txt { color: #8a670f; }
.pd-ok-txt  { color: #2f6b34; }

/* El número de la fila es el tirador del menú. Se ve como número hasta que se
   pasa por encima: no tiene que competir con los datos de la tabla. */
.pd-num-btn {
  border: 1px solid transparent; border-radius: var(--radio);
  background: transparent; color: inherit; font: inherit;
  padding: 2px 8px; cursor: pointer;
  transition: border-color var(--tr), background var(--tr);
}
.pd-num-btn:hover { border-color: var(--borde); background: var(--superficie); }
.pd-num-btn:focus-visible { outline: none; border-color: var(--gold); }
.pd-menu {
  position: absolute; z-index: 80; min-width: 150px;
  background: var(--bg); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: 0 8px 24px rgba(0,0,0,.12); overflow: hidden;
}
.pd-menu-it {
  display: block; width: 100%; text-align: left;
  padding: 10px 14px; border: none; background: transparent;
  font: inherit; font-size: 13px; color: var(--tinta); cursor: pointer;
  transition: background var(--tr), color var(--tr);
}
.pd-menu-it + .pd-menu-it { border-top: 1px solid var(--superficie); }
.pd-menu-it:hover { background: var(--gold-soft); }
.pd-menu-mal:hover { background: #fdf2ef; color: #9c3a2a; }
.pd-era-input {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--gold); border-radius: var(--radio);
  padding: 5px 9px; font: inherit; font-size: 13px;
  color: var(--tinta); background: var(--bg); outline: none;
}
/* quienes pidieron esa era: se ven al pasar por encima del número */
.pd-tabla .pd-n.tiene { position: relative; cursor: help; text-decoration: underline dotted #c7c7cc; text-underline-offset: 3px; }
.pd-quienes {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 160px; max-width: 320px;
  background: #1c1c1e; color: #fff; border-radius: 6px;
  padding: 8px 12px 9px; font-size: 12px; font-weight: 400; line-height: 1.7;
  text-align: left; white-space: normal; text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  opacity: 0; visibility: hidden; transition: opacity .12s ease;
}
.pd-quienes b { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #a1a1a6; font-weight: 600; margin-bottom: 3px; }
.pd-quienes::before {
  content: ''; position: absolute; bottom: 100%; left: 14px;
  border: 5px solid transparent; border-bottom-color: #1c1c1e;
}
.pd-tabla .pd-n:hover .pd-quienes, .pd-tabla .pd-n:focus-within .pd-quienes { opacity: 1; visibility: visible; }
/* en las últimas filas se abre hacia arriba para que no quede fuera de la vista,
   salvo que la tabla sea corta: ahí arriba tampoco hay espacio */
.pd-tabla tr:nth-last-child(-n+3):not(:nth-child(-n+4)) .pd-quienes { top: auto; bottom: calc(100% + 6px); }
.pd-tabla tr:nth-last-child(-n+3):not(:nth-child(-n+4)) .pd-quienes::before { bottom: auto; top: 100%; border-bottom-color: transparent; border-top-color: #1c1c1e; }

/* ---- MODERACION ---- */
/* jerarquia: una barra de pestañas con subrayado manda; el filtro de estado va
   debajo como texto chico; el unico boton solido es la accion (barrer) */
.md-barra { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--borde); margin-bottom: 14px; }
.md-tabs { display: flex; gap: 4px; margin: 0 auto 0 0; padding: 0; flex: 1; }   /* el nav global del header trae margin-left:auto */
.md-tabs button { position: relative; border: 0; background: transparent; padding: 10px 14px 11px; margin-bottom: -1px; font-family: "Special Gothic Expanded One", sans-serif; font-size: 12px; letter-spacing: .04em; color: var(--gris); cursor: pointer; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; }
.md-tabs button:hover { color: var(--tinta); }
.md-tabs button.activo { color: var(--tinta); border-bottom-color: var(--tinta); }
.md-cnt { display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 6px; border-radius: 999px; background: #b3423a; color: #fff; font: 700 10px/16px -apple-system, "Geist", sans-serif; letter-spacing: 0; vertical-align: 1px; }
.md-cnt:empty { display: none; }
.md-btn { border: 1px solid #1d1d1f; background: #1d1d1f; color: #fff; border-radius: var(--radio); padding: 8px 14px; margin-bottom: 8px; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 1px; cursor: pointer; flex: 0 0 auto; }
.md-filtro { display: flex; align-items: center; gap: 4px; margin: 0 0 12px; font-size: 12.5px; }
.md-filtro-label { color: var(--gris); margin-right: 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.md-filtro button { border: 0; background: transparent; padding: 4px 8px; font: inherit; font-size: 12.5px; color: var(--gris); cursor: pointer; border-radius: var(--radio); }
.md-filtro button:hover { color: var(--tinta); background: var(--superficie); }
.md-filtro button.activo { color: var(--tinta); font-weight: 700; background: var(--superficie); }
.md-btn:disabled { opacity: .55; cursor: default; }
.md-mas { margin-top: 12px; margin-bottom: 0; }
.pd-barra .md-btn { margin-bottom: 0; }
.md-semana { font-size: 12px; color: var(--gris); }
.md-chip { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 2px 8px 3px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.md-n3 { color: #b3423a; } .md-n2 { color: #96610d; } .md-n1 { color: #8a670f; }
.md-txt-n3 { color: #b3423a; font-weight: 700; } .md-txt-n2 { color: #96610d; font-weight: 700; } .md-txt-n1 { color: #8a670f; font-weight: 700; }
.md-t-transfer { color: #3f5f8a; } .md-t-trade { color: #3f7a3a; } .md-t-reembolso { color: #6e6e73; } .md-t-subasta { color: #7a4f9a; }
.md-tabla td { vertical-align: top; }
.md-tabla tr.md-fila-n3 td { background: #fdf0ee; }
/* la fila que se marca se va sola, sin repintar la tabla */
.md-tabla tbody td { transition: opacity .2s ease, transform .2s ease; }
.md-tabla tr.md-saliendo td { opacity: 0; transform: translateX(14px); }
.md-tabla tr.md-saliendo { pointer-events: none; }
.md-tabla tr.md-fila-n2 td { background: rgba(239, 159, 39, .10); }
.md-senal { white-space: nowrap; }
.md-detalle { font-size: 12.5px; line-height: 1.5; max-width: 520px; }
.md-nota { margin-top: 4px; font-size: 11.5px; color: var(--gris); font-style: italic; }
.md-nota span { font-style: normal; }
.md-acciones { white-space: nowrap; }
.md-mini { border: 1px solid #1d1d1f; background: #1d1d1f; color: #fff; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 10px; font-weight: 700; letter-spacing: .06em; cursor: pointer; margin-left: 4px; }
.md-mini-gris { background: transparent; color: #1d1d1f; }
.md-cuenta-link { color: inherit; font-weight: 600; text-decoration: underline dotted #c7c7cc; text-underline-offset: 3px; }
.md-vinculo-link { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #1d1d1f; text-decoration: none; }
.md-codes { font-family: ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: .03em; }
.md-fel { color: #6e6e73; }
.md-que { max-width: 420px; }
.md-ref { white-space: nowrap; font-variant-numeric: tabular-nums; }
.md-ficha { border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; margin-bottom: 14px; background: #fff; }
.md-ficha-nombre { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.md-id { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--gris); font-weight: 400; margin-left: 8px; }
.md-ficha-datos { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--gris); }
.md-ficha-datos b { color: var(--tinta); }
.md-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .md-dos { grid-template-columns: 1fr; } }
.md-h3 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); margin: 18px 0 8px; }
.md-senales { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.md-senales li { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); padding: 6px 12px; }
.md-estado { font-size: 11px; color: var(--gris); text-transform: uppercase; letter-spacing: .05em; margin-left: 6px; }
.md-saldo { font-size: 13.5px; margin: 6px 0 0; }

/* cuenta: bloques iguales, uno debajo del otro, sin cajas ni sangrias */
.md-bloque { margin-bottom: 26px; }
.md-bloque .md-h3 { margin-top: 0; padding-bottom: 6px; border-bottom: 1px solid var(--borde); }
.md-titulo { font-size: 18px; font-weight: 700; margin: 4px 0 10px; }
.md-kv { display: grid; grid-template-columns: 170px 1fr; row-gap: 6px; column-gap: 16px; font-size: 13px; max-width: 640px; }
.md-kv-k { color: var(--gris); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding-top: 2px; }
.md-kv-v b { font-weight: 700; }
.md-estado-td { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--gris); white-space: nowrap; }
.md-diario tr.md-dia td { background: var(--superficie); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); padding: 6px 12px; }

/* tooltip de cada codigo: idol, grupo, era, rareza y print */
.md-code { display: inline-block; }
.md-code-tip { position: relative; cursor: help; text-decoration: underline dotted #c7c7cc; text-underline-offset: 3px; }
.md-code-tip::after {
  content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 60;
  background: #1c1c1e; color: #fff; border-radius: 6px; padding: 7px 10px 8px;
  font: 400 12px/1.5 -apple-system, "Geist", sans-serif; letter-spacing: 0; white-space: pre;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22); opacity: 0; visibility: hidden; transition: opacity .12s ease; pointer-events: none;
}
.md-code-tip::before {
  content: ''; position: absolute; left: 12px; bottom: calc(100% + 1px); z-index: 61;
  border: 5px solid transparent; border-top-color: #1c1c1e; opacity: 0; visibility: hidden; transition: opacity .12s ease;
}
.md-code-tip:hover::after, .md-code-tip:hover::before { opacity: 1; visibility: visible; }

/* medida correctiva: boton rojo y formulario de confirmacion en la ficha */
.md-titulo-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.md-titulo .md-chip { margin-left: 10px; vertical-align: 2px; }
.md-btn-rojo { background: #b3423a; border-color: #b3423a; margin-bottom: 0; }
.md-btn-rojo:disabled { opacity: .5; }
.md-btn-gris { background: transparent; color: #1d1d1f; margin-bottom: 0; }
.md-medida { border: 1px solid #b3423a; border-radius: var(--radio); padding: 14px 16px; margin: 12px 0 16px; background: #fdf0ee; max-width: 720px; }
.md-medida-titulo { font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #b3423a; margin-bottom: 6px; }
.md-medida-txt { font-size: 13px; line-height: 1.5; margin: 0 0 12px; }
.md-medida-label { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); margin: 10px 0 4px; }
.md-medida input { width: 100%; max-width: 420px; padding: 8px 10px; border: 1px solid var(--borde); border-radius: var(--radio); font: inherit; font-size: 13px; background: #fff; }
.md-medida-fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.md-medida-fila input { max-width: 200px; }
.md-filtro .pg-buscar { margin: 0; max-width: 280px; }
/* candidatos cuando un nombre calza con varias cuentas */
.md-opciones { max-width: 520px; }
.md-opciones-t { font-size: 13px; color: var(--gris); margin: 0 0 8px; }
.md-opcion { display: block; width: 100%; text-align: left; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; padding: 9px 12px; margin-bottom: 6px; font: inherit; font-size: 13.5px; cursor: pointer; }
.md-opcion:hover { border-color: var(--tinta); background: var(--superficie); }
.md-opcion span { float: right; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--gris); }
.md-vista-col { color: #a1a1a6; font-size: 11px; }

/* ---- ESTADISTICAS ---- */
.st-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* 4 y 4: con auto-fit la pantalla grande armaba 5 arriba y 3 abajo, que se
   lee desparejo. Se baja a 2 columnas en pantallas chicas. */
.st-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0 6px; }
@media (max-width: 900px) { .st-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .st-kpis { grid-template-columns: 1fr; } }
.st-kpi { background: var(--card, #fff); border: 1px solid var(--linea, #e6e1d9); border-radius: 6px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.st-kpi-n { font-family: "Special Gothic Expanded One", sans-serif; font-size: 34px; line-height: 1.05; letter-spacing: -.01em; }
.st-kpi-t { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.st-kpi-x { font-size: 12px; opacity: .55; }
/* EL AIRE ENTRE SECCIONES ES LO QUE LAS SEPARA. Iba en 26 px y el titulo se
   pegaba a la tabla anterior; subio a 46 y Leon lo seguia viendo apretado, asi
   que va en 76 (19-sep-2026). El margen de ARRIBA es grande y el de ABAJO se
   queda chico a proposito: es esa diferencia, y no el tamano de la letra, la
   que hace que el titulo se lea como parte de lo que viene y no de lo que
   quedo atras. Subir los dos juntos vuelve a dejar todo como un bloque solo. */
/* Selector de franja. Copia el patron de STATS: subrayado dorado en la activa
   y text-shadow en vez de bold, porque negrita de verdad ensancha el texto y
   los botones saltan de sitio al cambiar de franja. */
/* SE QUEDA ARRIBA AL BAJAR. Es necesario para comparar franjas sin perder de
   vista cuál estás mirando (Leon, 19-sep-2026).
   Los márgenes negativos y el padding que los compensa son para que el fondo
   cubra todo el ancho de `main` (que tiene 24 px de padding) y el contenido no
   asome por los costados al pasar por debajo.
   LA ESCALERA DE z-index DEL PANEL, de abajo hacia arriba:
     60  globo del gráfico de Estadísticas
     70  este selector de franja
     75  menús desplegables del encabezado
     80  cajones laterales
   1200  la franja de render
   Si se agrega algo fijo, va aquí y se elige mirando esta lista, no al azar. */
.st-rangos { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--borde);
  margin: 4px -24px 18px; padding: 0 24px;
  position: sticky; top: 0; z-index: 70; background: var(--bg); }
/* la franja de render es `fixed` arriba y mide 46 px: sin esto el selector se
   le mete por debajo justo cuando hay una tanda corriendo */
body.con-franja .st-rangos { top: 46px; }
/* mientras se pide la franja nueva, lo viejo se queda a la vista atenuado: si
   se vacia, la pagina se encoge y el scroll se va al principio */
#st-cuerpo.st-cargando { opacity: .4; transition: opacity .12s ease; pointer-events: none; }
.st-rango { position: relative; padding: 12px 16px; font-size: 12.5px; letter-spacing: .02em;
  background: none; border: 0; color: var(--gris); cursor: pointer; transition: color var(--tr); }
.st-rango:hover { color: var(--tinta); }
.st-rango.activo { color: var(--tinta); text-shadow: 0 0 .55px currentColor; }
.st-rango.activo::after { content: ''; position: absolute; bottom: -1px; left: 16px; right: 16px;
  height: 2px; background: var(--gold); border-radius: 1px; }
.st-rango[disabled] { opacity: .5; cursor: default; }
@media (max-width: 560px) { .st-rango { padding: 10px 11px; font-size: 12px; }
  .st-rango.activo::after { left: 11px; right: 11px; } }
/* `main` baja su padding a 14 px bajo 900: el margen negativo tiene que
   seguirlo o el selector se sale y queda cortado por el overflow */
@media (max-width: 900px) { .st-rangos { margin-left: -14px; margin-right: -14px; padding: 0 14px; } }

.st-h { margin: 76px 0 12px; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
.st-h:first-of-type { margin-top: 44px; }
#tab-estadisticas .pg-ayuda { margin: 0 0 16px; }
#tab-estadisticas .st-tabla { margin-bottom: 4px; }
.st-grafico { position: relative; display: flex; align-items: flex-end; gap: 4px; height: 150px; padding: 8px 10px; margin-bottom: 6px; background: var(--card, #fff); border: 1px solid var(--linea, #e6e1d9); border-radius: 6px; }
.st-col { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 3px; cursor: default; }
.st-col-barra { width: 100%; background: #D3BC9C; border-radius: 3px 3px 0 0; min-height: 2px; }
.st-col-dia { font-size: 10px; opacity: .5; }
/* la cifra del dia va sobre la barra y ademas hay tooltip propio al pasar el
   cursor: el del navegador tarda un segundo y aqui se quiere leer de un vistazo */
.st-col-n { font-size: 10px; opacity: 0; transition: opacity .12s ease; }
.st-col:hover .st-col-n { opacity: .75; }
.st-col:hover .st-col-barra { background: #C2A882; }
.st-col::after {
  content: attr(data-tip); position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(100% + 8px); z-index: 60; background: #1c1c1e; color: #fff; border-radius: 6px;
  padding: 7px 10px 8px; font: 400 12px/1.45 -apple-system, "Geist", sans-serif; white-space: pre;
  text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.22); opacity: 0; visibility: hidden;
  transition: opacity .12s ease; pointer-events: none;
}
.st-col:hover::after { opacity: 1; visibility: visible; }
.st-vs-caja { display: flex; flex-direction: column; gap: 18px; margin-bottom: 16px; }
.st-vs-cab { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.st-vs-cifra { opacity: .6; }
.st-vs-barra { display: flex; height: 26px; border-radius: 6px; overflow: hidden; }
.st-vs-girl { background: #E48FB4; color: #fff; font-size: 12px; display: flex; align-items: center; padding: 0 8px; }
.st-vs-boy { background: #6FA8DC; color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: flex-end; padding: 0 8px; flex: 1; }
.st-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
/* Las dos tablas de grupos van una bajo la otra: con el ancho automatico cada
   una media sus propias columnas y las cabeceras no calzaban. */
.st-grupos { table-layout: fixed; }
.st-grupos th:nth-child(1), .st-grupos td:nth-child(1) { width: 30%; }
.st-grupos th:nth-child(2), .st-grupos td:nth-child(2) { width: 10%; }
.st-grupos th:nth-child(3), .st-grupos td:nth-child(3) { width: 12%; }
.st-grupos th:nth-child(4), .st-grupos td:nth-child(4) { width: 12%; }
.st-grupos th:nth-child(5), .st-grupos td:nth-child(5) { width: 16%; }
.st-grupos th:nth-child(6), .st-grupos td:nth-child(6) { width: 20%; }
.st-tabla th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .6; padding: 6px 10px; border-bottom: 1px solid var(--linea, #e6e1d9); }
.st-tabla td { padding: 7px 10px; border-bottom: 1px solid var(--linea-suave, #f0ece5); }
.st-tipo { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.st-girl { color: #C2185B; }
.st-boy { color: #1565C0; }
.st-fuerte { font-weight: 600; }
.st-estrellas { color: #D3BC9C; letter-spacing: .04em; }
.st-carrusel { position: relative; display: flex; align-items: stretch; gap: 8px; margin-top: 10px; }
.st-car-pista { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; flex: 1; }
.st-car-pista::-webkit-scrollbar { display: none; }
.st-car-tarjeta { flex: 0 0 300px; scroll-snap-align: start; background: var(--card, #fff); border: 1px solid var(--linea, #e6e1d9); border-radius: 6px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.st-car-cab { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.st-car-nota { opacity: .6; }
.st-car-texto { margin: 0; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; flex: 1; }
.st-car-pie { font-size: 11px; opacity: .55; text-transform: uppercase; letter-spacing: .04em; }
.st-car-btn { flex: 0 0 34px; border: 1px solid var(--linea, #e6e1d9); background: var(--card, #fff); border-radius: 6px; font-size: 22px; line-height: 1; cursor: pointer; color: inherit; }
.st-car-btn:hover { border-color: #D3BC9C; }
@media (max-width: 600px) { .st-car-tarjeta { flex-basis: 84%; } .st-car-btn { display: none; } }
.st-flojo { opacity: .6; }

/* ---- CONVOCATORIA de marcos (panel) ---- */
.cvp-config { display: grid; grid-template-columns: 1fr 260px; gap: 14px; align-items: end; background: var(--card, #fff); border: 1px solid var(--linea, #e6e1d9); border-radius: 6px; padding: 16px; margin: 12px 0 8px; }
.cvp-config label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.cvp-config input, .cvp-config select { font: 14px "Inter Tight", sans-serif; padding: 10px 12px; border: 1px solid var(--linea, #e6e1d9); border-radius: 6px; background: #fff; }
.cvp-botones { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }
.btn-lib.peligro { background: #b3423a; border-color: #b3423a; color: #fff; }
.btn-lib.peligro:hover { background: #932f28; }
@media (max-width: 720px) { .cvp-config { grid-template-columns: 1fr; } }
.cvp-persona { border: 1px solid var(--linea, #e6e1d9); border-radius: 6px; background: var(--card, #fff); padding: 14px 16px; margin-bottom: 12px; }
.cvp-persona-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-weight: 600; }
.cvp-persona-cab img { width: 26px; height: 26px; border-radius: 50%; }
.cvp-persona-cab span { font-weight: 400; opacity: .6; font-size: 12px; }
.cvp-marcos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.cvp-marco { cursor: pointer; border: 2px solid transparent; border-radius: 6px; padding: 5px; transition: border-color .15s; }
.cvp-marco:hover { border-color: #D3BC9C; }
.cvp-marco canvas { width: 100%; aspect-ratio: 750/1050; display: block; border-radius: 4px; background: repeating-conic-gradient(#e6e6e6 0 25%, #f6f6f6 0 50%) 0 0/16px 16px; }
.cvp-marco-n { font-size: 11px; opacity: .65; text-align: center; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cvp-modal { position: fixed; inset: 0; background: rgba(19,22,26,.55); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 20px; }
.cvp-modal-caja { background: #fff; border-radius: 6px; padding: 24px; max-width: 440px; width: 100%; }
.cvp-modal-caja h3 { margin: 0 0 10px; font-family: "Special Gothic Expanded One", sans-serif; font-weight: 400; font-size: 17px; }
.cvp-modal-caja p { font-size: 14px; line-height: 1.5; opacity: .85; }
.cvp-modal-caja input { width: 100%; font: 15px "Inter Tight", sans-serif; padding: 11px 12px; border: 1px solid var(--linea, #e6e1d9); border-radius: 6px; margin: 8px 0 14px; }
.cvp-modal-botones { display: flex; gap: 10px; justify-content: flex-end; }
.cvp-visor-caja { background: #fff; border-radius: 6px; padding: 18px; display: grid; grid-template-columns: minmax(240px, 420px) 220px; gap: 18px; max-height: 92vh; }
.cvp-visor-caja canvas { width: 100%; height: auto; border-radius: 4px; background: repeating-conic-gradient(#ececec 0 25%, #f7f7f7 0 50%) 0 0/24px 24px; }
.cvp-visor-lado { display: flex; flex-direction: column; gap: 10px; }
.cvp-visor-lado h3 { margin: 0; font-size: 15px; }
.cvp-visor-lado .btn-lib { text-align: center; }
@media (max-width: 720px) { .cvp-visor-caja { grid-template-columns: 1fr; overflow: auto; } }

/* Campo que el formulario de JUEGOS marca como faltante. Se apaga al escribir. */
.campo-falta {
  border-color: #b3423a !important;
  box-shadow: 0 0 0 2px rgba(179, 66, 58, .18) !important;
}

/* ---- ECONOMÍA del tablero de estadísticas ----
   El color no es decoración: es lo primero que se lee. Por eso la tarjeta lleva
   una franja lateral gruesa, que se ve de reojo sin tener que enfocar el texto,
   y no solo un punto de emoji. */
.st-eco-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 8px; }
@media (max-width: 900px) { .st-eco-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .st-eco-kpis { grid-template-columns: 1fr; } }

.st-eco-kpi { background: var(--card, #fff); border: 1px solid var(--linea, #e6e1d9); border-radius: 6px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; border-left-width: 6px; border-left-style: solid; }
.st-eco-kpi.st-eco-azul { border-left-color: var(--azul); }
.st-eco-kpi.st-eco-verde { border-left-color: var(--verde); }
.st-eco-kpi.st-eco-amarillo { border-left-color: var(--ambar); }
.st-eco-kpi.st-eco-rojo { border-left-color: var(--rojo); }
.st-eco-kpi.st-eco-gris { border-left-color: #9E9E9E; }
/* OJO CON `opacity` AQUI. Llevaba `opacity: .8` para apagar un poco el titulo,
   y eso atenua TODO el subarbol, pseudoelementos incluidos: el globo salia
   translucido por mas que su fondo fuera negro puro, y encima la opacidad crea
   un contexto de apilado que le encierra el z-index dentro de la tarjeta. El
   mismo gris se consigue con `color` y sin ninguno de los dos efectos
   (#0a0a0a al 80% sobre blanco da exactamente #3b3b3b). */
.st-eco-cab { display: flex; align-items: center; gap: 8px; font-size: 12px;
  text-transform: uppercase; letter-spacing: .06em; color: #3b3b3b; }
/* el circulo del semaforo: plano, sin borde ni sombra, y no se encoge cuando
   el nombre del KPI ocupa dos lineas */
.st-eco-punto { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; background: var(--gris-suave, #a1a1aa); }
.st-eco-azul .st-eco-punto { background: var(--azul); }
.st-eco-verde .st-eco-punto { background: var(--verde); }
.st-eco-amarillo .st-eco-punto { background: var(--ambar); }
.st-eco-rojo .st-eco-punto { background: var(--rojo); }
.st-eco-n { font-family: "Special Gothic Expanded One", sans-serif; font-size: 34px; line-height: 1.05; letter-spacing: -.01em; }
.st-eco-detalle { font-size: 12px; opacity: .6; }
/* La explicación vive en un globo al pasar por el título, no suelta dentro de
   la tarjeta: con nueve tarjetas, nueve párrafos saturan el tablero (Leon,
   19-sep-2026). Misma factura que los demás globos del panel.
   Va ABAJO del título y no arriba, porque el título es lo primero de la tarjeta
   y hacia arriba se lo comería la barra de franjas, que es fija. */
/* Sin subrayado (Leon, 19-sep-2026): con nueve tarjetas, nueve títulos
   punteados ensucian la grilla. El cursor de ayuda basta de aviso. */
.st-eco-tip { position: relative; cursor: help; }
.st-eco-tip::after {
  content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 9px); z-index: 60;
  width: 250px; background: #000; color: #fff; border-radius: 6px; padding: 8px 11px 9px;
  font: 400 12px/1.5 -apple-system, "Geist", sans-serif; letter-spacing: 0;
  white-space: normal; text-transform: none; text-align: left;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  /* NEGRO SÓLIDO Y SIN DESVANECIDO. Con el fondo en #1c1c1e y una transición de
     opacidad, el texto de la tarjeta se leía POR DEBAJO mientras aparecía y el
     globo quedaba ilegible (Leon, 19-sep-2026). Se muestra y se esconde de
     golpe, asi nunca hay un instante medio transparente. */
  visibility: hidden; pointer-events: none;
}
.st-eco-tip::before {
  content: ''; position: absolute; left: 12px; top: calc(100% + 4px); z-index: 61;
  border: 5px solid transparent; border-bottom-color: #000;
  visibility: hidden;
}
.st-eco-tip:hover::after, .st-eco-tip:hover::before { visibility: visible; }
/* la última columna abre el globo hacia la izquierda para no salirse */
.st-eco-kpis > .st-eco-kpi:nth-child(3n) .st-eco-tip::after { left: auto; right: 0; }
.st-eco-kpis > .st-eco-kpi:nth-child(3n) .st-eco-tip::before { left: auto; right: 12px; }
/* El objetivo va SIEMPRE, tambien en las verdes: es lo que contesta "¿cuándo
   está bien esto?" sin tener que ir a buscar el umbral al codigo. Sale escrito
   del propio umbral, asi que no puede quedar mintiendo. */
.st-eco-objetivo { font-size: 11.5px; letter-spacing: .02em; opacity: .55;
  border-top: 1px dashed var(--linea-suave, #f0ece5); padding-top: 6px; margin-top: 2px; }
.st-eco-mejora { font-size: 12px; color: var(--verde); }
.st-eco-empeora { font-size: 12px; color: var(--rojo); }
.st-eco-igual { font-size: 12px; opacity: .5; }
/* La acción se separa del resto: es lo único accionable de la tarjeta y tiene
   que distinguirse de la explicación, que es contexto. */
.st-eco-accion { margin-top: 4px; padding: 9px 11px; border-radius: 5px; font-size: 12.5px; line-height: 1.45;
  background: var(--linea-suave, #f0ece5); }
.st-eco-accion b { display: block; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; opacity: .7; margin-bottom: 2px; }
.st-eco-accion strong { font-weight: 600; }

.st-eco-flujos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
@media (max-width: 720px) { .st-eco-flujos { grid-template-columns: 1fr; } }
.st-eco-flujo { background: var(--card, #fff); border: 1px solid var(--linea, #e6e1d9); border-radius: 6px; padding: 12px 14px; }
.st-eco-flujo h4 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .7; font-weight: 500; }
.st-eco-flujo .pg-ayuda { margin: 10px 0 0; font-size: 11.5px; }
.st-eco-fila { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 8px; padding: 4px 0; font-size: 12.5px; }
.st-eco-riel { display: block; height: 8px; border-radius: 4px; background: var(--linea-suave, #f0ece5); overflow: hidden; }
.st-eco-riel i { display: block; height: 100%; background: #D3BC9C; border-radius: 4px; }
.st-eco-monto { font-variant-numeric: tabular-nums; font-weight: 600; }
.st-eco-gente { grid-column: 2 / -1; font-size: 11px; opacity: .5; margin-top: -3px; }

/* ---- CHANGE THIS CARD: la cola del curador dentro de CURADURÍA ---- */
.ctc-cola { margin: 0 0 26px; }
.ctc-cab { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.ctc-cab h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; margin: 0; }
.ctc-cab span { font-size: 12px; color: var(--gris); }
.ctc-item { display: grid; grid-template-columns: auto auto 1fr; gap: 18px; align-items: start;
  border: 1px solid var(--gold); border-radius: var(--radio);
  padding: 16px 18px; margin-bottom: 12px; background: #fff; }
@media (max-width: 760px) { .ctc-item { grid-template-columns: 1fr 1fr; } }
/* el par antes/después: sin comparar las dos no se puede curar nada */
.ctc-par { text-align: center; }
/* la miniatura de la fila: el mismo marco del staff, más chico */
.ctc-par .curf-marco { width: 132px; }
.ctc-vacio { position: absolute; inset: 0; background: var(--realce); }
.ctc-par span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gris); margin-top: 6px; }
.ctc-datos { min-width: 0; }
.ctc-titulo { font-weight: 600; margin-bottom: 2px; }
.ctc-meta { font-size: 12.5px; color: var(--gris); margin-bottom: 12px; }
.ctc-meta b { color: var(--tinta); font-weight: 600; }
.ctc-vuelta { display: inline-block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid var(--borde-fuerte); border-radius: 4px; padding: 1px 7px; margin-left: 6px; }
.ctc-item textarea { width: 100%; min-height: 66px; resize: vertical; font: inherit; font-size: 13px;
  padding: 9px 11px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--bg); }
.ctc-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.ctc-acc .spacer { flex: 1; }
.ctc-voto { display: flex; flex-direction: row; align-items: center; gap: 7px; font-size: 12.5px; color: var(--gris); cursor: pointer; }

/* ---- revisión de un rediseño de la comunidad ----
   Toda la estética la pone `.cur-full` del staff. Aquí solo lo propio: que se
   vean DOS cartas en vez de una, y su pie. */
.ctcr-par { display: flex; gap: 20px; align-items: flex-start; }
.ctcr-par > div { flex: 1; min-width: 0; }
.ctcr-pie { display: block; text-align: center; margin-top: 10px; font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
#ctc-full .ctc-voto, #ctcut-full .ctc-voto { margin: 14px 0 2px; }

/* mockup de la colección dentro de la revisión de un rediseño */
.ctcr-h { margin: 34px 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.ctcr-mockup { display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; }
.ctcr-fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* cada celda recorta el margen transparente igual que el marco grande */
.ctcr-celda { position: relative; aspect-ratio: 690 / 966; overflow: hidden; border-radius: 6px; }
.ctcr-celda img, .ctcr-celda canvas {
  position: absolute; width: 108.696%; left: -4.348%; top: -4.348%;
}
.ctcr-celda.vacia { background: var(--realce); }
/* la que se está revisando se distingue sin tapar la comparación */
.ctcr-celda.suya { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---- MUESTRAS: lámina de photocards para relaciones públicas ---- */
.mu-grid { display: grid; gap: 12px; margin-top: 6px; }
/* el tablero de ajedrez deja ver que el fondo es transparente de verdad */
.mu-celda { position: relative; aspect-ratio: 690 / 966; overflow: hidden; border-radius: 6px;
  background-color: #fafafa;
  background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),
    linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.mu-celda img { position: absolute; width: 108.696%; left: -4.348%; top: -4.348%; }
#tab-muestras .toolbar { flex-wrap: wrap; gap: 8px; }
/* el ancla del buscador: tan ancho como su campo, para que la lista de
   sugerencias salga del mismo ancho y no del de la barra entera */
.mu-combo { display: inline-block; width: 230px; }
.mu-combo input { width: 100%; }
#tab-muestras .spacer { flex: 1; }
#mu-count { font-size: 12.5px; color: var(--gris); }

/* ---------- grilla de encuadre (grilla.js) ----------
   La grilla es una capa SVG encima del lienzo, nunca parte de el: "Exportar
   PNG" descarga el lienzo tal cual. */
.lienzo-grilla { position: relative; width: 375px; max-width: 100%; }
.lienzo-grilla #card { display: block; }
.grilla-capa { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.grilla-sel { display: inline-flex; border: 1px solid var(--borde-fuerte); border-radius: 10px; overflow: hidden; background: #fff; }
.grilla-btn {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 34px; padding: 0; border: 0; background: none;
  color: var(--gris); cursor: pointer;
}
.grilla-btn + .grilla-btn { border-left: 1px solid var(--borde-fuerte); }
.grilla-btn:hover { color: var(--tinta); background: var(--realce); }
.grilla-btn.activo { color: var(--tinta); background: var(--gold-soft); }

/* ---------- HOLDERS (25-sep-2026) ---------- */
/* Los botones de la seccion llevan el boton de la marca (el mismo de .sh-group).
   Sin esto un <button> suelto cae en el estilo por defecto del navegador. */
#tab-holders button {
  padding: 8px 14px; border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--bg); color: var(--gris);
  font-family: "Special Gothic Expanded One", sans-serif; font-size: 12px; cursor: pointer;
}
#tab-holders button:hover { border-color: var(--gold); color: var(--tinta); background: var(--gold-soft); }
#tab-holders button.primary { background: var(--tinta); border-color: var(--tinta); color: #fff; }
#tab-holders button.primary:hover { background: var(--tinta-hover); border-color: var(--tinta-hover); }
#tab-holders button.ghost { color: var(--tinta) !important; }
#tab-holders button:disabled { opacity: .35; cursor: default; }

/* submenu, igual al de JUEGOS */
.hd-subtabs { display: flex; margin: 0 0 18px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--bg); }
#tab-holders .hd-sub-btn { flex: 1; padding: 12px 0; border: none; border-bottom: 3px solid transparent; border-radius: 0; background: none; color: var(--gris); }
#tab-holders .hd-sub-btn:hover { color: var(--tinta); background: var(--superficie); }
#tab-holders .hd-sub-btn.active { border-bottom-color: var(--gold); background: var(--gold-soft); color: var(--tinta); }
#tab-holders .hd-sub-btn:first-child { border-top-left-radius: var(--radio); }
#tab-holders .hd-sub-btn:last-child { border-top-right-radius: var(--radio); }

.hd-nota { margin: 0; color: var(--gris); font-size: 13px; line-height: 1.5; }

/* los tres pasos, desplegables uno bajo el otro */
.hd-paso { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--bg); margin-bottom: 12px; }
.hd-paso summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; font-family: "Special Gothic Expanded One", sans-serif; font-size: 14px; }
.hd-paso summary::-webkit-details-marker { display: none; }
.hd-paso summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--gris); border-bottom: 2px solid var(--gris); transform: rotate(45deg); transition: transform .15s; }
.hd-paso[open] summary::after { transform: rotate(-135deg); }
.hd-paso-cuerpo { box-sizing: border-box; }
.hd-paso summary:hover { background: var(--superficie); }
.hd-num { width: 26px; height: 26px; border-radius: 50%; background: var(--tinta); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; font-family: "Inter Tight", sans-serif; }
.hd-summary-nota { font-family: "Inter Tight", sans-serif; font-size: 12.5px; color: var(--gris); font-weight: 400; }
.hd-paso-cuerpo { padding: 4px 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.hd-paso-pedir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 22px; }
.hd-paso-pedir > div { display: flex; flex-direction: column; gap: 14px; }
.hd-lista-pasos { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--gris); display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }
.hd-prompt { width: 100%; box-sizing: border-box; font: 12.5px/1.5 "Inter Tight", sans-serif; padding: 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); color: var(--tinta); resize: vertical; }
.hd-botonera { display: flex; gap: 10px; flex-wrap: wrap; }
.hd-botonera-col { flex-direction: column; }
.hd-botonera-col button { width: 100%; }
.hd-campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--gris); }
.hd-campo input, .hd-campo textarea { padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; font: inherit; font-size: 14px; color: var(--tinta); background: var(--bg); resize: vertical; }
.hd-paso-subir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 22px; }
.hd-subir-izq { display: flex; flex-direction: column; gap: 12px; }
.hd-drop-caja { overflow: hidden; }
.hd-drop.ocupado { opacity: .45; pointer-events: none; }
.hd-drop { padding: 26px 14px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.hd-drop strong { font-family: "Special Gothic Expanded One", sans-serif; font-weight: 400; font-size: 13px; letter-spacing: .05em; }
.hd-drop span { font-size: 12.5px; color: var(--gris); }
.hd-progreso { font-size: 13px; color: var(--gris); padding: 10px 12px; border-radius: 10px; background: var(--superficie); }
.hd-progreso.error { background: #fdf0ee; color: var(--rojo); }
.hd-informe { display: flex; flex-direction: column; gap: 10px; }
.hd-informe h4 { margin: 4px 0 0; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.hd-puntos { display: flex; flex-direction: column; gap: 6px; }
.hd-punto { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.4; }
.hd-punto::before { content: ""; width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; background: #3f7a3a; }
.hd-punto.amarillo::before { background: #d9a400; }
.hd-punto.rojo::before { background: var(--rojo); }
.hd-pasos-hechos { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--gris); display: flex; flex-direction: column; gap: 3px; }

/* la prueba y el modal comparten la previa */
.hd-prueba { display: flex; gap: 18px; align-items: flex-start; }
/* La caja se ajusta a la imagen: sin márgenes propios, la previa se ve justo
   al borde del holder, igual que en Discord (Leon, 25-sep-2026). Mientras no hay
   imagen conserva un alto 3:4 para que la barra de carga tenga dónde verse. */
.hd-previa-caja { position: relative; flex: 1; min-width: 0; max-width: 460px; border-radius: 12px; background: #313338; overflow: hidden; }
.hd-previa-caja:has(.hd-previa:not([src])), .hd-previa-caja:has(.hd-previa[src=""]) { aspect-ratio: 3 / 4; }
.hd-previa { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
/* previa al instante: la carta en la ventana, debajo del PNG del holder */
.hd-comp-ventana { position: absolute; overflow: hidden; z-index: 0; }
.hd-comp-ventana img { position: absolute; max-width: none; display: block; }
.hd-previa-estado { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: #fff; font-size: 13px; background: rgba(0, 0, 0, .55); }
.hd-prueba-lado, .hd-modal-lado { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
.hd-prueba-titulo { font-weight: 700; font-size: 14px; }
.hd-cartas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#tab-holders .hd-carta { aspect-ratio: 750 / 1050; border-radius: 6px; overflow: hidden; border: 2px solid transparent; padding: 0; background: var(--superficie); }
#tab-holders .hd-carta:hover { border-color: var(--gold-soft); background: var(--superficie); }
#tab-holders .hd-carta.activa { border-color: var(--gold); }
.hd-carta img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* listas */
.hd-grupo h3 { margin: 0 0 10px; font-family: "Special Gothic Expanded One", sans-serif; font-weight: 400; font-size: 13px; letter-spacing: .06em; display: flex; align-items: center; gap: 8px; }
.hd-lista { display: flex; flex-direction: column; gap: 22px; }
.hd-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.hd-item { border: 1px solid var(--borde); border-radius: 12px; background: var(--bg); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.hd-item.clic { cursor: pointer; }
.hd-item.clic:hover { border-color: var(--gold); }
.hd-item-img { aspect-ratio: 3 / 4; border-radius: 8px; background: var(--superficie); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hd-item-img img { max-width: 90%; max-height: 90%; object-fit: contain; }
.hd-item-nombre { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hd-item-meta { font-size: 12px; color: var(--gris); }
.hd-item-nota { font-size: 12px; color: var(--rojo); line-height: 1.4; }
.hd-item-acciones { display: flex; gap: 6px; flex-wrap: wrap; }
#tab-holders .hd-item-acciones button { padding: 7px 10px; font-size: 11px; }
.chip[data-st="rechazado"] { background: var(--superficie); color: var(--gris); border-color: var(--borde-fuerte); }
.chip[data-st="propuesta"] { background: #faf6ef; color: var(--tinta); border-color: var(--gold); }
.chip[data-st="cambios"] { background: #fdf0ee; color: var(--rojo); border-color: var(--rojo); }

/* modal */
.hd-modal-caja { background: #fff; border-radius: 12px; padding: 18px; display: flex; gap: 18px; max-height: 92vh; max-width: 760px; width: 100%; overflow: auto; align-items: flex-start; }
/* la previa mide exactamente lo que el holder: sin align-items se estiraba hasta el alto
   de la columna de la derecha y quedaba una franja oscura de relleno abajo (27-sep-2026) */
.hd-previa-caja { align-self: flex-start; }
.hd-modal-previa { width: 100%; max-width: 440px; }
.hd-modal-lado h3 { margin: 0 0 4px; font-family: "Special Gothic Expanded One", sans-serif; font-weight: 400; font-size: 15px; }
.hd-modal-form { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); }
@media (max-width: 900px) {
  .hd-paso-pedir, .hd-paso-subir { grid-template-columns: 1fr; }
  .hd-prueba, .hd-modal-caja { flex-direction: column; }
  .hd-prueba-lado, .hd-modal-lado { width: 100%; }
}

/* ---- EDITOR DE CORTE del taller de holders (27-sep-2026) ---- */
.hed-fondo { position: fixed; inset: 0; z-index: 900; display: flex; align-items: stretch; justify-content: center; padding: 20px;
  background: rgba(10, 10, 10, .45); opacity: 0; transition: opacity .2s ease; }
.hed-fondo.hed-visible { opacity: 1; }
.hed { display: flex; flex-direction: column; width: 100%; max-width: 1280px; background: var(--bg); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .18); overflow: hidden; transform: translateY(8px) scale(.985); transition: transform .22s cubic-bezier(.2,.7,.2,1); }
.hed-fondo.hed-visible .hed { transform: none; }
.hed-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--borde); }
.hed-titulo { font-family: "Special Gothic Expanded One", sans-serif; font-size: 14px; color: var(--tinta); }
.hed-titulo span { margin-left: 8px; font-family: "Inter Tight", sans-serif; font-size: 14px; color: var(--gris); }
.hed-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.hed button { padding: 8px 14px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--bg); color: var(--gris);
  font-family: "Special Gothic Expanded One", sans-serif; font-size: 12px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.hed button:hover:not(:disabled) { border-color: var(--gold); color: var(--tinta); background: var(--gold-soft); }
.hed button:disabled { opacity: .45; cursor: default; }
.hed button.primary { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.hed button.primary:hover:not(:disabled) { background: var(--tinta-hover); border-color: var(--tinta-hover); color: #fff; }
.hed button.activo { border-color: var(--gold); background: var(--gold-soft); color: var(--tinta); }
.hed-cuerpo { flex: 1; display: flex; min-height: 0; }
.hed-escena { flex: 1; min-width: 0; overflow: auto; padding: 12px; background: #f4f4f5; display: flex; }
.hed-pila { position: relative; margin: auto; flex-shrink: 0; }
.hed-lienzo, .hed-guia { display: block; }
.hed-guia { position: absolute; inset: 0; touch-action: none; }
.hed-lado { width: 260px; flex-shrink: 0; overflow-y: auto; padding: 16px; border-left: 1px solid var(--borde); display: flex; flex-direction: column; gap: 18px; }
.hed-grupo { display: flex; flex-direction: column; gap: 8px; }
.hed-oculto { display: none; }
.hed-rotulo { font-family: "Special Gothic Expanded One", sans-serif; font-size: 11px; color: var(--gris); }
.hed-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.hed-seg button { padding: 7px 10px; font-size: 11px; }
.hed-fila { display: grid; grid-template-columns: 72px 1fr 46px; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tinta); }
.hed-fila input[type="range"] { width: 100%; margin: 0; }
.hed-fila output { text-align: right; font-variant-numeric: tabular-nums; color: var(--gris); }
.hed-fila output.movido { color: var(--tinta); font-weight: 600; }
.hed-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tinta); cursor: pointer; }
@media (max-width: 760px) {
  .hed-fondo { padding: 0; }
  .hed { border-radius: 0; }
  .hed-cuerpo { flex-direction: column; }
  .hed-lado { width: 100%; border-left: 0; border-top: 1px solid var(--borde); max-height: 42vh; }
}
@media (prefers-reduced-motion: reduce) { .hed-fondo, .hed { transition: none; } }
.hed-rotulo-sub { margin-top: 8px; }
/* las casillas del editor: casilla y texto en la misma fila (el label global va en columna) */
.hed .hed-check { flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px; }
.hed .hed-check input { margin: 0; width: auto; }
.hed-cartas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.hed .hed-carta { aspect-ratio: 750 / 1050; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: var(--superficie); }
.hed .hed-carta:hover:not(:disabled) { border-color: var(--gold-soft); background: var(--superficie); }
.hed .hed-carta.activo { border-color: var(--gold); background: var(--superficie); }
.hed-carta img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* herramientas del editor: una fila de íconos y, debajo, el recuadro con su nombre y ajustes */
.hed-herrs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }   /* una sola fila, con ESTIRAR son cinco */
.hed .hed-herrs button { display: flex; align-items: center; justify-content: center; padding: 10px 0; }
.hed-herr-opciones { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.hed-herr-titulo { font-family: "Special Gothic Expanded One", sans-serif; font-size: 12px; color: var(--tinta); }
/* zoom de la previa del modal de curaduría */
.hd-modal-visor { flex: 1; min-width: 0; max-width: 460px; display: flex; flex-direction: column; gap: 10px; align-self: flex-start; }
.hd-modal-visor .hd-previa-caja { max-width: none; width: 100%; }
.hd-zoom-lienzo { position: relative; width: 100%; }
.hd-previa-caja.con-zoom { overflow: auto; max-height: 70vh; cursor: grab; touch-action: none; }
.hd-previa-caja.con-zoom.arrastrando { cursor: grabbing; }
.hd-previa-caja.con-zoom .hd-previa { user-select: none; -webkit-user-drag: none; }
.hd-zoom-barra { display: grid; grid-template-columns: auto minmax(120px, 360px) 72px; align-items: center; justify-content: center; gap: 12px;
  flex-direction: row; font-size: 12.5px; color: var(--tinta); }
.hd-zoom-barra span { font-family: "Special Gothic Expanded One", sans-serif; font-size: 11px; color: var(--gris); }
.hd-zoom-barra input[type="range"] { width: 100%; margin: 0; }
.hd-zoom-barra output { font-family: "Special Gothic Expanded One", sans-serif; font-size: 11px; color: var(--tinta); font-variant-numeric: tabular-nums; }
/* modal de CURADURÍA / PUBLICADOS a pantalla completa, con medidas fijas: el zoom
   ocurre dentro del visor y no mueve nada más (29-sep-2026) */
/* página completa como la curaduría de photocards (`.cur-full`): sin margen, sin
   fondo oscuro detrás y con el mismo degradado de la marca */
#hd-modal { padding: 0; z-index: 80; overscroll-behavior: contain;
  background: linear-gradient(115deg, #fdfbf6, #f6efe4, #fbf3e3, #f2ebdd, #fdfbf6);
  background-size: 320% 320%; animation: curgrad 18s ease infinite; }
#hd-modal .hd-modal-caja { width: 100%; height: 100%; max-width: none; max-height: none; display: grid;
  grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; padding: 28px 32px; overflow: hidden; align-items: stretch;
  box-sizing: border-box; border-radius: 0; background: transparent; }
#hd-modal .hd-modal-visor { max-width: none; height: 100%; min-height: 0; align-self: stretch; }
#hd-modal .hd-previa-caja { flex: 1; min-height: 0; max-width: none; width: 100%; max-height: none; aspect-ratio: auto;
  overflow: auto; display: flex; }
#hd-modal .hd-zoom-lienzo { margin: auto; flex-shrink: 0; }
#hd-modal .hd-modal-lado { width: auto; height: 100%; min-height: 0; overflow-y: auto; }
@media (max-width: 720px) {
  #hd-modal { padding: 0; }
  #hd-modal .hd-modal-caja { grid-template-columns: 1fr; grid-template-rows: 58vh auto; overflow-y: auto; border-radius: 0; }
  #hd-modal .hd-modal-lado { height: auto; overflow: visible; }
}
#hd-modal .hd-previa-caja img { user-select: none; -webkit-user-drag: none; }
/* EDITOR a página completa, como la curaduría (29-sep-2026): sin margen ni fondo
   oscuro detrás; el zoom va en un deslizador bajo la imagen */
.hed-fondo { padding: 0; z-index: 900; background: linear-gradient(115deg, #fdfbf6, #f6efe4, #fbf3e3, #f2ebdd, #fdfbf6);
  background-size: 320% 320%; animation: curgrad 18s ease infinite; }
.hed { max-width: none; border-radius: 0; box-shadow: none; background: transparent; }
.hed-cabeza { border-bottom-color: rgba(0, 0, 0, .06); }
.hed-lado { border-left-color: rgba(0, 0, 0, .06); width: 300px; }
.hed-visor { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hed-escena { flex: 1; min-height: 0; background: rgba(255, 255, 255, .45); }
.hed-zoom { display: grid; grid-template-columns: auto minmax(140px, 420px) 72px; align-items: center; justify-content: center; gap: 12px;
  padding: 10px 16px; border-top: 1px solid rgba(0, 0, 0, .06); flex-direction: row; }
.hed-zoom span, .hed-zoom output { font-family: "Special Gothic Expanded One", sans-serif; font-size: 11px; }
.hed-zoom span { color: var(--gris); }
.hed-zoom output { color: var(--tinta); font-variant-numeric: tabular-nums; }
.hed-zoom input[type="range"] { width: 100%; margin: 0; }
@media (max-width: 760px) {
  .hed-visor { min-height: 55vh; }
  .hed-lado { width: 100%; }
}
/* imágenes de PEDIR CAMBIOS: en el formulario del curador y en la tarjeta del creador */
.hd-adj { display: flex; flex-direction: column; gap: 8px; }
.hd-adj-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.hd-adj-lista:empty { display: none; }
.hd-adj-item { position: relative; aspect-ratio: 1; border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; background: var(--superficie); }
.hd-adj-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
#tab-holders .hd-adj-quitar { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; background: rgba(255, 255, 255, .92); color: var(--tinta); }
.hd-item-adj { display: flex; gap: 6px; flex-wrap: wrap; }
.hd-item-adj a { display: block; width: 56px; height: 56px; border: 1px solid var(--borde); border-radius: 6px; overflow: hidden; }
.hd-item-adj img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- CHANGE THIS CUT: el recorte de la comunidad en WORK > IDOLS ----
   El botón vive dentro de la celda del idol y en la cabecera. Lleva el botón de
   la marca en su versión dorada: es lo único de la lista que pide una acción. */
.ctcut-btn {
  display: block; margin-top: 6px; padding: 6px 11px;
  border: 1px solid var(--gold); border-radius: var(--radio); background: #faf6ef;
  color: var(--tinta); font-family: "Special Gothic Expanded One", sans-serif; font-size: 10.5px;
  letter-spacing: .03em; cursor: pointer; white-space: nowrap; text-align: left;
  transition: background var(--tr), border-color var(--tr);
}
.ctcut-btn:hover { background: var(--gold); }
.ctx-header-botones .ctcut-btn { display: inline-block; margin-top: 0; padding: 8px 14px; font-size: 12px; }
/* `.sh-group button` pisa el fondo y el borde de la cabecera: se reponen aquí */
.sh-group button.ctcut-btn { border-color: var(--gold); background: #faf6ef; color: var(--tinta); }
.sh-group button.ctcut-btn:hover { background: var(--gold); }
.ctcut-tag {
  display: inline-block; margin-top: 6px; padding: 3px 8px; border-radius: 999px;
  background: var(--superficie); color: var(--gris); font-size: 10px; letter-spacing: .06em; white-space: nowrap;
}
/* las dos escenas del juego, lado a lado y a todo el ancho */
.ctcut-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ctcut-escena {
  display: block; width: 100%; height: auto; aspect-ratio: 800 / 500;
  border-radius: 14px; background: var(--superficie); box-shadow: 0 12px 26px rgba(29, 28, 26, .13);
}
.ctcut-escenario { display: flex; justify-content: center; margin: 16px 0 30px; }
/* los recortes solos sobre tablero: ahí se ven los restos de fondo y los bordes */
.ctcut-solos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ctcut-tablero {
  aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; display: grid; place-items: center;
  background: repeating-conic-gradient(#e6e3dc 0 25%, #f7f5f0 0 50%) 0 0 / 18px 18px;
  border: 1px solid var(--borde);
}
.ctcut-tablero img { max-width: 92%; max-height: 92%; object-fit: contain; display: block; }
@media (max-width: 700px) {
  .ctcut-par, .ctcut-solos { grid-template-columns: 1fr; }
}