/* ═══════════════════════════════════════════════════════════════
   Paldrink Studio v2 — Negro · Azul · Amarillo
   Tema CLARO por defecto (preferencia del dueño, 2026-10-01; PRODUCT.md) y tema
   OSCURO opcional en [data-theme="dark"] (src/theme.js). Toda superficie, texto,
   borde y estado vive en estos tokens: ningún componente escribe un color de tema
   a mano, así el cambio de tema es completo y no deja islas.
   ═══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;
  /* Brand palette (igual en ambos temas) */
  --black:       #0d0c0a;
  --navy:        #0c1624;
  --blue:        #1a3f7a;
  --blue-mid:    #2456b8;
  --blue-bright: #3b74e0;
  --yellow:      #f0b500;
  --yellow-dim:  rgba(240,181,0,.16);
  --yellow-light:#f5cc4a;
  --cream:       #f2edd8;

  /* Amarillo como TEXTO: sobre fondo claro el #f0b500 no llega a 2:1 → dorado
     oscuro (≈5:1 sobre blanco). Los rellenos siguen siendo --yellow. */
  --accent-text: #8a5c00;

  /* Topbar */
  --tb-bg:       #ffffff;
  --tb-ink:      #11161f;
  --tb-muted:    #5b667c;
  --tb-border:   #e3e7ee;
  --tb-hover:    rgba(17,22,31,.05);

  /* Rail */
  --rail-bg:     #f6f7f9;
  --rail-ink:    #5b667c;
  --rail-hover-bg: rgba(36,86,184,.08);
  --rail-hover-ink:#1a3f7a;
  --rail-border: #e3e7ee;
  --rail-active: var(--accent-text);

  /* Workspace (alrededor del lienzo): gris frío, para que el papel blanco destaque */
  --bg:          #e9ecf1;
  --canvas-bg:   #e3e7ed;

  /* Paneles */
  --surface:     #ffffff;
  --surface2:    #f3f5f8;
  --ink:         #2a3142;
  --ink-1:       #11161f;
  --ink-2:       #4f5a70;
  --ink-3:       #66708a;   /* ≥4.5:1 sobre blanco (hints, placeholders) */
  --border:      #e1e5ec;
  --border-2:    #cfd5df;

  /* Accent = yellow */
  --accent:      var(--yellow);
  --accent-dim:  var(--yellow-dim);
  --green:       var(--yellow);
  --green-dark:  #c49200;
  --green-light: rgba(240,181,0,.28);

  /* Danger / estados */
  --danger:      #c93a3a;
  --danger-ink:  #b42828;
  --danger-ink-h:#951d1d;
  --danger-bg:   rgba(201,58,58,.08);
  --link:        #2456b8;

  /* Shadows (suaves en claro) */
  --sh-sm:  0 1px 3px rgba(16,24,40,.08);
  --sh-md:  0 4px 18px rgba(16,24,40,.09);
  --sh-lg:  0 8px 32px rgba(16,24,40,.12);
  --sh-xl:  0 14px 40px rgba(16,24,40,.16);

  /* Sizes */
  --topbar-h:  48px;
  --rail-w:    64px;
  --panel-w:   312px;
  --status-h:  28px;
  --radius-s:  6px;
  --radius-m:  10px;
  --radius-l:  16px;

  /* Type */
  --font: Inter, "Segoe UI", system-ui, sans-serif;

  /* Controles de los paneles — un solo vocabulario en todo el panel. */
  --ctl-h:        30px;
  --ctl-bg:       #ffffff;
  --ctl-bg-hover: #fbfcfd;
  --ctl-border:   #d4dae3;
  --ctl-border-h: #b3bccb;
  --btn2-bg:      #f3f5f8;
  --btn2-hover:   #e9edf3;
  --btn2-active:  #e1e6ee;
  --focus-ring:   0 0 0 3px rgba(59,116,224,.28);
  --track:        #dde2ea;
  --thumb:        #ffffff;
  --knob-off:     #ffffff;
  --sec-border:   #e8ebf0;
  --hover-tint:   rgba(17,22,31,.035);
  --group-tint:   #fafbfc;
  --swatch-ring:  rgba(17,22,31,.14);
  --ease-out:     cubic-bezier(.22,1,.36,1);
}

/* Tema oscuro: la paleta original de la herramienta. */
[data-theme="dark"] {
  color-scheme: dark;
  --accent-text: var(--yellow);

  --tb-bg:       #0d0c0a;
  --tb-ink:      #f2edd8;
  --tb-muted:    rgba(242,237,216,.55);
  --tb-border:   rgba(242,237,216,.07);
  --tb-hover:    rgba(242,237,216,.06);

  --rail-bg:     #0c1624;
  --rail-ink:    rgba(200,215,240,.6);
  --rail-hover-bg: rgba(59,116,224,.12);
  --rail-hover-ink:#dbe5f8;
  --rail-border: rgba(59,116,224,.15);

  --bg:          #111318;
  --canvas-bg:   #0f1115;

  --surface:     #161a22;
  --surface2:    #1c2130;
  --ink:         #dde3f0;
  --ink-1:       #f1f4fa;
  --ink-2:       #8a95b0;
  --ink-3:       #7a85a3;
  --border:      #232b3e;
  --border-2:    #2e3852;

  --danger:      #e05252;
  --danger-ink:  #f08585;
  --danger-ink-h:#ff9c9c;
  --danger-bg:   rgba(224,82,82,.1);
  --link:        #7fa6f0;

  --sh-sm:  0 1px 4px rgba(0,0,0,.4);
  --sh-md:  0 4px 18px rgba(0,0,0,.5);
  --sh-lg:  0 8px 32px rgba(0,0,0,.6);
  --sh-xl:  0 16px 48px rgba(0,0,0,.7);

  --ctl-bg:       #10141c;
  --ctl-bg-hover: #131824;
  --ctl-border:   #262f44;
  --ctl-border-h: #36425f;
  --btn2-bg:      #1c2130;
  --btn2-hover:   #242b3d;
  --btn2-active:  #1f2535;
  --focus-ring:   0 0 0 3px rgba(59,116,224,.32);
  --track:        #2a3349;
  --thumb:        #f4f6fb;
  --knob-off:     #c9d1e3;
  --sec-border:   #1f2636;
  --hover-tint:   rgba(255,255,255,.025);
  --group-tint:   rgba(255,255,255,.018);
  --swatch-ring:  rgba(255,255,255,.12);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; overflow: hidden; }

body {
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ── Layout shell ──────────────────────────────────────────────── */
.shell {
  display: grid;
  grid-template-rows: var(--topbar-h) minmax(0,1fr);
  grid-template-columns: var(--rail-w) minmax(0,1fr);
  grid-template-areas:
    "topbar  topbar"
    "sidebar canvas";
  height: calc(100vh - var(--status-h));
}

/* ── Top bar ───────────────────────────────────────────────────── */
.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  padding: 0 16px 0 0;
  background: var(--tb-bg);
  border-bottom: 1px solid var(--tb-border);
  z-index: 200;
}

/* Ancho según contenido (antes fijo = ancho del riel, 64px): el logo y el botón
   "Salir" no cabían, el botón se partía en 4 líneas y lo que sobresalía quedaba
   bajo .topbar-center → solo respondía la flecha (reportado 2026-10-01). */
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: var(--rail-w);
  padding: 0 14px;
  flex-shrink: 0;
  position: relative; z-index: 1;
  border-right: 1px solid var(--tb-border);
  height: 100%;
}
.brand-leaf { color: var(--accent-text); flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--tb-ink); text-transform: lowercase; }
.brand-sub  { font-size: 10.5px;  font-weight: 550; letter-spacing: .1em; color: var(--tb-muted); text-transform: uppercase; }

.topbar-center { flex: 1; display: flex; justify-content: center; }
.view-pill {
  display: flex;
  background: var(--surface2);
  border: 1px solid var(--tb-border);
  border-radius: 20px;
  padding: 3px;
  gap: 2px;
}
.view-btn {
  padding: 5px 18px;
  border-radius: 16px;
  border: none;
  background: transparent;
  color: var(--tb-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: .02em;
  transition: background .15s, color .15s;
}
.view-btn.is-active { background: var(--blue-mid); color: #fff; }
.view-btn:hover:not(.is-active) { color: var(--tb-ink); }

.topbar-end { display: flex; align-items: center; gap: 4px; }

.tb-icon-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: var(--radius-s);
  color: var(--tb-muted); cursor: pointer;
  transition: background .13s, color .13s;
}
.tb-icon-btn:hover { background: var(--tb-hover); color: var(--tb-ink); }
.tb-icon-btn.is-active { background: var(--yellow-dim); color: var(--accent-text); }
.tb-icon-btn:focus-visible, .tb-exit-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* "← Salir" del editor (modo nube): botón compacto de una línea, mismo lenguaje que la barra. */
.tb-exit-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 9px;
  border: 1px solid var(--tb-border); border-radius: var(--radius-s); background: transparent;
  color: var(--tb-ink); font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.tb-exit-btn:hover { background: var(--tb-hover); border-color: var(--border-2); }
.tb-exit-btn svg { flex-shrink: 0; }

.tb-divider { width: 1px; height: 20px; background: var(--tb-border); margin: 0 4px; }

.export-wrap { position: relative; }
.tb-export-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: var(--yellow);
  border: none; border-radius: var(--radius-s);
  color: #0d0c0a;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  cursor: pointer; transition: opacity .13s;
}
.tb-export-btn:hover { opacity: .88; }

.export-drop {
  position: absolute; top: calc(100% + 8px); right: 0;
  z-index: 500; width: 210px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  box-shadow: var(--sh-lg);
  padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.drop-group { display: flex; flex-direction: column; gap: 1px; }
.drop-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--link);
  padding: 4px 8px 2px;
}
.drop-item {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px; border: none; border-radius: var(--radius-s);
  background: transparent; font-size: 13px; color: var(--ink);
  cursor: pointer; transition: background .1s;
}
.drop-item:hover { background: var(--surface2); color: var(--accent-text); }
.drop-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* ── Sidebar ─────────────────────────────────────────────────────── */
.sidebar-wrap {
  grid-area: sidebar;
  position: relative;
  display: flex;
  z-index: 100;
}

.icon-rail {
  width: var(--rail-w);
  height: 100%;
  background: var(--rail-bg);
  border-right: 1px solid var(--rail-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 2px;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.icon-rail::-webkit-scrollbar { display: none; }

.rail-btn {
  width: 56px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 2px 7px;
  border: none; border-radius: var(--radius-m);
  background: transparent;
  color: var(--rail-ink);
  cursor: pointer;
  transition: background .15s, color .15s;
  font: inherit; font-size: 11px; font-weight: 550; line-height: 1.1;
  letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.rail-btn:hover  { background: var(--rail-hover-bg); color: var(--rail-hover-ink); }
.rail-btn.is-active { background: var(--yellow-dim); color: var(--accent-text); }
.rail-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.rail-btn svg { flex-shrink: 0; }

.slide-panel {
  position: absolute; left: var(--rail-w); top: 0;
  width: var(--panel-w); height: 100%;
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: var(--sh-md);
  display: flex; flex-direction: column;
  z-index: 50;
  transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .22s;
  overflow: hidden;
}
.slide-panel.is-hidden { transform: translateX(-16px); opacity: 0; pointer-events: none; }

.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  height: 48px; padding: 0 10px 0 16px;
  border-bottom: 1px solid var(--sec-border);
  flex-shrink: 0;
}
/* Título del panel: el nombre de la herramienta activa, no un "eyebrow" diminuto. */
.panel-title {
  font-size: 15px; font-weight: 650; letter-spacing: -.01em;
  color: var(--ink-1);
}
.close-panel-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--ink-3); cursor: pointer; border-radius: var(--radius-s);
  transition: background .15s, color .15s;
}
.close-panel-btn:hover { background: var(--surface2); color: var(--ink-1); }
.close-panel-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.pane {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 14px 16px 32px;
  scrollbar-width: thin; scrollbar-color: var(--border-2) transparent;
}
.pane::-webkit-scrollbar { width: 6px; }
.pane::-webkit-scrollbar-track { background: transparent; }
.pane::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }

/* ── Secciones plegables (panelUI.js envuelve cada .section-divider) ──
   Van de borde a borde del panel (margen negativo = padding del .pane) y se
   separan con una línea fina: la jerarquía la dan el título y el espacio. */
.psec { margin: 0 -16px; border-top: 1px solid var(--sec-border); }
.pane > .psec:first-child { border-top: none; margin-top: -14px; }
.psec + :not(.psec) { margin-top: 14px; }
.psec-head-row { display: flex; align-items: center; }
.psec-head-row:hover { background: var(--hover-tint); }
.psec-head {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  padding: 12px 16px 10px 12px; background: transparent; border: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 650; color: var(--ink-1); text-align: left;
  transition: background .15s, color .15s;
}
.psec-head:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(59,116,224,.55); }
.psec-chev { color: var(--ink-3); flex-shrink: 0; transition: transform .2s var(--ease-out), color .15s; }
.psec-head:hover .psec-chev { color: var(--ink-1); }
.psec.is-collapsed .psec-chev { transform: rotate(-90deg); }
.psec-body { padding: 2px 16px 16px; }
.psec.is-collapsed .psec-body { display: none; }
.psec.is-collapsed .psec-head { padding-bottom: 12px; }
/* Controles que venían dentro del título (p.ej. "Ocultar" del logo, lápiz de editar). */
.psec-actions { display: flex; align-items: center; gap: 6px; padding-right: 14px; flex-shrink: 0; }
.psec-actions .check-field { margin: 0; font-size: 11.5px !important; color: var(--ink-2); }
.psec-sep { height: 1px; background: var(--sec-border); margin: 12px 0; }
/* Una sección anidada (bloques que solo aparecen en ciertas plantillas) no repite
   el sangrado: se alinea con el contenido de su sección padre. */
.psec-body .psec { margin: 8px -16px 0; }

/* ── Canvas workspace ───────────────────────────────────────────── */
.workspace {
  grid-area: canvas;
  display: flex; flex-direction: column;
  background: var(--bg);
  overflow: hidden;
  transition: margin-left .22s cubic-bezier(.4,0,.2,1);
}
.workspace.panel-open { margin-left: var(--panel-w); }

.zoom-strip {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.zoom-btn {
  padding: 4px 9px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  color: var(--ink-2); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .1s, color .1s, border-color .1s;
  line-height: 1;
}
.zoom-btn:hover { background: var(--surface2); color: var(--ink); border-color: var(--border-2); }
.zoom-btn.is-active { background: var(--yellow-dim); color: var(--accent-text); border-color: var(--yellow); }
.zoom-btn-wide { padding: 4px 12px; font-size: 12px; }
.zoom-lbl { font-size: 12px; font-weight: 600; color: var(--ink-2); min-width: 36px; text-align: center; }
.zoom-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }

.context-bar {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 14px;
  background: #07090e;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(59,116,224,.2);
}
.ctx-label { font-size: 11px; font-weight: 600; color: var(--link); margin-right: 6px; white-space: nowrap; }
.ctx-tools { display: flex; align-items: center; gap: 4px; }
.ctx-btn {
  padding: 4px 9px; font-size: 12px; font-weight: 600;
  background: rgba(59,116,224,.12); border: 1px solid rgba(59,116,224,.22);
  border-radius: 4px; color: var(--ink); cursor: pointer;
  transition: background .1s; min-height: 28px;
}
.ctx-btn:hover { background: rgba(59,116,224,.22); color: #fff; }
.ctx-btn.is-active { background: var(--yellow-dim); border-color: var(--yellow); color: var(--accent-text); }
.ctx-btn.italic { font-style: italic; }
.ctx-btn.underline { text-decoration: underline; }
.ctx-btn.ctx-danger { background: rgba(224,82,82,.15); border-color: rgba(224,82,82,.3); color: var(--danger); }
.ctx-select, .ctx-num {
  background: rgba(59,116,224,.1); border: 1px solid rgba(59,116,224,.22);
  color: var(--ink); border-radius: 4px; padding: 4px 8px;
  font-size: 12px; min-height: 28px;
}
.ctx-num { width: 52px; text-align: right; padding: 4px 6px; }
.ctx-color { width: 32px; height: 28px; border-radius: 4px; border: 1px solid rgba(59,116,224,.22); background: transparent; cursor: pointer; }
.ctx-sep { width: 1px; height: 20px; background: rgba(59,116,224,.2); margin: 0 4px; }

.edit-hint {
  text-align: center; font-size: 11px; color: var(--link);
  padding: 5px 16px; background: rgba(36,86,184,.08);
  border-bottom: 1px solid rgba(36,86,184,.15); flex-shrink: 0;
}

.canvas-wrap {
  flex: 1;
  /* position: relative → es el offsetParent del overlay absoluto (Fase 3.1) */
  position: relative;
  /* overflow: auto permite scroll cuando el canvas es más grande que el contenedor */
  overflow: auto;
  padding: 24px;
  /* No usar flex centering — el canvas toma su tamaño real con CSS width/height */
  display: block;
  background: var(--canvas-bg);
  background-image: radial-gradient(circle, rgba(59,116,224,.12) 1px, transparent 1px);
  background-size: 24px 24px;
  /* Scroll fluido en iOS */
  -webkit-overflow-scrolling: touch;
}
/* Centrar el canvas cuando es más pequeño que el contenedor */
.canvas-wrap canvas {
  display: block;
  margin: 0 auto;
  box-shadow: var(--sh-xl);
  border-radius: 2px;
  /* Importante: no usar transform para zoom, usar width/height CSS */
  transform: none !important;
  transform-origin: unset;
}
canvas.is-editing { cursor: crosshair; }

/* Overlay de edición (Fase 3.1): capa transparente sobre el canvas activo. No captura
   eventos (la interacción sigue en el canvas de contenido) ni proyecta sombra. Su posición
   y tamaño CSS los fija renderer.positionOverlay() para calzar con el canvas activo. */
.canvas-wrap canvas.canvas-overlay, .canvas-overlay {
  position: absolute;
  pointer-events: none;
  background: transparent;
  box-shadow: none;
  border-radius: 2px;
  z-index: 2;
}

/* ── Borrador mágico del fondo (modal) ─────────────────────────────────────── */
.eraser-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(15, 16, 20, 0.72);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.eraser-dialog {
  background: #23262c; color: #e9e9ec; border: 1px solid #3a3d44; border-radius: 12px;
  width: min(1000px, 96vw); max-height: 92vh; display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.5); overflow: hidden;
}
.eraser-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid #3a3d44; font-weight: 600;
}
.eraser-x {
  background: none; border: none; color: #9aa0a8; font-size: 18px; cursor: pointer;
  width: 32px; height: 32px; border-radius: 8px; line-height: 1;
}
.eraser-x:hover { background: #31353c; color: #e9e9ec; }
.eraser-stage {
  flex: 1; min-height: 260px; display: flex; align-items: center; justify-content: center;
  overflow: auto; padding: 14px;
  background:
    repeating-conic-gradient(#2a2d33 0% 25%, #24272c 0% 50%) 50% / 22px 22px;
}
.eraser-view { display: block; cursor: crosshair; border-radius: 3px; box-shadow: 0 4px 16px rgba(0,0,0,.4); touch-action: none; }
.eraser-hint { padding: 8px 16px; font-size: 12.5px; color: #9aa0a8; border-top: 1px solid #31353c; }
.eraser-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid #3a3d44;
}
.eraser-toolbar button {
  background: #31353c; color: #e9e9ec; border: 1px solid #454a52; border-radius: 8px;
  padding: 8px 14px; font-size: 13px; cursor: pointer;
}
.eraser-toolbar button:hover:not(:disabled) { background: #3a3f47; }
.eraser-toolbar button:disabled { opacity: .45; cursor: default; }
.eraser-brushlbl { font-size: 12.5px; color: #c7ccd3; display: flex; align-items: center; gap: 8px; }
.eraser-brush { accent-color: #3fb0ff; }
.eraser-status { font-size: 12.5px; color: #7fd08a; min-width: 90px; }
.eraser-spacer { flex: 1; }
.eraser-apply { background: #2b5bd7 !important; border-color: #2b5bd7 !important; color: #fff !important; }
.eraser-apply:hover:not(:disabled) { background: #3167e6 !important; }
.eraser-save { background: #2e9e57 !important; border-color: #2e9e57 !important; color: #fff !important; }
.eraser-save:hover:not(:disabled) { background: #34b062 !important; }

/* Studio canvas area */
.studio-wrap {
  flex: 1; display: flex; flex-direction: column;
  background: var(--canvas-bg);
  overflow: hidden;
}
.studio-canvas-area {
  flex: 1; display: flex; align-items: center; justify-content: center;
  overflow: auto; padding: 20px;
  background: var(--canvas-bg);
  background-image: radial-gradient(circle, rgba(59,116,224,.1) 1px, transparent 1px);
  background-size: 20px 20px;
}
#studioCanvas { border-radius: var(--radius-s); box-shadow: var(--sh-xl); }

.studio-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.studio-mode-btn {
  padding: 5px 12px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-s); color: var(--ink-2);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .1s, color .1s, border-color .1s;
}
.studio-mode-btn.is-active {
  background: var(--yellow-dim); color: var(--accent-text); border-color: var(--yellow);
}
.studio-status {
  font-size: 11px; color: var(--ink-3); margin-left: auto;
}

/* ── Status bar ─────────────────────────────────────────────────── */
.statusbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--status-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
  background: var(--tb-bg);
  border-top: 1px solid var(--tb-border);
  z-index: 300;
}
.save-lbl { font-size: 11px; color: var(--accent-text); font-weight: 500; }
.save-lbl.is-warn {
  color: var(--danger); font-weight: 700;
  background: var(--danger-bg); padding: 2px 8px; border-radius: 4px;
}
.statusbar-btn {
  font-size: 11px; color: var(--tb-muted); background: transparent;
  border: none; cursor: pointer; padding: 2px 8px; border-radius: 4px;
}
.statusbar-btn:hover { color: var(--tb-ink); background: var(--tb-hover); }

/* ── Form elements ──────────────────────────────────────────────── */
/* Un solo vocabulario de controles en todo el panel (rediseño 2026-10-01): misma
   altura (--ctl-h), mismo fondo hundido (--ctl-bg), y los mismos estados
   hover / focus-visible / disabled en inputs, selects, botones y toggles. */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field-label { font-size: 11.5px; font-weight: 550; color: var(--ink-2); letter-spacing: 0; line-height: 1.3; }
.field-label small { font-weight: 450; color: var(--ink-3); }

input[type="text"], input[type="search"], input[type="number"], input[type="email"], textarea, select {
  font-family: var(--font); font-size: 12.5px;
  color: var(--ink-1); background: var(--ctl-bg);
  border: 1px solid var(--ctl-border); border-radius: var(--radius-s);
  padding: 0 10px; width: 100%; height: var(--ctl-h);
  transition: border-color .15s, box-shadow .15s, background .15s;
  -webkit-appearance: none; appearance: none;
}
textarea { height: auto; padding: 8px 10px; line-height: 1.45; resize: vertical; min-height: 64px; }
input[type="text"]:hover, input[type="search"]:hover, input[type="number"]:hover, input[type="email"]:hover,
textarea:hover, select:hover { border-color: var(--ctl-border-h); background: var(--ctl-bg-hover); }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--blue-bright);
  box-shadow: var(--focus-ring);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
input:disabled, select:disabled, textarea:disabled { opacity: .45; cursor: not-allowed; }
input[type="number"] { font-variant-numeric: tabular-nums; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a95b0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 28px; cursor: pointer; text-overflow: ellipsis;
}
select option, select optgroup { background: var(--surface); color: var(--ink-1); }

/* Color: muestra redondeada que ocupa el control entero, sin el marco gris nativo. */
input[type="color"] {
  -webkit-appearance: none; appearance: none;
  height: var(--ctl-h); padding: 3px; cursor: pointer;
  border-radius: var(--radius-s); border: 1px solid var(--ctl-border);
  background: var(--ctl-bg); width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
input[type="color"]:hover { border-color: var(--ctl-border-h); }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--swatch-ring); }
input[type="color"]::-moz-color-swatch { border: none; border-radius: 4px; }
input[type="search"]::-webkit-search-cancel-button { display: none; }

/* Slider: riel fino con la parte recorrida en amarillo (--fill, panelUI.js) y una
   perilla clara con halo al pasar/enfocar. */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 20px; background: transparent; cursor: pointer; padding: 0; margin: 0;
  --fill: 50%;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--yellow) 0 var(--fill), var(--track) var(--fill) 100%);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin-top: -5px; border-radius: 50%;
  background: var(--thumb); border: 2px solid var(--yellow);
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: box-shadow .15s, transform .15s var(--ease-out);
}
input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(240,181,0,.16), 0 1px 3px rgba(0,0,0,.5); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]:focus { outline: none; box-shadow: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(59,116,224,.45); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--track); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--yellow); }
input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%; background: var(--thumb); border: 2px solid var(--yellow);
}
input[type="range"]:disabled { opacity: .4; cursor: not-allowed; }

.range-row { display: flex; align-items: center; gap: 10px; }
.range-row input[type="range"] { flex: 1; min-width: 0; }
/* Valor numérico al lado del slider: compacto, tabular, alineado a la derecha y sin
   las flechitas nativas (el slider ya es el control de arrastre). */
.range-num {
  width: 54px !important; min-width: 54px; flex-shrink: 0; height: 26px !important;
  text-align: right; padding: 0 7px !important; font-size: 12px !important;
  font-variant-numeric: tabular-nums; color: var(--ink-1);
  -moz-appearance: textfield;
}
.range-num::-webkit-outer-spin-button, .range-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* XY pair: dos sliders uno abajo del otro, con etiqueta compacta */
.xy-pair { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.xy-pair-row { display: flex; align-items: center; gap: 10px; }
.xy-pair-row input[type="range"] { flex: 1; min-width: 0; }
.xy-pair-label {
  font-size: 11px; font-weight: 650; color: var(--ink-2); width: 14px; flex-shrink: 0;
  font-variant-numeric: tabular-nums; text-align: center;
}

/* Casilla → interruptor. Mismo <input type=checkbox> (los bindings no cambian);
   solo cambia el dibujo. La fila entera es clicable (es un <label>). */
.check-field {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; margin-bottom: 10px; min-height: 22px;
  font-size: 12.5px; color: var(--ink); line-height: 1.35;
}
.check-field input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; margin: 0;
  width: 28px; height: 16px; flex-shrink: 0; border-radius: 999px;
  background: var(--track); border: 1px solid var(--ctl-border-h);
  position: relative; cursor: pointer;
  transition: background .18s var(--ease-out), border-color .18s;
}
.check-field input[type="checkbox"]::before {
  content: ""; position: absolute; top: 1px; left: 1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--knob-off); box-shadow: 0 1px 2px rgba(0,0,0,.3);
  transition: transform .18s var(--ease-out), background .18s;
}
.check-field input[type="checkbox"]:checked { background: var(--yellow); border-color: var(--yellow); }
.check-field input[type="checkbox"]:checked::before { transform: translateX(12px); background: #0d0c0a; }
.check-field:hover input[type="checkbox"]:not(:checked) { border-color: var(--ink-3); }
.check-field input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.check-field input[type="checkbox"]:disabled { opacity: .4; cursor: not-allowed; }
.check-field.compact { margin-bottom: 0; }
.check-field input[type="radio"] { width: 14px; height: 14px; accent-color: var(--yellow); margin: 0; }

.color-field {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11.5px; font-weight: 550; color: var(--ink-2); margin-bottom: 12px;
}
.color-field.full { width: 100%; }
.color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.color-grid > .field, .color-grid > .color-field { margin-bottom: 12px; }
.row-split { display: flex; gap: 10px; align-items: flex-start; }
.row-split > * { flex: 1; min-width: 0; }
.field.half { flex: 1; min-width: 0; }

/* B / I / U: botones-toggle. La casilla queda oculta pero enfocable (accesible). */
.style-row { display: flex; gap: 4px; margin-bottom: 6px; }
.style-row .check-field { margin-bottom: 0; position: relative; }
.style-row .check-field input[type="checkbox"] {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.style-row .check-field input[type="checkbox"]::before { display: none; }
.style-row .check-field span {
  width: 30px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ctl-border); border-radius: var(--radius-s);
  font-weight: 700; font-size: 12.5px; background: var(--ctl-bg);
  color: var(--ink-2); transition: background .15s, border-color .15s, color .15s;
}
.style-row .check-field:hover span { border-color: var(--ctl-border-h); color: var(--ink-1); }
.style-row .check-field input:checked + span {
  background: var(--yellow-dim); border-color: var(--yellow); color: var(--accent-text);
}
.style-row .check-field input:focus-visible + span { box-shadow: var(--focus-ring); }

/* Bloque de tipografía (Título / Subtítulo / Bebidas…): un grupo con título propio. */
.font-block {
  background: var(--group-tint); border: 1px solid var(--sec-border);
  border-radius: var(--radius-m); padding: 12px 12px 4px; margin-bottom: 12px;
}
.font-block-label {
  font-size: 12px; font-weight: 650; color: var(--ink-1);
  margin-bottom: 10px; letter-spacing: 0; text-transform: none;
}

/* Editor de estilo por línea del título */
.title-lines-block { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 8px; }
.title-lines-head { font-size: 11px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.title-lines { display: flex; flex-direction: column; gap: 6px; }
.title-line-row {
  border: 1px solid var(--border); border-radius: 6px; padding: 6px 7px; background: var(--surface);
}
.title-line-row.has-override { border-color: var(--yellow); }
.title-line-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 5px; }
.title-line-name {
  font-size: 11px; color: var(--ink-2); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 78%;
}
.title-line-reset {
  border: 1px solid var(--border); background: var(--surface2); color: var(--ink-3);
  border-radius: 4px; width: 22px; height: 22px; line-height: 1; cursor: pointer; font-size: 13px; padding: 0;
}
.title-line-row:not(.has-override) .title-line-reset { visibility: hidden; }
.title-line-reset:hover { color: var(--ink-1); border-color: var(--ink-3); }
.title-line-controls { display: flex; align-items: center; gap: 5px; }
.title-line-controls .tl-font { flex: 1 1 auto; min-width: 0; }
.title-line-controls .tl-size { width: 52px; flex: 0 0 auto; }
.title-line-controls .tl-color { width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 4px; flex: 0 0 auto; }
.title-line-controls .tl-b,
.title-line-controls .tl-i {
  width: 26px; height: 28px; flex: 0 0 auto; cursor: pointer;
  border: 1px solid var(--border); border-radius: 4px; background: var(--surface2);
  color: var(--ink-2); font-weight: 700; font-size: 12px; padding: 0;
}
.title-line-controls .tl-i { font-style: italic; }
.title-line-controls .tl-b.is-active,
.title-line-controls .tl-i.is-active {
  background: var(--yellow-dim); border-color: var(--yellow); color: var(--accent-text);
}

/* Fallback: un divider que panelUI.js no haya agrupado (no debería pasar). Sentence
   case, legible — no el "eyebrow" diminuto en mayúsculas de antes. */
.section-divider {
  font-size: 12.5px; font-weight: 650; color: var(--ink-1);
  border-top: 1px solid var(--sec-border);
  padding-top: 12px; margin: 14px 0 10px;
}

/* Buttons — misma altura que los inputs; hover por color, no por opacidad. */
.btn-primary {
  height: 34px; padding: 0 16px; background: var(--yellow); border: none;
  border-radius: var(--radius-s); color: #0d0c0a;
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .15s, box-shadow .15s, transform .1s;
}
.btn-primary:hover { background: var(--yellow-light); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(240,181,0,.35); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn-primary.full { width: 100%; }

.btn-secondary {
  min-height: var(--ctl-h); padding: 0 12px; background: var(--btn2-bg);
  border: 1px solid var(--ctl-border); border-radius: var(--radius-s);
  color: var(--ink-1); font: inherit; font-size: 12px; font-weight: 550; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn-secondary:hover { background: var(--btn2-hover); border-color: var(--ctl-border-h); }
.btn-secondary:active { background: var(--btn2-active); }
.btn-secondary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-secondary.full { width: 100%; margin-bottom: 8px; }
.btn-secondary:disabled { opacity: .38; cursor: not-allowed; }
.btn-danger { color: var(--danger-ink); border-color: rgba(224,82,82,.32); }
.btn-danger:hover { background: var(--danger-bg); border-color: rgba(224,82,82,.55); color: var(--danger-ink-h); }

.btn-row { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.btn-row > * { flex: 1; min-width: 0; }

.btn-add {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; background: var(--yellow-dim);
  border: 1px dashed rgba(240,181,0,.45); border-radius: var(--radius-s);
  color: var(--accent-text); font: inherit; font-size: 12.5px; font-weight: 650;
  cursor: pointer; margin-bottom: 12px; transition: background .15s, border-color .15s;
}
.btn-add:hover { background: rgba(240,181,0,.2); border-color: var(--yellow); }
.btn-add:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(240,181,0,.3); }
.btn-add:disabled { opacity: .4; cursor: not-allowed; }

.file-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--ctl-h); padding: 0 12px; background: var(--btn2-bg); border: 1px solid var(--ctl-border);
  border-radius: var(--radius-s); font-size: 12px; font-weight: 550; color: var(--ink-1);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.file-btn:hover { background: var(--btn2-hover); border-color: var(--ctl-border-h); }
.file-btn:focus-within { box-shadow: var(--focus-ring); }
.file-btn.full { width: 100%; margin-bottom: 8px; }
.file-btn input[type="file"] { display: none; }
.full-select { width: 100%; margin-bottom: 8px; }

/* Swatches */
.swatch-strip { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.swatch {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--swatch-ring);
  transition: transform .15s var(--ease-out), border-color .15s; flex-shrink: 0;
}
.swatch:hover { transform: scale(1.15); }
.swatch:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.swatch.is-active { border-color: var(--yellow); box-shadow: 0 0 0 2px rgba(240,181,0,.3); }

/* ── Drink list ─────────────────────────────────────────────────── */
.drink-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.drink-row {
  background: var(--group-tint); border: 1px solid var(--sec-border);
  border-radius: var(--radius-m); overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.drink-row:hover { border-color: var(--ctl-border); }
.drink-row:focus-within { border-color: var(--blue-mid); box-shadow: 0 0 0 1px rgba(36,86,184,.35); }
.drink-row-hd { display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 12px; }
/* Número de bebida como insignia (también es el asa para arrastrar y reordenar). */
.drink-num {
  font-size: 11px; font-weight: 700; color: var(--ink-2); cursor: grab;
  min-width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface2); font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.drink-num:active { cursor: grabbing; }
.drink-move { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
.drink-mv {
  width: 20px; height: 13px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; line-height: 1; cursor: pointer;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 4px; color: var(--ink-3);
}
.drink-mv:hover:not(:disabled) { color: var(--ink); background: var(--surface); }
.drink-mv:disabled { opacity: .35; cursor: default; }
.drink-row.drop-target { outline: 2px dashed var(--yellow); outline-offset: -2px; }
body.is-mobile .drink-mv { width: 30px; height: 20px; font-size: 10px; }
.drink-name-in {
  flex: 1; background: transparent; border: none;
  font-size: 13px; font-weight: 600; color: var(--ink);
  padding: 0; resize: none; min-height: 20px;
  line-height: 1.3; overflow: hidden; field-sizing: content;
}
.drink-name-in:focus { outline: none; box-shadow: none; }
/* La receta reutilizaba la clase del nombre (texto sin borde) y no parecía un campo. */
.drink-desc-in.drink-name-in {
  font-size: 12px; font-weight: 450; color: var(--ink-1); line-height: 1.45;
  background: var(--ctl-bg); border: 1px solid var(--ctl-border); border-radius: var(--radius-s);
  padding: 7px 9px; min-height: 52px; width: 100%;
}
.drink-desc-in.drink-name-in:hover { border-color: var(--ctl-border-h); }
.drink-desc-in.drink-name-in:focus { border-color: var(--blue-bright); box-shadow: var(--focus-ring); }
.drink-del {
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--ink-3);
  font-size: 14px; cursor: pointer; border-radius: 4px;
  transition: background .1s, color .1s;
}
.drink-del:hover { background: var(--danger-bg); color: var(--danger); }
.drink-row-bd { padding: 10px 12px 12px; border-top: 1px solid var(--sec-border); display: flex; flex-direction: column; gap: 8px; }
.drink-asset-sel { font-size: 12px; }
.drink-field-label { font-size: 11.5px; font-weight: 550; color: var(--ink-2); margin-bottom: 2px; }
.drink-field-label small { color: var(--ink-3); font-weight: 450; }
.drink-scale-row { display: flex; flex-direction: column; gap: 3px; }
.drink-scale-inner { display: flex; align-items: center; gap: 10px; }
.drink-scale-inner input[type="range"] { flex: 1; min-width: 0; }
.drink-scale-num {
  width: 54px !important; flex-shrink: 0; height: 26px !important; text-align: right;
  padding: 0 7px !important; font-size: 12px !important; font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.drink-scale-num::-webkit-outer-spin-button, .drink-scale-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.drink-center-btn {
  width: 100%; margin-top: 4px; height: 28px;
  padding: 0; font: inherit; font-size: 11.5px; font-weight: 600;
  background: transparent; border: 1px solid var(--ctl-border);
  border-radius: var(--radius-s); color: var(--link);
  cursor: pointer; transition: background .15s, border-color .15s;
  display: flex !important; align-items: center; justify-content: center;
}
.drink-center-btn:hover { background: rgba(36,86,184,.12); }
/* Fix delete button — use display:flex explicitly to override any cascade */
.drink-del {
  width: 22px; height: 22px;
  display: flex !important; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--ink-3);
  cursor: pointer; border-radius: 4px; padding: 0; flex-shrink: 0;
  transition: background .1s, color .1s;
}
.drink-del:hover { background: var(--danger-bg); color: var(--danger); }

/* ── Asset library ──────────────────────────────────────────────── */
.asset-tab-row {
  display: flex; gap: 3px; margin-bottom: 10px;
  background: var(--surface2); border-radius: var(--radius-s);
  padding: 3px; border: 1px solid var(--border);
}
.asset-tab {
  flex: 1; padding: 5px; text-align: center; font-size: 11px; font-weight: 600;
  background: transparent; border: none; border-radius: 4px;
  color: var(--ink-2); cursor: pointer; transition: background .1s, color .1s;
}
.asset-tab.is-active { background: var(--blue-mid); color: #fff; }

.search-bar {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-s); padding: 6px 10px; margin-bottom: 8px;
}
.search-bar svg { color: var(--ink-3); flex-shrink: 0; }
.search-bar input[type="search"] { flex: 1; border: none; background: transparent; padding: 0; font-size: 13px; color: var(--ink); min-height: 0; }
.search-bar input[type="search"]:focus { box-shadow: none; }
.fav-toggle { display: flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.fav-toggle input { display: none; }
.fav-toggle svg { color: var(--ink-3); transition: color .1s; }
.fav-toggle:has(input:checked) svg { color: var(--accent-text); fill: var(--yellow); }

.lib-actions { display: flex; gap: 6px; margin-bottom: 10px; }
.lib-actions > * { flex: 1; }

.asset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.asset-thumb {
  aspect-ratio: 1; border-radius: var(--radius-s);
  background: var(--surface2); border: 2px solid transparent;
  cursor: pointer; overflow: hidden; position: relative;
  transition: border-color .13s, transform .1s;
}
.asset-thumb:hover { border-color: var(--blue-mid); transform: scale(1.04); }
.asset-thumb.is-active { border-color: var(--yellow); }
.asset-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.asset-actions {
  position: absolute; top: 2px; right: 2px;
  display: flex; gap: 2px; opacity: 0;
  transition: opacity .1s;
}
.asset-thumb:hover .asset-actions { opacity: 1; }
.asset-thumb .fav-btn,
.asset-thumb .ren-btn,
.asset-thumb .del-btn {
  background: rgba(13,12,10,.75); border-radius: 50%;
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; border: none; cursor: pointer; color: var(--ink-2);
  transition: background .1s, color .1s;
}
.asset-thumb .fav-btn:hover { color: var(--accent-text); }
.asset-thumb.is-favorite .fav-btn { color: var(--accent-text); }
.asset-thumb .ren-btn:hover { color: #6ea8ff; background: rgba(110,168,255,.28); }
.asset-thumb .del-btn { color: #e05555; }
.asset-thumb .del-btn:hover { background: rgba(224,82,82,.35); }
.asset-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(7,9,14,.85); color: var(--ink); font-size: 9px;
  padding: 3px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity .1s;
}
.asset-thumb:hover .asset-label { opacity: 1; }

/* ── Studio specific ────────────────────────────────────────────── */
.studio-drink-list {
  display: flex; flex-direction: column; gap: 3px;
  max-height: 220px; overflow-y: auto; margin-bottom: 10px;
}
.studio-drink-row { display: flex; align-items: stretch; gap: 3px; }
.studio-drink-row .studio-drink-item { flex: 1; min-width: 0; }
.studio-menu-btn {
  flex-shrink: 0; width: 26px; align-self: stretch;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-s); cursor: pointer;
  color: var(--ink-2); font-size: 15px; font-weight: 700; line-height: 1;
  transition: border-color .12s, color .12s, background .12s;
}
.studio-menu-btn:hover:not(:disabled) { border-color: var(--yellow); color: var(--accent-text); }
.studio-menu-btn.is-in { border-color: rgba(240,181,0,.4); color: var(--accent-text); background: var(--yellow-dim); }
.studio-menu-btn.is-in:hover { border-color: #e05555; color: #e05555; background: transparent; }
.studio-menu-btn:disabled { opacity: .35; cursor: not-allowed; }
.studio-del-btn {
  flex-shrink: 0; width: 24px; align-self: stretch;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-s); cursor: pointer;
  color: var(--ink-2); font-size: 12px; line-height: 1;
  opacity: .4; transition: opacity .12s, border-color .12s, color .12s;
}
.studio-del-btn:hover { opacity: 1; border-color: #e05555; color: #e05555; }
.studio-drink-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--radius-s);
  background: transparent; border: 1px solid transparent;
  cursor: pointer; text-align: left; color: var(--ink-2);
  font-size: 12px; transition: background .1s, color .1s, border-color .1s;
  width: 100%;
}
.studio-drink-item:hover { background: var(--surface2); color: var(--ink); }
.studio-drink-item.is-active { background: var(--yellow-dim); color: var(--accent-text); border-color: rgba(240,181,0,.3); }
.studio-drink-item img { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; border-radius: 4px; background: var(--surface2); padding: 2px; }
.studio-drink-item .studio-drink-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-drink-item .profile-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--border-2);
}
.studio-drink-item.has-profile .profile-dot { background: var(--yellow); }
.studio-drink-item .cmp-badge {
  width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; line-height: 1;
  background: var(--yellow); color: #1a1916;
}
.studio-drink-item .cmp-badge.cmp-b { background: var(--ink-2); color: var(--surface); }
.studio-drink-item.is-compare { border-color: rgba(240,181,0,.3); }

/* ── Wizard chips ───────────────────────────────────────────────── */
.wizard-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.wiz-chip {
  padding: 4px 8px; font-size: 11px; font-weight: 650;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 20px; color: var(--ink-2); cursor: pointer;
  transition: all .1s; white-space: nowrap;
}
.wiz-chip.is-active { background: var(--blue-mid); color: #fff; border-color: var(--blue-mid); }
.wiz-chip:hover:not(.is-active) { border-color: var(--blue-bright); color: var(--link); }

.type-row { display: flex; gap: 6px; margin-bottom: 4px; align-items: flex-end; }
.type-row select { flex: 1; }
.guide-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.guide-row .check-field { flex-shrink: 0; margin-bottom: 0; }
.guide-row .range-row { flex: 1; }

.result-card {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-m); padding: 12px 14px;
  font-size: 12px; line-height: 1.6; margin-top: 8px;
  max-height: 200px; overflow-y: auto;
}
.hint-text { font-size: 12px; color: var(--ink-3); line-height: 1.5; margin-bottom: 10px; text-wrap: pretty; }

/* ── Tag preview hint ───────────────────────────────────────────── */
.tag-preview-hint {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--yellow-dim); border: 1px solid rgba(240,181,0,.25);
  border-radius: var(--radius-m); padding: 12px 14px; margin-bottom: 14px;
}
.tag-hint-icon { font-size: 22px; flex-shrink: 0; color: var(--accent-text); line-height: 1; margin-top: 1px; }
.tag-preview-hint p { font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.tag-preview-hint strong { color: var(--accent-text); }

/* ── Galería de plantillas del usuario ──────────────────────────── */
.tpl-gallery {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 10px;
}
.tpl-card {
  border: 1px solid var(--ctl-border); border-radius: var(--radius-m);
  background: var(--surface2); overflow: hidden; min-width: 0;
  display: flex; flex-direction: column;
  transition: border-color .15s, box-shadow .15s;
}
.tpl-card:hover { border-color: var(--ctl-border-h); box-shadow: var(--sh-sm); }
.tpl-thumb {
  display: block; width: 100%; aspect-ratio: 145 / 220;
  padding: 0; border: none; cursor: pointer;
  background: var(--surface); overflow: hidden;
}
.tpl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .15s; }
.tpl-thumb:hover img { transform: scale(1.04); }
.tpl-thumb-empty {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; font-size: 28px; color: var(--ink-3);
  font-family: Georgia, serif;
}
.tpl-card-name {
  padding: 8px 8px 2px; font-size: 11.5px; font-weight: 600; color: var(--ink-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Acciones de la tarjeta: "→ Paldrink" ocupa su fila; los 3 íconos (actualizar,
   renombrar, borrar) van en la de abajo — antes iban en una sola fila y el ✕ se cortaba. */
.tpl-card-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px 8px 8px; }
.tpl-card-actions button {
  min-width: 0; height: 26px; padding: 0 2px;
  border: 1px solid var(--ctl-border); border-radius: var(--radius-s);
  background: var(--ctl-bg); color: var(--ink-2);
  font: inherit; font-size: 12px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.tpl-card-actions button:hover { color: var(--ink-1); border-color: var(--ctl-border-h); }
.tpl-card-actions button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tpl-card-actions button.tpl-del:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.tpl-card-actions button.tpl-paldrink-btn { grid-column: 1 / -1; white-space: nowrap; font-weight: 600; font-size: 11.5px; }
.tpl-card-actions button.tpl-paldrink-btn.is-in { background: var(--accent, #9ead9a); color: #fff; border-color: transparent; }
body.is-mobile .tpl-card-actions button { min-height: 36px; }

/* ── Deshacer/rehacer flotante (solo móvil) ─────────────────────── */
.mob-history { display: none; }
body.is-mobile .workspace { position: relative; }
body.is-mobile .mob-history {
  display: flex; gap: 8px;
  position: absolute; right: 12px; bottom: 12px; z-index: 30;
}
body.is-mobile #canvasWrap[hidden] ~ .mob-history { display: none; }
body.is-mobile .mob-history button {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--border); color: var(--ink-2);
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
}
body.is-mobile .mob-history button:active { background: var(--yellow-dim); color: var(--accent-text); }

/* ── Modal (confirm / prompt de toast.js) ───────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 12, 18, .45);
  backdrop-filter: blur(2px);
  padding: 20px;
}
.modal-dialog {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 20px 22px;
  width: 100%; max-width: 400px;
  box-shadow: var(--sh-xl);
}
.modal-dialog p { margin: 0; font-size: 14px; line-height: 1.5; }
.modal-dialog input:not([type="checkbox"]):not([type="radio"]) {
  border: 1px solid var(--ctl-border); border-radius: 8px;
  background: var(--ctl-bg); color: var(--ink-1);
  padding: 0 12px; height: 38px; font-size: 14px;
}
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.modal-actions button {
  padding: 9px 18px; min-height: 40px;
  border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent;
  background: var(--yellow); color: #1a1916;
}
.modal-actions button:hover { background: var(--yellow-light); }
.modal-actions button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(240,181,0,.35); }
.modal-actions button.secondary-btn {
  background: var(--btn2-bg); color: var(--ink-1); border-color: var(--ctl-border);
}
.modal-actions button.secondary-btn:hover { background: var(--btn2-hover); }

/* ── Toasts ─────────────────────────────────────────────────────── */
.toast-container {
  position: fixed; bottom: calc(var(--status-h) + 12px); right: 16px;
  z-index: 9999; display: flex; flex-direction: column-reverse; gap: 6px;
  pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  min-width: 220px; max-width: 360px; padding: 11px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-m); box-shadow: var(--sh-lg);
  font-size: 13px; line-height: 1.4; color: var(--ink);
  pointer-events: auto; cursor: pointer;
  animation: toast-in .2s ease; transition: opacity .2s, transform .2s;
}
.toast.is-out { opacity: 0; transform: translateX(16px); }
.toast-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  margin-top: 4px; background: var(--yellow);
}
.toast[data-type="error"] .toast-dot   { background: var(--danger); }
.toast[data-type="success"] .toast-dot { background: #4caf7d; }
@keyframes toast-in { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:none; } }

/* ── Overlays ───────────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  animation: fade-in .15s ease;
}
.overlay-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-l); padding: 24px 28px;
  max-width: 460px; width: 90%;
  box-shadow: var(--sh-xl); animation: scale-in .15s ease;
}
.overlay-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.overlay-head h3 { font-size: 16px; font-weight: 700; }
.close-btn { background: transparent; border: none; font-size: 14px; color: var(--ink-2); cursor: pointer; padding: 4px; border-radius: 4px; }
.close-btn:hover { background: var(--surface2); color: var(--ink); }

.confirm-overlay {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  animation: fade-in .14s ease;
}
.confirm-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-l); padding: 24px 28px;
  max-width: 360px; width: 90%; box-shadow: var(--sh-xl);
  animation: scale-in .14s ease;
}
.confirm-box p { font-size: 14px; line-height: 1.5; margin-bottom: 20px; color: var(--ink); }
.confirm-box input[type="text"] { width: 100%; margin-bottom: 16px; }
.confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }

.autosave-banner {
  position: fixed; top: calc(var(--topbar-h) + 10px); left: 50%;
  transform: translateX(-50%); z-index: 8000;
  display: flex; align-items: center; gap: 10px; padding: 10px 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-m); box-shadow: var(--sh-lg);
  font-size: 13px; white-space: nowrap; animation: toast-in .2s ease;
}

.shortcuts-grid { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; font-size: 12px; margin-bottom: 0; }
.shortcuts-grid code {
  font-family: monospace; background: var(--surface2);
  border: 1px solid var(--border); padding: 2px 7px;
  border-radius: 4px; font-size: 11px; color: var(--accent-text); white-space: nowrap;
}

@keyframes fade-in  { from { opacity:0 } to { opacity:1 } }
@keyframes scale-in { from { opacity:0; transform:scale(.96) } to { opacity:1; transform:none } }

/* ── Template trio buttons ─────────────────────────────────────────── */
.template-trio {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px;
}
.tpl-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px; border-radius: var(--radius-m);
  background: var(--surface2); border: 2px solid var(--border);
  color: var(--ink-2); cursor: pointer; transition: all .13s;
}
.tpl-btn:hover { border-color: var(--yellow); color: var(--ink); }
.tpl-btn.is-active { border-color: var(--yellow); background: var(--yellow-dim); color: var(--accent-text); }
.tpl-icon { font-size: 20px; line-height: 1; }
.tpl-name { font-size: 11px; font-weight: 700; }

/* ── Plantillas Paldrink (tipos de evento) ──────────────────────── */
.evtype-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 8px;
}
.evtype-card { display: flex; flex-direction: column; gap: 4px; }
.evtype-card .evtype-btn { width: 100%; }
.evtype-btn {
  display: flex; align-items: center; gap: 8px; min-height: 40px;
  padding: 8px 11px; border-radius: var(--radius-m);
  background: var(--surface2); border: 1px solid var(--ctl-border);
  color: var(--ink-1); cursor: pointer; transition: background .15s, border-color .15s, color .15s;
  font: inherit; font-size: 12px; font-weight: 600; text-align: left;
}
.evtype-btn:hover { border-color: var(--ctl-border-h); background: var(--btn2-hover); }
.evtype-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.evtype-btn.is-active { border-color: var(--yellow); background: var(--yellow-dim); color: var(--accent-text); }
.evtype-btn.has-override { border-color: rgba(240,181,0,.45); }
.evtype-dot { margin-left: auto; font-size: 7px; color: var(--accent-text); line-height: 1; }
.evtype-icon { font-size: 17px; line-height: 1; }
.evtype-edit-row { display: flex; gap: 4px; }
.evtype-edit-act {
  flex: 1; padding: 5px 6px; font-size: 11px; font-weight: 700;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-s); cursor: pointer; color: var(--ink-2);
  transition: all .12s; white-space: nowrap;
}
.evtype-edit-act:hover { border-color: var(--yellow); color: var(--accent-text); }
.evtype-edit-act.danger:hover { border-color: #e05555; color: #e05555; }
.evtype-add-btn { border-style: dashed; grid-column: span 1; }
.evtype-edit-toggle {
  margin-left: auto; height: 24px; min-width: 26px; padding: 0 8px;
  background: transparent; border: 1px solid var(--ctl-border);
  border-radius: var(--radius-s); cursor: pointer; color: var(--ink-2);
  font: inherit; font-size: 11px; font-weight: 650; transition: border-color .15s, color .15s; flex-shrink: 0;
}
.evtype-edit-toggle:hover, .evtype-edit-toggle.is-active {
  border-color: var(--yellow); color: var(--accent-text);
}
body.is-mobile .evtype-btn { min-height: 44px; }

/* ── Drink layout picker ─────────────────────────────────────────── */
.lo-picker {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 8px;
}
.lo-opt {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-width: 42px; min-height: 38px; padding: 5px 7px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-s); cursor: pointer;
  font-size: 7px; line-height: 1.3; letter-spacing: 1px;
  color: var(--ink-2); transition: border-color .12s, color .12s, background .12s;
}
.lo-opt:hover { border-color: var(--yellow); color: var(--ink); }
.lo-opt.is-active { border-color: var(--yellow); background: var(--yellow-dim); color: var(--accent-text); }
.lo-row { display: block; letter-spacing: 2px; }
/* Auto button is wider */
.lo-opt:first-child { font-size: 10px; font-weight: 600; letter-spacing: 0; }

/* ── Learning form ───────────────────────────────────────────────── */
.learn-save-form {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-m); padding: 12px 14px; margin-bottom: 8px;
}
.learn-type-row {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.learn-type-row .field-label { flex-shrink: 0; margin-bottom: 0; }
.learn-type-row input[type="radio"] { width: 14px; height: 14px; accent-color: var(--yellow); }

/* ── Background generator ─────────────────────────────────────────── */
.bg-reference-preview {
  border-radius: var(--radius-s);
  overflow: hidden;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  aspect-ratio: 145/220;
  max-height: 180px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface2);
}
.bg-reference-preview img { width: 100%; height: 100%; object-fit: cover; }

.bg-gen-result {
  border-radius: var(--radius-s); overflow: hidden;
  border: 1px solid var(--border); margin-top: 8px;
  aspect-ratio: 145/220; max-height: 200px;
  position: relative; background: var(--surface2);
}
.bg-gen-result img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.bg-gen-result .apply-bg-btn {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  background: var(--yellow); color: #0d0c0a;
  border: none; border-radius: var(--radius-s);
  padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
  white-space: nowrap; box-shadow: var(--sh-md);
}

.ai-use-bg-btn {
  background: var(--yellow); color: #0d0c0a;
  border: none; border-radius: var(--radius-s);
  padding: 7px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.ai-use-bg-btn:hover { filter: brightness(1.05); }

/* ── Focus mode ─────────────────────────────────────────────────── */
body.is-focus .sidebar-wrap { display: none; }
body.is-focus .shell { grid-template-columns: 0 minmax(0,1fr); }
body.is-focus .workspace { margin-left: 0 !important; }

/* ══════════════════════════════════════════════════════
   MÓVIL — selectores planos con body.is-mobile (JS añade la clase)
   Layout: topbar → canvas (38vh) → tabs → controles
   ══════════════════════════════════════════════════════ */

/* Variables móvil */
body.is-mobile { --mob-canvas: 38vh; --mob-tabs: 46px; }

/* Inputs sin iOS zoom (font < 16px hace zoom) */
body.is-mobile input,
body.is-mobile textarea,
body.is-mobile select { font-size: 16px !important; }
body.is-mobile .range-num { font-size: 13px !important; width: 56px !important; }

/* Sliders limpios y táctiles */
body.is-mobile input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 4px; background: var(--border-2); border-radius: 2px;
  outline: none; touch-action: manipulation; margin: 14px 0; cursor: pointer;
}
body.is-mobile input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px; background: var(--yellow); border-radius: 50%;
  border: 3px solid var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.4);
  cursor: pointer; margin-top: -11px;
}
body.is-mobile input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; background: var(--border-2); border-radius: 2px;
}
body.is-mobile input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px; background: var(--yellow); border-radius: 50%;
  border: 3px solid var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
body.is-mobile input[type="range"]::-moz-range-track {
  height: 4px; background: var(--border-2); border-radius: 2px;
}

/* Touch targets grandes */
body.is-mobile canvas { touch-action: none; }
body.is-mobile .btn-secondary,
body.is-mobile .btn-primary,
body.is-mobile .btn-add { min-height: 44px; }
body.is-mobile .check-field { min-height: 40px; padding: 4px 0; }
body.is-mobile .tb-icon-btn { width: 40px; height: 40px; }
body.is-mobile .statusbar { display: none; }

/* ── Shell: columna vertical ── */
body.is-mobile,
body.is-mobile html { height: 100%; overflow: hidden; }
/* Antes de iniciar sesión el editor no se ve (main.js quita data-locked). Con id
   para ganarle al display:flex !important de body.is-mobile .shell de abajo, que
   antes lo dejaba visible detrás del login en el celular. */
#appShell[data-locked] { display: none !important; }
body.is-mobile .shell {
  display: flex !important;
  flex-direction: column !important;
  /* Orden correcto: primero el fallback, DESPUÉS dvh (alto visible real, sin la
     barra del navegador). Antes iba al revés y 100vh pisaba a 100dvh: en el celular
     real la parte de abajo quedaba escondida bajo la barra ("se ve cortada"). */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  grid-template-columns: unset !important;
  grid-template-rows: unset !important;
  grid-template-areas: unset !important;
}

/* ── Topbar ── */
body.is-mobile .topbar { order: 1; flex-shrink: 0; width: 100%; }
body.is-mobile .brand-text .brand-sub { display: none; }
body.is-mobile .tb-divider { display: none; }
body.is-mobile .tb-icon-btn:not(#editModeBtn):not(#themeBtn):not(#newDesignBtn) { display: none; }
body.is-mobile .view-btn { padding: 5px 14px; font-size: 12px; }
body.is-mobile .tb-export-btn { padding: 7px 12px; font-size: 12px; }

/* ── Canvas (siempre visible arriba) ── */
body.is-mobile .workspace,
body.is-mobile .workspace.panel-open {
  order: 2;
  flex-shrink: 0;
  height: var(--mob-canvas) !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden;
  transition: none;
  grid-area: unset !important;
}
body.is-mobile .zoom-strip { padding: 4px 10px; gap: 5px; overflow-x: auto; }
body.is-mobile .zoom-lbl { font-size: 11px; min-width: 28px; }
body.is-mobile .canvas-wrap {
  flex: 1; padding: 8px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: block;
}
body.is-mobile .canvas-wrap canvas { max-width: none; height: auto; }
body.is-mobile canvas { max-width: 100%; height: auto !important; }
body.is-mobile .context-bar { flex-shrink: 0; overflow-x: auto; }
body.is-mobile .edit-hint { flex-shrink: 0; }

/* ── Controles (debajo del canvas) ── */
body.is-mobile .sidebar-wrap {
  order: 3;
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  position: relative !important;
  top: auto; left: auto; right: auto; bottom: auto;
  border-top: 1px solid var(--border);
  grid-area: unset !important;
}

/* Tabs horizontales deslizables */
body.is-mobile .icon-rail {
  order: 1;
  flex-direction: row !important;
  width: 100%;
  height: var(--mob-tabs);
  flex-shrink: 0;
  overflow-x: auto; overflow-y: hidden;
  padding: 4px 6px; gap: 2px;
  border-right: none;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
body.is-mobile .icon-rail::-webkit-scrollbar { display: none; }
body.is-mobile .rail-btn {
  flex-direction: row !important;
  flex-shrink: 0; width: auto; height: 36px;
  padding: 6px 12px; gap: 6px; font-size: 11px;
  border-radius: 20px; white-space: nowrap;
}
body.is-mobile .rail-btn svg { width: 15px; height: 15px; }
body.is-mobile .rail-btn.is-active { background: var(--yellow-dim); color: var(--accent-text); }

/* Panel de controles: flujo normal, no absolute */
body.is-mobile .slide-panel {
  order: 2;
  position: relative !important;
  flex: 1; min-height: 0;
  width: 100%; height: auto;
  left: auto !important; top: auto !important;
  border-right: none; border-radius: 0; box-shadow: none;
  transform: none !important; opacity: 1 !important;
  pointer-events: auto !important;
  display: flex; flex-direction: column; overflow: hidden;
  transition: none !important;
}
body.is-mobile .slide-panel.is-hidden { display: flex; } /* siempre visible en móvil */
body.is-mobile .panel-header { display: none; } /* tabs ya indican sección */

body.is-mobile .pane {
  /* Ocupa lo que sobra (columna flexible). Antes era una altura calculada con la
     barra superior fija en 50px; desde que la barra tiene 2 filas en celular
     (93px) el panel se pasaba de la pantalla y se cortaba abajo. */
  flex: 1 1 auto; min-height: 0; height: auto; max-height: none;
  overflow-y: auto !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 14px calc(20px + env(safe-area-inset-bottom, 0px));
}

/* ── Asa de redimensionado canvas/controles ── */
.mob-split-handle { display: none; }
body.is-mobile .mob-split-handle {
  display: flex; align-items: center; justify-content: center;
  order: 3; flex-shrink: 0;
  height: 18px; width: 100%;
  background: var(--surface);
  border-top: 1px solid var(--border);
  cursor: ns-resize;
  touch-action: none; /* el drag no debe hacer scroll de la página */
}
body.is-mobile .mob-split-handle::before {
  content: ""; width: 44px; height: 4px; border-radius: 2px;
  background: var(--border-2);
}

/* ── Panel colapsado: canvas a pantalla completa, solo quedan las tabs ── */
body.is-mobile.mob-panel-collapsed .workspace,
body.is-mobile.mob-panel-collapsed .workspace.panel-open {
  height: auto !important;
  flex: 1 1 auto !important;
  min-height: 0;
}
body.is-mobile.mob-panel-collapsed .mob-split-handle { display: none; }
body.is-mobile.mob-panel-collapsed .sidebar-wrap { flex: 0 0 auto; }
body.is-mobile.mob-panel-collapsed .slide-panel { display: none !important; }

/* Layouts internos */
body.is-mobile .asset-grid { grid-template-columns: repeat(4, 1fr); }
body.is-mobile .color-grid { grid-template-columns: 1fr 1fr; }
body.is-mobile .row-split { flex-direction: column; }
body.is-mobile .field.half { flex: none; width: 100%; }
body.is-mobile .drink-row-hd { padding: 8px 10px; }
body.is-mobile .section-divider { padding-top: 14px; margin: 14px 0 10px; }

/* iPhone pequeño */
@media (max-width: 390px) {
  body.is-mobile { --mob-canvas: 33vh; }
  body.is-mobile .asset-grid { grid-template-columns: repeat(3, 1fr); }
  body.is-mobile .rail-btn { padding: 6px 10px; font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════
   Bandejas (Coordinación / Diseño / selector de admin) — src/bandejas.js
   Lo urgente por fecha primero: grupos por urgencia y bloque de fecha por evento.
   Mismo sistema de tokens que el editor → claro/oscuro sin estilos aparte.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --st-diseno-bg:   #eef1f5; --st-diseno-ink:   #4a5568;
  --st-revision-bg: #fff4d6; --st-revision-ink: #7a5300;
  --st-cambios-bg:  #fde8e8; --st-cambios-ink:  #a42020;
  --st-aprobado-bg: #e3f4e8; --st-aprobado-ink: #1e6b3a;
  --st-impreso-bg:  #e0f0f2; --st-impreso-ink:  #145a63;
  --st-libre-bg:    #eaf0fb; --st-libre-ink:    #1f4fa8;
  --risk-bg:  #fdecec; --risk-ink: #b42828; --risk-border: #f3c4c4;
  --bj-bg:    #f4f6f9;
}
[data-theme="dark"] {
  --st-diseno-bg:   #252c3c; --st-diseno-ink:   #b3bdd3;
  --st-revision-bg: #3a2f12; --st-revision-ink: #f5cc4a;
  --st-cambios-bg:  #3d1c1f; --st-cambios-ink:  #ff9c9c;
  --st-aprobado-bg: #173226; --st-aprobado-ink: #7fd6a0;
  --st-impreso-bg:  #133036; --st-impreso-ink:  #7ccfd9;
  --st-libre-bg:    #1a2a4a; --st-libre-ink:    #9dbcf5;
  --risk-bg:  #3a1a1d; --risk-ink: #ff9c9c; --risk-border: #5a2a2e;
  --bj-bg:    #111318;
}

.bj-shell {
  position: fixed; inset: 0; z-index: 500; overflow-y: auto;
  background: var(--bj-bg); color: var(--ink); font-family: var(--font);
}
.bj-top {
  position: sticky; top: 0; z-index: 2;
  background: var(--tb-bg); border-bottom: 1px solid var(--tb-border);
}
.bj-top-inner {
  max-width: 960px; margin: 0 auto; height: 56px; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.bj-brand { display: flex; align-items: center; gap: 8px; min-width: 0; flex-shrink: 0; }
.bj-leaf { color: var(--accent-text); flex-shrink: 0; }
.bj-brand-name { font-size: 15px; font-weight: 750; letter-spacing: -.01em; color: var(--tb-ink); }
.bj-role {
  font-size: 12px; font-weight: 600; color: var(--tb-muted);
  padding: 2px 8px; border: 1px solid var(--tb-border); border-radius: 999px; white-space: nowrap;
}
.bj-top-actions { display: flex; align-items: center; gap: 6px; }

.bj-main { max-width: 960px; margin: 0 auto; padding: 28px 20px 96px; }
.bj-title { font-size: 26px; font-weight: 750; letter-spacing: -.02em; color: var(--ink-1); margin-bottom: 18px; text-wrap: balance; }

/* Botones de las bandejas: mismo vocabulario que el editor (altura, foco, hover). */
.bj-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 14px; border-radius: var(--radius-s);
  border: 1px solid var(--ctl-border); background: var(--surface); color: var(--ink-1);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.bj-btn:hover { background: var(--btn2-hover); border-color: var(--ctl-border-h); }
.bj-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bj-btn:disabled { opacity: .45; cursor: not-allowed; }
.bj-btn-primary { background: var(--yellow); border-color: var(--yellow); color: #0d0c0a; }
.bj-btn-primary:hover { background: var(--yellow-light); border-color: var(--yellow-light); }
.bj-btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.bj-btn-ghost:hover { background: var(--hover-tint); border-color: transparent; color: var(--ink-1); }
.bj-btn-sm { min-height: 30px; padding: 0 11px; font-size: 12.5px; }
.bj-btn-block { width: 100%; }
.bj-danger { color: var(--danger-ink); }
.bj-danger:hover { color: var(--danger-ink-h); background: var(--danger-bg); }
.bj-icon-btn {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--radius-s); background: transparent; color: var(--tb-muted); cursor: pointer;
  transition: background .15s, color .15s;
}
.bj-icon-btn:hover { background: var(--tb-hover); color: var(--tb-ink); }
.bj-icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bj-link {
  background: none; border: none; color: var(--link); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; padding: 6px 4px; border-radius: 4px;
}
.bj-link:hover { text-decoration: underline; }
.bj-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.bj-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.bj-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.bj-stat {
  font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); color: var(--ink-2);
}
.bj-stat.is-review { background: var(--st-revision-bg); border-color: transparent; color: var(--st-revision-ink); }
.bj-stat.is-risk   { background: var(--risk-bg); border-color: var(--risk-border); color: var(--risk-ink); }
.bj-note { font-size: 12.5px; color: var(--ink-3); margin: -12px 0 20px; }

/* Grupos por urgencia */
.bj-group + .bj-group { margin-top: 30px; }
.bj-group-title {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 15px; font-weight: 700; color: var(--ink-1); margin-bottom: 10px;
}
.bj-group[data-group="urgente"] .bj-group-title { color: var(--risk-ink); }
.bj-count {
  font-size: 12px; font-weight: 700; min-width: 22px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
  background: var(--surface2); color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.bj-group[data-group="urgente"] .bj-count { background: var(--risk-bg); color: var(--risk-ink); }
.bj-group-hint { font-size: 12.5px; font-weight: 450; color: var(--ink-3); }
.bj-list { display: flex; flex-direction: column; gap: 10px; }

/* Tarjeta de evento: bloque de fecha + cuerpo */
.bj-card {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m);
  padding: 16px; box-shadow: var(--sh-sm);
  transition: border-color .15s, box-shadow .15s;
}
.bj-card:hover { border-color: var(--border-2); }
.bj-group[data-group="urgente"] .bj-card { border-color: var(--risk-border); }
.bj-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: var(--radius-m); background: var(--surface2); padding: 10px 4px; align-self: start;
  text-align: center; line-height: 1;
}
.bj-date-day { font-size: 28px; font-weight: 750; color: var(--ink-1); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bj-date-month { font-size: 12px; font-weight: 650; color: var(--ink-2); text-transform: capitalize; margin-top: 4px; }
.bj-date-rel { font-size: 11px; font-weight: 600; color: var(--ink-3); margin-top: 8px; white-space: nowrap; }
/* Mundo/Sebas: el bloque muestra el jueves de entrega, no la fecha del evento */
.bj-date-kicker { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.bj-date.is-risk .bj-date-kicker { color: var(--risk-ink); }
.bj-date.is-risk { background: var(--risk-bg); }
.bj-date.is-risk .bj-date-day, .bj-date.is-risk .bj-date-month, .bj-date.is-risk .bj-date-rel { color: var(--risk-ink); }
.bj-date.is-done { opacity: .75; }

.bj-card-body { min-width: 0; }
.bj-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.bj-card-title { font-size: 16px; font-weight: 700; color: var(--ink-1); letter-spacing: -.01em; }
.bj-card-meta { font-size: 13px; color: var(--ink-3); }
.bj-brief { font-size: 13px; color: var(--ink-2); margin-top: 6px; line-height: 1.5; max-width: 70ch; }

.bj-pieces { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.bj-piece {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: var(--radius-s); background: var(--surface2);
}
.bj-piece-kind { font-size: 13px; font-weight: 700; color: var(--ink-1); min-width: 42px; }
.bj-qty { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* Bodega del evento (tabla bodegas, 0029). Tono por posición, no por nombre. */
.bj-bodega {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-right: 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; vertical-align: 1px;
  background: var(--st-diseno-bg); color: var(--st-diseno-ink);
}
.bj-bodega[data-tono="1"] { background: var(--st-libre-bg);    color: var(--st-libre-ink); }
.bj-bodega[data-tono="2"] { background: var(--st-impreso-bg);  color: var(--st-impreso-ink); }
.bj-bodega[data-tono="3"] { background: var(--st-revision-bg); color: var(--st-revision-ink); }
/* Fondos cargados por pieza (bandeja de Diseño) */
.bj-bgchip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--ink-3); border: 1px dashed var(--border-2);
}
.bj-bgchip.is-ready { border: 0; background: var(--st-aprobado-bg); color: var(--st-aprobado-ink); }
.bj-bgchip.is-busy  { border: 0; background: var(--st-revision-bg); color: var(--st-revision-ink); }
.bj-piece-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.bj-piece-actions:empty { display: none; }
.bj-review-note { font-size: 12.5px; color: var(--st-cambios-ink); margin: 4px 10px 2px; font-style: italic; }

.bj-badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 12px; font-weight: 650; white-space: nowrap;
  background: var(--st-diseno-bg); color: var(--st-diseno-ink);
}
.bj-badge[data-s="en_revision"]         { background: var(--st-revision-bg); color: var(--st-revision-ink); }
.bj-badge[data-s="cambios_solicitados"] { background: var(--st-cambios-bg);  color: var(--st-cambios-ink); }
.bj-badge[data-s="aprobado"]            { background: var(--st-aprobado-bg); color: var(--st-aprobado-ink); }
.bj-badge[data-s="impreso"]             { background: var(--st-impreso-bg);  color: var(--st-impreso-ink); }
.bj-badge[data-s="libre"]               { background: var(--st-libre-bg);    color: var(--st-libre-ink); }

.bj-card-foot { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; margin-top: 10px; margin-left: -8px; }
.bj-retention { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.bj-drawer { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.bj-refs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.bj-ref img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-s); border: 1px solid var(--border); display: block; }
.bj-ref:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-s); }
/* Hilo de mensajes (src/messages.js): bandejas y panel Evento del editor */
.msg-thread { display: flex; flex-direction: column; gap: 8px; }
.msg-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 2px; }
.msg-thread.is-compact .msg-list { max-height: 200px; }
.msg-row { display: flex; }
.msg-row.is-mine { justify-content: flex-end; }
.msg-bubble { max-width: 85%; display: flex; flex-direction: column; gap: 2px; padding: 7px 11px; border-radius: 12px 12px 12px 4px; background: var(--surface2); border: 1px solid var(--border); }
.msg-row.is-mine .msg-bubble { border-radius: 12px 12px 4px 12px; background: var(--st-libre-bg); border-color: transparent; }
.msg-meta { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.msg-body { font-size: 13px; line-height: 1.45; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-empty { font-size: 12.5px; color: var(--ink-3); margin: 4px 0; }
.msg-error { color: var(--danger-ink); }
.msg-compose { display: flex; gap: 6px; align-items: flex-end; }
.msg-compose textarea { flex: 1; min-height: 34px; resize: none; padding: 7px 10px; font: inherit; font-size: 13px; line-height: 1.4; color: var(--ink); background: var(--ctl-bg); border: 1px solid var(--ctl-border); border-radius: var(--radius-s); }
.msg-compose textarea:focus { outline: none; border-color: var(--ctl-border-h); box-shadow: var(--focus-ring); }
.msg-send { height: 34px; padding: 0 14px; font: inherit; font-size: 13px; font-weight: 650; border-radius: var(--radius-s); border: 1px solid var(--yellow); background: var(--yellow); color: #0d0c0a; cursor: pointer; }
.msg-send:hover { background: var(--yellow-light); border-color: var(--yellow-light); }
.msg-send:disabled { opacity: .6; cursor: default; }

.bj-muted { font-size: 12.5px; color: var(--ink-3); }
.bj-error { font-size: 13px; color: var(--danger-ink); min-height: 1.2em; }
.bj-empty {
  padding: 40px 24px; text-align: center; font-size: 14px; color: var(--ink-2); line-height: 1.6;
  background: var(--surface); border: 1px dashed var(--border-2); border-radius: var(--radius-m);
}
/* Carga: esqueletos, no un spinner en medio */
.bj-skel {
  height: 112px; border-radius: var(--radius-m); background: var(--surface);
  border: 1px solid var(--border); position: relative; overflow: hidden;
}
.bj-skel { animation: bj-pulse 1.4s ease-in-out infinite alternate; }
@keyframes bj-pulse { from { opacity: 1; } to { opacity: .55; } }

/* Formulario de nuevo evento */
.modal-dialog.bj-form { max-width: 480px; padding: 22px 24px; }
.bj-form-title { font-size: 18px; font-weight: 700; color: var(--ink-1); margin-bottom: 16px; }
.bj-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bj-form .field input, .bj-form .field select { height: 36px; font-size: 13.5px; }
.bj-form textarea { font-size: 13.5px; }

/* Pantalla centrada (sin acceso) */
.bj-picker { display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.bj-picker-top { position: absolute; top: 12px; right: 12px; }
.bj-brand-lg { justify-content: center; margin-bottom: 14px; }
.bj-brand-lg .bj-brand-name { font-size: 18px; }
.bj-picker-title { font-size: 26px; font-weight: 750; letter-spacing: -.02em; color: var(--ink-1); margin-bottom: 22px; }

@media (max-width: 640px) {
  .bj-top-inner { padding: 6px 12px; height: auto; min-height: 52px; }
  /* La marca no se encoge; si los botones no caben, bajan a un segundo renglón */
  .bj-top-actions { min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; }
  .bj-main { padding: 20px 12px 80px; }
  .bj-title { font-size: 22px; }
  .bj-card { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  /* En celular la fecha va en una línea arriba, no como columna */
  .bj-date { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 8px 12px; align-items: baseline; }
  .bj-date-day { font-size: 20px; }
  .bj-date-month { margin-top: 0; font-size: 13px; }
  .bj-date-rel { margin-top: 0; margin-left: auto; font-size: 12px; }
  .bj-piece-actions { margin-left: 0; width: 100%; }
  .bj-piece-actions .bj-btn { flex: 1; min-height: 36px; }
  .bj-retention { margin-left: 8px; width: 100%; }
  .bj-form-row { grid-template-columns: 1fr; gap: 0; }
  .bj-role { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bj-skel { animation: none; }
}

/* ── Marca de la app: logo original de Paldrink + "by NetHive" (src/brand.js) ──
   Imagen por CSS para cambiar negra (claro) ↔ blanca (oscuro) sin tocar el marcado.
   Logos recortados a su contenido en v2/img/ (497×135, transparentes). */
.app-brand { display: inline-flex; flex-direction: row; align-items: center; gap: 10px; line-height: 1; flex-shrink: 0; }
.app-logo {
  display: block; width: var(--logo-w, 104px); aspect-ratio: 497 / 135;
  background: url("img/paldrink-wordmark-dark.png") left center / contain no-repeat;
}
[data-theme="dark"] .app-logo { background-image: url("img/paldrink-wordmark-light.png"); }
/* "by" + logo NetHive tal cual (v2/img/nethive-logo*.png, 1633×363, transparentes):
   casi a la altura del de Paldrink, separado por una línea — NetHive es el producto. */
.app-by {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding-left: 10px; border-left: 1px solid var(--border-2);
}
.app-by-k { font-size: 11px; font-weight: 500; color: var(--tb-muted); letter-spacing: .01em; }
.nh-logo {
  display: block; width: calc(var(--logo-w, 104px) * 1.15); aspect-ratio: 1633 / 363;
  background: url("img/nethive-logo.png") left center / contain no-repeat;
}
[data-theme="dark"] .nh-logo { background-image: url("img/nethive-logo-dark.png"); }
.app-brand-sm { --logo-w: 92px; }
.app-brand-md { --logo-w: 132px; gap: 14px; }
.app-brand-md .app-by { padding-left: 14px; }
.app-brand-md .app-by-k { font-size: 12px; }
.app-brand-lg { --logo-w: 156px; gap: 16px; }
.app-brand-lg .app-by { padding-left: 16px; }
.app-brand-lg .app-by-k { font-size: 12.5px; }
/* Pantallas angostas (bandejas en celular): la marca se apila para no chocar con la barra */
@media (max-width: 760px) {
  .bj-brand .app-brand-sm { --logo-w: 76px; flex-direction: column; align-items: flex-start; gap: 3px; }
  .bj-brand .app-brand-sm .app-by { padding-left: 0; border-left: 0; gap: 4px; }
  .bj-brand .app-brand-sm .app-by-k { font-size: 9.5px; }
  .bj-brand .app-brand-sm .nh-logo { width: 66px; }
}
.topbar-brand .app-brand { margin-right: 4px; }
.bj-brand .app-brand { margin-right: 6px; }
.bj-brand-lg { flex-direction: column; gap: 10px; }
.auth-brand { margin-bottom: 14px; }
.auth-brand .app-by-k { color: var(--ink-3); }
/* Login en celular: la marca en fila no cabe en el recuadro → se apila, centrada */
@media (max-width: 520px) {
  .auth-brand, .bj-noaccess .bj-brand { display: flex; justify-content: center; }
  .auth-brand .app-brand, .bj-noaccess .app-brand { flex-direction: column; gap: 10px; }
  .auth-brand .app-by, .bj-noaccess .app-by { padding-left: 0; border-left: 0; }
}

/* ── Visor de imágenes (src/lightbox.js): referencias y PNG sin abrir pestañas ──
   Fondo oscuro en ambos temas a propósito: las imágenes se juzgan mejor sobre
   neutro oscuro (convención de cualquier visor de fotos). */
html.lb-open, html.lb-open body { overflow: hidden; }
.lb {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: rgba(8, 10, 14, .94); color: #eef1f6;
  animation: lb-in .18s var(--ease-out);
}
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lb-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.lb-count { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; color: #c9d1e3; min-width: 44px; }
.lb-title { flex: 1; min-width: 0; font-size: 13px; color: #c9d1e3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-actions { display: flex; gap: 6px; }
.lb-btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px;
  border-radius: 8px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06);
  color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s;
}
.lb-btn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
.lb-btn:focus-visible, .lb-nav:focus-visible, .lb-thumb:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(240,181,0,.6); }
.lb-stage { position: relative; display: flex; align-items: center; justify-content: center; padding: 8px 64px; min-height: 0; }
.lb-img {
  max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5); opacity: 0; transition: opacity .2s;
}
.lb-img.is-ready { opacity: 1; }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.1); color: #fff; font-size: 30px; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.lb-nav:hover { background: rgba(255,255,255,.22); }
.lb-prev { left: 10px; }
.lb-next { right: 10px; }
.lb-thumbs { display: flex; gap: 8px; justify-content: center; padding: 10px 14px 14px; overflow-x: auto; }
.lb-thumb {
  flex-shrink: 0; width: 56px; height: 56px; padding: 0; border-radius: 6px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: none; opacity: .55; transition: opacity .15s, border-color .15s;
}
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-thumb:hover { opacity: .85; }
.lb-thumb.is-active { opacity: 1; border-color: var(--yellow); }
@media (max-width: 640px) {
  .lb-stage { padding: 4px 8px; }
  .lb-nav { width: 40px; height: 40px; font-size: 24px; background: rgba(0,0,0,.45); }
  .lb-thumb { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .lb, .lb-img { animation: none; transition: none; } }

/* Miniaturas clicables (bandejas y panel del editor) */
button.bj-ref { padding: 0; border: none; background: none; cursor: zoom-in; border-radius: var(--radius-s); }
button.bj-ref:hover img { border-color: var(--ctl-border-h); }

/* Visor: PDF embebido, ficha de comprimido, miniaturas de archivo */
.lb-view { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; min-height: 0; }
.lb-view .lb-img { max-width: 100%; max-height: 100%; }
.lb-frame { width: min(1000px, 100%); height: 100%; border: none; border-radius: 6px; background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.lb-file {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 32px 28px; max-width: 420px; border-radius: 12px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12); color: #eef1f6;
}
.lb-file svg { width: 56px; height: 56px; color: #f5cc4a; }
.lb-file-name { font-size: 15px; font-weight: 650; word-break: break-word; }
.lb-file-hint { font-size: 13px; color: #c9d1e3; line-height: 1.5; }
.lb-btn-primary { background: var(--yellow); border-color: var(--yellow); color: #0d0c0a; margin-top: 6px; }
.lb-btn-primary:hover { background: var(--yellow-light); border-color: var(--yellow-light); }
.lb-thumb-icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: rgba(255,255,255,.08); color: #f5cc4a; }

.bj-ref-file {
  width: 72px; height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid var(--border) !important; border-radius: var(--radius-s); background: var(--surface2) !important;
  color: var(--ink-2); padding: 4px !important;
}
.bj-ref-file:hover { border-color: var(--ctl-border-h) !important; color: var(--ink-1); }
.bj-ref-name { font-size: 11px; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.cloud-refs { gap: 6px; margin-bottom: 0; }
.cloud-refs .bj-ref img, .cloud-refs .bj-ref-file { width: 56px; height: 56px; }
.cloud-refs .bj-ref-name { max-width: 50px; font-size: 10.5px; }

/* Barra superior en celular: logo compacto, "Salir" solo con su flecha y pestañas
   de vista más angostas, para que todo quepa en 375 px sin desbordar. */
body.is-mobile .topbar-brand { padding: 0 8px; gap: 6px; min-width: 0; border-right: none; }
body.is-mobile .topbar-brand .app-brand { --logo-w: 64px; flex-direction: column; align-items: flex-start; gap: 3px; }
body.is-mobile .topbar-brand .app-by { padding-left: 0; border-left: 0; gap: 4px; }
body.is-mobile .topbar-brand .app-by-k { font-size: 9.5px; }
body.is-mobile .topbar-brand .nh-logo { width: 54px; }
body.is-mobile .tb-exit-btn { padding: 0 8px; height: 34px; }
body.is-mobile .tb-exit-label { display: none; }
body.is-mobile .topbar-center { min-width: 0; }
body.is-mobile .view-btn { padding: 5px 9px !important; font-size: 11.5px !important; white-space: nowrap; }
body.is-mobile .topbar-end { gap: 0; }
body.is-mobile .tb-export-btn { padding: 7px 9px !important; }
body.is-mobile .topbar { flex-wrap: wrap; height: auto; row-gap: 0; }
body.is-mobile .topbar-brand { height: 48px; }
body.is-mobile .topbar-end { margin-left: auto; height: 48px; padding-right: 6px; }
body.is-mobile .topbar-center { order: 3; flex: 1 0 100%; justify-content: center; padding: 0 8px 8px; }
body.is-mobile .view-pill { width: 100%; }
body.is-mobile .view-btn { flex: 1; padding: 7px 6px !important; font-size: 12.5px !important; }

/* Fondos preparados por pieza (bandeja de Diseño) */
.bj-bg-row + .bj-bg-row { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.bj-bg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.bj-bg-title { font-size: 13px; font-weight: 650; color: var(--ink-1); display: inline-flex; align-items: center; gap: 6px; }
.bj-bg-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.bj-bg-tile { position: relative; display: inline-block; }
.bj-bg-tile .bj-ref img { width: 84px; height: 112px; }
.bj-bg-row[data-bgkind="tag"] .bj-bg-tile .bj-ref img { width: 96px; height: 96px; border-radius: 50%; }
.bj-bg-first {
  position: absolute; left: 4px; bottom: 4px; font-size: 11px; font-weight: 700;
  padding: 2px 6px; border-radius: 999px; background: var(--yellow); color: #0d0c0a; pointer-events: none;
}
.bj-bg-del {
  position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--ink-2);
  font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-sm);
}
.bj-bg-del:hover { color: var(--danger-ink); border-color: var(--danger-ink); }
.bj-bg-del:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bj-ref.is-current img { outline: 2px solid var(--yellow); outline-offset: 1px; }
.bj-group .bj-bg-title .bj-count { background: var(--surface2); color: var(--ink-2); }
.bj-bg-tile { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; vertical-align: top; }
.bj-bg-derive {
  font: inherit; font-size: 11.5px; font-weight: 600; color: var(--link); background: none; border: none;
  padding: 2px 4px; cursor: pointer; border-radius: 4px; white-space: nowrap;
}
.bj-bg-derive:hover { text-decoration: underline; }
.bj-bg-derive:disabled { opacity: .45; cursor: not-allowed; text-decoration: none; }
.bj-bg-derive:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bj-bg-tile .bj-bg-first { bottom: auto; top: 88px; }
.bj-bg-row[data-bgkind="tag"] .bj-bg-tile .bj-bg-first { top: 72px; left: 50%; transform: translateX(-50%); }

/* Formulario de evento: selector de bebidas + referencias (bandeja de Coordinación) */
.modal-dialog.bj-form-wide { max-width: 620px; max-height: calc(100dvh - 40px); overflow-y: auto; }
.bj-picker-box { border: 1px solid var(--border); border-radius: var(--radius-m); padding: 10px; background: var(--surface2); }
/* Sabores de la Agenda distintos a las bebidas del menú (O.1.5) */
.bj-sug { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 6px 0 8px; padding: 10px 12px; border-radius: var(--radius-s); background: var(--yellow-dim); }
.bj-sug[hidden] { display: none; }
.bj-sug p { margin: 0; font-size: 13px; color: var(--ink-1); min-width: 0; flex: 1 1 240px; }
.bj-sug small { color: var(--ink-2); }
.bj-pick-selected { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; min-height: 26px; align-items: center; }
.bj-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--ctl-border); font-size: 12.5px; font-weight: 550; color: var(--ink-1);
}
.bj-chip button {
  width: 22px; height: 22px; border-radius: 50%; border: none; background: transparent; color: var(--ink-3);
  cursor: pointer; font-size: 11px; display: inline-flex; align-items: center; justify-content: center;
}
.bj-chip button:hover { background: var(--danger-bg); color: var(--danger-ink); }
.bj-chip button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bj-chip-n {
  min-width: 18px; height: 18px; border-radius: 50%; background: var(--yellow); color: #0d0c0a;
  font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-left: -4px;
}
.bj-pick-search { margin-bottom: 10px; }
.bj-pick-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px;
  max-height: 300px; overflow-y: auto; padding: 2px;
}
.bj-pick {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px 8px;
  border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface); cursor: pointer;
  font: inherit; color: var(--ink-1); transition: border-color .15s, box-shadow .15s;
}
.bj-pick:hover { border-color: var(--ctl-border-h); }
.bj-pick:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bj-pick.is-on { border-color: var(--yellow); box-shadow: 0 0 0 2px rgba(240,181,0,.35); }
.bj-pick img { width: 64px; height: 72px; object-fit: contain; }
.bj-pick-name { font-size: 11.5px; line-height: 1.25; text-align: center; color: var(--ink-1); }
.bj-pick-n {
  position: absolute; top: 4px; right: 4px; min-width: 20px; height: 20px; border-radius: 50%;
  background: var(--yellow); color: #0d0c0a; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.bj-file-pick { align-self: flex-start; }
.bj-file-list { display: flex; flex-wrap: wrap; gap: 6px; }
.bj-drinks { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.5; }
.bj-drinks-k { font-weight: 650; color: var(--ink-1); }
.bj-mocktail { margin: 2px 0 10px; }
/* Varios menús por evento (0021): un bloque por menú en el formulario */
.bj-menus { display: flex; flex-direction: column; gap: 12px; }
.bj-menu-block.is-multi { border: 1px solid var(--border); border-radius: var(--radius-m); padding: 12px; }
.bj-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.bj-menu-title { font-size: 14px; font-weight: 700; color: var(--ink-1); }
.bj-add-menu { align-self: flex-start; margin: 10px 0 14px; }
.bj-piece-name { font-weight: 500; color: var(--ink-2); }
/* Reverso del tag (tags anteriores): confirmar el color del logo */
.bj-rev { max-width: 460px; }
.bj-rev-body { display: flex; gap: 16px; align-items: flex-start; margin-top: 12px; flex-wrap: wrap; }
.bj-rev-preview { width: 150px; height: 150px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface2); object-fit: cover; }
.bj-rev-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.bj-rev-swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; }
.bj-rev-swatch.is-on { border-color: var(--ink-1); box-shadow: var(--focus-ring); }

/* ─── Administración (src/admin.js): dashboards y bitácora ─────────────────── */
.adm-tabs { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 20px; background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; }
.adm-tab { font: inherit; font-size: 13px; font-weight: 650; padding: 7px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; }
.adm-tab:hover { color: var(--ink-1); }
.adm-tab.is-active { background: var(--surface); color: var(--ink-1); box-shadow: var(--sh-sm); }
.adm-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.adm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.adm-kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--sh-sm); }
.adm-kpi:first-child { border-color: var(--yellow); }
.adm-kpi-label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.adm-kpi-value { font-size: 26px; font-weight: 750; letter-spacing: -.02em; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.adm-kpi-sub { font-size: 12px; color: var(--ink-3); }
.adm-note { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin: 0 0 22px; max-width: 72ch; }
.adm-charts { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; margin-bottom: 28px; }
.adm-chart { margin: 0; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--sh-sm); min-width: 0; }
.adm-chart-title { font-size: 13px; font-weight: 700; color: var(--ink-1); margin-bottom: 12px; }
.adm-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; height: 170px; align-items: end; }
.adm-bar { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; min-width: 0; }
.adm-bar-val { font-size: 10px; font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; min-height: 13px; }
.adm-bar-track { flex: 1; width: 100%; max-width: 30px; display: flex; align-items: flex-end; border-radius: 4px; background: var(--surface2); }
.adm-bar-fill { width: 100%; border-radius: 4px; background: var(--ink-3); transition: height .3s var(--ease-out); }
.adm-bar.is-current .adm-bar-fill { background: var(--yellow); }
.adm-bars.is-alt .adm-bar-fill { background: var(--border-2); }
.adm-bars.is-alt .adm-bar.is-current .adm-bar-fill { background: var(--yellow); }
.adm-bar-label { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.adm-bar.is-current .adm-bar-label { color: var(--ink-1); font-weight: 700; }
/* Gráfico angosto: solo cada 4 semanas + la actual, para que las fechas no se encimen */
.adm-bars.is-alt .adm-bar:not(.is-current):not(.is-tick) .adm-bar-label { visibility: hidden; }
.adm-h2 { font-size: 15px; font-weight: 700; color: var(--ink-1); margin: 0 0 10px; }
.adm-table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--sh-sm); }
.adm-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--ink); }
.adm-table th { text-align: left; font-size: 12px; font-weight: 650; color: var(--ink-3); padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.adm-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.adm-sub { font-size: 11.5px; color: var(--ink-3); font-weight: 450; }
.adm-total { font-weight: 750; color: var(--ink-1); }
.adm-week.has-detail { cursor: pointer; }
.adm-week.has-detail:hover td { background: var(--hover-tint); }
.adm-week:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.adm-week.is-current td:first-child { font-weight: 700; color: var(--ink-1); }
.adm-caret { display: inline-block; width: 14px; color: var(--ink-3); transition: transform .15s; }
.adm-week.is-open .adm-caret { transform: rotate(90deg); }
.adm-detail td { background: var(--surface2); white-space: normal; }
.adm-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.adm-events li { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto auto; gap: 12px; align-items: baseline; font-size: 12.5px; }
.adm-ev-date { color: var(--ink-3); }
.adm-ev-name { color: var(--ink-1); font-weight: 600; overflow-wrap: anywhere; }
.adm-ev-qty { color: var(--ink-2); }
.adm-ev-amt { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; min-width: 64px; }
.adm-log-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.adm-search, .adm-filter { height: 36px; padding: 0 12px; font: inherit; font-size: 13px; color: var(--ink); background: var(--ctl-bg); border: 1px solid var(--ctl-border); border-radius: var(--radius-s); }
.adm-search { flex: 1 1 240px; width: auto; min-width: 0; }
.adm-filter { flex: 0 0 auto; width: auto; }
.adm-search:focus, .adm-filter:focus { outline: none; border-color: var(--ctl-border-h); box-shadow: var(--focus-ring); }
.adm-logs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.adm-log { padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); }
.adm-log-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.adm-log-badge { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface2); color: var(--ink-2); }
.adm-log-badge[data-accion="crear"]    { background: var(--st-aprobado-bg); color: var(--st-aprobado-ink); }
.adm-log-badge[data-accion="editar"]   { background: var(--st-revision-bg); color: var(--st-revision-ink); }
.adm-log-badge[data-accion="cancelar"] { background: var(--risk-bg); color: var(--risk-ink); }
.adm-log-badge[data-accion="referencia"] { background: var(--st-libre-bg); color: var(--st-libre-ink); }
.adm-log-event { font-size: 13.5px; font-weight: 700; color: var(--ink-1); }
.adm-log-who { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.adm-diff { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 10px 0 0; font-size: 12.5px; }
.adm-diff dt { color: var(--ink-3); font-weight: 600; }
.adm-diff dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; }
.adm-before { color: var(--ink-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-3) 50%, transparent); }
.adm-arrow { color: var(--ink-3); }
.adm-empty { color: var(--ink-3); font-style: italic; }
@media (max-width: 760px) {
  .adm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-charts { grid-template-columns: 1fr; }
  .adm-kpi-value { font-size: 22px; }
  .adm-bar-val { display: none; }
  .adm-events li { grid-template-columns: 1fr auto; gap: 2px 12px; }
  .adm-ev-date, .adm-ev-qty { grid-column: 1; }
  .adm-log-who { margin-left: 0; width: 100%; }
}

/* ─── Aviso de mensajes (bandejas, 0019) ───────────────────────────────────── */
.bj-msg-btn { gap: 6px; }
.bj-msg-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px;
  border-radius: 999px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--surface2); color: var(--ink-2);
}
.bj-msg-count[hidden] { display: none; }
.bj-msg-btn.is-unread { color: var(--ink-1); font-weight: 700; }
.bj-msg-btn.is-unread .bj-msg-count { background: var(--yellow); color: #0d0c0a; }
.bj-msg-btn.is-unread::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--danger-ink);
}
.bj-card.has-unread { box-shadow: inset 3px 0 0 var(--yellow), var(--sh-sm); }
/* Cambios del evento sin ver (0024): referencias nuevas, fecha, bebidas… */
.bj-chg {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; width: 100%; margin-top: 10px; padding: 8px 12px;
  border: 1px solid var(--st-revision-ink); border-radius: var(--radius-s); background: var(--st-revision-bg);
  color: var(--st-revision-ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.bj-chg[hidden] { display: none; }
.bj-chg-ok { margin-left: auto; font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
.bj-chg:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bj-card.has-changes { box-shadow: inset 3px 0 0 var(--st-revision-ink), var(--sh-sm); }
.bj-stat.is-msg { font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; background: var(--yellow); border-color: var(--yellow); color: #0d0c0a; }
.bj-stat.is-msg:hover { background: var(--yellow-light); border-color: var(--yellow-light); }
.bj-stat.is-msg:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bj-stat.is-msg[hidden] { display: none; }
.bj-me { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Botón "Activar avisos" (src/push.js): se ve mientras falten; resaltado para que no pase desapercibido */
.bj-push { gap: 6px; white-space: nowrap; }
.bj-push[data-state="off"] { color: var(--accent-text); font-weight: 650; }
.bj-push[hidden] { display: none; }
@media (max-width: 640px) { .bj-me { max-width: 96px; } }

/* ─── Menú de secciones según roles (nav.js, 2026-10-13) ─────────────────────
   Segundo renglón del encabezado de las bandejas. En celular se desliza de lado. */
.bj-nav { border-top: 1px solid var(--tb-border); }
.bj-nav-inner {
  max-width: 960px; margin: 0 auto; padding: 0 14px;
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
}
.bj-nav-inner::-webkit-scrollbar { display: none; }
.bj-nav-item {
  flex-shrink: 0; font: inherit; font-size: 13px; font-weight: 650; white-space: nowrap;
  padding: 10px 10px 9px; border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: var(--tb-muted); cursor: pointer; transition: color .15s, border-color .15s;
}
.bj-nav-item:hover { color: var(--tb-ink); }
.bj-nav-item.is-active { color: var(--tb-ink); border-bottom-color: var(--yellow); }
.bj-nav-item:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
@media (max-width: 640px) { .bj-nav-inner { padding: 0 6px; } }

/* ─── Usuarios (usuarios.js) y Avisos (avisos.js), 2026-10-13 ──────────────── */
.us-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.us-bar .bj-muted { max-width: 56ch; }
.us-panel {
  margin-bottom: 18px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--sh-sm);
}
.us-panel-title { font-size: 16px; font-weight: 700; color: var(--ink-1); margin-bottom: 14px; }
.us-roles { border: 0; padding: 0; margin: 0 0 8px; }
.us-roles legend { margin-bottom: 8px; }
.us-check small { color: var(--ink-3); font-weight: 450; }
.us-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.us-card {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-m); box-shadow: var(--sh-sm);
}
.us-card-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 260px; }
.us-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.us-name { font-size: 15px; font-weight: 700; color: var(--ink-1); }
.us-meta { font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.us-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.us-chip {
  font-size: 12px; font-weight: 650; padding: 2px 9px; border-radius: 999px;
  background: var(--surface2); color: var(--ink-2); border: 1px solid var(--border);
}
.us-chip[data-r="superadmin"] { border-color: var(--yellow); color: var(--accent-text); }
.us-chip-none { color: var(--danger-ink); }
.us-edit { flex: 1 1 100%; padding-top: 12px; border-top: 1px solid var(--border); }

.av-card {
  padding: 16px 18px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-m); box-shadow: var(--sh-sm);
}
.av-card.is-pinned { border-color: var(--yellow); }
.av-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.av-title { font-size: 16px; font-weight: 700; color: var(--ink-1); letter-spacing: -.01em; text-wrap: balance; }
.av-pin {
  display: inline-block; margin-right: 8px; font-size: 11px; font-weight: 700; vertical-align: 2px;
  padding: 1px 7px; border-radius: 999px; background: var(--surface2); color: var(--accent-text);
}
.av-new {
  flex-shrink: 0; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--st-revision-bg); color: var(--st-revision-ink);
}
.av-body { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.av-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }
.av-reads { color: var(--ink-2); font-weight: 600; }
.av-actions { display: flex; gap: 6px; margin-top: 10px; margin-left: -6px; }
.av-del { color: var(--danger-ink); }
.av-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; padding-left: 28px; }
.av-fijar { align-self: end; margin-bottom: 18px; }
.av-modal-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.av-modal .av-card { box-shadow: none; }
@media (max-width: 640px) {
  .av-roles { grid-template-columns: 1fr; }
  .us-panel { padding: 16px 14px; }
}

/* Sin acceso (cuenta sin roles) */
.bj-noaccess { max-width: 420px; margin: 0 auto; text-align: center; }
.bj-noaccess .bj-picker-title { font-size: 22px; margin-bottom: 10px; }
.bj-noaccess p { color: var(--ink-2); font-size: 14px; line-height: 1.55; margin-bottom: 18px; }

/* ─── Configuración (configuracion.js, 2026-10-13) ───────────────────────── */
.cf-block + .cf-block { margin-top: 32px; }
.cf-title { font-size: 18px; font-weight: 700; color: var(--ink-1); margin-bottom: 4px; }
.cf-row { align-items: flex-end; }
.cf-row.is-off { opacity: .65; }
.cf-row-main { display: flex; align-items: flex-end; gap: 8px 20px; flex-wrap: wrap; flex: 1 1 320px; min-width: 0; }
.cf-name { flex: 1 1 180px; margin-bottom: 0; }
.cf-flags { display: flex; gap: 4px 16px; flex-wrap: wrap; }
.cf-flags .check-field { margin-bottom: 8px; }
.cf-row-actions { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }

/* ─── Auditoría (auditoria.js, 2026-10-13) ───────────────────────────────── */
.au-intro { margin-bottom: 14px; max-width: 62ch; }
.au-filtros {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 12px; margin-bottom: 18px;
  padding: 14px 16px 2px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m);
}
.au-filtros .field { flex: 1 1 150px; min-width: 0; }
.au-filtros .au-buscar { flex: 2 1 200px; }
.au-acciones { margin-bottom: 12px; margin-left: auto; }
.au-dia + .au-dia { margin-top: 22px; }
.au-dia-title { font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; }
.au-items {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--sh-sm);
}
.au-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 16px; align-items: start; }
.au-item + .au-item { border-top: 1px solid var(--border); }
.au-hora { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 1px; }
.au-titulo { font-size: 14px; color: var(--ink-1); line-height: 1.45; overflow-wrap: anywhere; }
.au-detalles { margin: 4px 0 0; padding-left: 16px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.au-detalles li { overflow-wrap: anywhere; }
.au-mod {
  font-size: 11.5px; font-weight: 650; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--surface2); color: var(--ink-2); border: 1px solid var(--border);
}
.au-mas { display: flex; justify-content: center; margin-top: 16px; }
@media (max-width: 640px) {
  .au-item { grid-template-columns: minmax(0, 1fr) auto; padding: 12px; }
  .au-hora { grid-column: 1 / -1; }
  .au-acciones { margin-left: 0; width: 100%; }
  .au-acciones .bj-btn { width: 100%; }
}
.cf-sub { margin-bottom: 12px; max-width: 62ch; }
.cf-regla { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 240px; padding-bottom: 10px; }
.cf-valor { flex: 0 0 120px; margin-bottom: 0; }

/* ─── Recetario (recetario.js, 2026-10-13) ────────────────────────────────── */
.rc-filtros { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
.rc-filtros .check-field { margin: 0; }
.rc-buscar { width: 220px; max-width: 100%; }
.rc-card { align-items: center; flex-wrap: nowrap; }
.rc-card.is-off { opacity: .6; }
.rc-art {
  flex: 0 0 52px; width: 52px; height: 64px; border-radius: 8px; overflow: hidden;
  display: grid; place-items: center; background: var(--surface2); color: var(--ink-3);
}
.rc-art img { width: 100%; height: 100%; object-fit: contain; }
.rc-card-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rc-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-chip {
  font-size: 11.5px; font-weight: 650; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--surface2); color: var(--ink-2); border: 1px solid var(--border);
}
.rc-sinvalidar { background: var(--st-cambios-bg); color: var(--st-cambios-ink); border-color: transparent; }
.rc-aviso { min-height: 0; font-size: 12.5px; }
.rc-flags { display: flex; flex-direction: column; justify-content: flex-end; gap: 0; padding-top: 4px; }
.rc-items { border: 0; padding: 0; margin: 4px 0 14px; }
.rc-grupo { margin: 0; padding: 14px 16px 6px; font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border-top: 1px solid var(--border); }
.rc-grupo:first-child { border-top: 0; }
.rc-prep { border: 0; padding: 0; margin: 4px 0 14px; display: flex; flex-direction: column; gap: 10px; }
.rc-items legend { margin-bottom: 8px; }
.rc-items-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.rc-item {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(110px, .8fr) minmax(110px, .8fr) auto 32px; gap: 6px 8px; align-items: center;
  padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface2);
}
.rc-item .check-field { margin: 0; }
.rc-cant { display: flex; align-items: center; gap: 6px; }
.rc-cant input { min-width: 0; }
.rc-unidad { font-size: 12.5px; color: var(--ink-3); min-width: 24px; }
.rc-hint { grid-column: 1 / -1; font-size: 12px; }
.rc-hint:empty { display: none; }
.rc-errs { list-style: none; padding: 0; margin: 0 0 4px; }
.rc-pres { display: flex; align-items: center; gap: 6px; }
.rc-pres input:first-child { flex: 1 1 auto; min-width: 0; }
.rc-pres input:nth-child(2) { width: 90px; flex: 0 0 auto; }
.rc-ins-tabla tr.is-off td { opacity: .55; }
.rc-flags-cell { white-space: normal; }
@media (max-width: 640px) {
  .rc-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rc-item select[data-k="insumo"] { grid-column: 1 / -1; }
  .rc-del { justify-self: end; }
  .rc-card { flex-wrap: wrap; }
}

/* ─── Agenda (agenda.js, 2026-10-14) ─────────────────────────────────────── */
.ag-toolbar { flex-wrap: wrap; gap: 10px 16px; }
.ag-filtros { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.ag-filtros .adm-tabs { margin-bottom: 0; }
.ag-filtros .check-field { margin: 0; }
.ag-card:hover { border-color: var(--border-2); box-shadow: var(--sh-md); }
.ag-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ag-card.is-cancelado { opacity: .6; }
.ag-estado[data-e="cancelado"] { background: var(--risk-bg); color: var(--risk-ink); border-color: transparent; }
.ag-estado[data-e="realizado"] { background: var(--st-aprobado-bg); color: var(--st-aprobado-ink); border-color: transparent; }

.modal-dialog.ag-ficha { max-width: 760px; }
.ag-ficha-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ag-ficha-head .bj-form-title { margin-bottom: 6px; }
.ag-borrador {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; padding: 10px 12px;
  border-radius: var(--radius-m); background: var(--st-revision-bg); color: var(--st-revision-ink); font-size: 13px;
}
.ag-borrador span { flex: 1 1 auto; }
.ag-sec { padding: 14px 0 6px; border-top: 1px solid var(--border); }
.ag-sec:first-of-type { border-top: 0; }
.ag-sec-title { font-size: 14px; font-weight: 700; color: var(--ink-1); margin-bottom: 10px; }
.ag-sec-title small { font-weight: 450; color: var(--ink-3); }
.ag-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.ag-maps { display: flex; gap: 6px; align-items: center; }
.ag-maps input { flex: 1 1 auto; min-width: 0; }
.ag-nuevo-cliente { padding: 10px 12px 0; margin-bottom: 10px; border-radius: var(--radius-m); background: var(--surface2); border: 1px solid var(--border); }
.ag-historial { margin: -2px 0 8px; }
.ag-total { display: flex; align-items: flex-end; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ag-total .field { margin-bottom: 0; width: 200px; }
.ag-suma { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; padding-bottom: 8px; }
.ag-suma.is-off { color: var(--danger-ink); font-weight: 650; }
.ag-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.ag-item {
  display: grid; grid-template-columns: minmax(0, 1.3fr) 150px minmax(0, 1.4fr) 32px; gap: 6px 8px; align-items: center;
  padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface2);
}
/* Sabores de shot de un servicio (0060) */
.ag-shots { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; padding: 8px 0 0 12px; margin-left: 4px; border-left: 2px solid var(--border); }
.ag-shot { display: grid; grid-template-columns: minmax(0, 1fr) 130px 32px; gap: 6px 8px; align-items: center; }
.ag-shots-pie { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.ag-shots-pie .ag-suma { padding-bottom: 0; }
.ag-num { display: flex; align-items: center; gap: 6px; }
.ag-num input { min-width: 0; width: 100%; }
.ag-acciones { flex-wrap: wrap; }
.ag-acciones-izq { display: flex; gap: 8px; flex-wrap: wrap; margin-right: auto; }
.modal-actions button.ag-danger { color: var(--danger-ink); }
@media (max-width: 640px) {
  .ag-row3 { grid-template-columns: 1fr; }
  .ag-item { grid-template-columns: minmax(0, 1fr) 32px; }
  .ag-item > select { grid-column: 1 / -1; }
  .ag-item > .ag-num, .ag-item input[data-k="nota_guarnicion"], .ag-item input[data-k="nota"] { grid-column: 1; }
  .ag-item > .rc-del { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
  .ag-shots { padding-left: 8px; margin-left: 0; }
  .ag-shot { grid-template-columns: minmax(0, 1fr) 32px; }
  .ag-shot > select { grid-column: 1 / -1; }
  .ag-shot > .ag-num { grid-column: 1; }
  .ag-receta-toggle { text-align: left; }
  .ag-total .field { width: 100%; }
  .ag-acciones-izq { width: 100%; margin-right: 0; }
}

/* Agenda: vistas Semana y Mes, historial (2026-10-14) */
.ag-vistas { margin-bottom: 0; }
.ag-barra { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 4px; }
.ag-barra .adm-tabs { margin-bottom: 0; }
.ag-vercanc { margin: 0; }
.ag-nav { display: flex; align-items: center; gap: 6px; }
.ag-periodo { font-size: 16px; font-weight: 700; color: var(--ink-1); margin-left: 6px; }
.ag-semana { display: flex; flex-direction: column; gap: 14px; }
.ag-sdia-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ag-sdia-head h3 { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.ag-sdia.is-hoy .ag-sdia-head h3 { color: var(--accent-text); }
.ag-libre { padding: 2px 0 4px; }
.ag-cal {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-m); overflow: hidden;
}
.ag-cal-dow { background: var(--surface2); padding: 6px 8px; font-size: 12px; font-weight: 650; color: var(--ink-3); text-transform: capitalize; }
.ag-mdia {
  position: relative; min-height: 96px; padding: 6px; background: var(--surface); cursor: pointer;
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.ag-mdia:hover { background: var(--hover-tint); }
.ag-mdia:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--yellow); }
.ag-mdia.is-fuera { background: var(--surface2); }
.ag-mdia.is-fuera .ag-mdia-num { color: var(--ink-3); }
.ag-mdia.is-sel { box-shadow: inset 0 0 0 2px var(--yellow); }
.ag-mdia-num { font-size: 12.5px; font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ag-mdia.is-hoy .ag-mdia-num {
  align-self: flex-start; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; background: var(--yellow); color: #0d0c0a;
}
.ag-mdia-cnt { display: none; }
.ag-mdia-evs { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ag-mchip {
  font: inherit; font-size: 11.5px; text-align: left; padding: 2px 6px; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--st-diseno-bg); color: var(--st-diseno-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.ag-mchip[data-e="cancelado"] { background: var(--risk-bg); color: var(--risk-ink); text-decoration: line-through; }
.ag-mchip[data-e="realizado"] { background: var(--st-aprobado-bg); color: var(--st-aprobado-ink); }
.ag-mchip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ag-mmas { font-size: 11.5px; color: var(--ink-3); padding-left: 4px; }
.ag-cal-detalle { margin-top: 16px; }
.ag-hist { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ag-hist li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; font-size: 13px; color: var(--ink); line-height: 1.45; }
.ag-hist small { display: block; color: var(--ink-3); font-size: 12px; }
.ag-hist-cuando { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .ag-mdia { min-height: 52px; padding: 4px; align-items: center; }
  .ag-mdia-evs { display: none; }
  .ag-mdia.has-ev .ag-mdia-cnt {
    display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--st-diseno-bg); color: var(--st-diseno-ink);
  }
  .ag-cal-dow { padding: 6px 2px; text-align: center; }
  .ag-hist li { grid-template-columns: 1fr; gap: 0; }
  .ag-periodo { font-size: 15px; }
}

/* Semáforo de disponibilidad (core/capacidad.js, 2026-10-14) */
.ag-sf {
  font-size: 11.5px; font-weight: 650; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--surface2); color: var(--ink-2); border: 1px solid var(--border);
}
.ag-sf[data-sf="verde"]     { background: var(--st-aprobado-bg); color: var(--st-aprobado-ink); border-color: transparent; }
.ag-sf[data-sf="amarillo"]  { background: var(--st-revision-bg); color: var(--st-revision-ink); border-color: transparent; }
.ag-sf[data-sf="rojo"]      { background: var(--risk-bg); color: var(--risk-ink); border-color: transparent; }
.ag-sf[data-sf="bloqueado"] { background: var(--surface2); color: var(--ink-3); }
.ag-sdia-head { flex-wrap: wrap; }
.ag-sdia-head h3 { margin-right: auto; }
/* Verde = hay eventos y todavía mucho espacio; sin eventos ("libre") va sin color (2026-10-14). */
.ag-mdia[data-sf="verde"]     { background: color-mix(in srgb, var(--st-aprobado-bg) 65%, var(--surface)); }
.ag-mdia[data-sf="amarillo"]  { background: color-mix(in srgb, var(--st-revision-bg) 60%, var(--surface)); }
.ag-mdia[data-sf="rojo"]      { background: color-mix(in srgb, var(--risk-bg) 70%, var(--surface)); }
.ag-mdia[data-sf="bloqueado"] { background: repeating-linear-gradient(135deg, var(--surface2) 0 6px, var(--surface) 6px 12px); }
.ag-mdia.is-sel { box-shadow: inset 0 0 0 2px var(--yellow); }
.ag-leyenda { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; margin: 0 0 10px; font-size: 12.5px; color: var(--ink-2); }
.ag-leyenda span::before {
  content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px;
}
.ag-leyenda span[data-sf="verde"]::before { background: var(--st-aprobado-ink); }
.ag-leyenda span[data-sf="amarillo"]::before { background: var(--st-revision-ink); }
.ag-leyenda span[data-sf="rojo"]::before { background: var(--risk-ink); }
.ag-leyenda span[data-sf="bloqueado"]::before { background: repeating-linear-gradient(135deg, var(--ink-3) 0 2px, transparent 2px 4px); border: 1px solid var(--ink-3); }
.cf-subtitle { font-size: 14px; font-weight: 700; color: var(--ink-1); margin: 18px 0 4px; }
.cf-exc-form .check-field { margin: 0 0 10px; }
@media (max-width: 640px) {
  .ag-mdia[data-sf="verde"].has-ev .ag-mdia-cnt { background: var(--st-aprobado-ink); color: var(--surface); }
  .ag-mdia[data-sf="amarillo"].has-ev .ag-mdia-cnt { background: var(--st-revision-ink); color: var(--surface); }
  .ag-mdia[data-sf="rojo"].has-ev .ag-mdia-cnt { background: var(--risk-ink); color: var(--surface); }
}

/* ═══ Plataforma: componentes compartidos (.pl-*) — pulido 2026-10-14 ════════════
   Mismo lenguaje que las bandejas (bj-*): una barra de acciones, listas agrupadas en
   un solo panel con divisores (no tarjetas sueltas), ajustes en dos columnas.
   Solo tokens del tema: funciona igual en claro y oscuro. */
.pl-intro { font-size: 14px; line-height: 1.55; color: var(--ink-2); max-width: 64ch; margin: -8px 0 22px; }
.pl-banner {
  display: flex; align-items: flex-start; gap: 10px; margin: -6px 0 20px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface);
  font-size: 13px; line-height: 1.5; color: var(--ink-2);
}
.pl-banner svg { flex-shrink: 0; margin-top: 2px; color: var(--accent-text); }
.pl-banner strong { color: var(--ink-1); font-weight: 650; }

.pl-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m);
  box-shadow: var(--sh-sm); overflow: hidden;
}
.pl-row {
  display: flex; align-items: center; gap: 12px 16px; padding: 14px 18px; min-height: 64px;
  border-top: 1px solid var(--border); background: var(--surface);
}
.pl-row:first-child, .pl-grid-head + * > .pl-row:first-child { border-top: 0; }
.pl-panel > .pl-grid-head + div > .pl-row:first-child { border-top: 1px solid var(--border); }
.pl-row.is-interactive { cursor: pointer; transition: background .15s; }
.pl-row.is-interactive:hover { background: var(--hover-tint); }
.pl-row.is-interactive:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--yellow); }
.pl-row.is-off { background: var(--surface2); }
.pl-row.is-off .pl-row-title, .pl-row.is-off input[type="text"] { color: var(--ink-3); }
.pl-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pl-row-title { font-size: 15px; font-weight: 650; color: var(--ink-1); line-height: 1.3; overflow-wrap: anywhere; }
.pl-row-meta { font-size: 13px; color: var(--ink-3); line-height: 1.45; overflow-wrap: anywhere; }
.pl-row-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.pl-row-trail { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pl-empty-row { color: var(--ink-3); font-size: 13.5px; }
.pl-skel { height: 20px; flex: 1; border: 0; }
.pl-row-edit { flex-basis: 100%; padding: 14px 16px; margin-top: 2px; border-radius: var(--radius-m); background: var(--surface2); }
.pl-row-add { background: var(--surface2); }
.pl-subhead { font-size: 13px; font-weight: 700; color: var(--ink-2); margin: 22px 0 8px; }

/* Avatar con iniciales (Usuarios) */
.pl-avatar {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface2); color: var(--ink-2); font-size: 14px; font-weight: 700; letter-spacing: .01em;
  border: 1px solid var(--border);
}
.pl-avatar[data-tone="super"] { background: var(--yellow-dim); color: var(--accent-text); border-color: transparent; }
.pl-avatar[data-tone="none"] { color: var(--ink-3); border-style: dashed; background: transparent; }

/* Encabezado de columnas en paneles tabulares */
.pl-grid-head {
  display: grid; gap: 12px; padding: 10px 18px; background: var(--surface2);
  font-size: 12px; font-weight: 650; color: var(--ink-3);
}

/* Ajustes: título y explicación a la izquierda, controles a la derecha */
.pl-settings { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 20px 32px; padding: 28px 0; border-top: 1px solid var(--border); }
.pl-settings:first-of-type { border-top: 0; padding-top: 4px; }
.pl-settings-head h2 { font-size: 16px; font-weight: 700; color: var(--ink-1); margin-bottom: 6px; }
.pl-settings-head p { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.pl-settings-head strong { color: var(--ink-1); }
.pl-settings-body { min-width: 0; }
.pl-settings-body > .bj-error { margin-top: 8px; }

/* Campo con unidad: [ 120 ] min */
.pl-field { justify-content: space-between; }
.pl-field-label { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.pl-field .pl-row-title { font-size: 14px; }
.pl-unit-wrap { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pl-unit-wrap input { width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.pl-unit { font-size: 13px; color: var(--ink-3); min-width: 64px; }
.pl-pending {
  display: inline-block; margin-left: 6px; vertical-align: 1px; font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px; background: var(--st-revision-bg); color: var(--st-revision-ink);
}
.pl-actions { justify-content: flex-end; background: var(--surface2); min-height: 0; padding: 12px 18px; }
.pl-actions .bj-error { flex: 1; min-height: 0; margin: 0; }

/* Configuración: bodegas y excepciones en rejilla */
.cf-bod-grid { display: grid; grid-template-columns: minmax(0, 1fr) 56px 92px 56px 76px; align-items: center; gap: 12px; }
.cf-bod-grid > .check-field { justify-content: flex-start; }
.cf-bod-grid input[type="text"] { width: 100%; }
.cf-exc-grid { display: grid; grid-template-columns: 150px 180px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.cf-exc-grid .pl-unit { min-width: 0; }
.cf-exc-grid .pl-unit-wrap input { width: 64px; }
.cf-exc-row .ag-sf { flex-shrink: 0; }

@media (max-width: 860px) {
  .pl-settings { grid-template-columns: 1fr; gap: 12px; padding: 22px 0; }
}
@media (max-width: 640px) {
  .pl-row { padding: 12px 14px; flex-wrap: wrap; }
  .pl-grid-head { display: none; }
  .cf-bod-grid { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 8px; }
  .cf-bod-grid > input[type="text"] { grid-column: 1 / -1; }
  .cf-bod-grid > .check-field[data-lbl]::after { content: attr(data-lbl); font-size: 12.5px; color: var(--ink-2); }
  .cf-bod-grid > button { grid-column: 1 / -1; justify-self: end; }
  .cf-exc-grid { grid-template-columns: 1fr 1fr; }
  .cf-exc-grid > input[name="nota"], .cf-exc-grid > button { grid-column: 1 / -1; }
  .pl-field { flex-wrap: nowrap; }
  .pl-unit { min-width: 0; }
  .pl-unit-wrap input { width: 76px; }
}

/* ─── Pulido de pantallas (impeccable polish, 2026-10-14) ───────────────────── */
/* Agenda */
.ag-toolbar { margin-bottom: 16px; }
.ag-barra { margin-bottom: 14px; min-height: 36px; }
.ag-nav { gap: 12px; }
.ag-nav-btns { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); overflow: hidden; }
.ag-navbtn {
  font: inherit; font-size: 13px; font-weight: 650; height: 32px; min-width: 34px; padding: 0 10px; border: 0;
  background: transparent; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.ag-navbtn + .ag-navbtn { border-left: 1px solid var(--border); }
.ag-navbtn:hover { background: var(--hover-tint); color: var(--ink-1); }
.ag-navbtn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--yellow); }
.ag-periodo { font-size: 18px; font-weight: 750; letter-spacing: -.01em; margin-left: 0; }
.ag-card { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ag-card:hover { border-color: var(--border-2); box-shadow: var(--sh-md); }
.ag-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ag-card.is-cancelado { opacity: .62; }
.ag-card.is-cancelado .bj-card-title { text-decoration: line-through; text-decoration-color: var(--ink-3); }
.ag-card .bj-card-title .ag-estado { vertical-align: 2px; margin-left: 6px; text-decoration: none; display: inline-block; }
.ag-falta { color: var(--ink-3); font-style: italic; }
.ag-sdia { padding-bottom: 6px; }
.ag-sdia + .ag-sdia { border-top: 1px solid var(--border); padding-top: 14px; }
.ag-sdia-head h3 { font-size: 15px; color: var(--ink-1); }
.ag-sdia.is-hoy .ag-sdia-head h3 { color: var(--accent-text); }
.ag-sf[data-sf="libre"] { background: transparent; color: var(--ink-3); border-color: var(--border); }
.ag-cal-dow { font-size: 11.5px; letter-spacing: .02em; padding: 8px 10px; }
.ag-mdia { min-height: 108px; padding: 8px; gap: 4px; }
.ag-mdia-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.ag-mdia-num { font-size: 13px; font-weight: 650; color: var(--ink-1); }
.ag-mdia-cap { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 0 6px; border-radius: 999px; }
.ag-mdia[data-sf="amarillo"] .ag-mdia-cap { background: var(--st-revision-bg); color: var(--st-revision-ink); }
.ag-mdia[data-sf="rojo"] .ag-mdia-cap { background: var(--risk-bg); color: var(--risk-ink); }
.ag-mdia.is-sel { box-shadow: inset 0 0 0 2px var(--yellow); }
.ag-mchip { font-size: 12px; padding: 3px 7px; background: var(--surface2); color: var(--ink-1); border: 1px solid var(--border); }
.ag-mchip:hover { border-color: var(--border-2); }
.ag-mchip b { font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ag-leyenda { margin: 0; justify-content: flex-end; }
.ag-cal-detalle { margin-top: 20px; }
.ag-cal-detalle .ag-sdia-head h3 { font-size: 16px; }

/* Recetario */
.rc-toolbar .rc-filtros { gap: 10px 16px; }
.rc-buscar { width: 240px; }
.rc-row { gap: 14px; }
.rc-art { flex: 0 0 48px; width: 48px; height: 60px; border-radius: 8px; background: var(--surface2); border: 1px solid var(--border); }
.rc-art.is-empty { color: var(--ink-3); border-style: dashed; background: transparent; }
.rc-falta { color: var(--ink-3); font-style: italic; }
.rc-aviso { color: var(--danger-ink); }
.rc-editar { pointer-events: none; }
.rc-row:hover .rc-editar { border-color: var(--ctl-border-h); color: var(--ink-1); }

/* Usuarios */
.us-row { flex-wrap: wrap; }
.us-row > .us-chips { flex-shrink: 0; justify-content: flex-end; }
.us-chip { font-size: 12px; padding: 3px 10px; }

/* Avisos */
.av-card { padding: 18px 20px; }
.av-title { font-size: 17px; }
.av-body { font-size: 14.5px; color: var(--ink-1); max-width: 70ch; }
.av-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.av-meta { margin-top: 0; gap: 4px 12px; }
.av-meta strong { color: var(--ink-2); font-weight: 650; }
.av-actions { margin: 0; align-items: center; gap: 8px; }
.av-reads { font-size: 12px; font-weight: 650; color: var(--ink-2); padding: 3px 9px; border-radius: 999px; background: var(--surface2); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .ag-barra { align-items: flex-start; }
  .ag-nav { width: 100%; justify-content: space-between; flex-direction: row-reverse; }
  .ag-periodo { font-size: 16px; }
  .ag-leyenda { justify-content: flex-start; }
  .ag-mdia { min-height: 54px; padding: 5px 4px; }
  .ag-mdia-top { justify-content: center; }
  .ag-mdia-cap { display: none; }
  .rc-toolbar .rc-filtros { width: 100%; }
  .rc-buscar { width: 100%; }
  .us-row > .us-chips { order: 3; flex-basis: 100%; justify-content: flex-start; padding-left: 56px; }
  .us-row > [data-edit] { margin-left: auto; }
  .av-card { padding: 16px; }
}
.rc-toolbar .rc-filtros { flex-wrap: nowrap; }
.cf-bod-grid > .check-field { justify-content: center; }
.pl-grid-head.cf-bod-grid > span:not(:first-child) { text-align: center; }
@media (max-width: 640px) {
  .rc-toolbar .rc-filtros { flex-wrap: wrap; }
  .cf-bod-grid > .check-field { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .us-row > .pl-row-main { flex: 1 1 0; }
}

/* Agenda: ajustes de receta por evento (parte 4) */
.ag-receta-toggle {
  grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: transparent; border: 0;
  padding: 2px 4px; margin: -2px 0 0 -4px; border-radius: 6px; cursor: pointer;
}
.ag-receta-toggle:hover { color: var(--ink-1); background: var(--hover-tint); }
.ag-receta-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ag-receta-toggle svg { transition: transform .18s var(--ease-out); }
.ag-receta-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.ag-aj-n { color: var(--st-revision-ink); background: var(--st-revision-bg); padding: 1px 8px; border-radius: 999px; font-weight: 700; }
.ag-aj-base { color: var(--ink-3); font-weight: 500; }
.ag-receta {
  grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 8px 12px 10px;
}
.ag-receta-head, .ag-receta-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 120px 150px 56px; gap: 8px 12px; align-items: center;
}
.ag-receta-head { font-size: 11.5px; font-weight: 650; color: var(--ink-3); padding: 4px 0 6px; border-bottom: 1px solid var(--border); }
.ag-receta-row { padding: 6px 0; font-size: 13.5px; }
.ag-receta-row + .ag-receta-row { border-top: 1px solid var(--border); }
.ag-receta-ins { color: var(--ink-1); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ag-receta-ins small { font-weight: 500; color: var(--ink-3); }
.ag-receta-base { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ag-receta-row .check-field { margin: 0; }
.ag-receta-row.is-ajustado .ag-receta-ins::after { content: " · ajustado"; color: var(--st-revision-ink); font-weight: 650; font-size: 12px; }
.ag-receta-row.is-quitado .ag-receta-ins, .ag-receta-row.is-quitado .ag-receta-base { text-decoration: line-through; color: var(--ink-3); }
.ag-receta-row.is-agregado .ag-receta-base { color: var(--st-aprobado-ink); font-weight: 650; }
.ag-receta-row.is-agregado select { min-width: 0; }
.ag-receta-vacia { font-size: 13px; color: var(--ink-3); padding: 4px 0; }
.ag-receta-add { align-self: flex-start; margin-top: 6px; margin-left: -8px; }
@media (max-width: 640px) {
  .ag-receta-head { display: none; }
  .ag-receta-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ag-receta-row .ag-num { grid-column: 1; }
  .ag-receta-base { justify-self: end; }
}

/* Agenda: relación del evento (vista previa, O.1.3) */
.ag-rel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ag-rel-head .ag-sec-title { margin-bottom: 0; }
.ag-rel { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.ag-rel-vacia { font-size: 13.5px; color: var(--ink-3); }
.ag-rel-nota {
  font-size: 13px; line-height: 1.5; color: var(--st-revision-ink); background: var(--st-revision-bg);
  padding: 8px 12px; border-radius: var(--radius-m);
}
.ag-rel-nota strong { font-weight: 700; }
.ag-rel-avisos { margin: 0; padding: 8px 12px 8px 28px; border-radius: var(--radius-m); background: var(--risk-bg); color: var(--risk-ink); font-size: 13px; line-height: 1.5; }
.ag-rel-tabla { border: 1px solid var(--border); border-radius: var(--radius-m); overflow: hidden; background: var(--surface); }
.ag-rel-cat {
  padding: 7px 14px; background: var(--surface2); font-size: 11.5px; font-weight: 700; color: var(--ink-2);
  letter-spacing: .02em; border-top: 1px solid var(--border);
}
.ag-rel-cat:first-child { border-top: 0; }
.ag-rel-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--border); }
.ag-rel-cat + .ag-rel-row { border-top: 0; }
.ag-rel-ins { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ag-rel-ins > span { font-size: 14px; font-weight: 600; color: var(--ink-1); }
.ag-rel-ins small, .ag-rel-cant small { font-size: 12px; color: var(--ink-3); }
.ag-rel-cant { text-align: right; display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.ag-rel-cant strong { font-size: 15px; font-weight: 750; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.ag-rel-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .ag-rel-row { padding: 10px 12px; }
  .ag-rel-pie .bj-btn { width: 100%; }
}

/* ─── Equipo (equipo.js, 2026-10-14) ─────────────────────────────────────── */
.eq-vencida { color: var(--danger-ink); }
.eq-cuenta { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin-bottom: 8px; }
.eq-cuenta strong { color: var(--ink-1); }
.eq-roles { margin-top: 2px; }
.eq-aus { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.eq-aus-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) 150px 150px 130px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.eq-flota-grid { display: grid; grid-template-columns: minmax(0, 1fr) 140px 64px 76px; gap: 12px; align-items: center; }
.eq-flota-grid > input { width: 100%; }
@media (max-width: 860px) {
  .eq-aus-grid { grid-template-columns: 1fr 1fr; }
  .eq-aus-grid > select[name="persona_id"], .eq-aus-grid > input[name="nota"], .eq-aus-grid > button { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .eq-flota-grid { grid-template-columns: minmax(0, 1fr) auto; }
  .eq-flota-grid > input[name="nombre"] { grid-column: 1 / -1; }
  .eq-flota-grid > .check-field[data-lbl]::after { content: attr(data-lbl); font-size: 12.5px; color: var(--ink-2); }
  .eq-flota-grid > button { grid-column: 1 / -1; justify-self: end; }
}

/* Agenda: personal del evento (O.1.7) */
.ag-sug { font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.ag-staff { display: flex; flex-direction: column; margin: 10px 0; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface); }
.ag-staff-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto minmax(0, 200px) 32px; gap: 10px 12px; align-items: center; padding: 10px 12px; }
.ag-staff-row + .ag-staff-row { border-top: 1px solid var(--border); }
.ag-staff-row .check-field { margin: 0; }
.ag-staff-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ag-staff-main .pl-row-title { font-size: 14px; }
.ag-staff-nom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ag-lider { border: 1px dashed var(--border-2); background: none; color: var(--ink-3); font: inherit; font-size: 11.5px; font-weight: 650; line-height: 1; padding: 4px 8px; border-radius: 999px; cursor: pointer; }
.ag-lider:hover { color: var(--ink-1); border-color: var(--ink-3); }
.ag-lider[aria-pressed="true"] { border: 1px solid transparent; background: var(--st-aprobado-bg); color: var(--st-aprobado-ink); }
.ag-lider:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ag-staff-mal { color: var(--danger-ink); font-weight: 600; }
.ag-staff-vacio { font-size: 13px; color: var(--ink-3); padding: 12px; }
.ag-staff-avisos { margin: 0 0 10px; padding: 8px 12px 8px 28px; border-radius: var(--radius-m); background: var(--st-revision-bg); color: var(--st-revision-ink); font-size: 13px; line-height: 1.5; }
.ag-picker { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: var(--radius-m); background: var(--surface2); border: 1px solid var(--border); }
.ag-picker-tit { font-size: 12.5px; color: var(--ink-2); margin-bottom: 2px; }
.ag-pick {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; text-align: left; font: inherit; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); transition: border-color .15s, box-shadow .15s;
}
.ag-pick:hover { border-color: var(--border-2); box-shadow: var(--sh-sm); }
.ag-pick:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ag-pick.is-no { opacity: .7; }
.ag-pick.is-no .pl-row-meta { color: var(--danger-ink); }
.ag-pick-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ag-pick .pl-avatar, .ag-staff-row .pl-avatar { width: 34px; height: 34px; font-size: 12.5px; }
@media (max-width: 640px) {
  .ag-staff-row { grid-template-columns: 34px minmax(0, 1fr) 32px; }
  .ag-staff-row > .check-field, .ag-staff-row > select { grid-column: 2 / -1; }
  .ag-staff-row > .rc-del { grid-column: 3; grid-row: 1; }
  .ag-staff-row > span:empty { display: none; }
}
@media (max-width: 640px) {
  .eq-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: center; }
  .eq-row > .us-chips { grid-column: 2 / -1; grid-row: 2; justify-content: flex-start; }
}

/* Barra de etapas de las bandejas (2026-10-14) */
.bj-etapas-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.bj-etapas {
  display: flex; gap: 2px; padding: 3px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 999px;
}
.bj-etapas::-webkit-scrollbar { display: none; }
.bj-etapa {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; white-space: nowrap;
  font: inherit; font-size: 13px; font-weight: 650; padding: 7px 10px 7px 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-2); cursor: pointer; transition: color .15s, background .15s;
}
.bj-etapa:hover { color: var(--ink-1); }
.bj-etapa.is-active { background: var(--surface); color: var(--ink-1); box-shadow: var(--sh-sm); }
.bj-etapa:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bj-etapa .bj-count { height: 19px; min-width: 20px; font-size: 11.5px; background: var(--surface); color: var(--ink-3); }
.bj-etapa.is-active .bj-count { background: var(--accent-dim); color: var(--accent-text); }
.bj-buscar { flex: 0 1 240px; min-width: 0; height: 36px; }
/* Dentro de una pestaña: la pieza que le toca se queda rellena, las otras se aligeran */
.bj-pieces.has-focus .bj-piece:not(.is-match) { background: transparent; }
.bj-pieces.has-focus .bj-piece:not(.is-match) .bj-piece-kind { color: var(--ink-3); font-weight: 600; }
/* Eventos que ya pasaron: plegados al final */
.bj-pasados { margin-top: 30px; }
.bj-pasados > summary { cursor: pointer; list-style: none; color: var(--ink-2); width: fit-content; border-radius: var(--radius-s); }
.bj-pasados > summary::-webkit-details-marker { display: none; }
.bj-pasados > summary::before { content: "▸"; font-size: 11px; color: var(--ink-3); transition: transform .15s; }
.bj-pasados[open] > summary::before { transform: rotate(90deg); }
.bj-pasados > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bj-solo-pasados { margin: 0; }
@media (max-width: 640px) {
  .bj-etapas-bar { flex-direction: column; align-items: stretch; }
  .bj-buscar { flex-basis: auto; }
}

/* ── Barra lateral de la plataforma (2026-10-14, src/nav.js) ─────────────────────
   Computadora: fija a la izquierda, plegable a solo iconos (.is-plegada).
   ≤900 px: panel deslizable que se abre con ☰ (.side-open) sobre un velo. */
.bj-shell.has-side { display: flex; align-items: flex-start; }
.bj-frame { flex: 1 1 auto; min-width: 0; }
.has-side .bj-top-inner { justify-content: flex-start; }
.bj-side {
  --side-w: 248px;
  position: sticky; top: 0; z-index: 3; flex: 0 0 var(--side-w); width: var(--side-w);
  height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--tb-bg); border-right: 1px solid var(--tb-border);
  transition: width .2s ease, flex-basis .2s ease;
}
.bj-side-head { display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 0 10px 0 18px; flex-shrink: 0; }
.bj-side-brand { flex: 1 1 auto; min-width: 0; display: flex; overflow: hidden; }
.bj-side-brand .app-brand-sm { --logo-w: 96px; flex-direction: column; align-items: flex-start; gap: 5px; }
.bj-side-brand .app-by { padding-left: 0; border-left: 0; gap: 5px; }
.bj-side-brand .nh-logo { width: 74px; }
.bj-side-mark { display: none; width: 30px; height: 30px; border-radius: 8px; }
.bj-side-icon {
  width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-s); background: transparent; color: var(--tb-muted); cursor: pointer;
  transition: background .15s, color .15s;
}
.bj-side-icon:hover { background: var(--tb-hover); color: var(--tb-ink); }
.bj-side-icon:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bj-side-icon .ic { width: 18px; height: 18px; transition: transform .2s ease; }
.bj-side-cerrar { display: none; }
.bj-side-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 4px 10px 14px; scrollbar-width: thin; }
.bj-side-group + .bj-side-group { margin-top: 16px; }
.bj-side-gtitle {
  padding: 4px 10px 6px; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tb-muted);
}
.bj-side-item {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 0 10px;
  border: 0; border-radius: var(--radius-s); background: transparent; color: var(--tb-muted);
  font: inherit; font-size: 14px; font-weight: 600; text-align: left; white-space: nowrap; cursor: pointer;
  transition: background .15s, color .15s;
}
.bj-side-item + .bj-side-item { margin-top: 2px; }
.bj-side-item .ic { flex-shrink: 0; }
.bj-side-item:hover { background: var(--tb-hover); color: var(--tb-ink); }
.bj-side-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bj-side-item.is-active { background: var(--accent-dim); color: var(--tb-ink); }
.bj-side-item.is-active .ic { color: var(--accent-text); }
.bj-side-item[hidden] { display: none; }
.bj-side-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bj-side-count {
  flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 750; font-variant-numeric: tabular-nums; background: var(--yellow); color: #0d0c0a;
}
.bj-side-count[hidden] { display: none; }
.bj-side-foot { flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; padding: 10px; border-top: 1px solid var(--tb-border); }
.bj-side-foot .bj-side-item { min-height: 38px; font-size: 13.5px; }
.bj-side-foot .bj-push[data-state="off"] { color: var(--accent-text); }
.bj-side-foot .bj-me { max-width: none; }
.bj-side-theme { display: inline-flex; justify-content: center; width: 20px; flex-shrink: 0; }
.bj-side-theme svg { width: 18px; height: 18px; }
.bj-menu-btn { display: none; }
.bj-menu-btn .ic { width: 22px; height: 22px; }
.bj-scrim { position: fixed; inset: 0; z-index: 19; background: rgba(10, 12, 16, .45); }
.bj-scrim[hidden] { display: none; }

@media (min-width: 901px) {
  .bj-shell.has-side .bj-top { display: none; }
  /* Plegada: solo iconos; el nombre queda para lectores de pantalla y en el title */
  .is-plegada .bj-side { --side-w: 68px; }
  .is-plegada .bj-side-head { flex-direction: column; justify-content: center; gap: 10px; padding: 16px 0 10px; }
  .is-plegada .bj-side-brand { display: none; }
  .is-plegada .bj-side-mark { display: block; }
  .is-plegada .bj-side-plegar .ic { transform: scaleX(-1); }
  .is-plegada .bj-side-nav, .is-plegada .bj-side-foot { padding-left: 12px; padding-right: 12px; }
  .is-plegada .bj-side-gtitle { display: none; }
  .is-plegada .bj-side-group + .bj-side-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--tb-border); }
  .is-plegada .bj-side-item { justify-content: center; gap: 0; padding: 0; }
  .is-plegada .bj-side-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .is-plegada .bj-side-count { position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; font-size: 10px; }
}
@media (max-width: 900px) {
  .bj-shell.has-side { display: block; }
  .bj-side {
    --side-w: min(300px, 86vw);
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 20; height: auto;
    box-shadow: var(--sh-md); transform: translateX(-102%); visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
  }
  .side-open .bj-side { transform: none; visibility: visible; transition: transform .22s ease, visibility 0s; }
  .bj-side-plegar { display: none; }
  .bj-side-cerrar { display: inline-flex; }
  .has-side .bj-menu-btn { display: inline-flex; margin-left: -6px; flex-shrink: 0; }
  .side-open .bj-scrim { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .bj-side, .side-open .bj-side, .bj-side-icon .ic { transition: none; }
}

/* ── Agenda: mandar a diseño (0036) ─────────────────────────────────────────── */
.ag-recordar {
  margin: 0 0 20px; padding: 14px 16px 10px; border-radius: var(--radius-m);
  background: var(--st-revision-bg); color: var(--st-revision-ink); border: 1px solid transparent;
}
.ag-recordar.is-urgente { background: var(--risk-bg); color: var(--risk-ink); border-color: var(--risk-border); }
.ag-recordar-tit { font-size: 15px; font-weight: 750; letter-spacing: -.01em; margin: 0; }
.ag-recordar-sub { font-size: 12.5px; margin: 2px 0 8px; opacity: .85; }
.ag-recordar-lista { list-style: none; margin: 0; padding: 0; }
.ag-recordar-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.ag-recordar-ev {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 2px 4px; margin-left: -4px;
  border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-s);
}
.ag-recordar-ev:hover .ag-recordar-nombre { text-decoration: underline; }
.ag-recordar-ev:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ag-recordar-nombre { font-size: 14px; font-weight: 700; color: var(--ink-1); overflow-wrap: anywhere; }
.ag-recordar-cuando { font-size: 12.5px; }
.ag-recordar-item[data-n="urgente"] .ag-recordar-cuando { color: var(--risk-ink); font-weight: 650; }
.ag-dchip { margin: 8px 0 0; font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
.ag-dchip[data-n="toca"] { color: var(--st-revision-ink); }
.ag-dchip[data-n="urgente"] { color: var(--risk-ink); }
.ag-dchip[data-n="toca"]::before, .ag-dchip[data-n="urgente"]::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: currentColor; vertical-align: 1px;
}
.ag-diseno-acc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.ag-diseno-acc [data-envio] { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ag-enviado { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--st-aprobado-ink, var(--ink-2)); }
.ag-envio-nota { font-size: 12.5px; color: var(--ink-3); }
.ag-envio-nota.is-tarde { color: var(--risk-ink); font-weight: 650; }
@media (max-width: 640px) {
  .ag-recordar-item { flex-wrap: wrap; }
  .ag-recordar-item .bj-btn { width: 100%; min-height: 38px; }
}

/* ── Inicio: el muro (0037, src/avisos.js) ──────────────────────────────────────
   Columna de lectura angosta; publicaciones como tarjetas con la imagen a todo lo
   ancho; separadores por día; Me gusta / comentarios / encuestas. */
.in-wrap { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.in-skel { height: 180px; }
.in-avatar {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--yellow-dim); color: var(--accent-text); font-size: 14.5px; font-weight: 750; letter-spacing: .01em;
}
.in-avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.in-icon-btn {
  width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-s); background: transparent; color: var(--ink-3); cursor: pointer;
  transition: background .15s, color .15s;
}
.in-icon-btn:hover { background: var(--hover-tint); color: var(--ink-1); }
.in-icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Publicar */
.in-composer { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--sh-sm); }
.in-comp-abrir {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 0; background: transparent;
  font: inherit; font-size: 14.5px; color: var(--ink-3); text-align: left; cursor: pointer; border-radius: var(--radius-m);
}
.in-comp-abrir .ic { color: var(--accent-text); flex-shrink: 0; }
.in-comp-abrir:hover { color: var(--ink-2); background: var(--hover-tint); }
.in-comp-abrir:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.in-comp-abrir[hidden] { display: none; }
.in-comp-form { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 4px; }
.in-comp-form .in-tipos { margin-bottom: 12px; align-self: flex-start; }
.in-ops { border: 0; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 8px; }
.in-ops [data-ops] { display: flex; flex-direction: column; gap: 6px; }
.in-op { display: flex; gap: 6px; align-items: center; }
.in-op input { flex: 1; min-width: 0; }
.in-ops [data-addop] { align-self: flex-start; }
.in-ops [data-addop][hidden] { display: none; }
.in-img-zona { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin: 2px 0 10px; }
.in-img-btn { gap: 7px; cursor: pointer; }
.in-img-btn:focus-within { box-shadow: var(--focus-ring); }
.in-img-prev { position: relative; }
.in-img-prev[hidden] { display: none; }
.in-img-prev img { display: block; max-width: 220px; max-height: 140px; border-radius: var(--radius-s); border: 1px solid var(--border); object-fit: cover; }
.in-img-prev .in-icon-btn { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; background: var(--surface); box-shadow: var(--sh-sm); }
.in-mas-op { margin: 0 0 8px; }
.in-mas-op > summary { cursor: pointer; font-size: 13px; font-weight: 650; color: var(--ink-2); width: fit-content; padding: 4px 0; border-radius: 4px; }
.in-mas-op > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.in-mas-op[open] > summary { margin-bottom: 8px; }

/* Cumpleaños de hoy */
.in-cumple {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius-m);
  background: var(--yellow-dim); color: var(--ink-1);
}
.in-cumple-ic {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--yellow); color: #0d0c0a;
}
.in-cumple-tit { font-size: 17px; font-weight: 750; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.in-cumple-sub { font-size: 13.5px; color: var(--ink-2); margin: 2px 0 0; }

/* Próximamente */
.in-prox { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--sh-sm); padding: 14px 16px 8px; }
.in-prox-tit { font-size: 14px; font-weight: 750; color: var(--ink-1); margin: 0 0 6px; }
.in-prox-lista { list-style: none; margin: 0; padding: 0; }
.in-prox-lista li + li { border-top: 1px solid var(--border); }
.in-prox-item {
  display: flex; align-items: center; gap: 12px; width: calc(100% + 8px); padding: 9px 4px; margin: 0 -4px;
  border: 0; background: transparent; font: inherit; text-align: left; color: inherit; border-radius: var(--radius-s);
}
button.in-prox-item { cursor: pointer; }
button.in-prox-item:hover .in-prox-nom { text-decoration: underline; text-underline-offset: 2px; }
button.in-prox-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.in-prox-fecha, .in-evento-fecha {
  flex-shrink: 0; width: 46px; padding: 6px 0 5px; border-radius: var(--radius-s); text-align: center;
  background: var(--surface2); color: var(--ink-2); font-size: 11.5px; font-weight: 650; line-height: 1.1;
}
.in-prox-fecha b, .in-evento-fecha b { display: block; font-size: 18px; font-weight: 750; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.in-prox-item.is-cumple .in-prox-fecha { background: var(--yellow-dim); }
.in-prox-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.in-prox-nom { font-size: 14px; font-weight: 650; color: var(--ink-1); overflow-wrap: anywhere; }
.in-prox-meta { font-size: 12.5px; color: var(--ink-3); }

/* Separador por día */
.in-dia-grupo { display: flex; flex-direction: column; gap: 14px; }
.in-dia { display: flex; align-items: center; gap: 14px; margin: 10px 0 0; font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
.in-dia::before, .in-dia::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Publicación */
.in-post {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--sh-sm);
  padding: 16px 18px 0; overflow: hidden; scroll-margin-top: 16px; transition: box-shadow .3s ease, border-color .3s ease;
}
.in-post.is-new { border-color: var(--yellow); }
.in-post.is-foco { box-shadow: var(--focus-ring); }
.in-post-head { display: flex; align-items: flex-start; gap: 12px; }
.in-post-who { flex: 1 1 auto; min-width: 0; }
.in-post-title { font-size: 15.5px; font-weight: 700; color: var(--ink-1); line-height: 1.35; letter-spacing: -.005em; margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
.in-post-meta { font-size: 12.5px; color: var(--ink-3); margin: 3px 0 0; }
.in-post-chips { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin: -4px -6px 0 0; }
.in-chip { font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--surface2); color: var(--ink-2); }
.in-chip.is-new { background: var(--yellow); color: #0d0c0a; }
.in-post-body {
  margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--ink-1); white-space: pre-line; overflow-wrap: anywhere; max-width: 68ch;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.in-post-body.is-open { display: block; -webkit-line-clamp: unset; }
.in-mas { border: 0; background: transparent; padding: 2px 0; margin-top: 2px; font: inherit; font-size: 13.5px; font-weight: 650; color: var(--link); cursor: pointer; border-radius: 4px; }
.in-mas[hidden] { display: none; }
.in-mas:hover { text-decoration: underline; text-underline-offset: 2px; }
.in-mas:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.in-post-img {
  display: block; width: calc(100% + 36px); margin: 14px -18px 0; padding: 0; border: 0; background: var(--surface2); cursor: zoom-in;
}
.in-post-img img { display: block; width: 100%; max-height: 560px; object-fit: cover; }
.in-post-img:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--yellow); }

/* Evento interno */
.in-evento { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-s); background: var(--surface2); }
.in-evento-fecha { background: var(--yellow-dim); color: var(--accent-text); }
.in-evento-fecha b { color: var(--accent-text); }
.in-evento-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.in-evento-dia { font-size: 14px; font-weight: 700; color: var(--ink-1); }
.in-evento-l { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.in-evento-l .ic { color: var(--ink-3); flex-shrink: 0; }

/* Encuesta */
.in-poll { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.in-poll-op {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  min-height: 42px; padding: 0 14px; overflow: hidden; border: 1px solid var(--border-2, var(--border)); border-radius: var(--radius-s);
  background: var(--surface); font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-1); text-align: left; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.in-poll-op:hover { border-color: var(--yellow); }
.in-poll-op:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.in-poll-op.is-mio { border-color: var(--yellow); }
.in-poll-bar { position: absolute; top: 0; bottom: 0; left: 0; background: var(--yellow-dim); transition: width .5s cubic-bezier(.16, 1, .3, 1); }
.in-poll-op.is-mio .in-poll-bar { background: color-mix(in srgb, var(--yellow) 32%, transparent); }
.in-poll-txt, .in-poll-pct { position: relative; }
.in-poll-pct { font-size: 13px; font-weight: 750; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.in-poll-meta { font-size: 12.5px; color: var(--ink-3); margin: 2px 0 0; }

/* Pie: Me gusta / Comentar */
.in-post-foot { display: flex; align-items: center; gap: 4px; margin: 12px -10px 0; padding: 6px 0; border-top: 1px solid var(--border); }
.in-post-img + .in-post-foot { margin-top: 0; border-top: 0; }
.in-accion {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 10px; border: 0; border-radius: var(--radius-s);
  background: transparent; font: inherit; font-size: 13.5px; font-weight: 650; color: var(--ink-2); cursor: pointer;
  transition: background .15s, color .15s;
}
.in-accion:hover { background: var(--hover-tint); color: var(--ink-1); }
.in-accion:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.in-accion:disabled { opacity: .6; cursor: default; }
.in-accion.is-on { color: var(--accent-text); }
.in-accion.is-on .ic { fill: var(--yellow-dim); }
.in-n { font-size: 12px; font-weight: 750; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface2); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.in-vistos { margin-left: auto; padding-right: 10px; font-size: 12px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Comentarios */
.in-coments { margin: 0 -18px; padding: 12px 18px 14px; border-top: 1px solid var(--border); background: var(--surface2); }
.in-coments[hidden] { display: none; }
.in-c-cargando { margin: 0 0 10px; font-size: 13px; }
.in-c-lista { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.in-c { display: flex; align-items: flex-start; gap: 8px; }
.in-c-burbuja { flex: 1 1 auto; min-width: 0; padding: 8px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.in-c-quien { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: var(--ink-1); }
.in-c-quien time { font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.in-c-txt { font-size: 14px; line-height: 1.5; color: var(--ink-1); margin: 2px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.in-c-form { display: flex; align-items: center; gap: 8px; }
.in-c-form input { flex: 1 1 auto; min-width: 0; height: 42px; border-radius: 999px; padding: 0 16px; }
.in-enviar {
  flex-shrink: 0; width: 42px; height: 42px; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--yellow); color: #0d0c0a; cursor: pointer; transition: background .15s;
}
.in-enviar:hover { background: var(--yellow-light); }
.in-enviar:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.in-enviar:disabled { opacity: .6; cursor: default; }

@media (max-width: 640px) {
  .in-wrap { gap: 12px; }
  .in-post { padding: 14px 14px 0; }
  .in-post-img { width: calc(100% + 28px); margin: 12px -14px 0; }
  .in-coments { margin: 0 -14px; padding: 12px 14px 14px; }
  .in-post-foot { margin-left: -8px; margin-right: -8px; }
  .in-vistos { display: none; }
  .in-comp-form { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .in-poll-bar, .in-post { transition: none; }
}
.in-saludo { max-width: 680px; margin-left: auto; margin-right: auto; }
.in-prox-zona { display: flex; flex-direction: column; gap: 14px; }
.in-prox-zona:empty { display: none; }

/* Agenda: cumpleaños del equipo (0038) */
.ag-cumple { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 7px 10px; border-radius: var(--radius-s);
  background: var(--yellow-dim); color: var(--ink-1); font-size: 13px; }
.ag-cumple .ic, .ag-mcumple .ic, .ag-lcumple-ic .ic { color: var(--accent-text); flex-shrink: 0; }
.ag-mcumple { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 1px 5px; border-radius: 4px;
  background: var(--yellow-dim); color: var(--accent-text); font-size: 11px; font-weight: 650; }
.ag-mcumple span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-lcumple { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: var(--radius-m);
  background: var(--yellow-dim); color: var(--ink-1); font-size: 14px; }
.ag-lcumple small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.ag-lcumple-fecha { flex-shrink: 0; width: 46px; text-align: center; font-size: 11.5px; font-weight: 650; color: var(--accent-text); line-height: 1.1; }
.ag-lcumple-fecha b { display: block; font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; }
.ag-lcumple-ic { display: inline-flex; }

/* Plataforma (index.html): la PÁGINA se desplaza, no una capa fija. Con html/body en
   overflow:hidden + .bj-shell fijo, en iPhone la vista quedaba corrida al recargar y
   no se podía volver arriba (reportado 2026-10-14). El editor (studio.html) no cambia. */
html.app-platform { background: var(--bj-bg); }
html.app-platform, html.app-platform body { height: auto; min-height: 100%; overflow: visible; }
html.app-platform body { overflow-x: clip; background: var(--bj-bg); }
html.app-platform .bj-shell { position: relative; inset: auto; z-index: auto; overflow: visible; min-height: 100vh; min-height: 100dvh; }

/* ── Fotos de perfil (Mi perfil, 0041) ───────────────────────────────────────── */
.has-foto { padding: 0; overflow: hidden; background: var(--surface2); border-color: transparent; }
.has-foto img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.bj-me-av {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 750; letter-spacing: .01em; background: var(--yellow-dim); color: var(--accent-text); overflow: hidden;
}
.bj-me-av .ic { width: 16px; height: 16px; }
.bj-me-av.has-foto img { width: 22px; height: 22px; }
.bj-btn.bj-me { gap: 8px; }
.mp-ficha { max-width: 560px; }
.mp-top { display: flex; align-items: center; gap: 18px; margin: 4px 0 6px; }
.mp-avatar {
  flex-shrink: 0; width: 88px; height: 88px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--yellow-dim); color: var(--accent-text); font-size: 28px; font-weight: 750; letter-spacing: .01em;
}
.mp-foto-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mp-subir { cursor: pointer; }
.mp-subir:focus-within { box-shadow: var(--focus-ring); }
.mp-nota { flex-basis: 100%; margin: 2px 0 0; font-size: 12.5px; }
.mp-ro { background: var(--surface2); color: var(--ink-2); cursor: default; }
.mp-dato { display: flex; gap: 10px; margin: 6px 0 0; font-size: 13.5px; color: var(--ink-1); overflow-wrap: anywhere; }
.mp-dato span { flex-shrink: 0; min-width: 96px; font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
.mp-datos { margin-top: 2px; }
@media (max-width: 640px) {
  .mp-top { flex-direction: column; align-items: flex-start; }
}

/* ── Ficha del evento por partes (2026-10-14) ───────────────────────────────────
   Menú de partes a la izquierda (arriba en celular); se ve una parte a la vez. */
.modal-dialog.ag-ficha { max-width: 980px; }
.ag-pasos-wrap { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 6px; }
.ag-pasos { position: sticky; top: -22px; display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.ag-paso {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--radius-s);
  background: transparent; font: inherit; text-align: left; color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s;
}
.ag-paso:hover { background: var(--hover-tint); color: var(--ink-1); }
.ag-paso:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ag-paso.is-act { background: var(--accent-dim); color: var(--ink-1); }
.ag-paso-n {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 750; background: var(--surface2); color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.ag-paso.is-act .ag-paso-n { background: var(--yellow); color: #0d0c0a; }
.ag-paso-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ag-paso-t { font-size: 13.5px; font-weight: 650; }
.ag-paso-r { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-paso-r.is-falta { color: var(--risk-ink); }
.ag-cuerpo { min-width: 0; }
.ag-pasos-m { display: none; }
.ag-pm-btn {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-1); cursor: pointer;
}
.ag-pm-btn:hover { background: var(--hover-tint); }
.ag-pm-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ag-pm-btn:disabled { color: var(--ink-3); opacity: .45; cursor: default; background: transparent; }
.ag-pm-centro { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.ag-pm-n { font-size: 11.5px; font-weight: 650; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ag-pm-sel-wrap { position: relative; display: inline-flex; max-width: 100%; }
.ag-pm-sel-wrap::after {
  content: ""; position: absolute; right: 2px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); pointer-events: none;
}
.ag-pm-sel-wrap select {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent; box-shadow: none; height: auto; min-height: 0;
  padding: 0 18px 0 4px; font: inherit; font-size: 16px; font-weight: 750; color: var(--ink-1); text-align: center; text-align-last: center; cursor: pointer; max-width: 100%;
}
.ag-pm-sel-wrap select:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
.ag-pm-barra { grid-column: 1 / -1; display: flex; gap: 4px; padding: 8px 4px 10px; }
.ag-pm-barra span { flex: 1; height: 4px; border-radius: 999px; background: var(--surface2); transition: background .2s ease; }
.ag-pm-barra span.is-on { background: var(--yellow); }
.ag-sig { margin-top: 16px; }
.ag-sig[hidden] { display: none; }
.ag-ficha .ag-acciones { position: sticky; bottom: -22px; z-index: 2; margin: 14px -24px -22px; padding: 12px 24px; background: var(--surface); border-top: 1px solid var(--border); }
@media (max-width: 760px) {
  .ag-pasos-wrap { grid-template-columns: 1fr; gap: 10px; }
  .ag-pasos { display: none; }
  .ag-pasos-m {
    position: sticky; top: -22px; z-index: 3; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center;
    margin: 0 -24px; padding: 8px 12px 0; background: var(--surface); border-bottom: 1px solid var(--border);
  }
  .ag-sig { display: none; }   /* en celular se cambia de parte con las pestañas de arriba */
}

/* ── Relación liberada (O.1.8) ──────────────────────────────────────────────── */
.ag-rel-estado p { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius-s); font-size: 13.5px; background: var(--surface2); color: var(--ink-2); }
.ag-rel-estado[data-e="liberada"] p { background: var(--st-aprobado-bg); color: var(--st-aprobado-ink); }
.ag-rel-estado[data-e="desactualizada"] p { background: var(--st-revision-bg); color: var(--st-revision-ink); }
.ag-rel-estado strong { font-weight: 750; }
.ag-rel-ayuda { margin: 0 0 8px; font-size: 12.5px; }
.ag-rel-llevar { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.ag-rel-llevar input { width: 76px; height: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.ag-rel-llevar span { font-size: 12.5px; color: var(--ink-2); min-width: 64px; }
.ag-rel-row.is-ajustado .ag-rel-llevar input { border-color: var(--yellow); background: var(--yellow-dim); }
.ag-rel-row.is-cero .ag-rel-ins span { color: var(--ink-3); text-decoration: line-through; }
.ag-rel-calc { color: var(--accent-text) !important; }
.ag-rel-agregar { display: grid; grid-template-columns: minmax(0, 1fr) 96px auto; gap: 8px; margin: 12px 0; }
.ag-rel-notas-f { margin-top: 4px; }
.ag-rel-notas { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-1); }
.ag-rel-acc { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ag-dchip[data-n="ok"] { color: var(--st-aprobado-ink); }
@media (max-width: 640px) {
  .ag-rel-agregar { grid-template-columns: 1fr 96px; }
  .ag-rel-agregar .bj-btn { grid-column: 1 / -1; }
  .ag-rel-acc { width: 100%; justify-content: stretch; }
  .ag-rel-acc .bj-btn { flex: 1 1 auto; }
}

/* ── Mis eventos — vista del mixólogo (O.1.9) ─────────────────────────────────── */
.me-root { max-width: 760px; }
.me-root a.bj-btn, .me-root a.bj-icon-btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.me-card {
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  grid-template-columns: 76px minmax(0, 1fr) 20px; align-items: center;
}
.me-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.me-card:active { transform: scale(.995); }
.me-card .bj-card-body { display: flex; flex-direction: column; gap: 3px; }
.me-card-tit { font-size: 16.5px; font-weight: 720; color: var(--ink-1); letter-spacing: -.01em; }
.me-card-dia { font-size: 13px; font-weight: 550; color: var(--ink-2); }
.me-card-dia::first-letter { text-transform: uppercase; }
.me-card-ir { color: var(--ink-3); display: inline-flex; }
.me-card.is-cancelado .me-card-tit { text-decoration: line-through; color: var(--ink-3); }
.me-card.is-pasado { box-shadow: none; }
.me-card.is-pasado .me-card-tit { color: var(--ink-2); }
.bj-date.me-pronto { background: var(--yellow-dim); }
.bj-date.me-pronto .bj-date-rel { color: var(--accent-text); }
.me-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.me-chips:empty { display: none; }
.me-chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 12px; font-weight: 650; white-space: nowrap; background: var(--surface2); color: var(--ink-2);
}
.me-chip[data-t="ok"]        { background: var(--st-aprobado-bg); color: var(--st-aprobado-ink); }
.me-chip[data-t="cambio"]    { background: var(--st-revision-bg); color: var(--st-revision-ink); }
.me-chip[data-t="cancelado"] { background: var(--risk-bg); color: var(--risk-ink); }
.me-chip[data-t="pronto"]    { background: var(--yellow); color: #0d0c0a; }
.me-chip[data-t="degu"]      { background: var(--st-libre-bg); color: var(--st-libre-ink); }
.me-chip-sutil { background: transparent; border: 1px solid var(--border); color: var(--ink-3); }
.me-pasados { margin-top: 12px; }
.me-vacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 40px 20px; }
.me-vacio p { margin: 0; max-width: 42ch; }
.me-vacio-ic { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--yellow-dim); color: var(--accent-text); margin-bottom: 6px; }

/* Detalle */
.me-volver {
  display: inline-flex; align-items: center; gap: 4px; margin: -4px 0 14px -8px; padding: 6px 10px 6px 4px;
  border: 0; background: transparent; border-radius: var(--radius-s); font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer;
}
.me-volver:hover { color: var(--ink-1); background: var(--surface2); }
.me-volver:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.me-hero { margin-bottom: 18px; }
.me-hero-cuando { margin: 0 0 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.me-hero-tit { font-size: clamp(24px, 6vw, 32px); line-height: 1.12; font-weight: 760; letter-spacing: -.02em; color: var(--ink-1); margin: 0; text-wrap: balance; }
.me-hero.is-cancelado .me-hero-tit { text-decoration: line-through; color: var(--ink-3); }
.me-hero-fecha { margin: 8px 0 0; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.me-hero-fecha::first-letter { text-transform: uppercase; }
.me-hero-sub { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-3); }
.me-aviso { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius-s); font-size: 13.5px; background: var(--surface2); color: var(--ink-2); }
.me-aviso[data-t="cancelado"] { background: var(--risk-bg); color: var(--risk-ink); }

.me-sec { padding: 20px 0 4px; border-top: 1px solid var(--border); }
.me-sec-tit { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.me-sec-tit small { font-size: 13px; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.me-datos { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--sh-sm); }
.me-dato { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; }
.me-dato + .me-dato { border-top: 1px solid var(--border); }
.me-dato-ic { color: var(--ink-3); display: inline-flex; align-self: start; padding-top: 2px; }
.me-dato-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.me-dato-l { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.me-dato-v { font-size: 14.5px; color: var(--ink-1); white-space: pre-line; overflow-wrap: anywhere; }
.me-dato-acc { display: flex; gap: 6px; }

.me-gente { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--sh-sm); }
.me-persona { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; }
.me-persona + .me-persona { border-top: 1px solid var(--border); }
.me-persona .me-av { width: 40px; height: 40px; }
.me-persona-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.me-persona-n { font-size: 14.5px; font-weight: 650; color: var(--ink-1); }
.me-persona-n small { font-weight: 500; color: var(--ink-3); }
.me-persona-r { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-3); }
.me-persona-acc { display: flex; gap: 4px; }
.me-persona-acc .bj-icon-btn { width: 40px; height: 40px; }

.me-sabores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.me-sabores li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--radius-m); background: var(--surface2); }
.me-sabor-n { display: flex; flex-direction: column; gap: 2px; font-size: 15px; font-weight: 650; color: var(--ink-1); min-width: 0; }
.me-sabor-n small { font-size: 12.5px; font-weight: 450; color: var(--ink-3); }
.me-sabores strong { font-size: 18px; font-weight: 760; color: var(--ink-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.me-sabores strong small { font-size: 12px; font-weight: 550; color: var(--ink-3); }

.me-rel-acc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.me-rel-acc .bj-btn { display: inline-flex; align-items: center; gap: 6px; }

.me-recetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.me-receta { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--sh-sm); padding: 14px; }
.me-receta-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.me-receta-head .rc-art { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.me-receta-tit { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.me-receta-tit h3 { margin: 0; font-size: 16px; font-weight: 720; color: var(--ink-1); }
.me-ings { list-style: none; margin: 0; padding: 0; }
.me-ings li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px dashed var(--border); align-items: baseline; }
.me-ings li:first-child { border-top: 0; }
.me-ing-cant { font-size: 14px; font-weight: 750; color: var(--ink-1); font-variant-numeric: tabular-nums; text-align: right; }
.me-ing-n { font-size: 14px; color: var(--ink-1); display: flex; flex-direction: column; gap: 1px; }
.me-ing-n small { font-size: 12px; color: var(--ink-3); }
.me-ing-g { font-size: 12.5px; color: var(--ink-3); }
.me-ings li.is-ajustado .me-ing-cant { color: var(--accent-text); }
.me-ings li.is-quitado, .me-ings li.is-quitado .me-ing-n { color: var(--ink-3); }
.me-aj { color: var(--accent-text) !important; }
.me-receta-nota { margin: 10px 0 0; padding: 8px 10px; border-radius: var(--radius-s); background: var(--surface2); font-size: 13px; color: var(--ink-2); }
.me-receta-vacia { margin: 0; }
/* Modo de preparación (0058): Por shaker / Por trago, pasos y garnitura */
.me-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.me-sec-head .me-sec-tit { margin: 0; }
.me-vista { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--border); }
.me-vista-btn { font: inherit; font-size: 13px; font-weight: 650; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--ink-3); cursor: pointer; }
.me-vista-btn[aria-pressed="true"] { background: var(--surface); color: var(--ink-1); box-shadow: var(--sh-sm); }
.me-vista-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--yellow); }
.me-receta-sub { margin: 12px 0 4px; font-size: 12px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.me-receta-sub small { font-weight: 600; letter-spacing: 0; text-transform: none; }
.me-receta-cuanto { margin: 0 0 6px; font-size: 13px; font-weight: 650; color: var(--ink-2); }
.me-pasos { margin: 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.45; color: var(--ink-1); }
.me-pasos li::marker { color: var(--ink-3); font-weight: 700; font-variant-numeric: tabular-nums; }
.me-garn { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.me-garn strong { color: var(--ink-1); font-weight: 650; }

@media (max-width: 640px) {
  .me-card { grid-template-columns: 64px minmax(0, 1fr) 16px; gap: 12px; padding: 12px; }
  .me-card .bj-date { flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 10px 2px; align-self: stretch; }
  .me-card .bj-date-day { font-size: 24px; }
  .me-card .bj-date-month { margin-top: 3px; font-size: 12px; }
  .me-card .bj-date-rel { margin: 6px 0 0; font-size: 10.5px; }
  .me-rel-acc .bj-btn { flex: 1 1 auto; justify-content: center; }
  .me-dato { grid-template-columns: 22px minmax(0, 1fr); }
  .me-dato-acc { grid-column: 2; }
}

/* Sin señal (O.1.9 parte 2) */
.me-sinsenal { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 16px; padding: 10px 12px; border-radius: var(--radius-s); background: var(--st-revision-bg); color: var(--st-revision-ink); }
.me-sinsenal p { margin: 0; font-size: 13.5px; flex: 1 1 220px; }
.me-guardado { margin: 18px 0 0; }
.ag-rel-estado p.ag-rel-cel { margin-top: -6px; background: var(--surface2); color: var(--ink-2); }
.ag-rel-estado p.ag-rel-cel[data-ok="no"] { background: var(--st-revision-bg); color: var(--st-revision-ink); }
.ag-rel-estado p.ag-rel-cel[data-ok="si"] { background: var(--st-aprobado-bg); color: var(--st-aprobado-ink); }

/* Mis eventos: calendario (2026-10-14) */
.me-vistas { margin-bottom: 16px; }
.me-cal-nav { margin-bottom: 4px; }
.me-periodo { text-transform: none; }
.me-periodo::first-letter { text-transform: uppercase; }
.me-cal-resumen { margin: 0 0 10px; }
.me-cal .ag-mdia[data-me-tono="agendado"]  { background: color-mix(in srgb, var(--yellow-dim) 70%, var(--surface)); }
.me-cal .ag-mdia[data-me-tono="realizado"] { background: color-mix(in srgb, var(--st-aprobado-bg) 55%, var(--surface)); }
.me-cal-dia { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--ink-1); }
.me-cal-dia::first-letter { text-transform: uppercase; }
@media (max-width: 640px) {
  .me-cal .ag-mdia.has-ev[data-me-tono="agendado"] .ag-mdia-cnt  { background: var(--yellow); color: #0d0c0a; }
  .me-cal .ag-mdia.has-ev[data-me-tono="realizado"] .ag-mdia-cnt { background: var(--st-aprobado-bg); color: var(--st-aprobado-ink); }
  .me-cal .ag-mdia.has-ev[data-me-tono="cancelado"] .ag-mdia-cnt { background: var(--risk-bg); color: var(--risk-ink); }
}

/* Degustaciones (O.1.6, 0047) */
.ag-degu-chip { background: var(--st-libre-bg); color: var(--st-libre-ink); border-color: transparent; }
.ag-degu-de { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--radius-s); background: var(--surface2); }
.ag-degu-de p { margin: 0; font-size: 13.5px; color: var(--ink-1); }
.ag-degu-ayuda { margin: 10px 0; }
.ag-degu-res { margin: 0; padding: 10px 12px; border-radius: var(--radius-s); font-size: 13.5px; background: var(--st-aprobado-bg); color: var(--st-aprobado-ink); }
.ag-degu-acc { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.ag-degu-lista { border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface); margin-bottom: 10px; }
.ag-degu-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding: 10px 12px; }
.ag-degu-row + .ag-degu-row { border-top: 1px solid var(--border); }
.ag-degu-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ag-degu-main .rc-chip { margin-left: 6px; }
.ag-degu-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.ag-degu-form { max-width: 560px; max-height: calc(100dvh - 40px); overflow-y: auto; }
.ag-degu-sabores { border: 1px solid var(--border); border-radius: var(--radius-m); padding: 10px 12px 12px; margin: 4px 0 12px; display: flex; flex-direction: column; gap: 6px; }
.ag-degu-sabores legend { padding: 0 4px; }
.ag-degu-sabores small { color: var(--ink-3); font-weight: 450; }
.ag-degu-sabores select { margin-top: 4px; }
.ag-degu-prev { margin: 0 0 12px; font-size: 13px; color: var(--ink-2); }
.cf-degu-row { justify-content: space-between; flex-wrap: wrap; }
.cf-degu-row select { max-width: 220px; }
.cf-degu-col { flex-direction: column; align-items: stretch; }
.cf-degu-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-degu-col select { max-width: 320px; }
.ag-corte { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius-s); font-size: 13px; background: var(--st-revision-bg); color: var(--st-revision-ink); }

/* Mis eventos en pestañas (0055): Resumen · Relación · Salida · Montaje · Cierre */
.me-tabs { display: flex; gap: 0; margin: 4px 0 6px; padding: 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); }
.me-tabs::-webkit-scrollbar { display: none; }
.me-tab { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; font: inherit; font-size: 13px; font-weight: 650; padding: 12px 4px 11px; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; background: none; color: var(--ink-3); cursor: pointer; min-height: 44px; }
.me-tab:hover { color: var(--ink-1); }
.me-tab.is-active { color: var(--ink-1); border-bottom-color: var(--yellow); }
.me-tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--yellow); border-radius: 6px 6px 0 0; }
.me-tab-n:empty { display: none; }
.me-tab-n { font-size: 10.5px; font-weight: 700; padding: 1px 5px; border-radius: 999px; background: var(--surface2); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.me-tab-n[data-listo="si"] { background: var(--st-aprobado-bg); color: var(--st-aprobado-ink); }
.me-panel { padding-top: 14px; }
.me-panel > .me-sec:first-child { border-top: 0; padding-top: 6px; }
.me-tab-ayuda { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }

/* Relación palomeada */
.me-rel-avance { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; font-size: 13.5px; font-weight: 650; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.me-rel-barra { display: block; height: 8px; border-radius: 999px; background: var(--surface2); overflow: hidden; }
.me-rel-barra > span { display: block; height: 100%; background: var(--yellow); border-radius: inherit; transition: width .2s; }
.me-rel-lista .me-check-it { grid-template-columns: 26px minmax(0, 1fr) auto; }
.me-rel-cat { padding: 8px 14px 6px; font-size: 11.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); background: var(--surface2); }
.me-check-fase li.me-rel-cat + li { border-top: 0; }
.me-rel-cant { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 1px; font-variant-numeric: tabular-nums; }
.me-rel-cant strong { font-size: 14.5px; font-weight: 700; color: var(--ink-1); white-space: nowrap; }
.me-rel-cant small { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.me-rel-hechos { margin-top: 20px; }
.me-rel-hechos .me-check-it.is-hecho .me-rel-cant strong { color: var(--ink-3); font-weight: 600; }

/* Montaje: fotos */
.me-foto-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-bottom: 14px; cursor: pointer; }
.me-foto-btn.is-busy { opacity: .7; pointer-events: none; }
.ft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.ft-mini { position: relative; aspect-ratio: 1; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-s); overflow: hidden; background: var(--surface2); cursor: zoom-in; }
.ft-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft-mini:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ft-mini.is-subiendo { cursor: default; }
.ft-mini.is-subiendo .bj-skel { position: absolute; inset: 0; height: auto; margin: 0; border-radius: 0; }
.ft-sin { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ink-3); }
.ft-vacio { margin: 0; padding: 18px 14px; text-align: center; font-size: 13.5px; color: var(--ink-3); border: 1px dashed var(--border-2); border-radius: var(--radius-m); }
.ft-visor { position: fixed; inset: 0; z-index: 1000; background: rgba(8, 9, 12, .94); display: flex; flex-direction: column; color: #f1f4fa; }
.ft-visor-top { display: flex; align-items: center; gap: 8px; padding: max(10px, env(safe-area-inset-top)) 12px 10px 16px; }
.ft-visor-info { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: #c9cfdb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-visor-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #f1f4fa; cursor: pointer; }
.ft-visor-btn:hover { background: rgba(255, 255, 255, .18); }
.ft-visor-btn:focus-visible, .ft-visor-nav:focus-visible { outline: 2px solid #f5cc4a; outline-offset: 2px; }
.ft-visor-img { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 8px max(12px, env(safe-area-inset-bottom)); }
.ft-visor-img img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.ft-visor-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #f1f4fa; cursor: pointer; }
.ft-visor-nav.is-prev { left: 10px; }
.ft-visor-nav.is-next { right: 10px; }

/* Cierre */
.me-cierre-ok { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radius-m); background: var(--st-aprobado-bg); color: var(--st-aprobado-ink); font-size: 13.5px; line-height: 1.45; }
.me-cierre-fotos { margin: 0; padding: 12px 14px; border-radius: var(--radius-m); font-size: 14px; background: var(--st-revision-bg); color: var(--st-revision-ink); }
.me-cierre-fotos[data-ok="si"] { background: var(--st-aprobado-bg); color: var(--st-aprobado-ink); }
.me-panel .me-check-fase + .me-check-fase { margin-top: 18px; }
.me-bajas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.me-baja { display: grid; grid-template-columns: minmax(0, 1fr) 76px 36px; gap: 8px; align-items: center; }
.me-baja input { text-align: center; font-variant-numeric: tabular-nums; }
.me-bajas-vacio { margin: 0; font-size: 13.5px; }
.me-bajas-fijas { list-style: none; margin: 0 0 10px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface); }
.me-baja-fija { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 10px; align-items: center; padding: 10px 12px; }
.me-baja-fija + .me-baja-fija { border-top: 1px solid var(--border); }
.me-baja-fija > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14.5px; }
.me-baja-fija small { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.me-baja-fija input { text-align: center; font-variant-numeric: tabular-nums; min-height: 44px; }
.me-pend { margin: 0; }
.me-cerrar { width: 100%; min-height: 50px; margin-top: 20px; font-size: 15px; }
.me-cierre-senal { margin: 8px 0 0; text-align: center; font-size: 13px; }

/* Bitácora del evento (Agenda, 0055) */
.ag-bit-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 4px 0 6px; }
.ag-bit-res > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface); }
.ag-bit-res > div[data-ok="si"] { background: var(--st-aprobado-bg); border-color: transparent; }
.ag-bit-res span { font-size: 12px; font-weight: 650; color: var(--ink-3); }
.ag-bit-res > div[data-ok="si"] span, .ag-bit-res > div[data-ok="si"] strong { color: var(--st-aprobado-ink); }
.ag-bit-res strong { font-size: 15px; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.ag-bit-h { display: flex; align-items: baseline; gap: 8px; margin: 20px 0 8px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.ag-bit-h small { font-weight: 600; color: var(--ink-3); }
.ag-bit-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; color: var(--ink-2); }
.ag-bit-lista li.is-hecho { color: var(--ink-1); }
.ag-bit-lista li > span { display: inline-block; width: 16px; color: var(--ink-3); }
.ag-bit-lista li.is-hecho > span { color: var(--st-aprobado-ink); font-weight: 700; }
.ag-bit-lista small { color: var(--ink-3); }
.ag-bit-lista em { font-style: normal; color: var(--ink-3); }
.ag-bit-dato strong { color: var(--ink-1); }
.ag-bit-cierre { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-2); }
.ag-bit-vacio { margin: 0; font-size: 13.5px; }

/* Checklist de salida y montaje (0049) */
.me-check-pend { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius-s); font-size: 13px; background: var(--st-revision-bg); color: var(--st-revision-ink); }
.me-check-fase + .me-check-fase { margin-top: 16px; }
.me-check-fase h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: 15px; font-weight: 720; color: var(--ink-1); }
.me-check-fase h3 span { font-size: 12.5px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.me-check-fase ul { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--sh-sm); overflow: hidden; }
.me-check-fase li + li { border-top: 1px solid var(--border); }
.me-check-it {
  width: 100%; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: center; text-align: left;
  min-height: 52px; padding: 10px 14px; border: 0; background: transparent; font: inherit; color: var(--ink-1); cursor: pointer;
}
.me-check-it:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--yellow); }
.me-check-box { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--ctl-border); display: inline-flex; align-items: center; justify-content: center; color: #0d0c0a; transition: background .12s, border-color .12s; }
.me-check-it.is-hecho .me-check-box { background: var(--yellow); border-color: var(--yellow); }
.me-check-txt { display: flex; flex-direction: column; gap: 1px; font-size: 14.5px; }
.me-check-it.is-hecho .me-check-txt { color: var(--ink-2); }
.me-check-txt small { font-size: 12px; color: var(--ink-3); }
.ag-check { margin-top: 16px; border: 1px solid var(--border); border-radius: var(--radius-m); padding: 10px 14px; background: var(--surface); }
.ag-check > summary { cursor: pointer; font-size: 14px; color: var(--ink-1); }
.ag-check > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.ag-check h4 { margin: 12px 0 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.ag-check ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--ink-2); }
.ag-check li.is-hecho { color: var(--ink-1); }
.ag-check li span { display: inline-block; width: 16px; color: var(--ink-3); }
.ag-check li.is-hecho span { color: var(--st-aprobado-ink); font-weight: 700; }
.ag-check small { color: var(--ink-3); }
.cf-check-fase { flex-direction: column; align-items: stretch; }
.cf-check-lista { margin: 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 6px; }
.cf-check-lista li { display: grid; grid-template-columns: minmax(0, 1fr) 32px 32px 32px; gap: 4px; align-items: center; }
.cf-check-lista li::marker { color: var(--ink-3); font-size: 12px; }
.cf-check-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }

/* Equipo: días que puede ir (0051) */
.eq-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.eq-dia {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; min-height: 52px;
  border-radius: var(--radius-s); border: 1px solid var(--ctl-border); background: var(--surface); color: var(--ink-1);
  font: inherit; font-size: 15px; font-weight: 750; cursor: pointer;
}
.eq-dia small { font-size: 10.5px; font-weight: 600; color: var(--ink-3); text-align: center; line-height: 1.1; }
.eq-dia[data-v="si"] { background: var(--st-aprobado-bg); border-color: transparent; color: var(--st-aprobado-ink); }
.eq-dia[data-v="si"] small { color: var(--st-aprobado-ink); }
.eq-dia[data-v="recurso"] { background: var(--st-revision-bg); border-color: transparent; color: var(--st-revision-ink); }
.eq-dia[data-v="recurso"] small { color: var(--st-revision-ink); }
.eq-dia[data-v="no"] { color: var(--ink-3); text-decoration: line-through; }
.eq-dia:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.eq-dias-ayuda { margin: 8px 0 0; }
.cf-cap-col { flex-direction: column; align-items: stretch; gap: 10px; }
.cf-tramos { display: flex; flex-direction: column; gap: 6px; }
.cf-tramo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-2); }
.cf-tramo input { width: 80px; text-align: right; font-variant-numeric: tabular-nums; }
.cf-ext-bod { max-width: 260px; margin: 0; }
.cf-ext-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cf-ext-dias label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 650; color: var(--ink-3); text-align: center; }
.cf-ext-dias input { text-align: center; padding-left: 4px; padding-right: 4px; }
.cf-kit-ayuda { margin: -2px 0 10px; font-size: 13px; color: var(--ink-3); line-height: 1.45; max-width: 64ch; }
.cf-kit-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cf-kit-grid { display: grid; gap: 8px; align-items: center; padding: 6px 18px; min-width: min-content; background: var(--surface); }
.cf-kit-head { font-size: 12px; font-weight: 650; color: var(--ink-3); border-bottom: 1px solid var(--border); padding-top: 10px; padding-bottom: 10px; }
.cf-kit-th { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; }
.cf-kit-th input { width: 100%; text-align: center; padding-left: 4px; padding-right: 4px; }
.cf-kit-th-pie { display: inline-flex; align-items: center; gap: 4px; }
.cf-kit-x { border: 0; background: none; color: var(--ink-3); font-size: 12px; line-height: 1; padding: 4px; border-radius: 6px; cursor: pointer; }
.cf-kit-x:hover { color: var(--danger-ink); background: var(--hover-tint); }
.cf-kit-x:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cf-kit-row + .cf-kit-row { border-top: 1px solid var(--border); }
.cf-kit-row input { width: 100%; min-width: 0; text-align: center; font-variant-numeric: tabular-nums; padding-left: 4px; padding-right: 4px; }
.cf-kit-ins { display: flex; flex-direction: column; font-size: 13.5px; color: var(--ink-1); min-width: 0; }
.cf-kit-ins small { font-size: 11.5px; color: var(--ink-3); }
.cf-kit-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cf-kit-add select { flex: 1 1 220px; max-width: 320px; }

/* Servicios contratados (0056) */
[data-add-servicio] { margin-bottom: 18px; }

/* Servicios contratados como casillas (agenda.js, 2026-10-19) */
.ag-svs { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; }
.ag-sv-grupo > .ag-sv:not(.is-on) { display: inline-flex; margin-right: 6px; }
.ag-sv-grupo h4 { font-size: 11.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; }
.ag-sv { padding: 7px 10px; border-radius: var(--radius-m); border: 1px solid transparent; }
.ag-sv + .ag-sv { margin-top: 2px; }
.ag-sv.is-on { background: var(--surface2); border-color: var(--border); }
.ag-sv .check-field { font-size: 13.5px; }
.ag-sv .check-field small { color: var(--ink-3); font-weight: 450; }
.ag-sv-det { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 2px 38px; }
.ag-sv-det .ag-item.ag-sv-fila { grid-template-columns: minmax(0, 1fr) 32px; padding: 0; border: 0; background: none; }
.ag-sv-det .ag-sv-fila > :not(.rc-del):not(.ag-shots) { grid-column: 1; }
.ag-sv-det .ag-sv-fila > .rc-del { grid-column: 2; grid-row: 1; }
.ag-sv-det .ag-sv-fila:has(> .ag-num + select, > .ag-num + input) { grid-template-columns: 200px minmax(0, 1fr) 32px; }
.ag-sv-det .ag-sv-fila:has(> .ag-num + select, > .ag-num + input) > :nth-child(2) { grid-column: 2; grid-row: 1; }
.ag-sv-det .ag-sv-fila:has(> .ag-num + select, > .ag-num + input) > .rc-del { grid-column: 3; }
.ag-sv-otra { align-self: flex-start; }
@media (max-width: 640px) {
  .ag-sv-det { padding-left: 0; }
  .ag-sv-det .ag-sv-fila:has(> .ag-num + select, > .ag-num + input) { grid-template-columns: minmax(0, 1fr) 32px; }
  .ag-sv-det .ag-sv-fila:has(> .ag-num + select, > .ag-num + input) > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .ag-sv-det .ag-sv-fila:has(> .ag-num + select, > .ag-num + input) > .rc-del { grid-column: 2; }
}

/* Kit Menú Personalizado en el paso Menús y tags (agenda.js, 2026-10-19) */
.ag-kit-nota { margin: -2px 0 12px; padding: 10px 12px; border-radius: var(--radius-m); font-size: 13px; line-height: 1.45; background: var(--surface2); border: 1px solid var(--border); color: var(--ink-2); }
.ag-kit-nota[data-kit="si"] { background: var(--st-aprobado-bg); border-color: transparent; color: var(--st-aprobado-ink); }
.ag-kit-ojo { color: var(--danger-ink); font-weight: 650; }
.bj-kit { margin: 2px 0 6px; font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.bj-kit[data-kit="generico"] { color: var(--st-revision-ink); }