/* ── Brand tokens (per-event — updated by applyEventBranding() in events.js) ── */
/* --brand-* are the semantic names; --yt-* are backward-compat aliases.        */
/* All existing code using --yt-orange etc. keeps working automatically.         */
/* ── Identidad Aluna (rebranding, "Chromatic Density"): oscuro por defecto en TODA
   la app, incluidas páginas públicas sin toggle (login/signup/etc — nunca tienen
   [data-theme], así que heredan directo de :root). El modo claro sigue disponible
   como opción explícita vía [data-theme="light"] (toggle en la app, no en público).
   --brand-* siguen siendo tenant-editables en runtime (applyEventBranding) — lo que
   cambia aquí es solo el DEFAULT cuando el tenant no fijó su propio color. ── */
:root {
  /* Semantic brand tokens — JS sets these when event loads */
  --brand-primary:   #C7F000;
  --brand-secondary: #FF8A5B;
  --brand-extra1:    #A78BFA;
  --brand-accent:    #FF8A5B;
  --brand-extra2:    #5EEAD4;
  --brand-gradient:  linear-gradient(90deg,#C7F000,#FF8A5B);
  /* Una sola familia tipográfica, en toda la app (funcional y marketing): Inter.
     Orbitron/Montserrat quedan como OPCIÓN de branding que cada tenant/evento activa si quiere
     (ver js/settings.js DEFAULTS + catálogo de fuentes). Eventos que ya guardaron su propia
     fuente NO se ven afectados por este cambio. */
  --brand-font-title:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --brand-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Backward-compat aliases — existing 200+ references keep working */
  --yt-orange:   var(--brand-primary);
  --yt-red:      var(--brand-secondary);
  --yt-purple:   var(--brand-extra1);
  --yt-yellow:   var(--brand-accent);
  --yt-green:    var(--brand-extra2);
  --yt-gradient: var(--brand-gradient);
  --font-title:  var(--brand-font-title);
  --font-body:   var(--brand-font-body);

  /* Acentos "energía" fijos de marca (uso esparcido: CTAs primarios, estados activos,
     highlights) — independientes de --brand-primary para cuando se necesita el tono exacto
     sin importar si el tenant personalizó su color de evento. */
  --energy-lime:  #C7F000;
  --energy-peach: #FF8A5B;

  /* Dark theme — DEFAULT de plataforma ("Chromatic Density"): Void Black / Deep Charcoal
     de fondo, grises cálidos Oatmeal de texto. */
  --bg:#09090B;--bg-page:#09090B;--bg-surface:#121212;
  --bg-raised:#1a1a1c;--bg-border:#2a2a2e;--bg-border-light:#222224;
  --text:#E0E0E0;--text-2:#c4c4c4;--text-muted:#b0b0b0;--text-faint:#6e6a63;
  /* Header alineado con --surface-1/--divider de la capa productividad (css/tokens-productivity.css):
     antes #0d0d0f/#2a2a2e no coincidía con el riel (#18181b, mismo valor que --surface-1) —
     topbar y riel se veían como dos grises distintos pegados uno junto al otro ("no integrado",
     feedback en vivo 2026-07-12). Mismo tono, ambos leen como UN solo chrome. */
  --header-bg:#18181b;--header-border:#2b2b2f;
  --shadow-sm:0 1px 4px rgba(0,0,0,.35);
  --shadow-md:0 4px 20px rgba(0,0,0,.55);

  /* ── Tokens v2 (Aluna UI, Sprint 0 — docs/PLAN_ALUNA_UI.md) ──────────────
     Espaciado base 4px · radios 3 niveles · semánticos fijos (NO tenant-editable) ── */
  --sp-mult: 1;   /* modo compacto opt-in multiplica esto por ~0.8 (ver .density-compact) */
  --sp-1: calc(4px  * var(--sp-mult));
  --sp-2: calc(8px  * var(--sp-mult));
  --sp-3: calc(12px * var(--sp-mult));
  --sp-4: calc(16px * var(--sp-mult));
  --sp-5: calc(20px * var(--sp-mult));
  --sp-6: calc(24px * var(--sp-mult));
  --sp-7: calc(32px * var(--sp-mult));

  --radius-input: 6px;
  --radius-card:  10px;
  --radius-modal: 14px;

  /* Semánticos: fijos del sistema, el tenant NUNCA los sobreescribe (aprendizaje + seguridad).
     Matiz ajustado para fondo oscuro (default de plataforma). */
  --ok:      #16a34a; --ok-bg:   #0f2417; --ok-border:   #14532d;
  --err:     #dc2626; --err-bg:  #2a1414; --err-border:  #7f1d1d;
  --warn:    #d97706; --warn-bg: #2a1f0a; --warn-border: #78350f;
  --info:    #2563eb; --info-bg: #0f1f33; --info-border: #1e3a5f;

  /* Escala tipográfica 12/13/14/16/18/22 + KPIs 26 (piso 12px — UX-030) */
  --fs-1: 12px; --fs-2: 13px; --fs-3: 14px; --fs-4: 16px; --fs-5: 18px; --fs-6: 22px; --fs-kpi: 26px;
}
/* Modo claro — opción explícita (toggle dentro de la app; las páginas públicas no lo ofrecen). */
[data-theme="light"]{
  --bg:#ffffff;--bg-page:#f5f4f0;--bg-surface:#ffffff;
  --bg-raised:#f8f7f4;--bg-border:#e5e3dc;--bg-border-light:#f0ede8;
  --text:#1a1a1a;--text-2:#444;--text-muted:#6b6660;--text-faint:#98938c;
  /* Mismo criterio que en :root (dark): header alineado con --surface-1/--divider claros. */
  --header-bg:#faf9f7;--header-border:#e7e5de;
  --shadow-sm:0 1px 4px rgba(0,0,0,.07);
  --shadow-md:0 4px 16px rgba(0,0,0,.10);
  --ok-bg:#f0fdf4; --ok-border:#bbf7d0;
  --err-bg:#fef2f2; --err-border:#fecaca;
  --warn-bg:#fffbeb; --warn-border:#fde68a;
  --info-bg:#eff6ff; --info-border:#bfdbfe;
}
/* Modo compacto (opt-in, UX densidad) — aplicado por settings.js sobre <html> o <body> */
.density-compact{ --sp-mult: 0.8; }
/* Números tabulares (UX-100): dinero/cantidades alineadas en columnas de tablas y KPIs */
.tabular-nums, .yt-money, .yt-kpi-value{ font-variant-numeric: tabular-nums; font-feature-settings:'tnum' 1; }

/* ── Shell CSS Variables ── */
:root {
  --sidebar-width-expanded: 220px;
  --sidebar-width-collapsed: 48px;
  --topbar-height: 48px;
  --content-max-width: 1400px;
  --transition-sidebar: 200ms ease;
  /* ── Escala de capas (UX-063). Regla: TODO z-index nuevo usa un token, nunca un número.
     Capas del shell: 10–40 · overlays de módulos legados: ~99995–100090 (migrar a --z-modal-legacy)
     · toasts SIEMPRE hasta arriba (100400; además .toast-stack usa Popover API = top-layer real)
     · <dialog> nativo (DialogService) vive en el top-layer: no necesita z-index. ── */
  --z-sidebar: 10;
  --z-drawer: 20;
  --z-overlay: 19;
  --z-modal: 30;
  --z-modal-legacy: 100000;
  --z-toast: 100400;
}

*{box-sizing:border-box;margin:0;padding:0}
html, body { margin:0; padding:0; height:100%; overflow:hidden; }
body { font-family:var(--brand-font-body),-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; color:var(--text); background:var(--bg-page); transition:background .25s,color .25s; }

/* ── App Shell ── */
/* §5.2 PLAN_MAIL_NATIVE_RESPONSIVE.md (Fase 1): 100vh en Safari móvil incluye el área que tapa la
   barra de direcciones (no la resta como dvh/svh) — el shell podía quedar más alto que el viewport
   REALMENTE visible, cortando contenido bajo la barra. `height:100dvh` (dynamic viewport height)
   se declara DESPUÉS de 100vh a propósito: un navegador que no reconoce `dvh` ignora esa línea por
   completo (valor inválido = declaración descartada, la cascada NO llega a sobreescribir nada) y
   se queda con el 100vh de arriba; uno que sí lo soporta usa la última declaración válida, 100dvh.
   Mismo criterio ya usado en el propio ejemplo del plan — cero riesgo en navegadores viejos. */
.app-shell { display:flex; flex-direction:column; height:100vh; height:100dvh; width:100%; max-width:100%; overflow:hidden; background:var(--bg-page); }
html,body{ max-width:100%; overflow-x:hidden; }   /* evita scroll horizontal global */

/* Skip link */
.skip-link { position:absolute; top:-100px; left:16px; z-index:50; padding:8px 16px; background:var(--yt-orange); color:#fff; border-radius:0 0 8px 8px; font-size:13px; font-weight:600; transition:top .15s; }
.skip-link:focus { top:0; }

/* cbanner replaced by topbar alert system */
#cbanner { display: none !important; }

/* Date input dark mode */
[data-theme="dark"] input[type="date"] { color-scheme: dark; }
input[type="date"].stg-date { cursor: pointer; }

/* ── Topbar alerts ── */
.topbar-alert-wrap { position:relative; flex-shrink:0; display:flex; align-items:center; }
.alert-badge { position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; border-radius:8px; background:#f59e0b; color:#fff; border:2px solid var(--header-bg); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 3px; pointer-events:none; line-height:1; }
.alert-panel { position:absolute; top:calc(100% + 8px); right:0; background:var(--bg-surface); border:1px solid var(--bg-border); border-radius:10px; padding:5px; min-width:320px; max-width:420px; z-index:var(--z-modal); display:none; box-shadow:var(--shadow-md); }
.alert-panel.open { display:block; }
.alert-panel-hdr { padding:8px 12px; font-size:12px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--bg-border); margin-bottom:4px; }
.alert-item { display:flex; align-items:flex-start; gap:8px; padding:8px 10px; border-radius:7px; transition:background .1s; }
.alert-item:hover { background:var(--bg-raised); }
.alert-item-icon { flex-shrink:0; font-size:12px; margin-top:1px; }
.alert-item-msg { flex:1; font-size:12px; color:var(--text-2); line-height:1.45; }
.alert-item-x { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:12px; padding:2px 5px; border-radius:4px; flex-shrink:0; font-family:inherit; transition:background .1s; }
.alert-item-x:hover { background:var(--bg-border); color:var(--text); }
.alert-empty { padding:14px 12px; text-align:center; font-size:12px; color:var(--text-muted); }

/* ── Topbar ── (rediseño F0, docs/PLAN_F0_SHELL.md — "más integrado/elegante/SaaS": menos
   jerarquía compitiendo con la barra de búsqueda, agrupación con divisores sutiles, tokens
   de la capa productividad para que el header se sienta nativo al riel/panel contextual). */
.topbar {
  display:flex; align-items:center; gap:10px;
  height:var(--topbar-height); flex-shrink:0;
  background:var(--header-bg); border-bottom:1px solid var(--header-border);
  padding:0 16px; z-index:var(--z-sidebar);
  position:relative;
}
.topbar::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:var(--yt-gradient);
}
.topbar-hamburger {
  display:none; width:36px; height:36px; border:none; background:none;
  cursor:pointer; color:var(--text-muted); border-radius:8px;
  align-items:center; justify-content:center; flex-shrink:0;
  transition:background .15s;
}
.topbar-hamburger:hover { background:var(--bg-raised); }
/* El bloque marca ya NO es flex-shrink:0 — con nombres de organización largos, el título/
   subtítulo se truncan con ellipsis (ver abajo) en vez de forzar overflow del header
   completo (root cause real: a ~769-880px de ancho un nombre largo podía desbordar la fila). */
.topbar-brand { display:flex; align-items:center; gap:8px; min-width:0; flex-shrink:1; }
.topbar-logo { width:24px; height:24px; object-fit:contain; flex-shrink:0; border-radius:6px; }
.topbar-title {
  /* UXU-4 (Sprint A P2): 12px uppercase con letter-spacing leía "etiqueta de sistema", no marca —
     14px semibold sin mayúsculas forzadas es el tamaño legible que pide la auditoría. */
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; font-size:14px; font-weight:600;
  color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px; min-width:0;
}
.topbar-sub {
  /* UXU-1 (panel de auditoría 2026-07-12): opacity:.8 sobre --text-muted (ya de por sí un
     tono atenuado) componía dos reducciones de contraste y caía bajo AA en tema claro.
     --text-muted por sí solo ya es el tono "secundario" correcto — sin opacity extra. */
  font-size:12px; color:var(--text-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; min-width:0;
}
/* Separador sutil solo cuando hay subtítulo real (settings.js/events.js pueden dejarlo
   vacío con textContent='' → :empty sigue matcheando, no aparece una raya huérfana). */
.topbar-sub:not(:empty) { padding-left:9px; margin-left:1px; border-left:1px solid var(--divider, var(--bg-border)); }
.topbar-spacer { flex:1; }
.topbar-controls { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.topbar-icon-btn {
  width:34px; height:34px; padding:0; border-radius:9px; cursor:pointer;
  border:none; background:transparent; color:var(--text-muted); font-size:14px;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s,color .15s;
}
.topbar-icon-btn:hover { background:var(--surface-2, var(--bg-raised)); color:var(--text); }
.topbar-icon-btn:active { background:var(--surface-3, var(--bg-raised)); }
.topbar-icon-btn:focus-visible { outline:2px solid var(--brand-primary); outline-offset:2px; }
.topbar-save { font-size:12px; padding:5px 14px; white-space:nowrap; }
/* Divisor sutil: agrupa los iconos utilitarios (colapsar/buscar/ayuda/tema) y separa la
   identidad (avatar) — mismo criterio de "agrupación con divisor" que pide el rediseño. */
.topbar-user-wrap { position:relative; margin-left:4px; padding-left:10px; border-left:1px solid var(--divider, var(--bg-border)); }
/* Bug real reportado 2026-07-13 (capturas del usuario): en topbars angostos (móvil/tablet) el
   avatar se veía OVALADO. Causa: como hijo de un contenedor flex (.topbar-controls), sin
   flex-shrink:0 el ancho se comprime bajo presión de espacio mientras el alto fijo se mantiene —
   un círculo perfecto (border-radius:50%) se vuelve óvalo en cuanto width≠height. flex-shrink:0 +
   min-width/min-height (no solo width/height, que ceden ante otras reglas con más especificidad)
   lo blindan en cualquier ancho. */
.topbar-avatar { width:34px; height:34px; min-width:34px; min-height:34px; flex-shrink:0; border-radius:50%; background:var(--yt-gradient); color:#fff; border:none; cursor:pointer; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; font-family:inherit; transition:opacity .15s; }
.topbar-avatar:hover { opacity:.85; }
.topbar-avatar:active { opacity:.7; }
/* ══ Barra = Larry (G2, docs/PLAN_LARRY_RAG_GUI.md dec.29-32) ══════════════
   La barra de búsqueda ES Larry: orbe + placeholder + hint ⌘K. En móvil colapsa
   a un FAB flotante. El overlay unificado vive en el top-layer (AppModal). Superficies
   --surface-2/3 (capa productividad): el chip de búsqueda "flota" un nivel por encima del
   header (--header-bg ≈ --surface-1) en vez de compartir el mismo gris plano. */
.larry-bar {
  display:flex; align-items:center; gap:9px; flex:0 1 320px; min-width:150px;
  position:relative; overflow:hidden;
  height:34px; padding:0 8px 0 6px; margin-right:2px;
  border:1px solid var(--divider, var(--bg-border)); border-radius:11px; background:var(--surface-2, var(--bg-raised));
  color:var(--text-muted); cursor:text; font-family:inherit;
  transition:border-color .18s, background .18s, box-shadow .25s, transform .15s;
}
.larry-bar:hover {
  border-color:transparent; background:var(--surface-3, var(--bg-surface)); transform:translateY(-1px);
  box-shadow:0 4px 18px -6px color-mix(in srgb,var(--brand-primary) 50%,transparent),
             0 0 0 1px color-mix(in srgb,var(--brand-primary) 45%,transparent);
}
.larry-bar:focus-visible { outline:2px solid var(--brand-primary); outline-offset:2px; }
/* Brillo lima que cruza la barra de vez en cuando — invita a hacer clic, sin distraer. */
.larry-bar::after {
  content:''; position:absolute; top:0; left:-45%; width:38%; height:100%; pointer-events:none;
  background:linear-gradient(100deg, transparent, color-mix(in srgb,var(--brand-primary) 22%,transparent), transparent);
  transform:skewX(-18deg); animation:larry-bar-shimmer 6.5s ease-in-out infinite;
}
@keyframes larry-bar-shimmer { 0%,74%{left:-45%} 88%,100%{left:135%} }
.larry-bar-orb { width:22px; height:22px; flex-shrink:0; display:inline-flex; }
.larry-bar-ph { flex:1; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text-muted); }
.larry-bar-kbd { flex-shrink:0; font-size:12px; font-weight:600; color:var(--text-muted); border:1px solid var(--divider, var(--bg-border)); border-radius:6px; padding:1px 6px; background:var(--surface-1, var(--bg-surface)); }

.larry-fab { display:none; }

/* ══ Larry 2026 — halo/partículas del avatar (orbe / rinoceronte) ═══════════════
   Glow lima detrás + anillo "radar" al pensar/trabajar. Solo transform/opacity
   (compositor, 60fps). isolation:isolate para ordenar glow(detrás)/SVG/anillo. */
.larry { isolation:isolate; }
.larry .l-svg { position:relative; z-index:1; }
.larry::before {
  content:''; position:absolute; inset:-15%; z-index:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb,var(--brand-primary) 55%,transparent), transparent 68%);
  opacity:0; transition:opacity .4s ease;
}
.larry::after {
  content:''; position:absolute; inset:0; z-index:2; border-radius:50%; pointer-events:none;
  border:2px solid color-mix(in srgb,var(--brand-primary) 55%,transparent); opacity:0;
}
.larry[data-state="thinking"]::before,.larry[data-state="working"]::before { opacity:1; animation:larry-glow-breathe 2.2s ease-in-out infinite; }
.larry[data-state="thinking"]::after, .larry[data-state="working"]::after  { animation:larry-radar 1.9s ease-out infinite; }
.larry[data-state="happy"]::before,.larry[data-state="celebrating"]::before { opacity:1; animation:larry-glow-breathe 1.1s ease-in-out infinite; }
.larry-bar:hover .larry::before, .larry-fab:hover .larry::before, .larry-bar:hover .larry::after { opacity:.7; }
@keyframes larry-glow-breathe { 0%,100%{opacity:.45; transform:scale(1)} 50%{opacity:.9; transform:scale(1.12)} }
@keyframes larry-radar { 0%{transform:scale(.66); opacity:.6} 80%{opacity:0} 100%{transform:scale(1.5); opacity:0} }
@media (prefers-reduced-motion:reduce){
  .larry::after { animation:none; opacity:0; }
  .larry::before { animation:none; }
  .larry[data-state="thinking"]::before,.larry[data-state="working"]::before,
  .larry[data-state="happy"]::before,.larry[data-state="celebrating"]::before { opacity:.5; }
}

/* Overlay unificado. AppModal ya da el <dialog> top-layer transparente a pantalla
   completa; el wrap pinta el fondo oscuro y centra la tarjeta (evita pelear con la
   especificidad de dialog.appmod). */
.larry-ov-wrap { position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:center; padding:12vh 16px 16px; background:rgba(12,11,10,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.larry-ov--fallback { position:fixed; inset:0; z-index:var(--z-modal-legacy); }
.larry-ov-card {
  width:560px; max-width:100%; position:relative;
  background:color-mix(in srgb, var(--bg-surface) 85%, transparent);
  -webkit-backdrop-filter:blur(22px) saturate(1.5); backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid color-mix(in srgb, var(--bg-border) 60%, transparent); border-radius:20px;
  box-shadow:0 30px 80px -16px rgba(0,0,0,.55), 0 8px 30px -10px color-mix(in srgb,var(--brand-primary) 35%,transparent);
  overflow:hidden; font-family:inherit;
  animation:larry-ov-in .4s cubic-bezier(.34,1.3,.5,1) both;
}
/* Halo con gradiente lima→durazno girando MUY sutil (anillo de 1.5px via mask). */
.larry-ov-card::before {
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none; z-index:3;
  background:linear-gradient(130deg, var(--brand-primary), var(--brand-secondary), transparent 55%, var(--brand-primary));
  background-size:220% 220%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  opacity:.5; animation:larry-halo 7s ease-in-out infinite;
}
@keyframes larry-ov-in { from{opacity:0; transform:translateY(12px) scale(.96)} to{opacity:1; transform:none} }
@keyframes larry-halo { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.larry-ov-hd { display:flex; align-items:center; gap:10px; padding:13px 15px; border-bottom:1px solid color-mix(in srgb,var(--bg-border) 55%,transparent); }
.larry-ov-av { width:40px; height:40px; flex-shrink:0; display:inline-flex; }
.larry-ov-name { flex:1; font-size:14px; font-weight:700; color:var(--text); letter-spacing:.01em; }
.larry-ov-x { border:none; background:none; cursor:pointer; font-size:16px; color:var(--text-muted); width:28px; height:28px; border-radius:8px; transition:transform .12s, background .12s, color .12s; }
.larry-ov-x:hover { background:color-mix(in srgb,var(--brand-primary) 14%,transparent); color:var(--text); }
.larry-ov-x:active { transform:scale(.9); }
.larry-ov-input { width:100%; box-sizing:border-box; padding:16px 18px; border:none; border-bottom:1px solid color-mix(in srgb,var(--bg-border) 60%,transparent); font-size:16px; font-family:inherit; background:transparent; color:var(--text); outline:none; transition:border-color .15s, box-shadow .15s; }
.larry-ov-input:focus { border-bottom-color:var(--brand-primary); box-shadow:0 1px 0 0 var(--brand-primary); }
.larry-ov-input::placeholder { color:var(--text-muted); }
.larry-ov-chips { display:flex; gap:7px; flex-wrap:wrap; padding:12px 15px 6px; }
.larry-chip { font-size:12px; font-weight:600; font-family:inherit; padding:6px 12px; border-radius:999px; border:1px solid var(--bg-border); background:var(--bg-raised); color:var(--text-2); cursor:pointer; transition:background .14s, color .14s, border-color .14s, transform .12s, box-shadow .18s; }
.larry-chip:hover { border-color:var(--brand-primary); transform:translateY(-1px); }
.larry-chip:active { transform:scale(.95); }
/* Chip activo: fondo TENUE de marca + borde sólido + texto en --text (mismo tratamiento que el
   hover de .larry-ov-x, dos líneas arriba) — antes era un gradiente lima→brand-primary quemado
   (#d6ff3a) que chocaba contra cualquier color de marca del tenant. Deliberadamente NO relleno
   sólido + texto blanco (patrón usado en .ytp-pill.on/.nu-side-it.on): el default de plataforma
   --brand-primary es lima claro (#C7F000) y blanco sobre lima no pasa contraste AA — aquí el color
   de marca solo tiñe el fondo/borde, nunca es el único portador del texto, así que se lee bien sin
   importar qué tan claro sea el brand-primary del tenant. Cero gradientes ni colores nuevos quemados. */
.larry-chip.on { background:color-mix(in srgb,var(--brand-primary) 20%,var(--bg-raised)); border-color:var(--brand-primary); color:var(--text); font-weight:700; box-shadow:0 2px 10px -4px color-mix(in srgb,var(--brand-primary) 45%,transparent); }
.larry-ov-hint { padding:4px 16px 15px; font-size:12px; color:var(--text-muted); }
/* Sugerencias EN VIVO del overlay de Larry (typeahead clasificado) */
.larry-ov-sugg { max-height:46vh; overflow-y:auto; padding:2px 8px 10px; border-top:1px solid color-mix(in srgb,var(--bg-border) 55%,transparent); }
.larry-ov-sugg[hidden] { display:none; }
/* Vista previa de la conversación reciente (estado vacío del panel de sugerencias, antes de que el
   usuario escriba). Reusa el MISMO hilo persistido por js/larry-global.js (memKey/localStorage) —
   NO duplica el chat: es un atajo de 1-3 mensajes + botón que abre el panel real. Se sustituye por
   los resultados de búsqueda en vivo apenas el usuario escribe (misma zona, .larry-ov-sugg). */
.larry-ov-recent { padding:9px 8px 6px; }
.larry-ov-recent-hd { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 1px 8px; }
.larry-ov-recent-lbl { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); }
/* color:var(--text), NO var(--brand-primary) — el mismo lima claro de default que obligó a
   retocar .larry-chip.on de arriba falla contraste AA como texto sobre el card claro. El acento
   de marca vive en el borde al :hover, nunca solo como color de letra. */
.larry-ov-recent-full { border:none; background:none; padding:3px 6px; border-radius:6px; font-size:12px; font-weight:700; font-family:inherit; color:var(--text); cursor:pointer; white-space:nowrap; }
.larry-ov-recent-full:hover { background:color-mix(in srgb,var(--brand-primary) 14%,transparent); text-decoration:underline; }
.larry-ov-recent-msgs { display:flex; flex-direction:column; gap:5px; }
.larry-ov-recent-msg { display:flex; gap:6px; font-size:12.5px; line-height:1.4; color:var(--text-2); padding:2px 1px; overflow:hidden; }
.larry-ov-recent-msg b { flex-shrink:0; color:var(--text); font-weight:600; }
.larry-ov-recent-msg span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.larry-sugg-sect { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); padding:9px 8px 4px; }
.larry-sugg-row { display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:none; background:none; border-radius:9px; padding:8px 9px; cursor:pointer; font-family:inherit; color:var(--text); transition:background .12s; }
.larry-sugg-row:hover, .larry-sugg-row:focus-visible { background:color-mix(in srgb,var(--brand-primary) 12%,transparent); outline:none; }
.larry-sugg-ic { flex-shrink:0; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; font-size:17px; }
.larry-sugg-photo { width:26px; height:26px; border-radius:50%; object-fit:cover; }
.larry-sugg-ini { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--brand-primary); color:#15181d; font-size:11px; font-weight:700; }
.larry-sugg-main { flex:1; min-width:0; }
.larry-sugg-title { display:block; font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.larry-sugg-smart { font-size:12px; }
.larry-sugg-sub { display:block; font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.larry-sugg-badge { flex-shrink:0; font-size:11px; color:var(--text-2); background:var(--bg-raised); border:1px solid var(--bg-border); padding:2px 8px; border-radius:8px; }

@media (max-width:768px) {
  .larry-bar { display:none; }
  .larry-fab {
    display:flex; align-items:center; justify-content:center; position:fixed;
    right:16px; bottom:calc(56px + env(safe-area-inset-bottom,0px) + 14px);
    width:56px; height:56px; padding:0; border-radius:50%;
    border:none; cursor:pointer; background:var(--bg-surface);
    box-shadow:0 8px 24px -4px rgba(0,0,0,.35),
               0 0 0 1px color-mix(in srgb,var(--brand-primary) 40%,transparent),
               0 6px 20px -6px color-mix(in srgb,var(--brand-primary) 65%,transparent);
    /* IOS-5 (panel de auditores, native-materials.css): antes +5 (≈15) quedaba POR DEBAJO de
       .native-fab de módulo (calc(var(--z-sidebar,10) + 22), ≈32) — solo evitado porque la
       separación vertical de --native-float-y impide que se toquen. +25 es defensa en profundidad:
       Larry SIEMPRE por encima visualmente de cualquier superficie flotante de módulo
       (.native-fab/.native-float-pill/.native-bottom-toolbar), sin depender solo de esa separación. */
    z-index:calc(var(--z-sidebar) + 25); transition:transform .15s, box-shadow .2s;
    animation:larry-fab-pulse 3s ease-in-out infinite;
  }
  .larry-fab:active { transform:scale(.92); }
  .larry-fab-orb { width:36px; height:36px; display:inline-flex; }
  .larry-ov-wrap { padding-top:8vh; }
  /* IOS-4 (auditoría en vivo 2026-07-14): el FAB de Larry (position:fixed, 56px + 14px + safe-
     area desde abajo) tapaba las últimas palabras de texto real en paneles scrolleables tipo
     drawer (confirmado en Mi Perfil → Cuentas conectadas) — reserva el mismo espacio como padding
     para que el contenido nunca quede detrás del botón flotante. */
  .profile-drawer-inner{ padding-bottom:calc(56px + env(safe-area-inset-bottom,0px) + 14px + 56px + 12px); }
  .larry-ov-card { border-radius:16px; }
}
/* Pulso lima del FAB: un halo que respira para atraer el pulgar (compositor: box-shadow). */
@keyframes larry-fab-pulse {
  0%,100% { box-shadow:0 8px 24px -4px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb,var(--brand-primary) 40%,transparent), 0 0 0 0 color-mix(in srgb,var(--brand-primary) 45%,transparent); }
  50%     { box-shadow:0 8px 24px -4px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb,var(--brand-primary) 55%,transparent), 0 0 0 12px color-mix(in srgb,var(--brand-primary) 0%,transparent); }
}
@media (prefers-reduced-motion:reduce){
  .larry-bar::after, .larry-fab, .larry-ov-card, .larry-ov-card::before { animation:none !important; }
}

.topbar-user-menu { position:absolute; top:calc(100% + 6px); right:0; background:var(--bg-surface); border:1px solid var(--bg-border); border-radius:10px; padding:5px; min-width:200px; z-index:var(--z-modal); display:none; box-shadow:var(--shadow-md); }
.topbar-user-menu.open { display:block; }
.user-menu-header { padding:8px 12px; font-size:12px; color:var(--text-muted); font-weight:500; }
.user-menu-sep { height:1px; background:var(--bg-border); margin:4px 0; }
.user-menu-item { display:flex; align-items:center; gap:8px; width:100%; padding:8px 12px; background:none; border:none; cursor:pointer; font-size:13px; color:var(--text-2); border-radius:7px; font-family:inherit; transition:background .1s,color .1s; text-align:left; }
.user-menu-item:hover { background:var(--bg-raised); color:var(--text); }
/* CAB-3 (Sprint B): foco visible propio — antes el ring azul nativo del navegador desentonaba
   con el resto del chrome (mismo criterio que .arail-btn:focus-visible). Necesario ahora que el
   menú abre con foco automático en el primer ítem y se navega con flechas. */
.user-menu-item:focus-visible { outline:2px solid var(--brand-primary); outline-offset:-2px; background:var(--bg-raised); color:var(--text); }
.user-menu-item.danger { color:#dc2626; }
.user-menu-item.danger:hover { background:#fef2f2; }
[data-theme="dark"] .user-menu-item.danger:hover { background:#2d1515; color:#fca5a5; }

/* UXU-2 (Sprint A): #theme-toggle ahora trae 2 SVG (sol/luna) en vez de emoji por textContent —
   data-theme en <html> decide cuál se ve, sin JS dedicado al ícono (parrilla.js solo cambia el
   atributo). Default (sin atributo) = claro → luna visible (acción: pasar a oscuro). */
#theme-toggle svg { width:16px; height:16px; }
#theme-toggle .theme-ico-sun { display:none; }
[data-theme="dark"] #theme-toggle .theme-ico-sun { display:block; }
[data-theme="dark"] #theme-toggle .theme-ico-moon { display:none; }

/* UXU-3 (Sprint A P2): menú "···" ≤1100px — mismo patrón visual que .topbar-user-menu. Los
   botones de Tema/Ayuda se REPARENTAN aquí (shell.js), no se clonan. */
.topbar-overflow-wrap { position:relative; display:none; }
.topbar-overflow-menu {
  position:absolute; top:calc(100% + 6px); right:0; background:var(--bg-surface);
  border:1px solid var(--bg-border); border-radius:10px; padding:5px; min-width:160px;
  z-index:var(--z-modal); display:none; box-shadow:var(--shadow-md);
}
.topbar-overflow-menu.open { display:block; }
.topbar-overflow-menu .topbar-icon-btn { width:100%; height:auto; justify-content:flex-start; gap:8px; padding:8px 12px; border-radius:7px; font-size:13px; color:var(--text-2); }
.topbar-overflow-menu .topbar-icon-btn:hover { color:var(--text); }
.topbar-overflow-menu .topbar-icon-btn svg { flex-shrink:0; }
/* Etiqueta de texto — solo existe/se ve una vez reparentado (shell.js la crea al mover el botón
   la primera vez); en la fila de iconos normal del topbar no hay .topbar-overflow-label así que
   no hay nada que ocultar ahí. */
.topbar-overflow-label { margin-left:2px; }

/* ── Shell body ── */
.shell-body { display:flex; flex-direction:row; flex:1; overflow:hidden; min-height:0; }

/* ── Dual-mode navigation ── */
/* Default: both navs hidden until mode class is set by JS */
.global-nav { display:none; }
.event-nav  { display:none; }
.app-shell.mode-global .global-nav { display:block; }
.app-shell.mode-event  .event-nav  { display:block; }

/* Back button inside sidebar */
.nav-back-btn {
  display:flex; align-items:center; gap:10px;
  width:100%; padding:10px 16px;
  background:none; border:none; border-left:2px solid transparent;
  color:var(--text-muted); font-size:12px; font-weight:600;
  cursor:pointer; font-family:inherit; text-align:left; white-space:nowrap;
  transition:color .1s, background .1s;
}
.nav-back-btn:hover { color:var(--yt-orange); background:var(--bg-raised); }
.app-shell.sidebar-collapsed .nav-back-btn { padding:9px; justify-content:center; gap:0; }

/* Nav divider line */
.nav-divider { height:1px; background:var(--bg-border); margin:4px 0 6px; }

/* Topbar back button (event mode only) */
.topbar-back-btn {
  display:none; align-items:center; gap:5px;
  padding:5px 10px; margin-left:8px;
  background:none; border:1px solid var(--bg-border); border-radius:8px;
  color:var(--text-muted); font-size:12px; font-weight:600;
  cursor:pointer; font-family:inherit; white-space:nowrap;
  transition:color .1s, border-color .1s, background .1s; flex-shrink:0;
}
.topbar-back-btn:hover { color:var(--yt-orange); border-color:var(--yt-orange); background:rgba(236,102,40,.07); }
.app-shell.mode-event .topbar-back-btn { display:flex; }

/* Hide event switcher ▾ in global mode */
.app-shell.mode-global #evt-switcher-btn { display:none !important; }

/* ── Sidebar ── */
.sidebar {
  width:var(--sidebar-width-expanded); flex-shrink:0;
  /* Panel contextual F0 (docs/PLAN_F0_SHELL.md D82, audit "wasted white space"): --surface-1/
     --divider — EXACTAMENTE los mismos tokens que el riel adyacente (css/rail.css) en vez de
     --bg-surface/--bg-border (un gris ligeramente distinto). Antes rail+panel se veían como
     dos superficies separadas pegadas; ahora leen como un solo chrome contiguo, y en listas
     cortas (p. ej. Finanzas: Cobranza/Contratos) el espacio en blanco de abajo ya no se
     percibe como "panel roto/sin terminar" — es el mismo fondo continuo que el resto del chrome. */
  background:var(--surface-1, var(--bg-surface)); border-right:1px solid var(--divider, var(--bg-border));
  display:flex; flex-direction:column; overflow:hidden;
  transition:width var(--transition-sidebar);
  z-index:var(--z-sidebar); position:relative;
}
.app-shell.sidebar-collapsed .sidebar { width:var(--sidebar-width-collapsed); }
.sidebar-scroll { flex:1; overflow-y:auto; overflow-x:hidden; padding:10px 0; }
/* Reporte en vivo (2026-07-12): el panel contextual mostraba el scrollbar nativo grueso del
   SO (macOS "mostrar siempre") mientras el riel ya usaba uno fino tipo overlay — se veían
   inconsistentes/"no integrados" uno al lado del otro. Mismo patrón que .app-rail.
   PCH-1 (panel de auditoría 2026-07-12): el thumb-solo-al-hover deja a usuarios sin mouse
   (Surface, laptops táctiles, navegación por teclado sin :focus-within activo) sin NINGUNA
   pista de que hay más contenido abajo. Fix: la misma sombra inset permanente que .app-rail
   ya usa — pura CSS, inocua cuando no hay overflow real, visible sin depender del mouse. */
  .sidebar-scroll { scrollbar-width:thin; box-shadow:inset 0 -8px 8px -8px rgba(0,0,0,.18); }
.sidebar-scroll::-webkit-scrollbar { width:6px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background:transparent; border-radius:3px; }
.sidebar-scroll::-webkit-scrollbar-track { background:transparent; }
.sidebar-scroll:hover::-webkit-scrollbar-thumb,
.sidebar-scroll:focus-within::-webkit-scrollbar-thumb { background:var(--divider, var(--bg-border)); }

/* .sidebar-rail/.rail-btn (riel "dual-panel nav" viejo) DESTRUIDO 2026-07-12 — D63, acta en
   docs/LEGACY.md. Reemplazado por el riel global real: .app-rail/.arail-btn en css/rail.css. */
/* la vieja flecha de abajo se reemplaza por la del riel */
.sidebar-collapse-btn { display:none !important; }

/* ── Conmutador de contexto (Organización ⇄ Evento) ── */
.ctx-switcher{ display:flex; align-items:center; gap:10px; width:calc(100% - 16px); margin:2px 8px 8px; padding:9px 11px; background:var(--bg-raised); border:1px solid var(--bg-border); border-radius:11px; cursor:pointer; font-family:inherit; text-align:left; transition:border-color .12s, background .12s; }
.ctx-switcher:hover{ border-color:var(--yt-orange); }
.ctx-ic{ font-size:18px; flex:none; line-height:1; }
.ctx-text{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; }
.ctx-name{ font-size:13px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ctx-sub{ font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ctx-chev{ width:15px; height:15px; color:var(--text-muted); flex:none; transition:transform .15s; }
.ctx-switcher[aria-expanded="true"] .ctx-chev{ transform:rotate(180deg); }
.ctx-menu{ margin:-4px 8px 8px; background:var(--bg-surface); border:1px solid var(--bg-border); border-radius:11px; box-shadow:0 8px 24px rgba(0,0,0,.12); padding:5px; }
.ctx-menu[hidden]{ display:none; }
.ctx-menu-item{ display:flex; align-items:center; gap:9px; width:100%; padding:8px 10px; border:none; background:none; border-radius:8px; cursor:pointer; font-family:inherit; font-size:12.5px; color:var(--text-2); text-align:left; }
.ctx-menu-item:hover{ background:var(--bg-raised); color:var(--text); }
.ctx-menu-item.current{ color:var(--yt-orange); font-weight:700; }
.ctx-menu-label{ font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--text-faint,#999); padding:6px 10px 3px; }
.app-shell.sidebar-collapsed .ctx-switcher, .app-shell.sidebar-collapsed .ctx-menu{ display:none !important; }

/* Nav groups */
.nav-group { margin-bottom:4px; }
.nav-group-label {
  padding:10px 16px 4px;
  font-size:12px; font-weight:700; color:var(--text-faint);
  text-transform:uppercase; letter-spacing:.8px; white-space:nowrap;
  overflow:hidden;
  transition:opacity var(--transition-sidebar);
}
.app-shell.sidebar-collapsed .nav-group-label { opacity:0; }

/* Nav items — densidad/estados de la capa productividad (css/tokens-productivity.css):
   --row-h/--pad-cell dan la misma altura de fila que el resto de listas densas F0+, y
   --row-hover/--row-selected tiñen con la marca del tenant vía color-mix (idéntico matiz
   al --yt-orange de siempre — --yt-orange ES var(--brand-primary), mismo token). Los
   fallbacks preservan el valor exacto de antes si tokens-productivity.css no cargó. */
.nav-item {
  display:flex; align-items:center; gap:11px;
  width:calc(100% - 16px); margin:1px 8px; padding:var(--pad-cell, 9px 12px);
  min-height:var(--row-h, 36px);
  background:none; border:none; border-radius:10px;
  color:var(--text-2); font-size:13px; font-weight:500;
  cursor:pointer; font-family:inherit; text-align:left;
  white-space:nowrap; overflow:hidden;
  transition:background .12s, color .12s;
}
.nav-item:hover { background:var(--row-hover, var(--bg-raised)); color:var(--text); }
.nav-item.active { color:var(--yt-orange); font-weight:600; background:var(--row-selected, color-mix(in srgb, var(--yt-orange) 12%, transparent)); }
.nav-icon { width:18px; height:18px; flex-shrink:0; }
.nav-label { transition:opacity var(--transition-sidebar); white-space:nowrap; overflow:hidden; }
.app-shell.sidebar-collapsed .nav-label { opacity:0; width:0; }
.nav-chevron { width:14px; height:14px; flex-shrink:0; margin-left:auto; transition:transform .2s, opacity var(--transition-sidebar); }
.nav-item[aria-expanded="true"] .nav-chevron { transform:rotate(180deg); }
.app-shell.sidebar-collapsed .nav-chevron { opacity:0; }

/* Subnav (accordion) — PCH-4 (backlog LOW histórico): max-height:200px fijo en px es la hipótesis
   más plausible del "sin efecto a 125% zoom" reportado — a zoom no-100% el navegador redondea
   valores de layout a subpíxeles de forma distinta que a 100%, y un tope FIJO en px puede quedar
   por debajo del alto real ya escalado del subnav (cortando entradas) o no notarse si el subnav
   es corto. Técnica grid 0fr→1fr: sin importar el zoom ni cuántas filas tenga el subnav, "1fr"
   siempre es "el alto real de mi contenido", nunca un número adivinado — mismo resultado visual
   (acordeón animado), cero valores fijos que puedan desalinearse con el zoom. */
/* grid-auto-rows (no grid-template-rows): .nav-subnav tiene VARIOS .nav-subitem hijos directos,
   cada uno cae en su propia fila auto-generada — grid-auto-rows aplica el mismo 0fr/1fr a CADA
   una por igual, así todas colapsan/expanden juntas (grid-template-rows solo definiría la 1ª). */
.nav-subnav { display:grid; grid-auto-rows:0fr; overflow:hidden; transition:grid-auto-rows .2s ease; }
.nav-subnav > * { min-height:0; overflow:hidden; }
.nav-subnav.open { grid-auto-rows:1fr; }
.nav-subitem {
  display:flex; align-items:center; gap:8px;
  width:calc(100% - 24px); margin:1px 8px 1px 16px; padding:7px 12px;
  background:none; border:none; border-radius:8px;
  color:var(--text-muted); font-size:12px; cursor:pointer;
  font-family:inherit; text-align:left; white-space:nowrap;
  transition:background .12s, color .12s;
}
.nav-subitem:hover { background:var(--row-hover, var(--bg-raised)); color:var(--text); }
.nav-subitem.active { color:var(--yt-orange); font-weight:600; background:var(--row-selected, color-mix(in srgb, var(--yt-orange) 12%, transparent)); }
.nav-sub-dot { font-size:8px; opacity:.5; flex-shrink:0; }
.app-shell.sidebar-collapsed .nav-subnav { display:none; }

/* Abrir/Descargar action items inside subnav */
.nav-subnav-sep { height:1px; background:var(--bg-border); margin:4px 8px; }
.nav-sub-icon { width:13px; height:13px; flex-shrink:0; opacity:.65; }
.nav-action-item { color:var(--text-muted) !important; font-style:italic; }
.nav-action-item:hover { color:var(--text) !important; }

/* Collapse button */
.sidebar-collapse-btn {
  display:flex; align-items:center; justify-content:center;
  width:100%; height:36px; border:none; border-top:1px solid var(--bg-border);
  background:var(--bg-raised); color:var(--text-muted); cursor:pointer;
  transition:background .15s, color .15s; flex-shrink:0;
}
.sidebar-collapse-btn svg { width:16px; height:16px; transition:transform var(--transition-sidebar); }
.app-shell.sidebar-collapsed .sidebar-collapse-btn svg { transform:rotate(180deg); }
.sidebar-collapse-btn:hover { background:var(--bg-border); color:var(--text); }

/* ── Collapsed sidebar: icon-only, all text hidden ── */
.app-shell.sidebar-collapsed .nav-item { padding:9px; justify-content:center; gap:0; }
/* Hide text elements when collapsed */
.app-shell.sidebar-collapsed .nav-label,
.app-shell.sidebar-collapsed .nav-chevron,
.app-shell.sidebar-collapsed .nav-group-label,
.app-shell.sidebar-collapsed .sidebar-collapse-btn span { display:none; }
/* Sub-items hidden when collapsed — flyout handles them */
.app-shell.sidebar-collapsed .nav-subnav { display:none !important; }

/* Drawer overlay (mobile) */
.drawer-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:var(--z-overlay); }
.drawer-overlay.open { display:block; }

/* ── Main content ── */
.main { flex:1; overflow-y:auto; overflow-x:hidden; min-width:0; background:var(--bg-page); }
/* Contenedor fluido: ancho completo (los dashboards aprovechan 24"/27") con
   padding fluido. Los bloques de texto/formularios pueden auto-limitarse con .readable. */
.main-inner { max-width:none; margin:0; padding:clamp(14px,2.2vw,40px); width:100%; }
.readable { max-width:var(--content-max-width); margin-inline:auto; }

/* Section header */
.section-hdr { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:.9rem; gap:1rem; flex-wrap:wrap; }

/* Auditoría total (2026-07-26, hallazgo HIGH confirmado): toolbar del editor de gafetes
   (js/badge-studio.js#startEditor) repetía en una fila fija sin flex-wrap el mismo bug de
   recorte móvil ya corregido en css/dashboard-fw.css .dashfw-toolbar — dentro de #tab-gafetes
   (.main{overflow-x:hidden}), la suma de anchos fijos supera un viewport de 375px y el resto se
   recorta en silencio. Mobile-first: nombre+categoría toman su propia línea, el resto baja en
   cuantas líneas hagan falta; en pantallas más anchas comparten fila como antes. */
.bs-toolbar { display:flex; align-items:center; gap:10px; padding:6px 0; margin-bottom:10px; flex-wrap:wrap; }
.bs-toolbar #bs-name, .bs-toolbar #bs-cat { flex:1 1 100%; }
@media (min-width:640px) {
  .bs-toolbar #bs-name { flex:1 1 auto; }
  .bs-toolbar #bs-cat { flex:0 1 160px; }
}
.breadcrumb { font-size:12px; color:var(--text-muted); margin-bottom:4px; }
.section-title { font-size:22px; font-weight:600; color:var(--text); line-height:1.2; margin:0; }
.section-sub { font-size:13px; color:var(--text-muted); margin:4px 0 0; }

/* ── Responsive ── */
/* Tablet (769–1279px): sidebar collapsed by default */
@media (max-width:1279px) {
  .main-inner { padding:16px; }
  .app-shell:not(.sidebar-mobile-open) .sidebar { width:var(--sidebar-width-collapsed); }
  .app-shell:not(.sidebar-mobile-open) .nav-label,
  .app-shell:not(.sidebar-mobile-open) .nav-chevron,
  .app-shell:not(.sidebar-mobile-open) .nav-group-label { display:none; }
  .app-shell:not(.sidebar-mobile-open) .nav-subnav { display:none !important; }
  .app-shell:not(.sidebar-mobile-open) .nav-item { padding:9px; justify-content:center; gap:0; }
}
/* PCH-1/CAB-1 (auditoría menús/headers 2026-07-14, Sprint A P0): la hamburguesa YA estaba
   cableada por completo en shell.js (openDrawer/closeDrawer, aria-expanded, Escape, overlay) pero
   `.topbar-hamburger{display:none}` (arriba) no tenía NINGUNA media query que la reactivara en
   ningún ancho — markup y JS 100% muertos, confirmado por grep. En esta banda (769–1279) el
   sidebar vive colapsado a solo-iconos sin ningún control explícito para verlo con etiquetas
   completas salvo tocar un grupo con acordeón (que abre el drawer de rebote); la hamburguesa es
   ese control explícito que faltaba. `#topbar-collapse` es un no-op aquí (el ancho colapsado ya
   lo fuerza el bloque de arriba sin importar `.sidebar-collapsed`) — se oculta para no duplicar
   dos botones haciendo lo mismo, un solo "ver menú completo" por banda. */
@media (min-width:769px) and (max-width:1279px) {
  .topbar-hamburger { display:flex; }
  #topbar-collapse { display:none; }
}
/* ── Tablet + Mobile: sidebar-mobile-open → full overlay drawer ── */
/* Applies on all screens ≤1279px when sidebar-mobile-open is added */
@media (max-width:1279px) {
  .app-shell.sidebar-mobile-open .sidebar {
    position:fixed; top:var(--topbar-height); left:0; bottom:0;
    width:var(--sidebar-width-expanded) !important;
    z-index:var(--z-drawer);
    box-shadow:4px 0 24px rgba(0,0,0,.25);
  }
  /* Restore all labels when drawer is open */
  .app-shell.sidebar-mobile-open .nav-label    { display:flex !important; }
  .app-shell.sidebar-mobile-open .nav-chevron  { display:flex !important; }
  .app-shell.sidebar-mobile-open .nav-group-label { display:block !important; }
  .app-shell.sidebar-mobile-open .sidebar-footer-item span { display:inline !important; }
  .app-shell.sidebar-mobile-open .nav-item     { padding:9px 16px !important; justify-content:flex-start !important; gap:10px !important; }
  .app-shell.sidebar-mobile-open .sidebar-footer-item { padding:8px 16px !important; justify-content:flex-start !important; gap:10px !important; }
  .app-shell.sidebar-mobile-open .nav-subnav.open { display:block !important; }
  .app-shell.sidebar-mobile-open .drawer-overlay { display:block; }
}

/* Mobile (≤768px): bottom nav + sheet "Más" (Sprint 2, decisión #85: la hamburguesa
   desaparece — el drawer que abría quedó reemplazado por el sheet de pantalla completa). */
@media (max-width:768px) {
  .topbar-hamburger { display:none; }
  /* #topbar-collapse colapsa/expande el riel lateral — en móvil .sidebar-rail ya está oculto
     (ver abajo), así que el botón no tenía ningún efecto visible y confundía (bug real reportado). */
  #topbar-collapse { display:none; }
  .topbar-sub { display:none; }
  /* "Liquid Glass": el topbar deja de ser una superficie sólida y pasa a ser el material
     translúcido persistente típico de la barra de navegación iOS (Mail/Settings) — el
     contenido que hace scroll se asoma difuminado por debajo en vez de desaparecer bajo
     un bloque opaco. */
  .topbar {
    background:color-mix(in srgb, var(--header-bg) 74%, transparent);
    -webkit-backdrop-filter:blur(20px) saturate(1.7);
    backdrop-filter:blur(20px) saturate(1.7);
  }
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    .topbar { background:var(--header-bg); }
  }
  .main-inner { padding:12px; }
  /* calc con safe-area, NO 56px a secas: .bottom-nav mide 56px + env(safe-area-inset-bottom) de
     alto total (ver su regla abajo) — con solo 56px aquí, en un iPhone real (safe-bottom≈34px) los
     paneles terminaban 34px POR DEBAJO del borde real de la barra, y todo lo flotante (que sí
     calcula con safe-area) quedaba flotando con una franja negra de fondo crudo entre medio (bug
     real reportado con capturas de iPhone: "hay un espacio abajo"). */
  .main { padding-bottom:calc(56px + env(safe-area-inset-bottom,0px)); }
  /* En móvil el riel se oculta: navegación por barra inferior + sheet "Más" */
  .sidebar {
    position:fixed; top:var(--topbar-height); left:0; bottom:0;
    width:var(--sidebar-width-expanded) !important;
    transform:translateX(-100%);
    transition:transform var(--transition-sidebar);
    z-index:var(--z-drawer);
    box-shadow:4px 0 20px rgba(0,0,0,.2);
  }
  .app-shell.sidebar-mobile-open .sidebar { transform:translateX(0); }
}

/* ── "Large title" iOS (Mail/Ajustes de Apple): el título de pantalla arranca grande/
   bold y se colapsa al hacer scroll. Opt-in por atributo `data-large-title` en el <h1>
   de la pantalla — así cualquier pantalla nueva puede sumarse sin tocar CSS/JS de
   nuevo. `.main.is-scrolled` lo pone js/shell.js con un listener de scroll pasivo sobre
   `.main` (único contenedor con scroll real del shell, ver `.main{overflow-y:auto}`
   arriba). Solo móvil — desktop no tiene el patrón de "large title" de iOS. */
@media (max-width:768px) {
  [data-large-title] {
    transition:font-size .18s ease, opacity .18s ease;
  }
  .main.is-scrolled [data-large-title] {
    font-size:17px !important;
    font-weight:700 !important;
    opacity:.92;
  }
  @media (prefers-reduced-motion:reduce) {
    [data-large-title] { transition:none; }
  }
}

/* ── Bottom nav (mobile only) ── */
.bottom-nav { display:none; }
/* Auditoría F4+F5 (2026-07-17, hallazgo HIGH, PCH-C2): disparaba por ANCHO puro, sin
   `pointer:coarse` — una laptop real con mouse+teclado en Split View o ventana no maximizada
   por debajo de 768px recibía el "phone takeover" completo (bottom-nav fijo + safe-area)
   aunque `data-os="desktop"` estuviera bien detectado. `pointer:coarse` es verdadero en
   cualquier iPhone/Android real, así que el comportamiento móvil genuino no cambia. */
@media (max-width:768px) and (pointer:coarse) {
  .bottom-nav {
    display:flex; position:fixed; bottom:0; left:0; right:0;
    /* Alto TOTAL = 56px de contenido + safe-area. Antes decía `height:56px` a secas — con el
       `*{box-sizing:border-box}` global, el padding-bottom de safe-area (línea de abajo) se comía
       el contenido HACIA ADENTRO: en un iPhone real (safe≈34px) los iconos/labels quedaban
       apretados en 22px pegados arriba, con una franja "muerta" de 34px dentro de la barra (bug
       real reportado con capturas: label "Más" desplazado hacia arriba + espacio negro abajo).
       Con el calc, el contenido conserva sus 56px y el padding cubre el home-indicator — igual
       que una tab bar nativa de iOS, cuyo material se extiende bajo el indicador. */
    height:calc(56px + env(safe-area-inset-bottom,0px));
    /* "Liquid Glass" (iOS 18+): material translúcido en vez de superficie sólida —
       el contenido que hace scroll se asoma difuminado detrás de la barra. Fallback
       sólido automático vía @supports abajo para navegadores sin backdrop-filter. */
    background:color-mix(in srgb, var(--bg-surface) 72%, transparent);
    -webkit-backdrop-filter:blur(20px) saturate(1.7);
    backdrop-filter:blur(20px) saturate(1.7);
    border-top:1px solid color-mix(in srgb, var(--bg-border) 70%, transparent);
    align-items:stretch; justify-content:space-around;
    z-index:calc(var(--z-sidebar) + 1);
    padding-bottom:env(safe-area-inset-bottom,0px);
    /* Sombra iOS: difusa/grande, offset chico, opacidad baja — eleva sin "cortar" como
       la sombra dura anterior (0 -2px 16px .08 se sentía más plana/Android). */
    box-shadow:0 -8px 24px -4px rgba(0,0,0,.14);
  }
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    .bottom-nav { background:var(--bg-surface); }
  }
  .bottom-nav-item {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; flex:1; padding:6px 2px;
    background:none; border:none; cursor:pointer; font-family:inherit;
    color:var(--text-muted); font-size:12px; font-weight:500;
    transition:color .1s, opacity .1s, transform .1s; border-top:2px solid transparent;
  }
  /* SF Symbols en espíritu: trazo un poco más fino que el estándar Feather (2px) del
     resto de la app — a este tamaño (20px) 2px se ve "grueso"/Android; 1.75 se acerca
     más a la línea de iOS sin tocar el registro global de íconos (yt-icons.js). */
  .bottom-nav-item svg { width:20px; height:20px; flex-shrink:0; stroke-width:1.75; }
  .bottom-nav-item:hover { color:var(--text); }
  /* Feedback táctil iOS: opacity+scale sutil al tocar, no el "ripple" de Material. */
  .bottom-nav-item:active { opacity:.55; transform:scale(.94); }
  .bottom-nav-item.active { color:var(--yt-orange); border-top-color:var(--yt-orange); }
  .bottom-nav-item#bottom-more-btn.active { color:var(--yt-orange); }
  /* AND-1/UXU-1 (auditoría menús/headers 2026-07-14, Sprint A P1): el bottom-nav global hablaba
     SOLO iOS (opacity+scale al tocar, Liquid Glass translúcido) sin ninguna rama [data-os="android"]
     — a diferencia de css/native-materials.css, que sí bifurca fab/píldora/toolbar/sheet por
     plataforma desde F1. Mismo criterio aquí y mismos valores (14%/sin blur/sombra dura, PC-1(b)
     con fallback desktop/atributo-vacío) que ya establecieron esos 4 consumidores. */
  :root[data-os="android"] .bottom-nav-item:active,
  :root[data-os="desktop"] .bottom-nav-item:active,
  :root:not([data-os="ios"]):not([data-os="android"]) .bottom-nav-item:active {
    opacity:1; transform:none;
    background:color-mix(in srgb, var(--text,#fff) 10%, transparent);
  }
  :root[data-os="android"] .bottom-nav,
  :root[data-os="desktop"] .bottom-nav,
  :root:not([data-os="ios"]):not([data-os="android"]) .bottom-nav {
    background:color-mix(in srgb, var(--brand-primary,#C7F000) 14%, var(--bg-surface));
    -webkit-backdrop-filter:none; backdrop-filter:none;
    border-top-color:transparent;
    box-shadow:0 -1px 2px rgba(0,0,0,.25), 0 -3px 10px -2px rgba(0,0,0,.18);
  }

  /* Contextual por modo (Sprint 2, decisión #82/#83): dos sets fijos en el DOM (nunca se
     recrean con innerHTML) para no romper los listeners .app-nav-item que cada módulo
     engancha una sola vez al cargar — mismo patrón que .global-nav/.event-nav del sidebar. */
  .bottom-nav .bn-global, .bottom-nav .bn-event { display:none; }
  .app-shell.mode-global .bottom-nav .bn-global { display:flex; }
  .app-shell.mode-event  .bottom-nav .bn-event  { display:flex; }
}

/* ── Sidebar flyout (shown when collapsed + hover on parent item) ── */
.nav-flyout {
  position:fixed; left:var(--sidebar-width-collapsed); top:0;
  background:var(--bg-surface); border:1px solid var(--bg-border);
  border-radius:0 12px 12px 0; min-width:180px; padding:4px 0;
  box-shadow:4px 0 24px rgba(0,0,0,.15);
  z-index:calc(var(--z-sidebar) + 10);
  pointer-events:none; opacity:0; transform:translateX(-6px);
  transition:opacity .12s ease, transform .12s ease;
}
.nav-flyout.visible { pointer-events:auto; opacity:1; transform:translateX(0); }
.nav-flyout-title {
  padding:9px 14px 7px;
  font-size:12px; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.6px;
  border-bottom:1px solid var(--bg-border);
}
.nav-flyout-item {
  display:flex; align-items:center; gap:8px;
  width:100%; padding:8px 14px;
  background:none; border:none; border-left:2px solid transparent;
  color:var(--text-2); font-size:12px; cursor:pointer;
  font-family:inherit; text-align:left; white-space:nowrap;
  transition:background .1s, color .1s;
}
.nav-flyout-item:hover { background:var(--bg-raised); color:var(--text); }
.nav-flyout-item.active { color:var(--yt-orange); border-left-color:var(--yt-orange); font-weight:600; }
.nav-flyout-sep { height:1px; background:var(--bg-border); margin:4px 0; }
.nav-flyout-action { color:var(--text-muted) !important; font-style:italic; }
/* Wide (≥1920px) — sidebar más ancho; el contenido ya es fluido (full width) */
@media (min-width:1920px) {
  :root { --sidebar-width-expanded:240px; }
}
/* 4K (≥2560px) — escala tipográfica para legibilidad */
@media (min-width:2560px) {
  :root { --sidebar-width-expanded:280px; font-size:17px; }
}

/* ── Topbar: tablet estrecha (769-880px, escala canónica de arriba) ──────────────────
   Zona reportada como apretada (Grupo D del audit F0: el riel arranca en 769px pero la
   fila del topbar seguía con el mismo padding/anchos de escritorio). El nombre del tenant
   ya trunca con ellipsis (.topbar-title/.topbar-sub arriba) así que aquí solo se ajusta
   aire/tamaños para que quepa cómodo, sin tocar comportamiento. */
@media (max-width:880px) {
  .topbar { padding:0 12px; gap:8px; }
  .topbar-sub { display:none; }
  .topbar-title { max-width:160px; }
  .larry-bar { flex-basis:190px; min-width:120px; }
}

/* ── UXU-3 (auditoría menús/headers 2026-07-14, Sprint A P2): topbar denso — 8 controles
   (alerta/colapsar/buscar/ayuda/tema/guardar/avatar + regreso de evento) sin ninguna
   consolidación entre el breakpoint de escritorio y el rediseño móvil completo de ≤768px.
   ≤1100px: Tema y Ayuda se reparentan (shell.js) dentro del menú "···"; Guardar pierde la
   etiqueta de texto y queda solo el punto de estado (limpio/sucio), como un topbar-icon-btn más. ── */
@media (max-width:1100px) {
  #theme-toggle, #topbar-help-btn { display:none; }
  /* Bug real (2026-07-16, reporte en vivo del usuario): la regla de arriba oculta Tema/Ayuda
     por ID sin importar dónde vivan en el DOM — cuando shell.js los REPARENTA dentro de
     #topbar-overflow-menu (el menú "···"), seguían con display:none ahí también, así que el
     menú abría con 0px de contenido útil (~12px de alto, solo el padding). Se necesita una
     regla MÁS ESPECÍFICA (selector con ancestro) que los reactive dentro del menú. */
  .topbar-overflow-menu #theme-toggle, .topbar-overflow-menu #topbar-help-btn { display:flex; }
  .topbar-overflow-wrap { display:inline-flex; }
  .topbar-save { width:34px; height:34px; padding:0; justify-content:center; gap:0; border-radius:9px; }
  .topbar-save #save-label { display:none; }
}

/* ── Topbar: teléfono en horizontal / ventana muy baja (altura ≤450px) ───────────────
   docs/PLAN_F0_SHELL.md — feedback en vivo: en 844×390 (iPhone landscape) el riel ya
   aparece bien (umbral 769px), pero el topbar de 48px fijo se comía una porción grande de
   los 390px de alto sin adaptarse — a diferencia del chrome nativo iOS/Android, que
   colapsa en landscape. Se dispara por ALTURA (no por ancho) para cubrir tablets/ventanas
   cortas también, no solo teléfonos concretos.
   CORREGIDO (panel de auditoría 2026-07-12, IOS-1/IOS-2/IOS-3/AND-1):
   (1) el comentario original decía que `.topbar-icon-btn{height:30px}` "ganaba por
   especificidad" sobre `button{min-height:44px}` de pointer:coarse — FALSO: height y
   min-height son propiedades DISTINTAS, no compiten entre sí, y CSS usa
   alto-usado=max(height,min-height) sin importar especificidad (CSS2.1 §10.7). El resultado
   real era una píldora/rectángulo 30×44, no un círculo/cuadrado 30×30. Fix: min-height/
   min-width explícitos que sí ganan (misma especificidad de clase) neutralizan el 44px.
   (2) faltaba env(safe-area-inset-left/right) — en landscape el notch/Dynamic Island vive
   en el borde LATERAL, no arriba; con solo 10px de padding el logo/hamburguesa quedaban
   bajo el recorte físico en iPhones con notch.
   (3) la barra de Larry (punto de entrada principal) bajaba a 28px sin piso — un <div
   role="button"> no lo alcanza el min-height:44px de pointer:coarse (solo aplica a
   button/.btn/etc), así que no había ninguna red de seguridad. Piso subido a 36px
   ("mínimo defendible dado el espacio" — el propio topbar mide 44px en este modo). */
@media (max-height:450px) {
  :root { --topbar-height:44px; }
  .topbar {
    padding:0 10px; gap:6px;
    padding-left:max(10px, env(safe-area-inset-left,0px));
    padding-right:max(10px, env(safe-area-inset-right,0px));
  }
  .topbar-logo { width:20px; height:20px; }
  /* PCH-2 (backlog LOW histórico): 130px fijo se disparaba por ALTURA sola (esta regla es
     max-height:450px, sin condición de ancho) — una ventana ANCHA pero corta (tablet en
     landscape, monitor externo bajo) truncaba el nombre del tenant sin necesidad, sobrándole
     espacio horizontal real. min(30vw, 260px): en un teléfono angosto en landscape sigue
     acotado de forma similar a antes; en algo ancho-pero-corto usa el espacio real disponible. */
  .topbar-title { max-width:min(30vw, 260px); }
  .topbar-sub { display:none; }
  .topbar-icon-btn, .topbar-avatar { width:30px; height:30px; min-width:30px; min-height:30px; }
  .larry-bar { height:36px; min-height:36px; flex-basis:160px; min-width:100px; }
  .larry-bar-kbd { display:none; }
}

.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:10px;background:var(--bg-surface);border:1px solid var(--bg-border);border-radius:12px;padding:12px 16px}
.toolbar-title{font-size:17px;font-weight:700;color:#1a1a1a}
.toolbar-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.legend{display:flex;gap:9px;flex-wrap:wrap}
.leg{display:flex;align-items:center;gap:4px;font-size:12px;color:#666}
.leg-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}

.cbanner{background:#fef2f2;border:1px solid #fca5a5;border-radius:8px;padding:8px 12px;font-size:12px;color:#991b1b;margin-bottom:10px;display:none;align-items:center;gap:6px}
.sbanner{border-radius:8px;padding:8px 12px;font-size:12px;margin-bottom:10px;display:none;align-items:center;gap:6px}
.sbanner.ok{background:#f0fdf4;border:1px solid #86efac;color:#166534}
.sbanner.info{background:#eff6ff;border:1px solid #93c5fd;color:#1d4ed8}

.btn{font-size:12px;padding:6px 13px;border-radius:8px;cursor:pointer;border:1px solid #d1cfc7;background:#fff;color:#1a1a1a;display:flex;align-items:center;gap:5px;transition:background .15s;font-family:inherit;white-space:nowrap}
.btn:hover{background:#f3f2ef}
.btn.primary{background:var(--brand-primary,#EC6628);color:#fff;border-color:var(--brand-primary,#EC6628)}
.btn.primary:hover{filter:brightness(.92)}
.btn.accent{background:#7c3aed;color:#fff;border-color:#7c3aed}
.btn.accent:hover{background:#6d28d9}
/* AND-3/UXU-4 (panel de auditores, lote grande 2026-07-18): estado "seleccionado" genérico para
   pares de tabs .btn (ej. Gráfica/Tabla de "Pregúntale a tus datos") — sin esto los 2 botones se
   ven idénticos sin importar cuál vista está activa. */
.btn.on{background:var(--yt-orange,#EC6628);color:#fff;border-color:var(--yt-orange,#EC6628)}
.btn.green{background:#16a34a;color:#fff;border-color:#16a34a}
.btn.green:hover{background:#15803d}
.btn.danger{background:#dc2626;color:#fff;border-color:#dc2626}
.btn.danger:hover{background:#b91c1c}
.save-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;transition:background .3s}
.save-dot.clean{background:#22c55e}
.save-dot.dirty{background:#ef4444}

/* TIMELINE */
.tl-outer{display:grid;grid-template-columns:48px 1fr 1fr;border:1px solid #e5e3dc;border-left:3px solid #EC6628;border-radius:12px;overflow:hidden;background:#fff;margin-bottom:1rem}
.col-hdr{height:52px;padding:0 12px;background:#f8f7f4;border-bottom:1px solid #e5e3dc;display:flex;flex-direction:column;justify-content:center;gap:3px}
.col-hdr.tc{align-items:center}
.col-hdr-name{font-size:13px;font-weight:600;color:#1a1a1a}
.col-hdr-sub{font-size:12px;color:var(--text-muted)}
.tcol{background:#f8f7f4;border-right:2px solid #EC6628;position:relative}
.stg{position:relative;border-right:1px solid rgba(236,102,40,0.25);background:#fff}
.stg.last{border-right:none}
.tl{position:absolute;right:0;left:0;display:flex;justify-content:flex-end}
.tl span{font-size:12px;color:#EC6628;padding-right:5px;margin-top:-6px;line-height:1;font-weight:600;opacity:.75}
.gl{position:absolute;left:0;right:0;height:1px;pointer-events:none}
.gl.hour{background:rgba(236,102,40,0.18)}
.gl.half{background:rgba(236,102,40,0.06)}
.ghost{position:absolute;left:3px;right:3px;border-radius:6px;border:2px dashed #60a5fa;background:#eff6ff;opacity:.35;pointer-events:none;display:none}

/* SLOTS */
.slot{position:absolute;left:3px;right:3px;border-radius:6px;padding:5px 8px 12px 8px;cursor:grab;user-select:none;border:1px solid transparent;overflow:hidden;transition:box-shadow .1s}
.slot:hover{box-shadow:0 2px 10px rgba(0,0,0,.13)}
.slot.dg{opacity:.35;cursor:grabbing}
.slot.ctx-open{box-shadow:0 0 0 2px #7c3aed}
.sn{font-size:12px;font-weight:600;line-height:1.25;padding-right:18px}
.str{font-size:12px;opacity:.7;margin-top:1px}
.sd{font-size:12px;opacity:.55;margin-top:1px}
/* resize handle bottom */
.resize-handle{position:absolute;bottom:0;left:0;right:0;height:8px;cursor:ns-resize;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}
.slot:hover .resize-handle{opacity:1}
.resize-handle::after{content:'';width:24px;height:3px;border-radius:2px;background:rgba(0,0,0,.25)}
/* delete btn top-right */
.slot-del{position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .15s;color:inherit;font-size:12px;font-weight:700;line-height:1;z-index:2}
.slot:hover .slot-del{opacity:1}
.slot-del:hover{background:rgba(0,0,0,.3)}

/* SLOT COLORS */
.s-open{background:#e0f5ee;border-color:#6dd0ae;color:#054e35}
.s-inn{background:#ddeeff;border-color:#7dbde8;color:#0c3d6e}
.s-dev{background:#eeecff;border-color:#b0a8f0;color:#312a7a}
.s-yuc{background:#fef3e2;border-color:#f5c96a;color:#5c3a00}
.s-ai{background:#e8f8e8;border-color:#86d686;color:#1a4d1a}
.s-meal{background:#f2f0eb;border-color:#c8c4ba;color:#4a4740}
.s-cls{background:#fff0ea;border-color:#f5a07a;color:#6e2a0a}
.s-coffee{background:#fce8f3;border-color:#e888c0;color:#6b1040}
.s-party{background:#f3e8ff;border-color:#c084fc;color:#581c87}
.s-custom{background:var(--cb);border-color:var(--cb2);color:var(--ct)}

/* CONTEXT MENU */
.ctx-menu{position:fixed;background:#fff;border:1px solid #e5e3dc;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.15);padding:6px;z-index:9999;min-width:200px;display:none;user-select:none}
.ctx-menu.visible{display:block}
.ctx-section{padding:4px 8px 2px;font-size:12px;color:#aaa;font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.ctx-item{padding:7px 10px;border-radius:6px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:8px;color:#1a1a1a;transition:background .1s;user-select:none}
.ctx-item *{cursor:pointer}
.ctx-item:hover{background:#f3f2ef}
.ctx-item.danger{color:#dc2626}
.ctx-item.danger:hover{background:#fef2f2}
.ctx-sep{height:1px;background:#f0ede8;margin:4px 0}
.ctx-icon{width:16px;text-align:center;font-size:13px}

/* EDIT MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:10000;display:none;align-items:center;justify-content:center}
.modal-overlay.visible{display:flex}
.modal{background:#fff;border-radius:14px;padding:1.5rem;width:340px;max-width:95vw;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.modal-title{font-size:15px;font-weight:700;margin-bottom:1.25rem;color:#1a1a1a}
.modal-field{margin-bottom:14px}
.modal-field label{display:block;font-size:12px;font-weight:600;color:#666;margin-bottom:5px}
.modal-field input,.modal-field select{width:100%;font-size:13px;padding:8px 10px;border:1px solid #d1cfc7;border-radius:8px;background:#f8f7f4;color:#1a1a1a;font-family:inherit;outline:none}
.modal-field input:focus,.modal-field select:focus{border-color:#7c3aed;background:#fff}
.modal-field input[type=color]{height:36px;padding:2px 4px;cursor:pointer}
.color-presets{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.cp{width:22px;height:22px;border-radius:4px;cursor:pointer;border:2px solid transparent;transition:transform .1s}
.cp:hover{transform:scale(1.2)}
.cp.active{border-color:#1a1a1a;box-shadow:0 0 0 1px #fff inset}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:1.25rem}

/* BANK */
.bank{background:#fff;border:1px solid #e5e3dc;border-radius:12px;padding:1rem;margin-bottom:1rem}
.bank-t{font-size:12px;font-weight:600;color:#666;margin-bottom:10px}
.bank-l{display:flex;flex-wrap:wrap;gap:7px;min-height:36px}
.bi{background:#f8f7f4;border:1px dashed #c8c4ba;border-radius:8px;padding:6px 10px;font-size:12px;color:#1a1a1a;cursor:grab;display:flex;flex-direction:column;gap:2px;position:relative}
.bi:hover{border-color:var(--text-muted);background:#f3f2ef}
.bi-del{position:absolute;top:2px;right:4px;font-size:12px;cursor:pointer;opacity:0;color:var(--text-muted);font-weight:700}
.bi:hover .bi-del{opacity:1}
.bi-del:hover{color:#dc2626}
.bis{font-size:12px;color:var(--text-muted)}
.bem{font-size:12px;color:#aaa;font-style:italic;align-self:center}

/* ADD PANEL */
.add-panel{background:#fff;border:1px solid #e5e3dc;border-radius:12px;padding:1rem;margin-bottom:1rem}
.add-panel-title{font-size:13px;font-weight:600;color:#1a1a1a;margin-bottom:12px}
.add-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.form-field{display:flex;flex-direction:column;gap:4px}
.form-field label{font-size:12px;color:#666;font-weight:500}
.form-field input,.form-field select{font-size:12px;padding:6px 10px;border:1px solid #d1cfc7;border-radius:8px;background:#f8f7f4;color:#1a1a1a;font-family:inherit;outline:none}
.form-field input:focus,.form-field select:focus{border-color:#7c3aed;background:#fff}
.form-field input[type=text]{width:180px}
.form-field input[type=color]{width:48px;height:32px;padding:2px 4px;cursor:pointer;border-radius:6px}
/* track combo */
.track-combo-wrap{position:relative;width:180px}
.track-combo-wrap input{width:100%}
.track-dropdown{position:absolute;top:calc(100% + 3px);left:0;right:0;background:#fff;border:1px solid #d1cfc7;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.12);z-index:500;max-height:200px;overflow-y:auto;display:none}
.track-dropdown.open{display:block}
.track-opt{display:flex;align-items:center;gap:7px;padding:7px 10px;cursor:pointer;font-size:12px;color:#1a1a1a;transition:background .1s}
.track-opt:hover{background:#f3f2ef}
.track-swatch{width:12px;height:12px;border-radius:3px;flex-shrink:0;border:1px solid rgba(0,0,0,.1)}
.track-new-hint{padding:6px 10px;font-size:12px;color:#aaa;font-style:italic}

/* JSON PANEL */
.json-panel{background:#fff;border:1px solid #e5e3dc;border-radius:12px;padding:1rem;margin-bottom:1rem}
.json-panel-title{font-size:13px;font-weight:600;color:#1a1a1a;margin-bottom:12px}
.json-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.json-area{width:100%;height:120px;font-size:12px;font-family:monospace;padding:8px;border:1px solid #d1cfc7;border-radius:8px;background:#f8f7f4;color:#1a1a1a;resize:vertical;outline:none;display:none}
.json-area:focus{border-color:#7c3aed;background:#fff}

/* STATS PANEL */
.stats-panel{background:#fff;border:1px solid #e5e3dc;border-radius:12px;padding:1.25rem;margin-bottom:1rem}
.stats-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.stats-title{font-size:14px;font-weight:700;color:#1a1a1a}
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:14px}
.kpi{background:#f8f7f4;border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.kpi-muted{background:#f2f0eb}
.kpi-muted .kpi-val{color:var(--text-muted)}
.kpi-party{background:#f3e8ff}
.kpi-party .kpi-val{color:#6b21a8}
.kpi-val{font-size:24px;font-weight:700;color:#1a1a1a;line-height:1}
.kpi-lbl{font-size:12px;color:var(--text-muted);line-height:1.3}
.kpi-sub{font-size:12px;color:#aaa}
.stats-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.stats-cols{grid-template-columns:1fr}}
@media(max-width:768px){.finance-top{grid-template-columns:1fr !important}}
.stats-card{background:#f8f7f4;border-radius:10px;padding:14px}
.stats-card-title{font-size:12px;font-weight:600;color:#666;margin-bottom:10px;text-transform:uppercase;letter-spacing:.4px}
/* bar chart */
.bar-row{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.bar-row:last-child{margin-bottom:0}
.bar-label{font-size:12px;color:#444;width:130px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{flex:1;background:#e8e6e0;border-radius:4px;height:14px;overflow:hidden;position:relative}
.bar-fill{height:100%;border-radius:4px;transition:width .4s ease}
.bar-val{font-size:12px;color:var(--text-muted);width:55px;text-align:right;flex-shrink:0}
/* coverage */
.coverage-row{margin-bottom:8px}
.coverage-label{font-size:12px;color:#666;margin-bottom:4px;display:flex;justify-content:space-between}
.coverage-track{width:100%;background:#e8e6e0;border-radius:4px;height:20px;position:relative;overflow:hidden}
.coverage-block{position:absolute;height:100%;border-radius:2px;display:flex;align-items:center;justify-content:center}
.coverage-block span{font-size:12px;font-weight:600;overflow:hidden;white-space:nowrap;padding:0 3px}
/* speakers */
.spk-grid{display:flex;flex-wrap:wrap;gap:7px}
.spk-pill{display:flex;align-items:center;gap:5px;background:#fff;border:1px solid #e5e3dc;border-radius:20px;padding:4px 10px 4px 4px;font-size:12px;color:#1a1a1a}
.spk-avatar{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.spk-stage{font-size:12px;color:#aaa;margin-left:2px}
/* GEO / MAP */
.geo-kpi-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.geo-kpi{background:#fff;border-radius:8px;padding:10px 12px;border:0.5px solid #e5e3dc;display:flex;flex-direction:column;gap:2px}
.geo-kpi-val{font-size:22px;font-weight:700;color:#1a1a1a;line-height:1}
.geo-kpi-lbl{font-size:12px;color:var(--text-muted)}
.country-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:0.5px solid #f0ede8}
.country-row:last-child{border-bottom:none}
.country-flag{font-size:20px;width:28px;text-align:center;flex-shrink:0}
.country-name{font-size:12px;font-weight:500;color:#1a1a1a;flex:0 0 110px}
.country-bar-wrap{flex:1;background:#e8e6e0;border-radius:4px;height:12px;overflow:hidden}
.country-bar-fill{height:100%;border-radius:4px;transition:width .4s}
.country-count{font-size:12px;color:#666;width:50px;text-align:right;flex-shrink:0}
#world-map-wrap{position:relative;border-radius:8px;overflow:hidden;background:#dbe8f5;min-height:200px}
#world-map-wrap svg{width:100%;display:block}
.map-tooltip{position:fixed;background:#1a1a1a;color:#fff;font-size:12px;padding:5px 10px;border-radius:6px;pointer-events:none;white-space:nowrap;z-index:9000;display:none}
.spk-table{width:100%;border-collapse:collapse;font-size:12px}
.spk-table th{text-align:left;padding:6px 8px;border-bottom:1px solid #e5e3dc;font-size:12px;font-weight:600;color:var(--text-muted);white-space:nowrap}
.spk-table td{padding:7px 8px;border-bottom:0.5px solid #f0ede8;vertical-align:middle}
.spk-table tr:last-child td{border-bottom:none}
.spk-table tr:hover td{background:#f8f7f4}
.spk-badge{display:inline-block;padding:2px 7px;border-radius:10px;font-size:12px;font-weight:500}

/* ---- TABS ---- */
.tab-bar{display:flex;gap:2px;margin-bottom:1rem;background:#f8f7f4;border-radius:10px;padding:4px;border:1px solid #e5e3dc}
.tab-btn{flex:1;padding:8px 14px;border:none;background:transparent;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;color:var(--text-muted);transition:all .15s;font-family:inherit}
.tab-btn:hover{color:#1a1a1a;background:#f0ede8}
.tab-btn.active{background:#fff;color:#1a1a1a;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.tab-pane{display:none}
.tab-pane.active{display:block}

/* ---- VENUE MAP ---- */
.venue-wrap{background:#fff;border:1px solid #e5e3dc;border-radius:12px;padding:1.25rem;margin-bottom:1rem}
.venue-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:1rem}
.venue-toolbar-title{font-size:14px;font-weight:700;color:#1a1a1a}
.venue-tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.vtool{font-size:12px;padding:5px 12px;border-radius:8px;cursor:pointer;border:1px solid #d1cfc7;background:#fff;color:#1a1a1a;font-family:inherit;transition:all .15s;white-space:nowrap}
.vtool:hover{background:#f3f2ef}
.vtool.active{background:#1a1a1a;color:#fff;border-color:#1a1a1a}
.vtool.danger{color:#dc2626;border-color:#fca5a5}
.vtool.danger:hover{background:#fef2f2}
.venue-color-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.vcolor{width:22px;height:22px;border-radius:4px;cursor:pointer;border:2px solid transparent;transition:transform .1s}
.vcolor:hover{transform:scale(1.15)}
.vcolor.active{border-color:#1a1a1a;box-shadow:0 0 0 1px #fff inset}
.venue-canvas-wrap{position:relative;overflow:auto;border:1px solid #e5e3dc;border-radius:8px;background:#f8f7f4;cursor:crosshair}
.venue-canvas-wrap.mode-select{cursor:default}
.venue-canvas-wrap.mode-pan{cursor:grab}
#venue-canvas{display:block;image-rendering:pixelated}
.venue-info{font-size:12px;color:var(--text-muted);margin-top:8px;display:flex;gap:16px;flex-wrap:wrap}
.venue-info span{display:flex;align-items:center;gap:4px}
.venue-legend{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.vleg{display:flex;align-items:center;gap:4px;font-size:12px;color:#555}
.vleg-dot{width:12px;height:12px;border-radius:2px;flex-shrink:0;border:1px solid rgba(0,0,0,.1)}
/* area edit modal */
.area-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:10001;display:none;align-items:center;justify-content:center}
.area-modal-overlay.visible{display:flex}
.area-modal{background:#fff;border-radius:14px;padding:1.5rem;width:320px;max-width:95vw;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.area-modal-title{font-size:15px;font-weight:700;margin-bottom:1.25rem}
.area-field{margin-bottom:12px}
.area-field label{display:block;font-size:12px;font-weight:600;color:#666;margin-bottom:5px}
.area-field input,.area-field select{width:100%;font-size:13px;padding:8px 10px;border:1px solid #d1cfc7;border-radius:8px;background:#f8f7f4;font-family:inherit;outline:none}
.area-field input:focus{border-color:#7c3aed;background:#fff}
.area-color-grid{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.area-color-opt{width:24px;height:24px;border-radius:4px;cursor:pointer;border:2px solid transparent}
.area-color-opt:hover{transform:scale(1.1)}
.area-color-opt.active{border-color:#1a1a1a}
.area-modal-actions{display:flex;gap:8px;justify-content:space-between;margin-top:1.25rem}

/* Venue context menu */
.vctx{position:fixed;background:#fff;border:1px solid #e5e3dc;border-radius:10px;
  box-shadow:0 6px 24px rgba(0,0,0,.14);z-index:9999;min-width:180px;padding:4px 0;display:none}
.vctx.open{display:block}
.vctx-header{padding:8px 14px 6px;font-size:12px;font-weight:700;color:var(--text-muted);border-bottom:1px solid #f0ede8;margin-bottom:2px}
.vctx-item{display:flex;align-items:center;gap:8px;padding:7px 14px;font-size:12px;color:#1a1a1a;cursor:pointer;white-space:nowrap}
.vctx-item:hover{background:#f8f7f4}
.vctx-item.danger{color:#dc2626}
.vctx-item.danger:hover{background:#fef2f2}
.vctx-icon{font-size:14px;width:18px;text-align:center;flex-shrink:0}
.vctx-sep{height:1px;background:#f0ede8;margin:3px 0}
/* Venue tooltip */
.venue-tip{position:fixed;background:#1a1a1a;color:#fff;font-size:12px;padding:6px 10px;
  border-radius:7px;pointer-events:none;white-space:nowrap;z-index:9998;display:none;
  box-shadow:0 4px 12px rgba(0,0,0,.25);max-width:220px;white-space:normal;line-height:1.4}

/* Expo stands */
.stand-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:6px 10px;border-radius:8px;cursor:grab;border:2px solid;
  font-size:12px;font-weight:600;user-select:none;transition:transform .1s,box-shadow .1s;
  min-width:90px;text-align:center;line-height:1.2}
.stand-chip:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.stand-chip:active{cursor:grabbing;transform:scale(0.97)}
.stand-chip .stand-size{font-size:12px;opacity:.7;margin-top:1px;white-space:nowrap}
/* Stand ghost overlay on canvas */
#stand-ghost{position:fixed;pointer-events:none;z-index:9997;display:none;
  border:2px dashed #378ADD;background:rgba(55,138,221,.18);border-radius:3px;
  font-size:12px;font-weight:600;color:#378ADD;display:none;
  align-items:center;justify-content:center;text-align:center;padding:2px}

/* ── Topbar save button state ── */
.topbar-save.btn.primary{
  background:var(--yt-gradient);color:#fff;border:none;
  font-weight:600;
}
.topbar-save.btn.primary:hover{filter:brightness(1.08)}
.topbar-save.btn.save-clean{
  background:transparent;color:var(--text-muted);border:1px solid var(--bg-border);
}
.topbar-save.btn.save-clean:hover{background:var(--bg-raised);color:var(--text)}
.topbar-save .save-dot{border-color:rgba(0,0,0,.2)}

/* Canvas — prevent text selection causing blue selection rectangles */
#venue-canvas{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;cursor:grab}
#venue-canvas:active{cursor:grabbing}
#venue-canvas-wrap{user-select:none;-webkit-user-select:none}

/* Sponsor modal */
.sponsor-modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.45);
  display:none;align-items:center;justify-content:center;z-index:10000;padding:1rem
}
.sponsor-modal-overlay.visible{display:flex}
.sponsor-modal{
  background:#fff;border-radius:14px;padding:1.25rem;max-width:520px;width:100%;
  box-shadow:0 12px 40px rgba(0,0,0,0.25);max-height:90vh;overflow-y:auto
}
.sponsor-modal-title{font-size:17px;font-weight:700;margin-bottom:0.75rem;color:#1a1a1a}
.sponsor-modal-body{margin-bottom:1rem}
.sponsor-modal-actions{display:flex;gap:8px;justify-content:flex-end}
.sp-option:hover{background:#f0ede8}
.sp-option.selected{background:#dbeafe}

/* Sponsors tab */
#tab-sponsors .sp-tier-block{margin-bottom:1.25rem}
#tab-sponsors .sp-card{
  display:inline-flex;align-items:center;gap:8px;background:#f8f7f4;
  border:1px solid #e5e3dc;border-radius:8px;padding:8px 12px;font-size:13px;
  margin:0 6px 6px 0
}
#tab-sponsors .sp-card .sp-del{
  background:none;border:none;cursor:pointer;color:#dc2626;font-size:16px;line-height:1;
  padding:0 2px;margin-left:4px;border-radius:3px
}
#tab-sponsors .sp-card .sp-del:hover{background:#fee2e2}

/* ── Dark mode overrides for content ── */
[data-theme="dark"] body{background:var(--bg-page)}
[data-theme="dark"] .toolbar,[data-theme="dark"] .bank,[data-theme="dark"] .add-panel,
[data-theme="dark"] .json-panel,[data-theme="dark"] .stats-panel,
[data-theme="dark"] .venue-wrap,[data-theme="dark"] #global-import-panel,
[data-theme="dark"] #tab-sponsors>div{
  background:var(--bg-surface)!important;border-color:var(--bg-border)!important;
}
[data-theme="dark"] .tl-outer{background:var(--bg-surface);border-color:var(--bg-border);border-left-color:#EC6628}
[data-theme="dark"] .stg{background:var(--bg-surface);border-right-color:rgba(236,102,40,0.3)}
[data-theme="dark"] .tcol{background:var(--bg-raised);border-right-color:#EC6628}
[data-theme="dark"] .gl.hour{background:rgba(236,102,40,0.22)}
[data-theme="dark"] .gl.half{background:rgba(236,102,40,0.08)}
[data-theme="dark"] .col-hdr{background:var(--bg-raised);border-color:var(--bg-border)}
[data-theme="dark"] .kpi{background:var(--bg-raised)}
[data-theme="dark"] .stats-card{background:var(--bg-raised)}
[data-theme="dark"] .bar-track,[data-theme="dark"] .coverage-track{background:var(--bg-border)}
[data-theme="dark"] .modal{background:var(--bg-surface)}
[data-theme="dark"] .modal-field input,[data-theme="dark"] .modal-field select,
[data-theme="dark"] .form-field input,[data-theme="dark"] .form-field select{
  background:var(--bg-raised);border-color:var(--bg-border);color:var(--text)
}
[data-theme="dark"] .track-dropdown,[data-theme="dark"] .ctx-menu{
  background:var(--bg-surface);border-color:var(--bg-border)
}
[data-theme="dark"] .ctx-item:hover{background:var(--bg-raised)}
[data-theme="dark"] .bi{background:var(--bg-raised);border-color:var(--bg-border)}
[data-theme="dark"] .tab-bar{background:var(--bg-raised);border-color:var(--bg-border)}
[data-theme="dark"] .tab-btn.active{background:var(--bg-surface)}
/* Buttons in dark mode — no white backgrounds */
[data-theme="dark"] .btn{background:var(--bg-raised);color:var(--text);border-color:var(--bg-border)}
[data-theme="dark"] .btn:hover{background:var(--bg-border)}
[data-theme="dark"] .btn.primary{background:#1a1a1a;color:#f0f0f0;border-color:#333}
[data-theme="dark"] .btn.primary:hover{background:#2a2a2a}
[data-theme="dark"] .btn.accent{background:#6d28d9;border-color:#7c3aed}
[data-theme="dark"] .btn.green{background:#15803d;border-color:#16a34a}
[data-theme="dark"] .btn.danger{background:#b91c1c;border-color:#dc2626}
[data-theme="dark"] .cfg-filter-input,[data-theme="dark"] .cfg-filter-select{background:var(--bg-raised);border-color:var(--bg-border);color:var(--text)}
[data-theme="dark"] .json-area{background:var(--bg-raised);border-color:var(--bg-border);color:var(--text)}
[data-theme="dark"] .area-modal,[data-theme="dark"] .sponsor-modal{
  background:var(--bg-surface)
}
[data-theme="dark"] .area-field input,[data-theme="dark"] .area-field select{
  background:var(--bg-raised);border-color:var(--bg-border);color:var(--text)
}
[data-theme="dark"] .spk-pill{background:var(--bg-raised);border-color:var(--bg-border)}
[data-theme="dark"] .geo-kpi{background:var(--bg-raised);border-color:var(--bg-border)}
[data-theme="dark"] .country-bar-wrap,[data-theme="dark"] .country-bar-wrap{background:var(--bg-border)}
[data-theme="dark"] #world-map-wrap{background:#1a2a3a}
[data-theme="dark"] .spk-table th{border-color:var(--bg-border)}
[data-theme="dark"] .spk-table td{border-color:var(--bg-raised)}
[data-theme="dark"] .spk-table tr:hover td{background:var(--bg-raised)}
[data-theme="dark"] #tab-sponsors .sp-card{
  background:var(--bg-raised);border-color:var(--bg-border)
}
/* ── Dark mode text legibility fixes ── */
[data-theme="dark"] .str{opacity:.92}
[data-theme="dark"] .sd{opacity:.8}
[data-theme="dark"] .col-hdr-name{color:var(--text)}
[data-theme="dark"] .col-hdr-sub{color:var(--text-muted)}
[data-theme="dark"] .tl span{color:#EC6628;opacity:.85}
[data-theme="dark"] .leg{color:var(--text-2)}
[data-theme="dark"] .bank-t{color:var(--text-muted)}
[data-theme="dark"] .bem{color:var(--text-faint)}
[data-theme="dark"] .bis{color:var(--text-muted)}
[data-theme="dark"] .add-panel-title{color:var(--text)}
[data-theme="dark"] .form-field label{color:var(--text-muted)}
[data-theme="dark"] .stats-card-title{color:var(--text-muted)}
[data-theme="dark"] .stats-title{color:var(--text)}
[data-theme="dark"] .kpi-val{color:var(--text)}
[data-theme="dark"] .kpi-lbl{color:var(--text-muted)}
[data-theme="dark"] .kpi-sub{color:var(--text-faint)}
[data-theme="dark"] .bar-label{color:var(--text-2)}
[data-theme="dark"] .bar-val{color:var(--text-muted)}
[data-theme="dark"] .modal-title{color:var(--text)}
[data-theme="dark"] .modal-field label{color:var(--text-muted)}
[data-theme="dark"] .ctx-section{color:var(--text-faint)}
[data-theme="dark"] .ctx-item{color:var(--text)}

/* ════════════════════════════════════════════
   CONFIG TAB — table + filters
   ════════════════════════════════════════════ */

/* Filters */
.cfg-filters{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.cfg-filter-input{font-size:12px;padding:0 10px;border:1px solid var(--bg-border);border-radius:8px;background:var(--bg-raised);color:var(--text);font-family:inherit;outline:none;height:32px;transition:border-color .15s}
.cfg-filter-input:focus{border-color:#EC6628;background:var(--bg-surface)}
.cfg-filter-select{font-size:12px;padding:0 10px;border:1px solid var(--bg-border);border-radius:8px;background:var(--bg-raised);color:var(--text);font-family:inherit;outline:none;height:32px;cursor:pointer;transition:border-color .15s}
.cfg-filter-select:focus{border-color:#EC6628}

/* Meta bar */
.cfg-meta-bar{font-size:12px;color:var(--text-muted);min-height:18px}

/* Table */
.cfg-table-wrap{flex:1;overflow:auto;border:1px solid var(--bg-border);border-radius:10px;min-height:200px}
.cfg-table{width:100%;border-collapse:collapse;font-size:12px}
.cfg-table thead{position:sticky;top:0;z-index:2}
.cfg-table th{background:var(--bg-raised);padding:9px 12px;text-align:left;font-size:12px;font-weight:700;color:var(--text-muted);white-space:nowrap;border-bottom:2px solid var(--bg-border);text-transform:uppercase;letter-spacing:.5px}
.cfg-table td{padding:8px 12px;border-bottom:1px solid var(--bg-border-light);vertical-align:middle;white-space:nowrap;color:var(--text-2)}
.cfg-table tr:last-child td{border-bottom:none}
.cfg-table tbody tr:hover td{background:var(--bg-raised)}
.td-email{font-weight:600;color:var(--text)!important}
.td-mono{font-family:Menlo,Monaco,'Courier New',monospace;font-size:12px;color:var(--text-muted)!important}
.td-badge{display:inline-flex;align-items:center;gap:4px;background:var(--bg-raised);border:1px solid var(--bg-border);border-radius:5px;padding:2px 8px;font-size:12px;font-weight:500;color:var(--text)}
.v-dim{opacity:.55;font-size:12px}
.cfg-state{text-align:center;padding:3rem 1rem;color:var(--text-muted);font-size:13px}
.cfg-state-err{color:#dc2626}

/* Pagination */
.cfg-pager{display:flex;align-items:center;gap:7px;justify-content:flex-end;flex-wrap:wrap}
.cfg-page-btn{padding:5px 12px;border-radius:7px;border:1px solid var(--bg-border);background:var(--bg-raised);color:var(--text-2);cursor:pointer;font-size:12px;font-family:inherit;transition:background .1s,color .1s}
.cfg-page-btn:hover:not(:disabled){background:var(--bg-border);color:var(--text)}
.cfg-page-btn:disabled{opacity:.35;cursor:default}
.cfg-page-info{font-size:12px;color:var(--text-muted);padding:0 4px}

/* Dark mode adjustments */
[data-theme="dark"] .cfg-table-wrap{border-color:var(--bg-border)}

/* ════════════════════════════════════════════════════════
   PROFILE DRAWER
   ════════════════════════════════════════════════════════ */
.profile-drawer{
  position:fixed;top:0;right:0;height:100vh;height:100dvh;width:380px;max-width:100vw;
  background:var(--bg-surface);border-left:1px solid var(--bg-border);
  z-index:var(--z-modal);transform:translateX(100%);
  transition:transform .25s ease;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:-8px 0 32px rgba(0,0,0,.12);
}
.profile-drawer.open{transform:translateX(0)}
.profile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:calc(var(--z-modal) - 1)}
.profile-overlay.open{display:block}
.profile-drawer-inner{display:flex;flex-direction:column;height:100%;overflow-y:auto;padding:1.5rem}
.profile-drawer-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-shrink:0}
.profile-drawer-title{font-size:17px;font-weight:700;color:var(--text)}
.profile-close-btn{width:32px;height:32px;border:none;background:var(--bg-raised);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:background .1s,color .1s}
.profile-close-btn:hover{background:var(--bg-border);color:var(--text)}
/* Photo section */
.profile-photo-section{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:1.25rem;padding-bottom:1.25rem;border-bottom:1px solid var(--bg-border)}
.profile-avatar-preview{width:80px;height:80px;border-radius:50%;background:var(--yt-gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;overflow:hidden;flex-shrink:0;font-family:inherit}
.profile-email-tag{font-size:12px;color:var(--text-muted);text-align:center;margin-bottom:1.25rem;padding:6px 12px;background:var(--bg-raised);border-radius:20px;border:1px solid var(--bg-border)}
/* Form */
.profile-form{display:flex;flex-direction:column;gap:14px;flex:1}
.profile-field{display:flex;flex-direction:column;gap:5px}
.profile-field label{font-size:12px;font-weight:600;color:var(--text-muted);display:flex;align-items:center;gap:6px}
.profile-field input{width:100%;font-size:13px;padding:8px 10px;border:1px solid var(--bg-border);border-radius:8px;background:var(--bg-raised);color:var(--text);font-family:inherit;outline:none;transition:border-color .15s,background .15s}
.profile-field input:focus{border-color:var(--yt-orange);background:var(--bg-surface)}
.pf-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;font-size:12px;font-weight:700;flex-shrink:0}
.pf-in{background:#0077b5;color:#fff}
.pf-x{background:#000;color:#fff;font-size:12px}
.pf-ig{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff}
.pf-wa{background:transparent;font-size:13px}
/* Actions */
.profile-actions{display:flex;gap:8px;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--bg-border);flex-shrink:0}
/* Phone combo */
.phone-combo{display:flex;gap:6px}
.phone-country-sel{width:108px;flex-shrink:0;font-size:12px;padding:8px 6px;border:1px solid var(--bg-border);border-radius:8px;background:var(--bg-raised);color:var(--text);font-family:inherit;outline:none;cursor:pointer;transition:border-color .15s}
.phone-country-sel:focus{border-color:var(--yt-orange)}
.phone-number-inp{flex:1}
.wa-check{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;color:var(--text-2);cursor:pointer;user-select:none}
.wa-check input[type=checkbox]{width:15px;height:15px;accent-color:var(--yt-orange);cursor:pointer;flex-shrink:0}

/* ════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ════════════════════════════════════════════════════════ */
.toast-stack{
  position:fixed;bottom:16px;right:16px;
  z-index:var(--z-toast);
  display:flex;flex-direction:column;gap:8px;
  align-items:flex-end;pointer-events:none;
  /* reset de estilos UA cuando actúa como [popover] (top-layer: encima de <dialog> y de z-index legados) */
  inset:auto 16px 16px auto;margin:0;border:none;padding:0;background:transparent;overflow:visible;width:auto;height:auto;
}
.toast-act{border:1px solid var(--bg-border);background:var(--bg-raised);color:var(--text);border-radius:7px;padding:4px 10px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;flex-shrink:0}
.toast-act:hover{background:var(--bg-border)}
.toast{
  display:flex;align-items:center;gap:10px;
  background:var(--bg-surface);border:1px solid var(--bg-border);
  border-radius:10px;padding:11px 14px 14px 12px;
  min-width:280px;max-width:400px;
  box-shadow:0 4px 24px rgba(0,0,0,.13);
  position:relative;overflow:hidden;
  pointer-events:all;
  opacity:0;transform:translateX(calc(100% + 20px));
  transition:opacity .25s ease,transform .25s ease;
}
.toast.toast-visible{opacity:1;transform:translateX(0)}
.toast.toast-hide{opacity:0;transform:translateX(calc(100% + 20px))}
.toast-ok  {border-left:3px solid #22c55e}
.toast-info{border-left:3px solid #3b82f6}
.toast-warn{border-left:3px solid #f59e0b}
.toast-err {border-left:3px solid #dc2626}
.toast-icon{font-size:13px;font-weight:700;width:18px;text-align:center;flex-shrink:0}
.toast-ok   .toast-icon{color:#22c55e}
.toast-info .toast-icon{color:#3b82f6}
.toast-warn .toast-icon{color:#f59e0b}
.toast-err  .toast-icon{color:#dc2626}
.toast-msg{flex:1;font-size:12px;color:var(--text);line-height:1.45}
.toast-x{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:12px;padding:2px 5px;border-radius:4px;transition:background .1s;flex-shrink:0;font-family:inherit}
.toast-x:hover{background:var(--bg-raised)}
.toast-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--bg-border)}
.toast-bar{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(1);transition:transform 0ms linear}
.toast-ok   .toast-bar{background:#22c55e}
.toast-info .toast-bar{background:#3b82f6}
.toast-warn .toast-bar{background:#f59e0b}
.toast-err  .toast-bar{background:#dc2626}

/* ════════════════════════════════════════════════════════
   SETTINGS PANELS
   ════════════════════════════════════════════════════════ */
.stg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:16px}
.stg-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stg-card{background:var(--bg-surface);border:1px solid var(--bg-border);border-radius:12px;padding:1.25rem}
.stg-card-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:1rem;padding-bottom:10px;border-bottom:1px solid var(--bg-border)}
.stg-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.stg-row:last-child{margin-bottom:0}
.stg-label{font-size:12px;color:var(--text-2);font-weight:500;flex-shrink:0;min-width:140px}
.stg-ctrl{flex:1}
.stg-inp{width:100%;font-size:12px;padding:7px 10px;border:1px solid var(--bg-border);border-radius:8px;background:var(--bg-raised);color:var(--text);font-family:inherit;outline:none;transition:border-color .15s}
.stg-inp:focus{border-color:var(--yt-orange)}
/* Color row */
.color-row{display:flex;align-items:center;gap:8px}
.color-pick{width:36px;height:32px;padding:2px 3px;border:1px solid var(--bg-border);border-radius:6px;cursor:pointer;background:var(--bg-raised);flex-shrink:0}
.hex-inp{width:100px;font-size:12px;padding:6px 8px;border:1px solid var(--bg-border);border-radius:6px;background:var(--bg-raised);color:var(--text);font-family:monospace;outline:none;transition:border-color .15s}
.hex-inp:focus{border-color:var(--yt-orange)}
/* Upload preview */
.upload-preview-wrap{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.upload-preview{width:80px;height:80px;border:2px dashed var(--bg-border);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--bg-raised)}
/* Gradient preset chips */
.grad-preset{transition:transform .1s,box-shadow .1s}
.grad-preset:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.25)!important}
/* Compact mode */
body.compact .main-inner{padding:12px}
body.compact .stg-card{padding:.9rem}

/* ════════════════════════════════════════════════════════
   STATS DARK MODE OVERRIDES
   ════════════════════════════════════════════════════════ */
[data-theme="dark"] .stats-panel{background:var(--bg-surface);border-color:var(--bg-border)}
[data-theme="dark"] .stats-card{background:var(--bg-raised)}
[data-theme="dark"] .stats-card-title{color:var(--text-muted)}
[data-theme="dark"] .stats-header{border-color:var(--bg-border)}
[data-theme="dark"] .stats-title{color:var(--text)}
[data-theme="dark"] .kpi{background:var(--bg-raised)}
[data-theme="dark"] .kpi-muted{background:var(--bg-raised)}
[data-theme="dark"] .kpi-party{background:#1a0d2e}
[data-theme="dark"] .kpi-val{color:var(--text)}
[data-theme="dark"] .kpi-lbl{color:var(--text-muted)}
[data-theme="dark"] .kpi-sub{color:var(--text-faint)}
[data-theme="dark"] .bar-label{color:var(--text-2)}
[data-theme="dark"] .bar-track{background:var(--bg-border)}
[data-theme="dark"] .bar-val{color:var(--text-muted)}
[data-theme="dark"] .coverage-track{background:var(--bg-border)}
[data-theme="dark"] .coverage-label{color:var(--text-2)}
[data-theme="dark"] .spk-table th{background:var(--bg-raised);border-color:var(--bg-border);color:var(--text-muted)}
[data-theme="dark"] .spk-table td{border-color:var(--bg-border-light);color:var(--text-2)}
[data-theme="dark"] .spk-table tr:hover td{background:var(--bg-raised)}
/* Speaker avatars + track badges in dark mode.
   inset box-shadow overlays a dark tint on the pastel background WITHOUT affecting text color.
   filter on parent would also darken the text — box-shadow avoids that. */
[data-theme="dark"] .spk-badge{
  box-shadow:inset 0 0 0 200px rgba(0,0,0,.52) !important;
  color:#fff !important;
  border:none !important;
}
[data-theme="dark"] .spk-table td:first-child div{
  box-shadow:inset 0 0 0 200px rgba(0,0,0,.52) !important;
  color:#fff !important;
}
[data-theme="dark"] .spk-pill{background:var(--bg-raised);border-color:var(--bg-border)}
[data-theme="dark"] .geo-kpi{background:var(--bg-raised);border-color:var(--bg-border)}
[data-theme="dark"] .geo-kpi-val{color:var(--text)}
[data-theme="dark"] .geo-kpi-lbl{color:var(--text-muted)}
[data-theme="dark"] .country-row{border-color:var(--bg-border-light) !important}
[data-theme="dark"] .country-name{color:var(--text) !important}
[data-theme="dark"] .country-bar-wrap{background:var(--bg-border) !important}
[data-theme="dark"] .country-count{color:var(--text-muted) !important}
[data-theme="dark"] .bar-label{color:var(--text-2) !important}
[data-theme="dark"] .bar-val{color:var(--text-muted) !important}
[data-theme="dark"] .geo-kpi-val{color:var(--text) !important;font-size:22px}
[data-theme="dark"] .geo-kpi-lbl{color:var(--text-muted) !important}

/* Leaflet map dark mode — invert tiles */
[data-theme="dark"] #leaflet-map .leaflet-tile-pane{filter:brightness(.65) invert(1) hue-rotate(200deg) saturate(.5)}
[data-theme="dark"] #leaflet-map .leaflet-marker-pane{filter:none}
[data-theme="dark"] #world-map-wrap{background:#1a2a3a;border-radius:8px}

/* Smart calculator table — override ALL inline backgrounds/colors */
[data-theme="dark"] #smart-calculator table{background:var(--bg-surface);color:var(--text-2)}
[data-theme="dark"] #smart-calculator tr{background-color:var(--bg-surface) !important;border-color:var(--bg-border) !important}
[data-theme="dark"] #smart-calculator thead tr{background-color:var(--bg-raised) !important}
[data-theme="dark"] #smart-calculator th{background-color:var(--bg-raised) !important;color:var(--text-muted) !important;border-color:var(--bg-border) !important}
[data-theme="dark"] #smart-calculator td{color:var(--text-2) !important;border-color:var(--bg-border) !important}
/* FOCUS rows → subtle amber in dark */
[data-theme="dark"] #smart-calculator tr[style*="fefce8"]{background-color:rgba(245,158,11,.1) !important}
/* Exhausted rows → subtle green in dark */
[data-theme="dark"] #smart-calculator tr[style*="f0fdf4"]{background-color:rgba(34,197,94,.08) !important}
/* Group header rows */
[data-theme="dark"] #smart-calculator tr[style*="f3f1ec"]{background-color:var(--bg-raised) !important}
/* Alert boxes */
[data-theme="dark"] #smart-calculator div[style*="d1fae5"]{background:rgba(16,185,129,.12) !important;border-color:rgba(16,185,129,.3) !important;color:var(--text) !important}
[data-theme="dark"] #smart-calculator div[style*="dbeafe"]{background:rgba(59,130,246,.12) !important;border-color:rgba(59,130,246,.3) !important;color:var(--text) !important}
[data-theme="dark"] #smart-calculator div[style*="fef3c7"]{background:rgba(245,158,11,.12) !important;border-color:rgba(245,158,11,.3) !important;color:var(--text) !important}
[data-theme="dark"] #smart-calculator div[style*="linear-gradient"]{background:linear-gradient(135deg,var(--bg-raised) 0%,var(--bg-surface) 100%) !important;border-color:var(--bg-border) !important}

/* Pricing table */
[data-theme="dark"] #pricing-table table{background:var(--bg-surface);color:var(--text-2)}
[data-theme="dark"] #pricing-table tr{background-color:var(--bg-surface) !important;border-color:var(--bg-border) !important}
[data-theme="dark"] #pricing-table thead tr{background-color:var(--bg-raised) !important}
[data-theme="dark"] #pricing-table th{background-color:var(--bg-raised) !important;color:var(--text-muted) !important}
[data-theme="dark"] #pricing-table td{color:var(--text-2) !important;border-color:var(--bg-border) !important}
[data-theme="dark"] #pricing-table tr[style*="f3f1ec"]{background-color:var(--bg-raised) !important}

/* Revenue and placement progress tracks */
[data-theme="dark"] #revenue-by-tier div[style*="#f0ede8"],[data-theme="dark"] #revenue-by-tier div[style*="#e8e6e0"]{background:var(--bg-border) !important}
[data-theme="dark"] #placement-progress div[style*="#f0ede8"]{background:var(--bg-border) !important}

/* Finance KPIs card borders */
[data-theme="dark"] #finance-kpis > div{background:var(--bg-raised) !important;border-color:var(--bg-border) !important}

/* Donut chart SVG text */
[data-theme="dark"] #sponsor-distribution svg text{fill:var(--text) !important}

/* Inline color overrides throughout stats panels */
[data-theme="dark"] .stats-panel [style*="color:#1a1a1a"]{color:var(--text) !important}
[data-theme="dark"] .stats-panel [style*="color:#666"]{color:var(--text-muted) !important}
[data-theme="dark"] .stats-panel [style*="color:var(--text-muted)"]{color:var(--text-muted) !important}
[data-theme="dark"] .stats-panel [style*="color:#444"]{color:var(--text-2) !important}
[data-theme="dark"] .stats-panel [style*="color:#aaa"]{color:var(--text-faint) !important}
[data-theme="dark"] .stats-panel [style*="background:#fff"]{background:var(--bg-surface) !important}
[data-theme="dark"] .stats-panel [style*="background:#f8f7f4"]{background:var(--bg-raised) !important}
[data-theme="dark"] .stats-panel [style*="background:#fafaf8"]{background:var(--bg-raised) !important}
[data-theme="dark"] .stats-panel [style*="background:#f3f1ec"]{background:var(--bg-raised) !important}
[data-theme="dark"] .finance-top > div:first-child{background:var(--bg-raised) !important;border-color:var(--bg-border) !important}

body.compact .nav-item{padding:6px 16px}

/* ════════════════════════════════════════════════════════
   PRINT STYLES — Parrilla del Evento
   ════════════════════════════════════════════════════════ */
.print-header { display:none } /* hidden on screen */

@media print {
  /* ── Reset a light theme for print (override dark mode) ── */
  :root, [data-theme="dark"] {
    --bg-page:#ffffff; --bg-surface:#ffffff; --bg-raised:#f8f7f4;
    --bg-border:#e0ddd7; --bg-border-light:#ece9e3;
    --text:#1a1a1a; --text-2:#444; --text-muted:#666; --text-faint:#999;
    --header-bg:#ffffff; --header-border:#e0ddd7;
    --shadow-sm:none; --shadow-md:none;
    --yt-gradient:linear-gradient(90deg,#EC6628,#FFBF00);
  }

  /* ── Page setup ── */
  @page { margin:12mm 10mm; size:A4 landscape; }

  /* ── Force background-color printing ── */
  * { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }

  /* ── Hide all shell UI ── */
  .topbar, .sidebar, .drawer-overlay, .toast-stack,
  .topbar-alert-wrap, #alert-panel, .sbanner, .cbanner,
  .add-panel, .bank, .skip-link, #global-import-panel,
  .no-print { display:none !important; }

  /* ── Remove ALL overflow/height constraints — must use !important to beat inline styles ── */
  html, body        { height:auto !important; max-height:none !important; overflow:visible !important; background:#fff; }
  .app-shell        { height:auto !important; max-height:none !important; overflow:visible !important; display:block !important; background:#fff; }
  .shell-body       { height:auto !important; max-height:none !important; overflow:visible !important; display:block !important; }
  .sidebar          { display:none !important; }
  .main             { height:auto !important; max-height:none !important; overflow:visible !important; flex:none; background:#fff; }
  .main-inner       { height:auto !important; max-height:none !important; overflow:visible !important; padding:4mm 0; max-width:100%; }
  .tab-pane.active  { height:auto !important; max-height:none !important; overflow:visible !important; }
  .tl-outer         { height:auto !important; max-height:none !important; overflow:visible !important; }
  .stg, .tcol       { overflow:visible !important; }

  /* ── Only show the ACTIVE tab (lo que el usuario está viendo) ── */
  .tab-pane { display:none !important; }
  .tab-pane.active { display:block !important; }

  /* ── Show print-only header ── */
  .print-header {
    display:block !important;
    padding-bottom:5mm;
    margin-bottom:5mm;
    border-bottom:2.5px solid #EC6628;
  }

  /* ── Section header ── */
  .section-hdr { margin-bottom:4mm; }
  .section-title { font-size:16pt; color:#1a1a1a; font-weight:700; }
  .breadcrumb { color:#666; font-size:8pt; }

  /* ── Legend / toolbar ── */
  .toolbar {
    border:none; background:none; border-radius:0;
    padding:0 0 3mm; margin-bottom:3mm;
    border-bottom:1px solid #e0ddd7;
  }
  .leg { font-size:8pt; color:#444; }
  .leg-dot { width:10px; height:10px; }

  /* ── Timeline container ── */
  .tl-outer {
    overflow:visible; height:auto;
    border:1px solid #ccc;
    border-left:3px solid #EC6628;
    border-radius:0; background:#fff;
    margin-bottom:0;
  }

  /* ── Time column ── */
  .tcol { background:#f8f7f4; border-right:2px solid #EC6628; }
  .tl span { color:#EC6628; font-weight:600; opacity:1; font-size:8pt; }

  /* ── Grid lines ── */
  .gl.hour { background:rgba(0,0,0,.08); }
  .gl.half { background:rgba(0,0,0,.03); }

  /* ── Stage columns ── */
  .stg { background:#fff; border-right:1px solid #d0cdc5; }
  .col-hdr { background:#f8f7f4; border-bottom:1px solid #d0cdc5; }
  .col-hdr-name { color:#1a1a1a; font-size:10pt; font-weight:600; }
  .col-hdr-sub { color:#666; font-size:8pt; }

  /* ── Slot cards ── */
  .slot { cursor:default; box-shadow:0 1px 2px rgba(0,0,0,.08); border-width:1px; }
  .slot-del, .resize-handle { display:none !important; }
  .sn { font-size:8.5pt; font-weight:700; color:#1a1a1a; padding-right:0; }
  .str { font-size:7.5pt; color:#444; opacity:1; }
  .sd { font-size:7pt; color:#555; opacity:1; }

  /* ── Page breaks ── */
  .tl-outer { page-break-inside:auto; }
  .slot { page-break-inside:avoid; }

  /* ── Mi cuenta · Perfil: imprimir SOLO la vista limpia (.pf-print) ── */
  .acct:has(.pf-print) .acct-nav{ display:none !important; }
  #acct-content:has(.pf-print) > *:not(.pf-print){ display:none !important; }
  .pf-print{ display:block !important; color:#1a1a1a; }
  .pf-print *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
}

/* la vista de impresión del perfil está oculta en pantalla */
.pf-print{ display:none; }

/* ════════════════════════════════════════════════════════
   MI CUENTA — panel de ajustes (sub-nav izquierda + contenido)
   ════════════════════════════════════════════════════════ */
/* PG-2 (auditoría en vivo 2026-07-14): max-width sin centrar dejaba TODA la sección "Mi cuenta"
   (Perfil/Correos/Redes/Cuentas conectadas/Seguridad/Sesiones) pegada a la izquierda en monitores
   grandes, con más de la mitad de la pantalla en blanco — mismo patrón ya corregido en
   .mail-detail-pane (css/mail.css, max-width+margin-inline:auto). */
.acct{ display:flex; gap:26px; align-items:flex-start; max-width:1080px; margin-inline:auto; }
.acct-nav{ flex:0 0 208px; position:sticky; top:14px; display:flex; flex-direction:column; gap:3px; }
.acct-nav button{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:10px 13px; border-radius:10px; font-size:13.5px; font-family:inherit; color:var(--text-muted,#6b6660); background:transparent; border:1px solid transparent; cursor:pointer; transition:background .12s,color .12s,border-color .12s; }
.acct-nav button:hover{ background:var(--bg-raised,#f4f1ec); color:var(--text,#1c1b1a); }
.acct-nav button.active{ background:var(--bg-surface,#fff); color:var(--text,#1c1b1a); font-weight:600; border-color:var(--bg-border,#e7e3dd); box-shadow:var(--shadow-sm,0 1px 2px rgba(0,0,0,.05)); }
.acct-nav .ic{ width:18px; text-align:center; font-size:15px; flex:none; }
.acct-nav .acct-nav-sep{ height:1px; background:var(--bg-border,#e7e3dd); margin:8px 6px; }
.acct-content{ flex:1; min-width:0; }
.acct-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.acct-grid .full{ grid-column:1/-1; }
.acct-card{ background:var(--bg-surface,#fff); border:1px solid var(--bg-border,#e7e3dd); border-radius:14px; padding:18px 20px; }
.acct-card h3{ font-size:14px; font-weight:700; margin:0 0 14px; display:flex; align-items:center; gap:8px; }
.acct-card .lbl{ font-size:11.5px; font-weight:700; color:var(--text-muted,#6b6660); display:block; margin:13px 0 5px; letter-spacing:.2px; }
.acct-card .lbl:first-of-type{ margin-top:0; }
@media (max-width:880px){
  .acct{ flex-direction:column; }
  .acct-nav{ position:static; flex:none; width:100%; flex-direction:row; flex-wrap:wrap; gap:6px; }
  .acct-nav button{ width:auto; }
  .acct-nav .acct-nav-sep{ display:none; }
  .acct-grid{ grid-template-columns:1fr; }
}

/* ════════════════════════════════════════════════════════
   SPEAKERS PANEL
   ════════════════════════════════════════════════════════ */
/* Overlay */
.spk-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:calc(var(--z-modal) - 1)}
.spk-overlay.open{display:block}
/* Slide-in panel */
.spk-panel{
  position:fixed;top:0;right:0;height:100vh;height:100dvh;width:700px;max-width:96vw;
  background:var(--bg-surface);border-left:1px solid var(--bg-border);
  z-index:var(--z-modal);display:flex;flex-direction:column;overflow:hidden;
  transform:translateX(100%);transition:transform .25s ease;
  box-shadow:-8px 0 32px rgba(0,0,0,.15)
}
.spk-panel.open{transform:translateX(0)}
.spk-panel-top{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--bg-border);flex-shrink:0;gap:12px}
.spk-tabs-bar{display:flex;gap:0;border-bottom:1px solid var(--bg-border);flex-shrink:0;overflow-x:auto}
.spk-tab-btn{padding:9px 16px;border:none;background:transparent;font-size:12px;font-weight:500;color:var(--text-muted);cursor:pointer;font-family:inherit;white-space:nowrap;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.spk-tab-btn:hover{color:var(--text)}
.spk-tab-btn.active{color:var(--yt-orange);border-bottom-color:var(--yt-orange);font-weight:600}
.spk-panel-body{flex:1;overflow-y:auto}
.spk-tab-pane{display:none;padding:1.25rem}
.spk-tab-pane.active{display:block}
/* Form inside panel */
.spk-section-title{font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--bg-border)}
.spk-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.spk-field{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.spk-field-label{font-size:12px;font-weight:600;color:var(--text-muted)}
.spk-inp{width:100%;font-size:12px;padding:7px 10px;border:1px solid var(--bg-border);border-radius:8px;background:var(--bg-raised);color:var(--text);font-family:inherit;outline:none;transition:border-color .15s}
.spk-inp:focus{border-color:var(--yt-orange);background:var(--bg-surface)}
.spk-save-bar{margin-top:16px;padding-top:12px;border-top:1px solid var(--bg-border)}
/* List */
.spk-avatar-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
.spk-status-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px;font-weight:600}
.spk-empty{text-align:center;padding:2rem;color:var(--text-muted);font-size:13px}
.spk-name-cell{font-size:13px}
.spk-row{transition:background .1s}
.spk-row:hover td{background:var(--bg-raised)}
/* Payments table */
.spk-pay-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:8px}
.spk-pay-table th{background:var(--bg-raised);padding:7px 10px;text-align:left;font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;border-bottom:1px solid var(--bg-border)}
.spk-pay-table td{padding:7px 10px;border-bottom:1px solid var(--bg-border-light)}
/* Social links */
.spk-social-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--bg-border-light)}

/* ════════════════════════════════════════════════════════
   FLOOR PLAN BUILDER
   ════════════════════════════════════════════════════════ */
.fp-layout{display:flex;height:calc(100vh - 160px);min-height:400px;gap:0;border:1px solid var(--bg-border);border-radius:12px;overflow:hidden;background:var(--bg-surface)}
.fp-sidebar{width:160px;flex-shrink:0;background:var(--bg-raised);border-right:1px solid var(--bg-border);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}
.fp-sidebar-hdr{padding:10px 12px;font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;border-bottom:1px solid var(--bg-border)}
.fp-plan-list{flex:1;overflow-y:auto;padding:6px}
.fp-plan-item{display:flex;align-items:center;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:12px;color:var(--text-2);transition:background .1s;margin-bottom:2px}
.fp-plan-item:hover{background:var(--bg-border);color:var(--text)}
.fp-plan-item.active{background:rgba(236,102,40,.1);color:var(--yt-orange);font-weight:600;border-left:2px solid var(--yt-orange)}
.fp-plan-dim{font-size:12px;color:var(--text-muted);margin-top:1px}
.fp-new-plan{margin:8px;border:1px dashed var(--bg-border);border-radius:8px;padding:7px;font-size:12px;text-align:center;cursor:pointer;color:var(--yt-orange);transition:background .1s;background:none;width:calc(100% - 16px);font-family:inherit}
.fp-new-plan:hover{background:rgba(236,102,40,.07)}
/* Salones (Aluna Studio) — lista simple sin dibujar, ver js/venue-spaces-list.js */
.fp-vsl-list{padding:6px}
.fp-vsl-it{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px}
.fp-vsl-it:hover{background:var(--bg-border)}
.fp-vsl-main{flex:1;min-width:0}
.fp-vsl-nm{font-size:12px;color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-vsl-meta{font-size:11px;color:var(--text-muted)}
.fp-vsl-link{border:none;background:none;cursor:pointer;font-size:13px;width:24px;height:24px;border-radius:6px;color:var(--text-2);flex-shrink:0}
.fp-vsl-link:hover{background:var(--bg-surface);color:var(--yt-orange);box-shadow:0 0 0 1px var(--bg-border)}
.fp-main{flex:1;display:flex;flex-direction:column;overflow:hidden}
/* .fp-toolbar / .fp-tb-* live at the end of this file (CAD toolbar — floor-plan-toolbar.js) */
.fp-canvas-wrap{flex:1;overflow:auto;background:var(--bg-page);position:relative;cursor:crosshair}
.fp-canvas-wrap.mode-select{cursor:default}
.fp-canvas-wrap.mode-pan{cursor:grab}
.fp-canvas-wrap.mode-pan:active{cursor:grabbing}
.fp-canvas-wrap.mode-ruler-h{cursor:s-resize !important}
.fp-canvas-wrap.mode-ruler-v{cursor:e-resize !important}
.fp-status{padding:4px 12px;font-size:12px;color:var(--text-muted);border-top:1px solid var(--bg-border);flex-shrink:0;display:flex;gap:12px;background:var(--bg-raised)}
/* Space edit popup */
.fp-space-popup{position:absolute;background:var(--bg-surface);border:1px solid var(--bg-border);border-radius:10px;padding:12px;min-width:220px;z-index:500;box-shadow:var(--shadow-md)}
/* Door palette item */
.fp-palette-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 6px;border-radius:8px;border:1px solid var(--bg-border);background:var(--bg-surface);cursor:pointer;transition:background .1s,border-color .1s;width:100%;box-sizing:border-box}
.fp-palette-item:hover{background:rgba(236,102,40,.08);border-color:rgba(236,102,40,.4)}

/* Vidrio esmerilado — escopeado a los "lienzos" (Tableros, Constructor de planos): paneles
   flotantes translúcidos sobre el canvas, per identidad Aluna. NO usar en formularios/tablas. */
.glass-panel {
  background: color-mix(in srgb, var(--bg-surface) 72%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--bg-border) 60%, transparent);
}

/* ── CAD Toolbar (floor-plan-toolbar.js) ───────────────────────────── */
.fp-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--bg-border);
  background: color-mix(in srgb, var(--bg-surface) 72%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  flex-shrink: 0;
  min-height: 44px;
}

/* Button group */
.fp-tb-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Separator between groups */
.fp-tb-sep {
  width: 1px;
  height: 24px;
  background: var(--bg-border);
  margin: 0 6px;
  flex-shrink: 0;
}

/* Base button style */
.fp-tb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: none;
  color: var(--text-2);
  cursor: pointer;
  transition: background .1s, color .1s, border-color .1s;
  padding: 0;
  position: relative;
  font-family: inherit;
}

.fp-tb-btn:hover {
  background: var(--bg-border);
  color: var(--text);
}

/* Active tool (mutually exclusive) */
.fp-tb-btn.active {
  background: var(--yt-orange);
  color: #fff;
  border-color: var(--yt-orange);
}

.fp-tb-btn.active:hover {
  background: #d4571f;
  border-color: #d4571f;
}

/* ── Widgets compartidos de colaboración en vivo (Aluna Studio): chat flotante +
   banner de "está presentando" — usados por Tableros (inyectados inline, board-canvas.js)
   Y por Constructor de planos (aquí, global, ya que ese módulo no se carga perezosamente
   y no puede depender de que board-canvas.js ya haya inyectado sus estilos). ── */
.bc-chat-in{position:fixed;left:50%;bottom:78px;transform:translateX(-50%);z-index:100060;display:flex;align-items:center;gap:9px;background:var(--bg-surface);border:1px solid var(--bg-border);border-radius:24px;padding:7px 10px 7px 14px;box-shadow:0 10px 30px rgba(0,0,0,.22)}
.bc-chat-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.bc-chat-in input{border:none;outline:none;font-family:inherit;font-size:14px;width:280px;max-width:60vw;background:transparent;color:var(--text)}
.bc-present-banner{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:12;display:flex;align-items:center;gap:8px;background:var(--bg-surface);border:1px solid var(--bg-border);border-radius:22px;padding:6px 8px 6px 13px;box-shadow:0 6px 20px rgba(0,0,0,.18);font-size:13px;color:var(--text)}
.bc-pb-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;animation:bcpulse 1.2s infinite}
.bc-present-banner button{border:none;background:var(--brand-primary);color:#09090B;border-radius:14px;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;margin-left:4px}
@keyframes bcpulse{0%,100%{opacity:1}50%{opacity:.35}}

/* Grid ON — blue tinted (different from active tool) */
.fp-tb-btn.fp-tb-toggle-on {
  background: rgba(59,130,246,0.12);
  color: #3b82f6;
  border-color: rgba(59,130,246,0.3);
}

.fp-tb-btn.fp-tb-toggle-on:hover {
  background: rgba(59,130,246,0.2);
}

/* Grid OFF — dimmed */
.fp-tb-btn.fp-tb-toggle-off {
  color: var(--text-muted);
  opacity: 0.55;
}

.fp-tb-btn.fp-tb-toggle-off:hover {
  opacity: 1;
  background: var(--bg-border);
  color: var(--text);
}

/* Disabled (undo/redo when stack empty) */
.fp-tb-btn.fp-tb-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* Status area */
.fp-tb-status {
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size:12px;
}

/* ═══════════════════════════════════════════════════════
   GLOBAL LANDING — Events list / dashboard
   ═══════════════════════════════════════════════════════ */
.global-landing-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:1.5rem; gap:1rem; flex-wrap:wrap;
}
.global-stats-row {
  display:flex; gap:8px; margin-top:8px; flex-wrap:wrap;
}
.gstat {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:20px;
  font-size:12px; font-weight:600;
}
.gstat::before { content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.gstat-active   { color:#16a34a; background:#dcfce7; }
.gstat-draft    { color:#d97706; background:#fef3c7; }
.gstat-archived { color:#6b7280; background:#f3f4f6; }
[data-theme="dark"] .gstat-active   { background:rgba(22,163,74,.2); }
[data-theme="dark"] .gstat-draft    { background:rgba(217,119,6,.2); }
[data-theme="dark"] .gstat-archived { background:rgba(107,114,128,.2); }

/* Event cards grid */
.evt-cards-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:16px;
}
/* IOS-5 (auditoría F2): con pocos eventos, el botón "Entrar" de la última tarjeta puede caer
   justo donde empieza el .bottom-nav fijo (translúcido de verdad, así que la colisión se ve/lee
   mal). El padding-bottom de .main (56px, línea ~621) no basta cuando el contenido apenas excede
   el viewport en la primera pintura, antes de que el usuario haga scroll — margen de seguridad
   extra SOLO en este contenedor, sin tocar .main global (no afectar otras pantallas). */
@media (max-width:768px) {
  .evt-cards-grid { padding-bottom:28px; }
}
.evt-card {
  background:var(--bg-surface);
  border:1px solid var(--bg-border);
  border-top:3px solid var(--evt-color,var(--yt-orange));
  border-radius:14px;
  padding:1.25rem;
  display:flex; flex-direction:column; gap:14px;
  transition:box-shadow .15s, transform .15s;
}
.evt-card:hover {
  box-shadow:0 4px 20px rgba(0,0,0,.10);
  transform:translateY(-1px);
}

/* Card top row: logo + meta + status */
.evt-card-top {
  display:flex; align-items:flex-start; gap:12px;
}
.evt-card-logo {
  width:40px; height:40px; border-radius:8px; object-fit:contain;
  background:var(--bg-raised); flex-shrink:0;
}
.evt-card-logo-placeholder {
  width:40px; height:40px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:700;
}
.evt-card-meta { flex:1; min-width:0; }
.evt-card-name {
  font-size:15px; font-weight:700; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.evt-card-loc {
  font-size:12px; color:var(--text-muted); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.evt-card-topright { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.evt-status-badge {
  font-size:12px; font-weight:700; padding:2px 8px; border-radius:10px;
  white-space:nowrap; flex-shrink:0;
}
/* Días restantes prominente (Sprint 2, decisión #100) */
.evt-days {
  font-size:17px; font-weight:800; padding:2px 8px; border-radius:8px;
  text-align:center; white-space:nowrap; line-height:1.2;
}
.evt-days small { font-size:11px; font-weight:700; margin-left:1px; }
.evt-days-future  { color:var(--yt-orange); background:rgba(236,102,40,.1); }
.evt-days-today   { color:#7c3aed; background:#ede9fe; font-size:13px; }
.evt-days-past    { color:#6b7280; background:#f3f4f6; font-size:12px; font-weight:700; }
/* "En curso" (Jaime, doc de pruebas, 2026-07-27): CALCULADO de start_date/end_date, no un status
   manual — un evento de varios días ya no cae en evt-days-past mientras sigue sucediendo hoy. */
.evt-days-live    { color:#dc2626; background:#fee2e2; font-size:12px; font-weight:800; }
.evt-days-live-dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:#dc2626; margin-right:4px; animation:evtLivePulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .evt-days-live-dot{ animation:none; } }
@keyframes evtLivePulse { 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.evt-card-cover {
  width:calc(100% + 2.5rem); height:110px; object-fit:cover;
  margin:-1.25rem -1.25rem 0; border-radius:14px 14px 0 0; display:block;
}

/* Separador de grupo por estado (Sprint 2, decisión #99) */
.evt-group-sep {
  display:flex; align-items:center; gap:8px; margin:22px 0 12px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--text-muted);
}
.evt-group-sep:first-child { margin-top:0; }
.evt-group-sep::after { content:''; flex:1; height:1px; background:var(--bg-border); }
.evt-group-sep i { font-style:normal; background:var(--bg-raised); border-radius:999px; padding:1px 7px; }

/* Stats mini-row */
.evt-card-stats {
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
}
.evt-stat {
  background:var(--bg-raised); border-radius:8px;
  padding:8px 10px; display:flex; flex-direction:column; gap:2px;
}
.evt-stat-val { font-size:16px; font-weight:700; color:var(--text); line-height:1; }
.evt-stat-lbl { font-size:12px; color:var(--text-muted); }

/* Action row */
.evt-card-actions {
  display:flex; gap:6px; align-items:center;
}
.evt-enter-btn {
  flex:1; font-size:12px !important; padding:7px 12px !important;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
/* El <yt-menu> "⋯" (Sprint 2, decisión #97) vive dentro de este mount point */
.evt-card-actions [data-evt-menu] { flex-shrink:0; }

/* Empty state */
.evt-empty {
  grid-column:1/-1;
  text-align:center; padding:3rem 1rem;
  color:var(--text-muted);
}

/* ═══════════════════════════════════════════════════════
   EVENT DASHBOARD — Hero, KPIs, Quick actions
   ═══════════════════════════════════════════════════════ */
.edash-root { display:flex; flex-direction:column; gap:24px; }

/* Hero */
.edash-hero {
  background:var(--bg-surface);
  border:1px solid var(--bg-border);
  border-top:3px solid var(--evt-color,var(--yt-orange));
  border-radius:14px; padding:1.5rem;
  overflow:hidden;
}
.edash-hero-cover {
  width:calc(100% + 3rem); height:150px; object-fit:cover;
  margin:-1.5rem -1.5rem 1.25rem; display:block;
}
.edash-hero-content {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.edash-logo {
  width:56px; height:56px; border-radius:12px;
  object-fit:contain; flex-shrink:0;
  background:var(--bg-raised);
}
.edash-logo-placeholder {
  width:56px; height:56px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:700;
}
.edash-hero-meta { flex:1; min-width:0; }
.edash-hero-title {
  font-size:22px; font-weight:700; color:var(--text);
  margin:0 0 4px; line-height:1.2;
  font-family:var(--font-title,'Orbitron',monospace);
  text-transform:uppercase; letter-spacing:.5px;
}
.edash-hero-loc {
  font-size:13px; color:var(--text-muted); margin-bottom:8px;
}
.edash-hero-badges { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.edash-status {
  font-size:12px; font-weight:700; padding:3px 10px; border-radius:20px;
}
.edash-days {
  font-size:12px; font-weight:600; padding:3px 10px; border-radius:20px;
}
.edash-days-future { color:var(--yt-orange); background:rgba(236,102,40,.12); }
.edash-days-today  { color:#7c3aed; background:#ede9fe; }
.edash-days-recent { color:#2563eb; background:#dbeafe; }
.edash-days-past   { color:#6b7280; background:#f3f4f6; }
.edash-days-live   { color:#dc2626; background:#fee2e2; font-weight:800; }
.edash-edit-btn {
  margin-left:auto; flex-shrink:0; font-size:12px;
}

/* KPI cards */
.edash-kpis {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;
}
.edash-kpi {
  background:var(--bg-surface); border:1px solid var(--bg-border);
  border-radius:12px; padding:1.125rem;
  display:flex; align-items:flex-start; gap:14px;
  transition:box-shadow .15s;
}
.edash-kpi:hover { box-shadow:var(--shadow-sm); }
.edash-kpi-icon {
  width:42px; height:42px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.edash-kpi-icon svg { width:20px; height:20px; }
.edash-kpi-body { flex:1; min-width:0; }
.edash-kpi-val {
  font-size:26px; font-weight:700; color:var(--text);
  line-height:1; margin-bottom:4px;
}
.edash-kpi-unit { font-size:14px; font-weight:500; color:var(--text-muted); }
.edash-kpi-lbl { font-size:12px; color:var(--text-muted); font-weight:500; }
.edash-kpi-sub { font-size:12px; color:var(--text-faint); margin-top:3px; }

/* Loading spinner */
.edash-spin {
  display:inline-block; width:18px; height:18px;
  border:2px solid var(--bg-border); border-top-color:var(--yt-orange);
  border-radius:50%; animation:edash-spin .7s linear infinite;
}
@keyframes edash-spin { to { transform:rotate(360deg); } }

/* Quick actions */
.edash-section { }
.edash-section-title {
  font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.6px; color:var(--text-muted); margin-bottom:10px;
}
.edash-actions {
  display:flex; gap:8px; flex-wrap:wrap;
}
.edash-action {
  display:flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:10px;
  background:var(--bg-surface); border:1px solid var(--bg-border);
  color:var(--text-2); font-size:13px; font-weight:500;
  cursor:pointer; font-family:inherit;
  transition:background .1s, color .1s, border-color .1s, box-shadow .1s;
}
.edash-action svg { width:16px; height:16px; flex-shrink:0; }
.edash-action:hover {
  background:var(--bg-raised); color:var(--yt-orange);
  border-color:var(--yt-orange); box-shadow:0 2px 8px rgba(236,102,40,.12);
}

/* Responsive */
@media (max-width:768px) {
  .edash-kpis { grid-template-columns:1fr 1fr; }
  .edash-hero-title { font-size:18px; }
}

/* ═══════════════════════════════════════════════════════
   BOTTOM SHEET — mobile sub-menu (Ponentes, Stats, etc.)
   ═══════════════════════════════════════════════════════ */
.bottom-sheet {
  display:none; /* shown via JS on mobile */
}
@media (max-width:768px) {
  .bottom-sheet {
    display:block;
    position:fixed; inset:0; z-index:calc(var(--z-sidebar) + 20);
    pointer-events:none; opacity:0;
    transition:opacity .2s ease;
  }
  .bottom-sheet.open {
    pointer-events:auto; opacity:1;
  }
  .bottom-sheet-backdrop {
    position:absolute; inset:0;
    background:rgba(0,0,0,.45);
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
  }
  .bottom-sheet-panel {
    position:absolute; bottom:0; left:0; right:0;
    /* "Liquid Glass": el panel es un material translúcido, no una superficie sólida —
       el "Más" (grid de accesos, no texto denso/lista de datos: cumple la regla del
       styleguide de no difuminar formularios/tablas/listas). */
    background:color-mix(in srgb, var(--bg-surface) 88%, transparent);
    -webkit-backdrop-filter:blur(24px) saturate(1.7);
    backdrop-filter:blur(24px) saturate(1.7);
    border-radius:20px 20px 0 0;
    padding:0 0 calc(56px + env(safe-area-inset-bottom,0px));
    transform:translateY(100%);
    transition:transform .25s cubic-bezier(.32,0,.67,0);
    /* Sombra iOS: blur grande/offset chico/opacidad baja en vez del "0 -4px 32px .18"
       anterior (más definido, se sentía Android). */
    box-shadow:0 -10px 30px -6px rgba(0,0,0,.16);
  }
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    .bottom-sheet-panel { background:var(--bg-surface); }
  }
  /* AND-2 (auditoría 2026-07-23): esta hoja ("Más" del bottom-nav) se quedó hablando SOLO iOS
     (blur+sombra suave) mientras la barra que la abre (.bottom-nav arriba) y su gemela de
     css/native-materials.css (.native-bottom-sheet-panel) ya bifurcan por plataforma — mismo
     criterio y mismos valores aquí. */
  :root[data-os="android"] .bottom-sheet-panel,
  :root[data-os="desktop"] .bottom-sheet-panel,
  :root:not([data-os="ios"]):not([data-os="android"]) .bottom-sheet-panel {
    background:color-mix(in srgb, var(--brand-primary,#C7F000) 14%, var(--bg-surface));
    -webkit-backdrop-filter:none; backdrop-filter:none;
    box-shadow:0 -1px 3px rgba(0,0,0,.3), 0 -8px 16px -4px rgba(0,0,0,.22);
  }
  .bottom-sheet.open .bottom-sheet-panel {
    transform:translateY(0);
  }
  .bottom-sheet-handle {
    width:36px; height:4px; border-radius:2px;
    background:var(--bg-border); margin:12px auto 8px;
  }
  .bottom-sheet-title {
    padding:6px 20px 12px;
    font-size:12px; font-weight:700; text-transform:uppercase;
    letter-spacing:.6px; color:var(--text-muted);
    border-bottom:1px solid var(--bg-border);
  }
  .bottom-sheet-items {
    padding:8px 0;
  }
  .bottom-sheet-item {
    display:flex; align-items:center; gap:12px;
    width:100%; padding:14px 20px;
    background:none; border:none; border-left:3px solid transparent;
    color:var(--text-2); font-size:15px; font-weight:500;
    cursor:pointer; font-family:inherit; text-align:left;
    transition:background .1s, color .1s, opacity .1s;
  }
  .bottom-sheet-item:hover { background:var(--bg-raised); color:var(--text); }
  /* Feedback táctil iOS (opacity sutil) en vez de solo el fondo de :hover, que en
     touch nunca se ve — sin esto el toque no daba ninguna señal instantánea. */
  .bottom-sheet-item:active { background:var(--bg-raised); color:var(--text); opacity:.6; }
  /* AND-2: mismo :active con dimming iOS sin rama Android — Material espera un tinte plano, no
     una opacidad reducida sobre el fondo ya translúcido. */
  :root[data-os="android"] .bottom-sheet-item:active,
  :root[data-os="desktop"] .bottom-sheet-item:active,
  :root:not([data-os="ios"]):not([data-os="android"]) .bottom-sheet-item:active {
    opacity:1; background:color-mix(in srgb, var(--text,#000) 8%, var(--bg-raised));
  }
  .bottom-sheet-item.active {
    color:var(--yt-orange); border-left-color:var(--yt-orange);
    font-weight:600;
  }
  .bottom-sheet-item svg { width:20px; height:20px; flex-shrink:0; opacity:.7; stroke-width:1.75; }

  /* "Más" — sheet de pantalla completa con grid de iconos (Sprint 2, decisión #84) */
  .bottom-sheet-panel.full { max-height:82vh; overflow-y:auto; }
  /* Reparo en vivo (2026-07-13, reporte directo del usuario con capturas): la rejilla de iconos
     (.bottom-sheet-grid, retirada) es un patrón genérico de app web — no se lee como iOS NI como
     Android. Reemplazada por lista agrupada tipo Ajustes.app (fila = icono en chip + etiqueta +
     chevron, secciones en tarjeta con separadores) — nativo en iOS Y perfectamente idiomático en
     Android (su propia app de Ajustes usa el mismo patrón de lista agrupada, no rejilla). Un solo
     diseño que funciona bien en ambos, en vez de forkear dos implementaciones. */
  .bottom-sheet-list { padding:4px 14px 14px; }
  .bottom-sheet-group-label {
    font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
    color:var(--text-muted); padding:18px 6px 7px;
  }
  .bottom-sheet-group-card {
    background:var(--bg-raised); border-radius:14px; overflow:hidden;
  }
  .bottom-sheet-row {
    display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box;
    padding:10px 14px; border:none; background:none; text-align:left;
    color:var(--text); font-size:15px; font-weight:500; cursor:pointer; font-family:inherit;
    min-height:48px; border-bottom:1px solid var(--bg-border);
    transition:background .1s;
  }
  .bottom-sheet-row:last-child { border-bottom:none; }
  .bottom-sheet-row:active { background:var(--bg-surface); }
  .bottom-sheet-row-icon {
    width:29px; height:29px; border-radius:8px; background:var(--sec-color, var(--brand-primary, var(--yt-orange)));
    display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0;
  }
  .bottom-sheet-row-icon svg { width:16px; height:16px; stroke-width:2; }
  .bottom-sheet-row-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bottom-sheet-row-chevron { color:var(--text-muted); flex-shrink:0; display:flex; }
  .bottom-sheet-row-chevron svg { width:15px; height:15px; }
}

/* ═══════════════════════════════════════════════════════
   ABOUT MODAL — bottom-sheet de pantalla completa en móvil
   (mismo mecanismo que .bottom-sheet-panel arriba: slide
   desde abajo, esquinas superiores redondeadas, safe-area)
   ═══════════════════════════════════════════════════════ */
@media (max-width:768px) {
  #about-overlay { align-items:flex-end !important; padding:0 !important; }
  #about-modal {
    width:100% !important; max-width:100% !important;
    max-height:88vh !important;
    border-radius:20px 20px 0 0 !important;
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  /* Grab handle — mismo lenguaje visual que .bottom-sheet-handle: toda hoja que sube
     desde abajo en móvil necesita la barrita para leerse como "se puede arrastrar". */
  .about-modal-handle { display:block; width:36px; height:4px; border-radius:2px; background:var(--bg-border); margin:10px auto 0; }
}
.about-modal-handle { display:none; }

/* ═══════════════════════════════════════════════════════
   FP ALIGN PANEL — dropdown de alineación del floor plan
   ═══════════════════════════════════════════════════════ */
.fp-align-panel {
  position:fixed; z-index:99997;
  background:var(--bg-surface); border:1px solid var(--bg-border);
  border-radius:12px; padding:12px; min-width:200px;
  box-shadow:0 8px 32px rgba(0,0,0,.2);
  user-select:none;
}
.fp-align-label {
  font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.6px; color:var(--text-muted); margin-bottom:6px;
}
.fp-align-row { display:flex; gap:4px; }
.fp-align-btn {
  width:36px; height:36px; border-radius:8px; border:1px solid var(--bg-border);
  background:var(--bg-raised); cursor:pointer; display:flex; align-items:center;
  justify-content:center; transition:background .1s, border-color .1s, color .1s;
  color:var(--text-2);
}
.fp-align-btn svg { width:18px; height:18px; }
.fp-align-btn:hover { background:var(--bg-border); color:var(--yt-orange); border-color:var(--yt-orange); }
.fp-align-btn-off { opacity:.35; cursor:not-allowed !important; }
.fp-align-btn-off:hover { background:var(--bg-raised) !important; color:var(--text-2) !important; border-color:var(--bg-border) !important; }
.fp-align-sep { height:1px; background:var(--bg-border); margin:10px 0; }
.fp-align-snap-btn {
  display:flex; align-items:center; gap:8px;
  width:100%; padding:8px 10px; border-radius:8px;
  border:1px solid var(--bg-border); background:var(--bg-raised);
  cursor:pointer; font-size:12px; color:var(--text-2); font-family:inherit;
  transition:background .1s, color .1s;
}
.fp-align-snap-btn svg { width:16px; height:16px; flex-shrink:0; }
.fp-align-snap-btn:hover { background:var(--bg-border); color:var(--yt-orange); }

/* ═══════════════════════════════════════════════════════
   FP HELP MODAL — shortcuts and guide for floor plan builder
   ═══════════════════════════════════════════════════════ */
#fp-help-overlay { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:20px; }
.fp-help-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(3px); }
.fp-help-modal {
  position:relative; z-index:1;
  background:var(--bg-surface); border:1px solid var(--bg-border);
  border-radius:16px; width:720px; max-width:100%;
  max-height:85vh; display:flex; flex-direction:column;
  box-shadow:0 24px 64px rgba(0,0,0,.35); overflow:hidden;
}
.fp-help-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--bg-border); flex-shrink:0;
}
.fp-help-title {
  display:flex; align-items:center; gap:8px;
  font-size:15px; font-weight:700; color:var(--text);
}
.fp-help-title svg { color:var(--yt-orange); flex-shrink:0; }
.fp-help-close {
  background:none; border:none; cursor:pointer;
  color:var(--text-muted); font-size:16px; padding:4px 8px; border-radius:6px;
  line-height:1; transition:background .1s;
}
.fp-help-close:hover { background:var(--bg-raised); color:var(--text); }
.fp-help-body {
  overflow-y:auto; padding:16px 20px;
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.fp-help-section { }
.fp-help-section-title {
  font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.6px; color:var(--yt-orange); margin-bottom:8px;
  padding-bottom:4px; border-bottom:1px solid var(--bg-border);
}
.fp-help-row {
  display:flex; align-items:baseline; gap:10px;
  padding:4px 0; font-size:12px; color:var(--text-2);
}
.fp-help-tip { align-items:flex-start; padding:5px 0; }
.fp-help-tip .fp-help-key { font-size:14px; background:none; border:none; padding:0; min-width:16px; }
.fp-help-key {
  display:inline-block; min-width:80px; flex-shrink:0;
  background:var(--bg-raised); border:1px solid var(--bg-border);
  border-radius:5px; padding:2px 7px; font-size:12px; font-weight:600;
  color:var(--text-muted); text-align:center; font-family:monospace;
  white-space:nowrap;
}
.fp-help-desc { flex:1; color:var(--text-2); line-height:1.4; }
.fp-help-footer {
  padding:10px 20px; border-top:1px solid var(--bg-border);
  font-size:12px; color:var(--text-muted); text-align:center; flex-shrink:0;
}
.fp-help-footer kbd {
  background:var(--bg-raised); border:1px solid var(--bg-border);
  border-radius:4px; padding:1px 6px; font-size:12px; font-family:monospace;
}

/* ═══════════════════════════════════════════════════════
   FP REALTIME MODALS — historial de versiones y compartir
   externo del Constructor de planos (Aluna Studio)
   ═══════════════════════════════════════════════════════ */
.fp-rtm-overlay { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:20px; }
.fp-rtm-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(3px); }
.fp-rtm-modal {
  position:relative; z-index:1;
  background:var(--bg-surface); border:1px solid var(--bg-border);
  border-radius:16px; width:420px; max-width:100%;
  max-height:85vh; display:flex; flex-direction:column;
  box-shadow:0 24px 64px rgba(0,0,0,.35); overflow:hidden;
}
.fp-rtm-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--bg-border); flex-shrink:0; gap:8px; }
.fp-rtm-title { font-size:15px; font-weight:700; color:var(--text); }
.fp-rtm-save { margin-left:auto; border:1px solid var(--yt-orange); background:none; color:var(--yt-orange); border-radius:7px; font-size:12px; font-weight:700; padding:4px 9px; cursor:pointer; font-family:inherit; }
.fp-rtm-save:hover { background:var(--yt-orange); color:#fff; }
.fp-rtm-close { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:16px; padding:4px 8px; border-radius:6px; line-height:1; }
.fp-rtm-close:hover { background:var(--bg-raised); color:var(--text); }
.fp-rtm-body { overflow-y:auto; padding:14px 18px; }

.fp-hist-empty { padding:16px 4px; font-size:12px; color:var(--text-muted); line-height:1.5; }
.fp-hist-it { display:flex; align-items:center; gap:6px; padding:7px 4px; border-radius:8px; }
.fp-hist-it:hover { background:var(--bg-raised); }
.fp-hist-main { flex:1; min-width:0; }
.fp-hist-lb { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:default; }
.fp-hist-rename { width:100%; font-family:inherit; font-size:13px; font-weight:600; border:1px solid var(--yt-orange); border-radius:6px; padding:2px 5px; color:var(--text); background:var(--bg-surface); box-sizing:border-box; }
.fp-hist-auto { font-size:11px; font-weight:700; color:var(--text-muted); background:var(--bg-raised); border-radius:5px; padding:1px 5px; vertical-align:middle; }
.fp-hist-meta { font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fp-hist-btns { display:flex; gap:2px; flex:0 0 auto; }
.fp-hist-btns button { border:none; background:none; cursor:pointer; font-size:14px; width:26px; height:24px; border-radius:6px; color:var(--text-2); }
.fp-hist-btns button:hover { background:var(--bg-surface); color:var(--yt-orange); box-shadow:0 0 0 1px var(--bg-border); }

.fp-shx-note { font-size:12.5px; color:var(--text-2); line-height:1.5; }
.fp-shx-biz { background:var(--yt-orange); color:#fff; font-size:10px; font-weight:700; border-radius:5px; padding:1px 6px; vertical-align:middle; }
.fp-shx-new { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.fp-shx-row { display:flex; gap:6px; }
.fp-shx-row select, .fp-shx-row input { flex:1; border:1px solid var(--bg-border); border-radius:8px; padding:6px 8px; font-size:12.5px; font-family:inherit; background:var(--bg-surface); color:var(--text); min-width:0; }
.fp-shx-mk { border:none; background:var(--yt-orange); color:#fff; border-radius:8px; font-size:12.5px; font-weight:700; padding:7px; cursor:pointer; font-family:inherit; }
.fp-shx-mk:hover { opacity:.9; }
.fp-shx-mk:disabled { opacity:.6; cursor:default; }
.fp-shx-list { display:flex; flex-direction:column; gap:4px; margin-top:10px; }
.fp-shx-it { display:flex; align-items:center; gap:6px; padding:6px 4px; border-radius:8px; }
.fp-shx-it:hover { background:var(--bg-raised); }
.fp-shx-main { flex:1; min-width:0; }
.fp-shx-lb { font-size:12.5px; font-weight:600; color:var(--text); }
.fp-shx-meta { font-size:11.5px; color:var(--text-muted); }
.fp-shx-it button { border:none; background:none; cursor:pointer; font-size:14px; width:26px; height:24px; border-radius:6px; color:var(--text-2); }
.fp-shx-it button:hover { background:var(--bg-surface); color:var(--yt-orange); box-shadow:0 0 0 1px var(--bg-border); }
.fp-shx-st-activo { color:#16a34a; }
.fp-shx-st-revocado { color:#dc2626; }
.fp-shx-st-expirado { color:var(--text-muted); }

/* ── Estrado template palette buttons ── */
.fp-estrado-tpl-btn:hover {
  border-color: var(--yt-orange) !important;
  box-shadow: 0 2px 8px rgba(236,102,40,.2);
  background: var(--bg-surface) !important;
}

/* ── Floor Plan Sidebar Accordion ── */
.fp-acc-section { border-top:1px solid var(--bg-border); }
.fp-acc-hdr {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:8px 12px;
  background:none; border:none; cursor:pointer; font-family:inherit;
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
  color:var(--text-muted); transition:background .1s;
}
.fp-acc-hdr:hover { background:var(--bg-raised); color:var(--text); }
.fp-acc-chevron {
  width:13px; height:13px; flex-shrink:0;
  transition:transform .2s ease;
}
.fp-acc-section:not(.open) .fp-acc-chevron { transform:rotate(-90deg); }
.fp-acc-body {
  overflow:hidden;
  max-height:0;
  transition:max-height .25s ease;
}
.fp-acc-section.open .fp-acc-body {
  max-height:1400px; /* large enough for any content (grids, listas) */
}

/* ── Groups tree (Figma-style layers panel) ── */
.fp-groups-tree { max-height:260px; overflow-y:auto; font-size:12px; }
.fp-grp-empty { color:var(--text-muted); font-size:12px; padding:8px 6px; line-height:1.4; }
.fp-grp-node {
  display:flex; align-items:center; gap:5px; padding:4px 6px;
  border-radius:6px; cursor:pointer; user-select:none;
  transition:background .1s;
}
.fp-grp-node:hover { background:var(--bg-raised); }
.fp-grp-node.active { background:rgba(236,102,40,.16); box-shadow:inset 2px 0 0 var(--yt-orange); }
.fp-grp-tw { width:12px; text-align:center; color:var(--text-muted); flex:none; font-size:12px; }
.fp-grp-ico { flex:none; }
.fp-grp-name { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:none; max-width:40%; }
.fp-grp-meta { color:var(--text-muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.fp-grp-actions { display:none; gap:2px; flex:none; }
.fp-grp-node:hover .fp-grp-actions { display:flex; }
.fp-grp-actions button {
  border:none; background:transparent; cursor:pointer; padding:2px 4px;
  border-radius:4px; font-size:12px; color:var(--text-muted); line-height:1;
}
.fp-grp-actions button:hover { background:var(--bg-surface); color:var(--text); }
.fp-grp-actions button.danger:hover { color:#e5484d; }

/* ── Stands palette (expo) ── */
.fp-stands-pal { padding:6px; display:flex; flex-direction:column; gap:4px; }
.fp-stand-item {
  display:flex; align-items:center; gap:6px; padding:6px 7px;
  border:1px solid var(--bg-border); border-radius:8px; background:var(--bg-surface);
  cursor:grab; font-size:12px; user-select:none; transition:border-color .1s,background .1s;
}
.fp-stand-item:hover { border-color:var(--yt-orange); background:rgba(236,102,40,.06); }
.fp-stand-item.fp-stand-full { opacity:.5; cursor:not-allowed; }
.fp-stand-sw { width:12px; height:12px; border-radius:3px; flex:none; }
.fp-stand-name { font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.fp-stand-sz { color:var(--text-muted); font-size:12px; flex:none; }
.fp-stand-qty { font-family:monospace; font-size:12px; font-weight:700; color:#22c55e; flex:none; min-width:34px; text-align:right; }
.fp-stand-qty.full { color:#ef4444; }

/* ── Estrado template buttons (inside accordion) ── */
.fp-estrado-tpl-btn {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:4px 6px;
  background:var(--bg-raised); border:1px solid var(--bg-border);
  border-radius:8px; cursor:pointer; font-family:inherit;
  transition:border-color .1s, box-shadow .1s;
}
.fp-estrado-tpl-btn:hover {
  border-color:var(--yt-orange);
  box-shadow:0 2px 8px rgba(236,102,40,.2);
  background:var(--bg-surface);
}

/* ── Wall shape palette buttons ── */
.fp-wall-shape-btn {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:4px 5px;
  background:var(--bg-raised); border:1px solid var(--bg-border);
  border-radius:8px; cursor:pointer; font-family:inherit;
  transition:border-color .1s, box-shadow .1s; color:var(--text-2);
}
.fp-wall-shape-btn:hover {
  border-color:var(--yt-orange);
  box-shadow:0 2px 8px rgba(236,102,40,.2);
  background:var(--bg-surface); color:var(--yt-orange);
}
.fp-wall-shape-btn svg { stroke:currentColor; }

/* ── Help Modal — updated layout with visual guides ── */
.fp-help-modal-wide { width:860px; max-width:96vw; }
.fp-help-body-new {
  display:flex; flex-direction:column; gap:0;
  overflow-y:auto; padding:0;
}
/* Section block titles (Primeros pasos / Atajos / Guías) */
.fp-help-block-title {
  font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.6px; color:var(--yt-orange); margin:0 0 10px;
}
.fp-help-quickstart { padding:16px 20px 4px; }
.fp-help-shortcuts { padding:16px 20px 0; border-top:1px solid var(--bg-border); margin-top:12px; }
.fp-help-shortcuts-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:4px 18px; padding:0;
}
.fp-help-guides {
  padding:16px 20px 4px; border-top:1px solid var(--bg-border); margin-top:12px;
}

/* Guide cards */
.fp-help-guide {
  background:var(--bg-raised); border:1px solid var(--bg-border);
  border-radius:10px; padding:12px 14px; margin-bottom:10px;
}
.fp-help-guide-title {
  font-size:12px; font-weight:700; color:var(--yt-orange);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px;
}
.fp-help-guide-inner {
  display:flex; gap:14px; align-items:flex-start;
}
.fp-help-guide-svg { flex-shrink:0; width:220px; }
.fp-help-guide-text {
  flex:1; font-size:12px; color:var(--text-2); line-height:1.55;
}
.fp-help-guide-line {
  padding:2px 0; border-bottom:1px solid var(--bg-border-light);
}
.fp-help-guide-line:last-child { border:none; }
.fp-help-guide-line b { color:var(--text); }

@media (max-width:640px) {
  .fp-help-guide-inner { flex-direction:column; }
  .fp-help-guide-svg { width:100%; }
}

/* ── Chair Auto-Arrange Panel ── */
.fp-chair-arrange-panel {
  position:fixed; top:120px; right:24px; z-index:99996;
  width:280px; background:var(--bg-surface); border:1px solid var(--bg-border);
  border-radius:14px; padding:14px; box-shadow:0 12px 40px rgba(0,0,0,.22);
  font-family:inherit;
}
.fca-hdr {
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px; font-weight:700; color:var(--text); margin-bottom:12px;
}
.fca-x {
  background:none; border:none; cursor:pointer; color:var(--text-muted);
  font-size:15px; line-height:1; padding:2px 6px; border-radius:6px;
}
.fca-x:hover { background:var(--bg-raised); color:var(--text); }
.fca-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.fca-lbl { font-size:12px; color:var(--text-muted); white-space:nowrap; }
.fca-slider { flex:1; accent-color:var(--yt-orange); cursor:pointer; }
.fca-toggle {
  display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-2);
  cursor:pointer; margin-bottom:12px;
}
.fca-toggle input { width:15px; height:15px; accent-color:var(--yt-orange); cursor:pointer; }
.fca-count {
  font-size:13px; color:var(--text); padding:8px 10px; background:var(--bg-raised);
  border-radius:8px; margin-bottom:12px; text-align:center;
}
.fca-count b { color:var(--yt-orange); font-size:15px; }
.fca-actions { display:flex; gap:8px; }
.fca-actions .btn { flex:1; font-size:12px; padding:8px; }

/* Chair arrange — aisle width controls */
.fca-aisle { margin-bottom:8px; }
.fca-w { display:inline-flex; align-items:center; gap:6px; margin-left:24px; margin-top:2px; }
.fca-w input[type=range] { width:90px; accent-color:var(--yt-orange); cursor:pointer; }
.fca-w span { font-size:12px; color:var(--yt-orange); font-weight:600; min-width:32px; }

/* ════════════════════════════════════════════════════════
   CRM DE PONENTES (speaker-crm.js)
   ════════════════════════════════════════════════════════ */
.spkc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.spkc-card{ cursor:pointer; transition:border-color .12s, box-shadow .12s, transform .12s; }
.spkc-card:hover{ border-color:var(--yt-orange,#EC6628); box-shadow:0 6px 18px rgba(0,0,0,.08); transform:translateY(-1px); }
.spkc-av{ width:46px; height:46px; border-radius:50%; flex:none; }
.spkc-av-lg{ width:92px; height:92px; border-radius:50%; flex:none; border:2px solid var(--bg-border,#e7e3dd); }
.spkc-av-ini{ background:linear-gradient(135deg,#EC6628,#f59e0b); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; }
.spkc-av-lg.spkc-av-ini{ font-size:32px; }
.spkc-tag{ font-size:10.5px; font-weight:600; color:var(--text-muted,#6b6660); background:var(--bg-raised,#f1ede7); border-radius:6px; padding:2px 8px; }

/* Drawer expediente */
.spkc-ov{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:var(--z-modal,1000); display:flex; justify-content:flex-end; }
.spkc-panel{ width:880px; max-width:96vw; height:100%; background:var(--bg-page,#f6f4f1); display:flex; flex-direction:column; box-shadow:-8px 0 32px rgba(0,0,0,.18); animation:spkc-slide .22s ease; }
@keyframes spkc-slide{ from{ transform:translateX(30px); opacity:.6; } to{ transform:translateX(0); opacity:1; } }
.spkc-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; background:var(--bg-surface,#fff); border-bottom:1px solid var(--bg-border,#e7e3dd); flex:none; }
.spkc-tabs{ display:flex; gap:2px; padding:6px 14px 0; background:var(--bg-surface,#fff); border-bottom:1px solid var(--bg-border,#e7e3dd); flex:none; }
.spkc-tab{ padding:9px 16px; border:none; background:none; font-family:inherit; font-size:13px; font-weight:500; color:var(--text-muted,#6b6660); cursor:pointer; border-bottom:2px solid transparent; }
.spkc-tab:hover{ color:var(--text,#1c1b1a); }
.spkc-tab.active{ color:var(--yt-orange,#EC6628); border-bottom-color:var(--yt-orange,#EC6628); font-weight:700; }
.spkc-body{ flex:1; overflow-y:auto; padding:18px; }
.spkc-cards{ display:flex; flex-direction:column; gap:16px; max-width:760px; }
.spkc-2col{ display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
.spkc-f{ display:flex; flex-direction:column; gap:4px; }
.spkc-lbl{ font-size:11.5px; font-weight:700; color:var(--text-muted,#6b6660); letter-spacing:.2px; }
.spkc-hint{ font-size:12px; color:var(--text-faint,#9a948c); }

/* Chips */
.spkc-chips{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; border:1px solid var(--bg-border,#e7e3dd); border-radius:9px; padding:6px 8px; background:var(--bg-surface,#fff); min-height:38px; }
.spkc-chip{ display:inline-flex; align-items:center; gap:5px; background:var(--bg-raised,#f1ede7); border-radius:7px; padding:3px 7px; font-size:12px; }
.spkc-chip button{ border:none; background:none; cursor:pointer; color:var(--text-muted,#6b6660); font-size:13px; line-height:1; padding:0; }
.spkc-chip-in{ border:none; outline:none; background:none; font-family:inherit; font-size:13px; flex:1; min-width:120px; color:var(--text,#1c1b1a); }

/* Rich text */
.spkc-rich{ border:1px solid var(--bg-border,#e7e3dd); border-radius:9px; overflow:hidden; background:var(--bg-surface,#fff); }
.spkc-rt-bar{ display:flex; gap:2px; padding:5px 6px; border-bottom:1px solid var(--bg-border,#e7e3dd); background:var(--bg-raised,#faf8f5); }
.spkc-rt-bar button{ width:28px; height:26px; border:none; background:none; border-radius:6px; cursor:pointer; font-size:13px; color:var(--text-2,#444); }
.spkc-rt-bar button:hover{ background:var(--bg-border,#e7e3dd); color:var(--text,#1c1b1a); }
.spkc-rt{ min-height:70px; padding:10px 12px; font-size:13.5px; line-height:1.55; outline:none; color:var(--text,#1c1b1a); }
.spkc-rt:empty:before{ content:'Escribe aquí…'; color:var(--text-faint,#9a948c); }

/* Autocomplete ciudad */
.spkc-ac{ position:relative; }
.spkc-ac-item{ padding:7px 10px; font-size:12.5px; cursor:pointer; border:1px solid var(--bg-border,#e7e3dd); border-top:none; background:var(--bg-surface,#fff); }
.spkc-ac-item:hover{ background:var(--bg-raised,#f1ede7); }
.spkc-ac-item:first-child{ border-top:1px solid var(--bg-border,#e7e3dd); border-radius:8px 8px 0 0; }

@media (max-width:680px){ .spkc-2col{ grid-template-columns:1fr; } }

/* ── CRM Ponentes: kanban + agregar + etapas ── */
.spkc-kan{ display:flex; gap:12px; overflow-x:auto; padding-bottom:10px; align-items:flex-start; }
.spkc-col{ flex:0 0 240px; background:var(--bg-raised,#f1ede7); border-radius:12px; display:flex; flex-direction:column; max-height:calc(100vh - 220px); }
.spkc-col-h{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; font-size:12.5px; font-weight:700; color:var(--text,#1c1b1a); border-radius:12px 12px 0 0; }
.spkc-col-n{ background:var(--bg-surface,#fff); color:var(--text-muted,#6b6660); border-radius:20px; padding:1px 8px; font-size:12px; }
.spkc-col-b{ flex:1; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:8px; min-height:60px; transition:background .12s; }
.spkc-col-b.over{ background:color-mix(in srgb, var(--yt-orange,#EC6628) 10%, transparent); }
.spkc-kc{ background:var(--bg-surface,#fff); border:1px solid var(--bg-border,#e7e3dd); border-radius:10px; padding:10px; cursor:pointer; transition:box-shadow .12s, transform .12s; }
.spkc-kc:hover{ box-shadow:0 4px 12px rgba(0,0,0,.08); }
.spkc-kc.dragging{ opacity:.5; transform:rotate(1.5deg); }
.spkc-kc .spkc-av{ width:32px; height:32px; font-size:12px; }

/* IOS-3 (auditoría de cierre K0-K8, 2026-07-18, CONFIRMADO MEDIUM): velo plano sin blur,
   inconsistente con Dialog.alert/confirm (js/dialog-service.js), que ya usa backdrop-filter para
   el MISMO tipo de velo modal — el contenido del formulario (.spkc-modal) se queda sólido. */
.spkc-modal-ov{ position:fixed; inset:0; background:rgba(0,0,0,.4); backdrop-filter:blur(2px); z-index:var(--z-modal,1000); display:flex; align-items:center; justify-content:center; padding:20px; }
.spkc-modal{ background:var(--bg-surface,#fff); border-radius:16px; width:460px; max-width:96vw; padding:18px; box-shadow:0 30px 80px -20px rgba(0,0,0,.5); }
.spkc-addrow{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:9px; cursor:pointer; }
.spkc-addrow:hover{ background:var(--bg-raised,#f1ede7); }
.spkc-addrow .spkc-av{ width:34px; height:34px; font-size:12px; }

.spkc-stage-badge{ font-size:12px; font-weight:700; border-radius:20px; padding:3px 10px; white-space:nowrap; flex:none; }

/* ── CRM Ponentes: kanban compacto (overrides) ── */
.spkc-kbar{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.spkc-kbar-hint{ font-size:12px; color:var(--text-muted,#6b6660); }
.spkc-kan{ display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; align-items:stretch; height:calc(100dvh - 140px); padding-bottom:6px; }
.spkc-col{ flex:0 0 232px; height:100%; background:var(--bg-raised,#f1ede7); border-radius:12px; display:flex; flex-direction:column; max-height:100%; }
.spkc-col-h{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:9px 11px; border-radius:12px 12px 0 0; }
.spkc-col-t{ font-size:12.5px; font-weight:700; color:var(--text,#1c1b1a); line-height:1.2; }
.spkc-col-sum{ font-size:12px; font-weight:700; color:#16a34a; margin-top:1px; }
.spkc-col-n{ background:var(--bg-surface,#fff); color:var(--text-muted,#6b6660); border-radius:20px; padding:1px 8px; font-size:12px; font-weight:600; }
.spkc-col-add{ width:22px; height:22px; border:none; border-radius:6px; background:var(--bg-surface,#fff); color:var(--text-muted,#6b6660); cursor:pointer; font-size:15px; line-height:1; }
.spkc-col-add:hover{ background:var(--yt-orange,#EC6628); color:#fff; }
.spkc-col-b{ flex:1; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:8px; }

/* ════ <yt-kanban> componente reutilizable ════ */
.ytk{ display:block; }
.ytk-bar{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
.ytk-hint{ font-size:12px; color:var(--text-muted,#6b6660); }
.ytk-bar-r{ display:flex; align-items:center; gap:8px; }
.ytk-gear{ width:34px; height:34px; border:1px solid var(--bg-border,#e7e3dd); border-radius:9px; background:var(--bg-surface,#fff); cursor:pointer; font-size:15px; }
.ytk-gear:hover{ border-color:var(--yt-orange,#EC6628); }
.ytk-board{ display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; align-items:stretch; height:calc(100dvh - 140px); padding:0 14px 6px; }
.ytk-bar{ padding-inline:14px; }
/* Con el kanban activo, el contenido pierde su padding lateral → el tablero usa todo el ancho y el scroll queda pegado al borde */
.app-shell.kanban-full .main-inner{ padding-left:0 !important; padding-right:0 !important; padding-top:12px !important; }
.ytk-col{ flex:0 0 232px; height:100%; background:var(--bg-raised,#f1ede7); border-radius:12px; display:flex; flex-direction:column; }
.ytk-col-h{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; padding:9px 11px; border-radius:12px 12px 0 0; }
.ytk-col-t{ font-size:12.5px; font-weight:700; color:var(--text,#1c1b1a); line-height:1.2; }
.ytk-col-sum{ font-size:12px; font-weight:700; color:#16a34a; margin-top:1px; }
.ytk-col-meta{ display:flex; align-items:center; gap:6px; flex:none; }
.ytk-col-n{ background:var(--bg-surface,#fff); color:var(--text-muted,#6b6660); border-radius:20px; padding:1px 8px; font-size:12px; font-weight:600; }
.ytk-col-add{ width:22px; height:22px; border:none; border-radius:6px; background:var(--bg-surface,#fff); color:var(--text-muted,#6b6660); cursor:pointer; font-size:15px; line-height:1; }
.ytk-col-add:hover{ background:var(--yt-orange,#EC6628); color:#fff; }
.ytk-col-b{ flex:1; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:8px; }
/* Trello-clon (auditoría lote "grande", 2026-07-18): zona de destino con borde punteado visible,
   no solo un tinte de fondo — más legible como "aquí va a caer la tarjeta". */
.ytk-col-b.over{ background:color-mix(in srgb, var(--yt-orange,#EC6628) 10%, transparent); outline:2px dashed var(--yt-orange,#EC6628); outline-offset:-4px; border-radius:8px; }
.ytk-card{ background:var(--bg-surface,#fff); border:1px solid var(--bg-border,#e7e3dd); border-radius:10px; padding:10px; cursor:grab; transition:box-shadow .15s, transform .15s; }
.ytk-card:hover{ box-shadow:0 4px 12px rgba(0,0,0,.08); transform:translateY(-1px); }
.ytk-card:active{ cursor:grabbing; }
.ytk-card.ytk-dragging{ opacity:.4; transform:rotate(2deg) scale(1.03); box-shadow:0 12px 28px rgba(0,0,0,.22); }
@keyframes ytkCardEnter{ from{ opacity:0; transform:scale(.94) translateY(4px); } to{ opacity:1; transform:none; } }
.ytk-card.ytk-card-enter{ animation:ytkCardEnter .2s cubic-bezier(.2,.8,.2,1) both; }
.ytk-empty{ color:var(--text-muted,#6b6660); font-size:13px; padding:20px; }
.ytk-cfg-ov{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:var(--z-modal,1000); display:flex; align-items:center; justify-content:center; padding:20px; }
.ytk-cfg{ background:var(--bg-surface,#fff); border-radius:16px; width:560px; max-width:96vw; max-height:88vh; overflow:auto; padding:18px; box-shadow:0 30px 80px -20px rgba(0,0,0,.5); }
.ytk-cfg-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.ytk-cfg-x{ border:none; background:none; cursor:pointer; font-size:16px; color:var(--text-muted,#6b6660); }
.ytk-cfg-row{ display:flex; align-items:center; gap:6px; padding:5px 0; }
.ytk-cfg-drag{ color:var(--text-faint,#9a948c); }
.ytk-cfg-c{ width:30px; height:28px; border:1px solid var(--bg-border,#e7e3dd); border-radius:6px; padding:0; background:none; cursor:pointer; }
.ytk-cfg-l{ flex:1; min-width:0; padding:7px 9px; border:1px solid var(--bg-border,#e7e3dd); border-radius:8px; font-family:inherit; font-size:13px; background:var(--bg-page,#f6f4f1); color:var(--text,#1c1b1a); }
.ytk-cfg-opt{ font-size:12px; color:var(--text-muted,#6b6660); display:flex; align-items:center; gap:3px; white-space:nowrap; }
.ytk-cfg-up,.ytk-cfg-dn,.ytk-cfg-del{ width:26px; height:26px; border:1px solid var(--bg-border,#e7e3dd); border-radius:6px; background:var(--bg-surface,#fff); cursor:pointer; font-size:12px; }
.ytk-cfg-del{ color:#b91c1c; border-color:#fecaca; }
.ytk-cfg-foot{ display:flex; justify-content:space-between; gap:8px; margin-top:14px; border-top:1px solid var(--bg-border,#e7e3dd); padding-top:12px; }

/* AND-7 (auditoría F2.13/F2.15, app Tareas): "Administrar listas" (.ytk-cfg-ov/.ytk-cfg,
   componente <yt-kanban> compartido) no seguía el patrón de bottom-sheet con grab handle que
   ya usa el resto de la app en móvil (.bottom-sheet-panel arriba, #about-modal ~línea 2155).
   El panel lo genera js/kanban.js (fuera de alcance de esta pasada) — la barrita se simula con
   un ::before puramente CSS en vez de depender de un nodo nuevo en el DOM. */
@media (max-width:768px){
  .ytk-cfg-ov{ align-items:flex-end !important; padding:0 !important; }
  .ytk-cfg{
    width:100% !important; max-width:100% !important;
    max-height:88vh !important;
    border-radius:20px 20px 0 0 !important;
    padding-top:22px;
    padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));
    position:relative;
  }
  .ytk-cfg::before{
    content:''; position:absolute; top:10px; left:50%; transform:translateX(-50%);
    width:36px; height:4px; border-radius:2px; background:var(--bg-border);
  }
}

/* ── CRM Ponentes: panel de dinero (F2) ── */
.spkc-part{ border:1px solid var(--bg-border,#e7e3dd); border-radius:11px; margin-bottom:10px; overflow:hidden; }
.spkc-part-h{ display:flex; align-items:center; gap:10px; padding:11px 13px; cursor:pointer; background:var(--bg-surface,#fff); }
.spkc-part-h:hover{ background:var(--bg-raised,#f7f4ef); }
.spkc-money{ padding:14px; background:var(--bg-raised,#faf8f5); border-top:1px solid var(--bg-border,#e7e3dd); display:flex; flex-direction:column; gap:14px; }
.spkc-mblock{ background:var(--bg-surface,#fff); border:1px solid var(--bg-border,#e7e3dd); border-radius:10px; padding:12px 14px; }
.spkc-mtitle{ font-size:13px; font-weight:700; margin-bottom:10px; }
.spkc-3col{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.spkc-btable{ width:100%; border-collapse:collapse; font-size:12.5px; }
.spkc-btable th{ text-align:left; font-size:12px; color:var(--text-muted,#6b6660); font-weight:700; padding:4px 6px; border-bottom:1px solid var(--bg-border,#e7e3dd); }
.spkc-btable td{ padding:4px 6px; border-bottom:1px solid var(--bg-border,#e7e3dd); }
.spkc-btable input{ width:100%; border:1px solid var(--bg-border,#e7e3dd); border-radius:7px; padding:5px 7px; font-family:inherit; font-size:12.5px; background:var(--bg-page,#f6f4f1); color:var(--text,#1c1b1a); }
.spkc-btable tfoot td{ font-weight:700; border-bottom:none; border-top:2px solid var(--bg-border,#e7e3dd); }
.spkc-var{ font-weight:600; white-space:nowrap; }

/* ── Fix estilos de inputs del panel de dinero (heredan el look de la app) ── */
.spkc-money input, .spkc-money select, .spkc-money textarea{
  width:100%; box-sizing:border-box; border:1px solid var(--bg-border,#e7e3dd); border-radius:9px;
  padding:8px 10px; font-family:inherit; font-size:13px; background:var(--bg-page,#f6f4f1); color:var(--text,#1c1b1a);
}
.spkc-money input:focus, .spkc-money select:focus, .spkc-money textarea:focus{ outline:none; border-color:var(--yt-orange,#EC6628); }
.spkc-money textarea{ resize:vertical; }
/* caja de dinero con símbolo de moneda */
.spkc-mny{ display:flex; align-items:stretch; }
.spkc-mny .cur-pre{ display:flex; align-items:center; padding:0 9px; font-size:12px; font-weight:700; color:var(--text-muted,#6b6660); background:var(--bg-raised,#f1ede7); border:1px solid var(--bg-border,#e7e3dd); border-right:none; border-radius:9px 0 0 9px; white-space:nowrap; }
.spkc-mny input{ border-radius:0 9px 9px 0 !important; text-align:right; }
.spkc-fx{ font-size:12px; color:var(--text-muted,#6b6660); margin-top:3px; }
.spkc-cur-sel{ max-width:150px; }

/* moneda por renglón en la tabla de presupuesto */
.spkc-btable .spkc-bcur{ width:auto; padding:5px 6px; border:1px solid var(--bg-border,#e7e3dd); border-radius:7px; font-family:inherit; font-size:11.5px; background:var(--bg-page,#f6f4f1); color:var(--text,#1c1b1a); }
.spkc-btable .spkc-mny{ min-width:120px; }
.spkc-btable td{ vertical-align:middle; }

/* ── CRM Ponentes F3: equipo / lealtad / rider ── */
.spkc-subcard{ border:1px solid var(--bg-border,#e7e3dd); border-radius:10px; padding:12px 14px; margin-bottom:10px; background:var(--bg-surface,#fff); }
.spkc-loyrow{ display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.spkc-loyrow .spk-inp{ min-width:120px; }
.spkc-avgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:6px 14px; }
.spkc-avopt{ display:flex; align-items:center; gap:7px; font-size:12.5px; cursor:pointer; color:var(--text,#1c1b1a); }

/* ── CRM Ponentes F4: relación ── */
.spkc-rscore{ background:var(--bg-raised,#f1ede7); border-radius:10px; padding:12px 14px; text-align:center; }
.spkc-rval{ font-size:22px; font-weight:800; color:var(--text,#1c1b1a); margin-top:2px; }
.spkc-note{ display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid var(--bg-border,#e7e3dd); }

/* ════ <yt-calendar> — Agenda (mes/semana/día/agenda) ════ */
.ytc{ display:block; }
.ytc-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.ytc-bar-l{ display:flex; align-items:center; gap:8px; }
.ytc-today{ border:1px solid var(--bg-border); background:var(--bg-surface); color:var(--text); border-radius:8px; padding:6px 14px; font-weight:700; font-size:13px; cursor:pointer; font-family:inherit; }
.ytc-nav{ border:1px solid var(--bg-border); background:var(--bg-surface); color:var(--text-2); border-radius:8px; width:30px; height:30px; cursor:pointer; font-size:16px; line-height:1; }
.ytc-title{ font-size:16px; font-weight:700; color:var(--text); margin-left:6px; }
.ytc-views{ display:flex; border:1px solid var(--bg-border); border-radius:8px; overflow:hidden; }
.ytc-vbtn{ border:none; background:var(--bg-surface); color:var(--text-2); font-size:12px; padding:6px 13px; cursor:pointer; font-family:inherit; }
.ytc-vbtn.on{ background:var(--yt-orange,#EC6628); color:#fff; }
/* mes */
.ytc-month{ border:1px solid var(--bg-border); border-radius:12px; overflow:hidden; background:var(--bg-surface); }
.ytc-mhrow{ display:grid; grid-template-columns:repeat(7,1fr); background:var(--bg-raised); }
.ytc-mh{ padding:7px 8px; font-size:12px; font-weight:700; color:var(--text-muted); text-transform:capitalize; border-bottom:1px solid var(--bg-border); }
.ytc-mgrid{ display:grid; grid-template-columns:repeat(7,1fr); }
.ytc-cell{ min-height:104px; border-right:1px solid var(--bg-border); border-bottom:1px solid var(--bg-border); padding:4px; cursor:pointer; overflow:hidden; }
.ytc-cell:nth-child(7n){ border-right:none; }
.ytc-cell.off{ background:var(--bg-raised); }
.ytc-cell.off .ytc-dn{ color:var(--text-faint); }
.ytc-cell-h{ display:flex; justify-content:flex-end; }
.ytc-dn{ font-size:12px; font-weight:600; color:var(--text-2); width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; cursor:pointer; }
.ytc-dn.today{ background:var(--yt-orange,#EC6628); color:#fff; }
.ytc-cell-b{ display:flex; flex-direction:column; gap:2px; margin-top:2px; }
.ytc-more{ font-size:12px; color:var(--text-muted); padding:1px 4px; cursor:pointer; }
.ytc-more:hover{ color:var(--yt-orange,#EC6628); }
/* chips */
.ytc-ev{ font-size:12px; border-radius:6px; padding:2px 6px; cursor:pointer; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; background:var(--bg-raised); border-left:3px solid var(--text-muted); color:var(--text); }
.ytc-ev:hover{ filter:brightness(.97); }
.ytc-ev-blk{ position:absolute; left:3px; right:3px; white-space:normal; box-shadow:0 1px 3px rgba(0,0,0,.12); z-index:2; }
.ytc-ev-row{ display:flex; align-items:center; gap:6px; }
.ytc-ev-av{ width:18px; height:18px; border-radius:50%; flex:none; background:#ddd center/cover; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; }
/* timegrid */
.ytc-tg{ border:1px solid var(--bg-border); border-radius:12px; overflow:hidden; background:var(--bg-surface); }
.ytc-tg-head{ display:grid; border-bottom:1px solid var(--bg-border); }
.ytc-tg-dh{ padding:8px 6px; text-align:center; font-size:13px; color:var(--text-2); border-left:1px solid var(--bg-border); }
.ytc-tg-dow{ text-transform:capitalize; color:var(--text-muted); font-size:12px; }
.ytc-tg-dn{ font-weight:700; }
.ytc-tg-dn.today{ background:var(--yt-orange,#EC6628); color:#fff; border-radius:50%; padding:1px 7px; }
.ytc-tg-allrow{ display:grid; border-bottom:1px solid var(--bg-border); min-height:30px; }
.ytc-tg-allk{ font-size:12px; color:var(--text-muted); padding:4px 6px; align-self:center; }
.ytc-tg-allc{ border-left:1px solid var(--bg-border); padding:3px; display:flex; flex-direction:column; gap:2px; min-height:24px; cursor:pointer; }
.ytc-tg-gutter{ }
.ytc-tg-scroll{ max-height:62vh; overflow-y:auto; }
.ytc-tg-grid{ display:grid; position:relative; }
.ytc-tg-gcol{ }
.ytc-tg-hr{ position:relative; border-bottom:1px dashed var(--bg-border); }
.ytc-tg-hr span{ position:absolute; top:-7px; right:6px; font-size:12px; color:var(--text-muted); background:var(--bg-surface); padding:0 2px; }
.ytc-tg-col{ position:relative; border-left:1px solid var(--bg-border); }
.ytc-tg-slot{ border-bottom:1px dashed var(--bg-border); cursor:pointer; }
.ytc-tg-slot.q{ border-bottom-color:color-mix(in srgb, var(--bg-border) 45%, transparent); }  /* líneas de 15 min más tenues */
.ytc-tg-slot:hover{ background:var(--bg-raised); }
/* Vista Año (12 mini-meses) */
.ytc-year{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.ytc-y-mo{ border:1px solid var(--bg-border); border-radius:10px; padding:8px; background:var(--bg-surface); }
.ytc-y-moh{ width:100%; text-align:left; border:0; background:none; font-weight:800; font-size:13px; color:var(--text); cursor:pointer; padding:0 2px 6px; }
.ytc-y-moh:hover{ color:var(--yt-orange,#EC6628); }
.ytc-y-dowrow,.ytc-y-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
.ytc-y-dow{ text-align:center; font-size:12px; color:var(--text-muted); padding:1px 0; }
.ytc-y-d{ position:relative; border:0; background:none; font-size:12px; color:var(--text); cursor:pointer; aspect-ratio:1; border-radius:6px; padding:0; display:flex; align-items:center; justify-content:center; }
.ytc-y-d:hover{ background:var(--bg-raised); }
.ytc-y-d.off{ color:var(--text-faint,#bbb); }
.ytc-y-d.today{ background:var(--yt-orange,#EC6628); color:#fff; font-weight:800; }
.ytc-y-d.has{ font-weight:800; }
.ytc-y-dot{ position:absolute; bottom:2px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--yt-orange,#EC6628); }
.ytc-y-d.today .ytc-y-dot{ background:#fff; }
@media (max-width:768px){ .ytc-year{ grid-template-columns:repeat(2,1fr); } }
/* ytc-fill: usado en el objeto calendario del tablero → llena su caja (sin barra blanca ni scroll externo) */
.ytc-fill{ display:flex; flex-direction:column; height:100%; width:100%; min-height:0; }
.ytc-fill .ytc-body{ flex:1; min-height:0; overflow:hidden; }
.ytc-fill .ytc-month{ height:100%; display:flex; flex-direction:column; }
.ytc-fill .ytc-mgrid{ flex:1; grid-auto-rows:1fr; min-height:0; }
.ytc-fill .ytc-cell{ min-height:0; overflow:hidden; }
.ytc-fill .ytc-cell-b{ overflow:hidden; }
.ytc-fill .ytc-tg{ height:100%; display:flex; flex-direction:column; }
.ytc-fill .ytc-tg-scroll{ flex:1; min-height:0; }
.ytc-fill .ytc-agenda, .ytc-fill .ytc-year{ height:100%; overflow:auto; }
/* Plantilla genérica (sin año) */
.ytc-generic .ytc-nav, .ytc-generic .ytc-today{ display:none; }
.ytc-more2{ font-size:12px; color:var(--text-muted); padding:1px 4px; }
.ytc-gw{ display:flex; height:100%; border:1px solid var(--bg-border); border-radius:12px; overflow:hidden; background:var(--bg-surface); }
.ytc-gw-col{ flex:1; min-width:0; border-right:1px solid var(--bg-border); display:flex; flex-direction:column; cursor:pointer; }
.ytc-gw-col:last-child{ border-right:0; }
.ytc-gw-col:hover{ background:var(--bg-raised); }
.ytc-gw-h{ padding:7px 4px; font-size:12px; font-weight:700; color:var(--text-muted); border-bottom:1px solid var(--bg-border); background:var(--bg-raised); text-align:center; }
.ytc-gw-b{ flex:1; padding:6px; display:flex; flex-direction:column; gap:3px; overflow:auto; }
.ytc-fill .ytc-gw{ height:100%; }
/* agenda */
.ytc-agenda{ border:1px solid var(--bg-border); border-radius:12px; overflow:hidden; background:var(--bg-surface); }
.ytc-ag-h{ background:var(--bg-raised); padding:7px 12px; font-size:12px; font-weight:700; color:var(--text-muted); text-transform:capitalize; border-bottom:1px solid var(--bg-border); }
.ytc-ag-row{ display:flex; align-items:center; gap:12px; padding:9px 12px; border-bottom:1px solid var(--bg-border); cursor:pointer; }
.ytc-ag-row:hover{ background:var(--bg-raised); }
.ytc-ag-time{ font-size:12px; color:var(--text-muted); min-width:78px; font-variant-numeric:tabular-nums; }
.ytc-ag-card{ flex:1; min-width:0; }
.ytc-empty{ padding:40px; text-align:center; color:var(--text-muted); font-size:13px; }
@media (max-width:768px){ .ytc-cell{ min-height:72px; } .ytc-title{ font-size:14px; } }

/* ════ Toast UI Calendar — chips enriquecidos + tema ════ */
.ag-chip{ display:inline-flex; align-items:center; gap:5px; max-width:100%; overflow:hidden; line-height:1.2; }
.ag-chip .ytc-ev-av{ width:16px; height:16px; font-size:8px; flex:none; }
.ag-chip-t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.ag-chip.done .ag-chip-t{ text-decoration:line-through; opacity:.6; }
.ag-task-h{ font-size:12px; font-weight:700; color:#8b5cf6; letter-spacing:.2px; }
/* Tooltip propio de las fechas de notas (hover) */
.ag-nutip{ position:fixed; z-index:99998; max-width:280px; background:#1c1b1a; color:#fff; font-size:11.5px; line-height:1.4; padding:8px 10px; border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.35); pointer-events:none; }
.ag-nutip .t{ font-weight:700; margin-bottom:2px; }
.ag-nutip .d{ color:#c9b8f0; }
.ag-nutip .p{ color:#cfcac4; margin-top:4px; font-size:12px; max-height:66px; overflow:hidden; }
.ag-nutip .f{ color:#8b8680; font-size:12px; margin-top:5px; }
.ag-nutip .im{ display:block; max-width:100%; max-height:120px; border-radius:6px; margin:6px 0 2px; object-fit:cover; }
/* Renglón "Notas" (panel task) compacto: bajamos la ALTURA DEL RENGLÓN sin achicar el chip */
#agenda-cal .toastui-calendar-panel:has(.ag-task-h){ height:26px !important; min-height:26px !important; }
#agenda-cal .toastui-calendar-panel:has(.ag-task-h) .toastui-calendar-panel-grid,
#agenda-cal .toastui-calendar-panel:has(.ag-task-h) .toastui-calendar-panel-grid-wrapper,
#agenda-cal .toastui-calendar-panel:has(.ag-task-h) .toastui-calendar-weekday,
#agenda-cal .toastui-calendar-panel:has(.ag-task-h) .toastui-calendar-weekday-grid,
#agenda-cal .toastui-calendar-panel:has(.ag-task-h) .toastui-calendar-weekday-events{ height:26px !important; }
#agenda-cal .toastui-calendar-panel:has(.ag-task-h) .toastui-calendar-weekday-event{ height:22px !important; }
#agenda-cal .toastui-calendar-panel:has(.ag-task-h) .toastui-calendar-panel-resizer{ display:none !important; }
#agenda-cal{ color:var(--text); border:1px solid var(--bg-border); border-radius:12px; overflow:hidden; }
#agenda-cal .toastui-calendar-layout{ background:var(--bg-surface); }
#agenda-cal .toastui-calendar-month-daygrid-cell, #agenda-cal .toastui-calendar-daygrid-cell{ border-color:var(--bg-border) !important; }
#agenda-cal .toastui-calendar-weekday-grid-line, #agenda-cal .toastui-calendar-panel-grid{ border-color:var(--bg-border) !important; }
#agenda-cal .toastui-calendar-grid-cell-date, #agenda-cal .toastui-calendar-template-monthGridHeader, #agenda-cal .toastui-calendar-time-hour, #agenda-cal .toastui-calendar-timegrid-hour{ color:var(--text-2) !important; }
#agenda-cal .toastui-calendar-popup-container{ background:var(--bg-surface); color:var(--text); border:1px solid var(--bg-border); }
/* Líneas del grid más limpias y consistentes */
#agenda-cal .toastui-calendar-timegrid-gridline-half, #agenda-cal .toastui-calendar-gridline-half{ border-color:var(--bg-border) !important; }
#agenda-cal .toastui-calendar-column{ border-right:1px solid var(--bg-border); }
#agenda-cal .toastui-calendar-column:last-child{ border-right:none; }
#agenda-cal .toastui-calendar-day-name-item{ font-weight:600; }
#agenda-cal .toastui-calendar-event-time, #agenda-cal .toastui-calendar-weekday-event{ border-radius:6px; }
#agenda-cal .toastui-calendar-event-time{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.04); }
/* Eventos externos (solo lectura): rayado sutil + cursor de "no editable" */
#agenda-cal .ag-ext{ cursor:default; }
.ag-chip.ag-ext .ag-chip-t{ font-weight:600; }

/* ════ K5: bloque de traslado (goingDuration nativo de toastui) — banda tenue, clicable → ruta en Maps ════ */
#agenda-cal .toastui-calendar-travel-time{
  background:repeating-linear-gradient(45deg, color-mix(in srgb, var(--text-muted,#6b6660) 12%, transparent) 0 5px, transparent 5px 10px) !important;
  color:var(--text-muted,#6b6660) !important;
  border-radius:6px 6px 0 0; border-bottom:1px dashed var(--bg-border,#e5e3dc);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:600; line-height:1; overflow:hidden; cursor:pointer;
}
#agenda-cal .toastui-calendar-travel-time:hover{
  background:color-mix(in srgb, var(--yt-orange,#EC6628) 14%, transparent) !important;
  color:var(--yt-orange,#EC6628) !important;
}

/* ════ Leyenda INTERACTIVA de calendarios (mostrar/ocultar + color + refrescar) ════ */
.ag-legend{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; margin:0 2px 8px; }
.ag-legend:empty{ display:none; }
.ag-leg{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-2,#444); white-space:nowrap; background:var(--bg-surface,#fff); border:1px solid var(--bg-border,#e6e2db); border-radius:999px; padding:3px 9px 3px 7px; }
.ag-leg.off{ opacity:.5; }
.ag-leg.off .ag-leg-lb{ text-decoration:line-through; }
.ag-leg-vis{ width:13px; height:13px; cursor:pointer; accent-color:var(--yt-orange,#EC6628); margin:0; }
.ag-leg-dot{ width:11px; height:11px; border-radius:3px; display:inline-block; flex:none; }
.ag-leg-sw{ position:relative; width:13px; height:13px; cursor:pointer; flex:none; display:inline-block; }
.ag-leg-sw i{ width:13px; height:13px; border-radius:3px; display:block; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.ag-leg-sw input[type=color]{ position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; padding:0; border:none; }
.ag-leg-lb{ font-weight:600; }
.ag-leg-sync{ border:none; background:none; color:var(--text-muted,#6b6660); cursor:pointer; font-size:13px; line-height:1; padding:0 0 0 2px; }
.ag-leg-sync:hover{ color:var(--yt-orange,#EC6628); }

/* ════ Horario laboral (F5) — editor Calendly por día con bloques ════ */
.wh-useorg{ display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; margin-bottom:12px; }
.wh-tools{ margin-bottom:8px; }
.wh-copy{ border:1px solid var(--bg-border,#e6e2db); background:var(--bg-surface,#fff); color:var(--text-2,#444); border-radius:8px; padding:5px 10px; font-size:11.5px; font-weight:600; cursor:pointer; font-family:inherit; }
.wh-copy:hover{ border-color:var(--yt-orange,#EC6628); color:var(--yt-orange,#EC6628); }
.wh-row{ display:flex; align-items:flex-start; gap:12px; padding:9px 0; border-top:1px solid var(--bg-border,#f0ede8); }
.wh-row-h{ display:flex; flex-direction:column; gap:6px; width:130px; flex:none; }
.wh-toggle{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--text,#1c1b1a); cursor:pointer; }
.wh-toggle input{ accent-color:var(--yt-orange,#EC6628); }
.wh-add{ border:none; background:none; color:var(--yt-orange,#EC6628); font-size:12px; font-weight:700; cursor:pointer; text-align:left; padding:0; font-family:inherit; }
.wh-ivs{ flex:1; display:flex; flex-direction:column; gap:6px; padding-top:1px; min-width:0; }
.wh-iv{ display:flex; align-items:center; gap:7px; }
.wh-iv input[type=time]{ border:1px solid var(--bg-border,#e6e2db); border-radius:7px; padding:5px 8px; font-size:13px; font-family:inherit; background:var(--bg-surface,#fff); color:var(--text,#1c1b1a); }
.wh-dash{ color:var(--text-muted,#6b6660); }
.wh-rm{ border:none; background:none; color:#dc2626; font-size:16px; line-height:1; cursor:pointer; padding:0 2px; }
.wh-off{ font-size:12.5px; color:var(--text-muted,#9b958c); padding-top:5px; }
.wh-note{ border:1px solid var(--bg-border,#e7e3dd); border-radius:12px; padding:16px; color:var(--text-muted,#6b6660); font-size:13px; }
.wh-day{ width:30px; height:30px; border:1px solid var(--bg-border,#e6e2db); background:var(--bg-surface,#fff); color:var(--text-2,#444); border-radius:7px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; }
.wh-day.on{ background:var(--yt-orange,#EC6628); border-color:var(--yt-orange,#EC6628); color:#fff; }
/* Sombreado tipo Outlook: columnas con base gris; las horas hábiles se pintan en blanco (inline desde agenda.js). */
#agenda-cal .toastui-calendar-column{ background-color:rgba(0,0,0,.05); }

/* ════ Sugerencias de auto-match (F3b) ════ */
.ag-suggest{ margin:0 2px 8px; }
.ag-suggest:empty{ display:none; }
.ag-sg-h{ font-size:12.5px; font-weight:700; color:var(--text,#1c1b1a); margin:0 0 6px; }
.ag-sg{ display:flex; align-items:center; gap:10px; justify-content:space-between; flex-wrap:wrap; background:color-mix(in srgb, var(--yt-orange,#EC6628) 7%, var(--bg-surface,#fff)); border:1px solid color-mix(in srgb, var(--yt-orange,#EC6628) 30%, transparent); border-radius:10px; padding:8px 12px; margin-bottom:6px; }
.ag-sg-tx{ font-size:12.5px; color:var(--text-2,#444); display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; min-width:0; }
.ag-sg-tx span{ color:var(--text-muted,#6b6660); font-size:11.5px; }
.ag-sg-who{ font-weight:600; color:var(--text-2,#444) !important; }
.ag-sg-bt{ display:flex; gap:6px; flex:none; }
.ag-sg-bt .btn{ font-size:12px; padding:4px 12px; }

/* ════ Detalle de evento externo (solo lectura) ════ */
.ag-ext-ov{ position:fixed; inset:0; background:rgba(20,18,16,.38); display:flex; align-items:center; justify-content:center; z-index:9000; padding:20px; }
.ag-ext-card{ position:relative; background:var(--bg-surface,#fff); border:1px solid var(--bg-border,#e6e2db); border-radius:14px; padding:20px 22px 18px; width:100%; max-width:380px; box-shadow:0 16px 48px rgba(0,0,0,.22); }
.ag-ext-x{ position:absolute; top:10px; right:12px; border:none; background:none; font-size:22px; line-height:1; color:var(--text-muted,#999); cursor:pointer; }
.ag-ext-title{ font-size:16px; font-weight:800; color:var(--text,#1c1b1a); margin:0 22px 12px 0; line-height:1.25; }
.ag-ext-row{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-2,#444); margin-bottom:7px; }
.ag-ext-dot{ width:11px; height:11px; border-radius:50%; display:inline-block; flex:none; }
.ag-ext-note{ margin-top:10px; padding-top:10px; border-top:1px solid var(--bg-border,#f0ede8); font-size:11.5px; color:var(--text-muted,#6b6660); line-height:1.4; }

/* ════ Agenda — barra compacta + calendario alto ════ */
.ag-toolbar{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.ag-toolbar .ag-spacer{ flex:1 1 12px; }
.ag-title{ font-size:14px; font-weight:700; color:var(--text); white-space:nowrap; }
.ag-btn{ border:1px solid var(--bg-border); background:var(--bg-surface); color:var(--text); border-radius:7px; padding:5px 11px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; }
.ag-btn.primary{ background:var(--yt-orange,#EC6628); border-color:var(--yt-orange,#EC6628); color:#fff; }
.ag-ico{ border:1px solid var(--bg-border); background:var(--bg-surface); color:var(--text-2); border-radius:7px; width:26px; height:28px; cursor:pointer; font-size:15px; line-height:1; }
.ag-sel{ padding:4px 8px; font-size:12px; max-width:160px; height:28px; border:1px solid var(--bg-border); border-radius:7px; background:var(--bg-surface); color:var(--text); font-family:inherit; }
.ag-mine{ display:flex; align-items:center; gap:4px; font-size:12px; color:var(--text-2); cursor:pointer; white-space:nowrap; }
.ag-views{ display:flex; border:1px solid var(--bg-border); border-radius:7px; overflow:hidden; }
.ag-vbtn{ border:none; background:var(--bg-surface); color:var(--text-2); font-size:12px; padding:5px 11px; cursor:pointer; font-family:inherit; }
.ag-vbtn.on{ background:var(--yt-orange,#EC6628); color:#fff; }
#agenda-cal{ height:calc(100vh - 116px); min-height:460px; }
@media (max-width:768px){ #agenda-cal{ height:calc(100vh - 150px); } }

/* ════ Participantes de actividad (chips + autocomplete) ════ */
.au-parts{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; min-height:4px; }
.au-pchip{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:3px 9px; border-radius:14px; border:1px solid; white-space:nowrap; }
.au-pchip.sm{ font-size:10.5px; padding:1px 7px; }
.au-pchip .au-prm{ background:none; border:none; cursor:pointer; color:inherit; font-size:14px; line-height:1; padding:0 0 0 2px; opacity:.7; }
.au-pchip .au-prm:hover{ opacity:1; }
.au-presults{ display:none; position:absolute; left:0; right:0; top:calc(100% + 2px); z-index:5; background:var(--bg-surface,#fff); border:1px solid var(--bg-border,#e7e3dd); border-radius:9px; box-shadow:0 10px 30px -8px rgba(0,0,0,.3); max-height:220px; overflow:auto; }
.au-pres{ padding:8px 11px; font-size:13px; cursor:pointer; display:flex; align-items:center; gap:7px; color:var(--text); }
.au-pres:hover{ background:var(--bg-raised); }
/* K8-hallazgo 8: opción activa por teclado (ArrowUp/Down) en los combobox del editor de eventos. */
.au-pres.is-active{ background:var(--bg-raised); outline:2px solid var(--yt-orange,#EC6628); outline-offset:-2px; }
.au-pres-t{ margin-left:auto; font-size:12px; color:var(--text-muted,#6b6660); }

/* ════════════════════════════════════════════════════════
   MÓVIL / TÁCTIL (UX-040) — Fase 3 de la auditoría
   Breakpoints canónicos: 640 (teléfono) · 768 (phablet) · 880 (tablet) · 1280 (desktop)
   ════════════════════════════════════════════════════════ */
/* Sin destello azul al tocar; sin retraso de doble-tap en controles */
*{ -webkit-tap-highlight-color:transparent; }
button, a, input, select, textarea, .btn, .cts-pill { touch-action:manipulation; }

/* Dedos, no cursores: área táctil mínima 44px en dispositivos táctiles (estándar Apple/Material) */
@media (pointer:coarse){
  button, .btn, .cts-pill, .nav-item, .nav-subitem, select { min-height:44px; }
  /* IOS-1 (auditoría 2026-07-23): generaliza el fix ya probado y confirmado en Correo
     (.mail-row-check, css/mail.css) — un <input type="checkbox"/"radio"> SIN appearance:none es
     un control NATIVO del SO; ponerle min-width/min-height directo (regla vieja de aquí) infla el
     widget COMPLETO en Safari, no solo el área de toque (bug real reportado con capturas de
     iPhone/Mac: casillas en blanco gigantes). Excluye los 3 consumidores que YA manejan su propio
     dibujo/ocultamiento bajo touch: .mail-row-check (su propio appearance:none, mismos valores),
     .sbw-switch/.ag-sw (checkbox invisible con opacity:0 que maneja un <span> track a un lado —
     forzarle tamaño/dibujo aquí rompería su área de toque de switch completo). */
  input[type="checkbox"]:not(.mail-row-check):not(.sbw-switch input):not(.ag-sw input) {
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    width:22px; height:22px; min-width:22px; min-height:22px; flex-shrink:0;
    border:1.5px solid var(--text-muted,#8a8a8a); border-radius:6px;
    background:var(--bg-surface,transparent); cursor:pointer; display:inline-block; position:relative;
  }
  input[type="checkbox"]:not(.mail-row-check):not(.sbw-switch input):not(.ag-sw input):checked {
    background:var(--yt-orange,var(--brand-primary,#EC6628)); border-color:var(--yt-orange,var(--brand-primary,#EC6628));
  }
  input[type="checkbox"]:not(.mail-row-check):not(.sbw-switch input):not(.ag-sw input):checked::after {
    content:''; position:absolute; left:6px; top:2px; width:6px; height:11px;
    border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
  }
  input[type="radio"] {
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    width:22px; height:22px; min-width:22px; min-height:22px; flex-shrink:0;
    border:1.5px solid var(--text-muted,#8a8a8a); border-radius:50%;
    background:var(--bg-surface,transparent); cursor:pointer; display:inline-block; position:relative;
  }
  input[type="radio"]:checked { border-color:var(--yt-orange,var(--brand-primary,#EC6628)); }
  input[type="radio"]:checked::after {
    content:''; position:absolute; left:4.5px; top:4.5px; width:11px; height:11px; border-radius:50%;
    background:var(--yt-orange,var(--brand-primary,#EC6628));
  }
  .toast-x, .cts-rm { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  /* K8-hallazgo 7: iOS hace zoom al enfocar inputs < 16px. Subimos los campos del editor de eventos a 16px. */
  .spk-inp, .au-time, #au-loc { font-size:16px; }
  /* IOS-4 (auditoría F2.13/F2.15, app Tareas): botones "✕"/"×" de cierre (editor de actividad
     #au-x, engrane de listas .ytk-cfg-x) medían ~28-38px de ancho real en vivo — el alto ya
     lo cubría button{min-height:44px} de arriba, pero el ancho no. Mismo patrón ya usado en
     .toast-x/.cts-rm (línea de arriba). */
  #au-x, .ytk-cfg-x { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  /* IOS-2/AND-2 (auditoría de cierre K0-K8, 2026-07-18, CONFIRMADOS HIGH): mismo hallazgo IOS-4 de
     arriba, sin cerrar en los 4 botones "×" hermanos del editor de eventos (quitar participante/
     responsable/contacto/recordatorio) — solo #au-x se había corregido. */
  .au-prm, .au-orm, .au-crm-rm, .au-remrm { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  /* AND-2 (auditoría de cierre K0-K8, 2026-07-18, CONFIRMADO HIGH): .ytc-nav (‹/› del calendario)
     quedaba en 30px de ancho real pese al min-height genérico. */
  .ytc-nav { min-width:44px; }
  /* .ytc-dn (número de día, vista mes) es un <span>, no un <button>/.btn — no heredaba NADA de la
     regla genérica de arriba. Es un círculo de 22px dentro de una celda de mes compacta: agrandarlo
     directo rompería el grid — mismo patrón ::before invisible ya usado en .tsk-row .tsk-ck. */
  .ytc-dn { position:relative; }
  .ytc-dn::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; }
  /* AND-5 (auditoría F2.13/F2.15): botones del engrane "Administrar listas" (26px / 30×28px)
     muy por debajo de 48dp M3. Componente COMPARTIDO (<yt-kanban>, usado también por Ponentes/
     Patrocinadores) — el fix es deliberadamente global porque un target táctil más grande es
     una mejora deseable ahí también, no algo específico de Tareas. Solo dispara en pointer
     táctil (esta media query), así que el mouse desktop no ve el modal más "inflado". */
  .ytk-cfg-up, .ytk-cfg-dn, .ytk-cfg-del, .ytk-cfg-c { width:44px; height:44px; }
  /* AND-4 (auditoría F2.13/F2.15): checkbox de fila (.home-task-ck, 18px) muy por debajo de
     48dp — pero .home-task-ck/.home-task-row son COMPARTIDOS con el widget "Tareas por
     atender" del Home (js/home.js), donde un checkbox agrandado se vería desproporcionado en
     una tarjeta compacta. Scope al compuesto .tsk-row .tsk-ck (presente SOLO en la app Tareas,
     rowHtml() en js/tasks.js pone ambas clases en el mismo elemento) y área de toque ampliada
     con un ::before invisible 44×44 centrado — el checkbox visual sigue midiendo 18px, no se
     desplaza layout de los hermanos flex (position:absolute lo saca del flujo). */
  .tsk-row .tsk-ck { position:relative; }
  .tsk-row .tsk-ck::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; }
  /* AND-3/IOS-1 (auditoría responsiva Agenda F2.16a, 2026-07-13) — medido en vivo (Pixel 7 real
     + Chromium/WebKit con emulación iPhone 14, pointer:coarse SÍ dispara en ambos): .ag-btn y
     .ytp-pill ya llegaban a 44px de alto porque son <button> reales y la regla genérica de
     arriba (selector de etiqueta `button`) ya los cubre — se deja min-height explícito aquí de
     todos modos, documentado, para no depender de que sigan siendo <button> en el futuro. El
     hueco REAL confirmado es el ANCHO de .ag-ico (26px, sin equivalente de min-width) — mismo
     patrón que #au-x/.ytk-cfg-x arriba. */
  .ag-ico{ min-width:44px; min-height:44px; }
  .ag-btn, .ytp-pill{ min-height:44px; }
  /* IOS-1 (auditoría en vivo 2026-07-14, CONFIRMADO): .ag-mm-nav (‹/› del mini-mes, F2.16a) es un
     <button> real así que la regla genérica de arriba ya le da 44px de ALTO, pero nada le daba
     ANCHO mínimo — con padding:2px 4px y un solo carácter a 15px, el ancho real rondaba 20-28px.
     Mismo landmine que #au-x/.ag-ico: una clase con padding fijo no hereda ancho de la regla
     genérica por tipo. */
  .ag-mm-nav{ min-width:44px; min-height:44px; }
  /* IOS-2/AND-1 (auditoría en vivo 2026-07-14, CONFIRMADO): .mail-msg-ibtn (destacar/no-leído/
     tarea/Bloquear remitente en la cabecera de cada mensaje de Correo) fija width/height:30px
     explícito (css/mail.css) — una clase con min-height propio GANA por especificidad sobre la
     regla genérica `button{min-height:44px}` de arriba, así que nunca la alcanzaba (mismo
     mecanismo ya documentado para .ag-ico). El breakpoint <880px de mail.css ya subía esto a
     32px, seguía 12-14px corto del mínimo de Apple/Material. */
  .mail-msg-ibtn{ min-width:44px; min-height:44px; }
  /* IOS-1/AND-3 (panel de auditores 2026-07-16, CONFIRMADO): .topbar-brand (logo/nombre del
     header, ahora clickeable→Home) es un <div role="button"> — mismo landmine ya documentado
     arriba para .larry-bar: un <div> no lo alcanza la regla genérica `button{min-height:44px}`. */
  .topbar-brand{ min-height:44px; }
  /* IOS-2/AND-3: .cts-fav (⭐ favorito, F3.4) ya llega a 44px de ALTO por ser <button> real, pero
     con padding:2px 4px y un solo glifo a 15-20px el ANCHO real ronda 23-32px — mismo patrón que
     .ag-mm-nav/#au-x de arriba. */
  .cts-fav{ min-width:44px; display:inline-flex; align-items:center; justify-content:center; }
  /* UXU-2: .cts-pill-x (✕ para eliminar segmento/lista, ahora hermano real del pill — ver
     js/contacts.js) mide 22px de ancho/alto declarado; la regla genérica de arriba ya le da
     min-height:44px por ser <button>, falta el ancho. */
  .cts-pill-x{ min-width:44px; }
  /* IOS-3: los 8 campos nuevos de "Salud y pago (sensible)" (F3.1c) heredan .cts-in a 13.5px —
     mismo bug de auto-zoom de iOS ya corregido para .spk-inp/.au-time/#au-loc arriba, aplicado
     aquí a TODOS los .cts-in del módulo (el bug es real en cualquier campo de texto de Contactos
     a este tamaño, no solo en los nuevos). */
  .cts-in{ font-size:16px; }
  /* IOS-1 (panel de auditores, lote grande 2026-07-18, CONFIRMADO HIGH): mismo bug de auto-zoom
     de iOS, 3ª vez — .ytpi-in (<yt-place-input>, Ubicaciones unificadas) quedó fuera del
     allowlist. NO se agregó la regla base "todo input<16px" que sugería el hallazgo (IOS-C10,
     "considerar") a propósito — es un cambio amplio sin auditar contra el resto de inputs
     existentes del app, fuera del alcance seguro de esta remediación puntual. */
  .ytpi-in{ font-size:16px; }
  /* IOS-2 (panel de auditores, lote grande 2026-07-18, CONFIRMADO MEDIUM): filas de resultado del
     typeahead de lugares (.au-pres, consumidas también por <yt-place-input>) sin piso táctil. */
  .au-pres{ min-height:44px; }
}
/* AND-3 (panel de auditores 2026-07-16, CONFIRMADO): Android pide 48dp, no el piso de 44px de
   iOS de arriba — mismos controles nuevos de esta sesión.
   AND-1 (panel de cierre de F3, CONFIRMADO EN VIVO): .cts-rm (botones ⛶/📥/✕ del toolbar del
   grafo, F3.8) se agregó DESPUÉS de este panel y quedó fuera de la lista — mismo landmine,
   mismo fix, una clase más. */
:root[data-os="android"] .cts-fav,
:root[data-os="android"] .cts-tab,
:root[data-os="android"] .cts-pill,
:root[data-os="android"] .cts-rm,
:root[data-os="android"] .topbar-brand {
  min-width:48px; min-height:48px;
}
/* AND-4 (panel de auditores 2026-07-16, CONFIRMADO): ningún control nuevo de esta sesión tenía
   :active — ni state-layer Android ni scale iOS, cero feedback táctil al presionar. Rama Android
   explícita (state-layer = tinte sólido, nunca transform/scale, eso es iOS). */
:root[data-os="android"] .cts-fav:active,
:root[data-os="android"] .cts-tab:active,
:root[data-os="android"] .cts-pill:active,
:root[data-os="android"] .cts-rm:active,
:root[data-os="android"] .topbar-brand:active {
  background:color-mix(in srgb, var(--yt-orange,#EC6628) 14%, transparent);
}
/* AND-1/AND-2 (panel de auditores, lote grande 2026-07-18, CONFIRMADOS MEDIUM): mismo landmine de
   AND-3/AND-4 de arriba, 3 superficies táctiles nuevas de este lote — .au-pres (fila de resultado
   de <yt-place-input>, es un <div>, NO alcanza min-height:44px genérico de button/.btn), .cfgw-btn
   (botones reales "Comprar"/"Ir a comprar →" de Add-ons + "Mejorar plan" de gateCard, ahora
   también gatea Cobranza/Contratos) y los tabs Gráfica/Tabla de "Pregúntale a tus datos" inline. */
:root[data-os="android"] .au-pres,
:root[data-os="android"] .cfgw-btn,
:root[data-os="android"] #dsw-ask-tab-chart,
:root[data-os="android"] #dsw-ask-tab-table {
  min-width:48px; min-height:48px;
}
:root[data-os="android"] .au-pres:active,
:root[data-os="android"] .cfgw-btn:active,
:root[data-os="android"] #dsw-ask-tab-chart:active,
:root[data-os="android"] #dsw-ask-tab-table:active {
  background:color-mix(in srgb, var(--yt-orange,#EC6628) 14%, transparent);
}

/* Safe areas (notch / barra de inicio iPhone) — requiere viewport-fit=cover */
.topbar { padding-top:env(safe-area-inset-top,0px); height:calc(var(--topbar-height) + env(safe-area-inset-top,0px)); }
/* IOS-6 (auditoría F2.13/F2.15): mismo patrón ya aplicado a .topbar (línea ~783-784) pero
   faltaba en .sidebar — sin notch/Dynamic Island los env() resuelven a 0px (inocuo en
   desktop/Android), así que esto solo tiene efecto real en iPhones con recorte lateral. */
.sidebar { padding-bottom:env(safe-area-inset-bottom,0px); padding-left:max(0px, env(safe-area-inset-left,0px)); padding-right:max(0px, env(safe-area-inset-right,0px)); }
.toast-stack { bottom:calc(16px + env(safe-area-inset-bottom,0px)); inset:auto 16px calc(16px + env(safe-area-inset-bottom,0px)) auto; }
/* Sprint 2 (docs/PLAN_ALUNA_UI.md #87): a los 768px el .bottom-nav (56px) ya está fijo en la
   pantalla — la regla de arriba solo sumaba el safe-area y el toast quedaba tapado/pegado al nav. */
@media (max-width:768px){
  .toast-stack { bottom:calc(56px + 16px + env(safe-area-inset-bottom,0px)); inset:auto 16px calc(56px + 16px + env(safe-area-inset-bottom,0px)) auto; }
}

/* FAB — botón flotante contextual en listas (Sprint 2, decisión #86). Solo en móvil: en
   escritorio la acción ya vive en el header de la pantalla (ej. "+ Nuevo evento"). */
.yt-fab { display:none; }
@media (max-width:768px){
  .yt-fab {
    display:flex; align-items:center; justify-content:center;
    position:fixed; right:16px; z-index:calc(var(--z-sidebar) + 1);
    bottom:calc(56px + 16px + env(safe-area-inset-bottom,0px));
    width:52px; height:52px; border-radius:50%; border:none;
    background:var(--brand-primary,var(--yt-orange,#EC6628)); color:#fff;
    box-shadow:0 4px 16px rgba(0,0,0,.25); cursor:pointer;
  }
  .yt-fab:active { transform:scale(.94); }
}

/* Tablas anchas SIN opt-in a tarjetas (D7): scroll horizontal contenido, el fallback que ya había
   (la página nunca hace scroll-X). `.rtable` (abajo) es el patrón nuevo preferido para tablas
   nuevas/migradas — a scroll horizontal le sigue el resto de tablas todavía sin migrar. */
@media (max-width:768px){
  .tab-pane table:not(.rtable) { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
  body { overflow-x:hidden; }
}

/* ── D7 (Fase D, UX/Frontend, 2026-07-18): tabla→tarjetas responsive, patrón CSS-only reusable ──
   Requiere SOLO 2 cambios en el HTML de la tabla (nada de reescribir su generación de filas):
   1) class="rtable" en el <table>
   2) data-label="Nombre de columna" en cada <td> (el <thead> se sigue generando igual, se oculta
      en móvil — data-label es la fuente de la etiqueta que se ve, no duplica el <th>)
   Debajo de 640px cada <tr> se vuelve una tarjeta apilada; cada <td> muestra su etiqueta a la
   izquierda vía ::before (CSS puro, sin JS) y su valor a la derecha. Reemplaza el scroll horizontal
   SOLO en las tablas migradas (:not(.rtable) arriba sigue cubriendo el resto sin romperlas). */
.rtable { width:100%; border-collapse:collapse; }
@media (max-width:640px){
  .rtable, .rtable tbody, .rtable tr, .rtable td { display:block; width:100%; }
  .rtable thead { display:none; }
  .rtable tr { border:1px solid var(--bg-border,#e5e3dc); border-radius:10px; padding:10px 12px; margin-bottom:10px; background:var(--bg-surface,#fff); }
  .rtable td { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 0; border:none !important; text-align:right; }
  .rtable td[data-label]:not([data-label=""])::before { content:attr(data-label); font-weight:600; font-size:12px; color:var(--text-muted); text-align:left; flex:0 0 auto; }
  .rtable td:empty { display:none; } /* celda realmente vacía (sin contenido) — nunca una fila de acciones con botón, esa se queda visible aunque no tenga label */
}

/* ── Accesibilidad (UX-045): respetar "reducir movimiento" del sistema, global ── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ── Skeleton de carga (UX-062): hereda el tema, sin saltos de layout ── */
.yt-skel { display:block; border-radius:8px; background:linear-gradient(90deg, var(--bg-raised) 25%, var(--bg-border-light) 50%, var(--bg-raised) 75%); background-size:200% 100%; animation:ytskel 1.1s linear infinite; }
@keyframes ytskel { from{background-position:200% 0} to{background-position:-200% 0} }
.yt-skel-row { height:52px; margin-bottom:8px; }

/* ════════════════════════════════════════════════════════
   PAGE HEADER canónico (UX-100) — 1 fila, 52px, sticky.
   [← back(detalle)] migas / Título · chips ····· [acciones]
   ════════════════════════════════════════════════════════ */
.pghd{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:10px;min-height:52px;padding:7px 0;background:var(--bg-page);border-bottom:1px solid var(--bg-border-light);margin-bottom:12px;flex-wrap:wrap}
.pghd-back{width:34px;height:34px;border:1px solid var(--bg-border);background:var(--bg-surface);border-radius:9px;cursor:pointer;font-size:16px;color:var(--text-2);flex-shrink:0;line-height:1}
.pghd-back:hover{background:var(--bg-raised)}
.pghd-crumb{font-size:12px;color:var(--text-muted);white-space:nowrap}
.pghd-title{font-size:18px;font-weight:800;color:var(--text);margin:0;display:flex;align-items:center;gap:8px;min-width:0;line-height:1.2;font-family:inherit}
.pghd-sub{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px}
.pghd-actions{display:flex;gap:8px;align-items:center;margin-left:auto;flex-wrap:wrap}
.pghd-save{font-size:12px;color:var(--text-muted);white-space:nowrap}
.btn.danger{border-color:#fecaca;color:#b91c1c;background:var(--bg-surface)}
.btn.danger:hover{background:#fef2f2}
/* menú ⋯ del header (estático en el DOM para conservar ids/wiring) */
.pghd-more{position:relative}
.pghd-more .pghd-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;background:var(--bg-surface);border:1px solid var(--bg-border);border-radius:10px;box-shadow:var(--shadow-md);padding:5px;min-width:210px}
.pghd-menu button{display:flex;gap:9px;align-items:center;width:100%;text-align:left;border:none;background:none;font:inherit;font-size:13px;color:var(--text);padding:8px 10px;border-radius:7px;cursor:pointer}
.pghd-menu button:hover{background:var(--bg-raised)}

/* Notas: filtros como pills horizontales (UX-103 — muere el rail izquierdo) */
.nu-pills{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.nu-pills .nu-side-it{border:1px solid var(--bg-border);background:var(--bg-surface);border-radius:999px;padding:6px 13px;font-size:12.5px;color:var(--text-2)}
.nu-pills .nu-side-it.on{background:var(--brand-primary,#EC6628);border-color:var(--brand-primary,#EC6628);color:#fff}
.nu-pills .nu-side-tag{border:1px solid var(--bg-border);background:var(--bg-raised);border-radius:999px;padding:5px 11px;font-size:12px;color:var(--text-2);cursor:pointer}
.nu-pills .nu-side-tag.on{background:var(--brand-primary,#EC6628);border-color:var(--brand-primary,#EC6628);color:#fff}

/* ════ Aluna UI v2 — Sprint 1: componentes core (js/ui/yt-core.js) ════
   docs/PLAN_ALUNA_UI.md sección D · docs/STYLEGUIDE.md §3 ── */

.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--bg-raised)}

/* yt-tabs */
.ytt-bar{display:flex;gap:0;border-bottom:1px solid var(--bg-border);overflow-x:auto;scrollbar-width:none}
.ytt-bar::-webkit-scrollbar{display:none}
.ytt-btn{padding:9px 16px;border:none;background:transparent;font-size:12px;font-weight:500;color:var(--text-muted);cursor:pointer;font-family:inherit;white-space:nowrap;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;display:flex;align-items:center;gap:6px}
.ytt-btn:hover{color:var(--text)}
.ytt-btn.on{color:var(--brand-primary,#EC6628);border-bottom-color:var(--brand-primary,#EC6628);font-weight:600}
.ytt-btn:focus-visible{outline:2px solid var(--brand-primary,#EC6628);outline-offset:-2px;border-radius:var(--radius-input)}
.ytt-badge{background:var(--bg-raised);color:var(--text-muted);border-radius:999px;font-size:10.5px;font-weight:700;padding:1px 6px;line-height:1.5}
.ytt-btn.on .ytt-badge{background:var(--brand-primary,#EC6628);color:#fff}

/* yt-menu */
yt-menu{position:relative;display:inline-block}
.ytm-trigger{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--bg-border);background:var(--bg-surface);color:var(--text-2);border-radius:var(--radius-input);padding:7px 12px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}
.ytm-trigger:hover{background:var(--bg-raised)}
.ytm-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:220px;max-width:320px;background:var(--bg-surface);border:1px solid var(--bg-border);border-radius:var(--radius-card);box-shadow:0 8px 28px rgba(0,0,0,.14);padding:6px;max-height:70vh;overflow-y:auto}
[data-theme="dark"] .ytm-panel{box-shadow:0 8px 28px rgba(0,0,0,.5)}
.ytm-item{display:flex;gap:9px;align-items:flex-start;width:100%;text-align:left;border:none;background:transparent;padding:8px 9px;border-radius:8px;cursor:pointer;font-family:inherit;color:var(--text)}
.ytm-item:hover,.ytm-item:focus-visible{background:var(--bg-raised);outline:none}
.ytm-item svg{flex:none;margin-top:1px;color:var(--text-muted)}
.ytm-item-main{display:flex;flex-direction:column;gap:1px;min-width:0}
.ytm-item-label{font-size:12.5px;font-weight:600;line-height:1.3}
.ytm-item-desc{font-size:11px;color:var(--text-muted);line-height:1.3}
.ytm-item.danger .ytm-item-label{color:var(--err)}
.ytm-item.danger svg{color:var(--err)}
.ytm-sep{height:1px;background:var(--bg-border);margin:5px 4px}
.ytm-group-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);padding:8px 9px 3px}

/* yt-page-header — extiende .pghd existente (css/app.css ~2436) */
.pghd-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pghd-meta .pghd-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text-muted);background:var(--bg-raised);border-radius:999px;padding:2px 9px}
.pghd-help{width:28px;height:28px;border:1px solid var(--bg-border);background:var(--bg-surface);color:var(--text-2);border-radius:999px;cursor:pointer;font-size:13px;font-weight:700;flex-shrink:0}
.pghd-help:hover{background:var(--bg-raised)}

/* yt-table (Sprint 3) */
.ytbl-toolbar{display:flex;justify-content:flex-end;margin-bottom:8px;position:relative}
.ytbl-colbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--bg-border);background:var(--bg-surface);color:var(--text-2);border-radius:var(--radius-input);padding:6px 11px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.ytbl-colbtn:hover{background:var(--bg-raised)}
.ytbl-colpanel{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:200px;background:var(--bg-surface);border:1px solid var(--bg-border);border-radius:var(--radius-card);box-shadow:0 8px 28px rgba(0,0,0,.14);padding:6px;max-height:60vh;overflow-y:auto}
[data-theme="dark"] .ytbl-colpanel{box-shadow:0 8px 28px rgba(0,0,0,.5)}
.ytbl-colitem{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:none;background:transparent;padding:7px 9px;border-radius:8px;cursor:pointer;font-family:inherit;font-size:12.5px;color:var(--text-muted)}
.ytbl-colitem:hover{background:var(--bg-raised)}
.ytbl-colitem.on{color:var(--text)}
.ytbl-colitem svg{flex:none}
.ytbl-wrap{overflow-x:auto;border:1px solid var(--bg-border);border-radius:var(--radius-card);background:var(--bg-surface)}
.ytbl-table{width:100%;border-collapse:collapse;font-size:13px}
.ytbl-table thead tr{border-bottom:1px solid var(--bg-border)}
.ytbl-th{text-align:left;padding:10px 12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);white-space:nowrap}
.ytbl-th.sortable{cursor:pointer;user-select:none}
.ytbl-th.sortable:hover{color:var(--text)}
.ytbl-th.on{color:var(--text)}
.ytbl-th-select,.ytbl-th-actions{width:1%}
.ytbl-sort-arrow{margin-left:3px;vertical-align:-2px;transition:transform .12s}
.ytbl-sort-arrow.up{transform:rotate(180deg)}
.ytbl-table tbody tr{border-bottom:1px solid var(--bg-border-light,var(--bg-border))}
.ytbl-table tbody tr:last-child{border-bottom:none}
.ytbl-table tbody tr:hover{background:var(--bg-raised)}
.ytbl-table tbody tr.sel{background:rgba(236,102,40,.06)}
.ytbl-table td{padding:9px 12px;color:var(--text)}
.ytbl-td-select,.ytbl-td-actions{width:1%;white-space:nowrap}
.ytbl-actions{display:flex;gap:4px;align-items:center;justify-content:flex-end}
.ytbl-act{padding:6px 8px !important;flex-shrink:0}
.ytbl-empty-cell{padding:0 !important}
.ytbl-cards{display:none}
@media (max-width:768px){
  .ytbl-wrap{display:none}
  .ytbl-cards{display:flex;flex-direction:column;gap:8px}
  .ytbl-card{border:1px solid var(--bg-border);border-radius:var(--radius-card);background:var(--bg-surface);padding:12px 14px;display:flex;flex-direction:column;gap:8px}
  .ytbl-card-main{font-size:14px;font-weight:700;color:var(--text)}
  .ytbl-card-body{display:flex;flex-direction:column;gap:4px}
  .ytbl-card-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px}
  .ytbl-card-lbl{color:var(--text-muted);flex-shrink:0}
  .ytbl-card-val{color:var(--text);text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ytbl-card-actions{display:flex;gap:6px;justify-content:flex-end;border-top:1px solid var(--bg-border);padding-top:8px}
}

/* yt-empty */
.yte-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 20px;gap:10px;color:var(--text-muted)}
.yte-icon{color:var(--text-muted);opacity:.55}
.yte-title{font-size:15px;font-weight:700;color:var(--text)}
.yte-msg{font-size:12.5px;max-width:360px;line-height:1.5}
.yte-actions{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap;justify-content:center}

/* yt-pills */
.ytp-bar{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ytp-pill{border:1px solid var(--bg-border);background:var(--bg-surface);border-radius:999px;padding:6px 13px;font-size:12.5px;color:var(--text-2);cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px}
.ytp-pill:hover{background:var(--bg-raised)}
.ytp-pill.on{background:var(--brand-primary,#EC6628);border-color:var(--brand-primary,#EC6628);color:#fff}
.ytp-count{background:rgba(0,0,0,.12);border-radius:999px;font-size:10.5px;font-weight:700;padding:0 6px;line-height:1.5}
.ytp-pill.on .ytp-count{background:rgba(255,255,255,.25)}

/* yt-loader */
.ytl-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:40px 20px}
.ytl-icon{width:40px;height:40px;border-radius:11px}
.ytl-icon.v-pulse{animation:ytl-pulse 1.4s ease-in-out infinite}
.ytl-icon.v-spin{animation:ytl-spin 1.6s linear infinite}
.ytl-icon.v-bounce{animation:ytl-bounce 1s ease-in-out infinite}
.ytl-icon.v-fade{animation:ytl-fade 1.6s ease-in-out infinite}
@keyframes ytl-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.92)}}
@keyframes ytl-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes ytl-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes ytl-fade{0%,100%{opacity:1}50%{opacity:.35}}
.ytl-phrase{font-size:12.5px;color:var(--text-muted);text-align:center;max-width:320px;line-height:1.5;opacity:0;animation:ytl-phrase-in .6s ease forwards}
@keyframes ytl-phrase-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){ .ytl-icon{animation:none!important} .ytl-phrase{animation:none!important;opacity:1} }

/* yt-help */
.yth-scrim{position:fixed;inset:0;background:rgba(0,0,0,.32);z-index:9990;opacity:0;pointer-events:none;transition:opacity .2s}
.yth-scrim.open{opacity:1;pointer-events:auto}
.yth-panel{position:fixed;top:0;right:0;bottom:0;width:380px;max-width:92vw;background:var(--bg-surface);z-index:9991;box-shadow:-8px 0 28px rgba(0,0,0,.18);transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column}
.yth-panel.open{transform:translateX(0)}
[data-theme="dark"] .yth-panel{box-shadow:-8px 0 28px rgba(0,0,0,.55)}
.yth-top{display:flex;align-items:center;gap:10px;padding:16px 16px 12px;border-bottom:1px solid var(--bg-border);flex-shrink:0}
.yth-title{font-size:15px;font-weight:800;color:var(--text);flex:1;min-width:0}
.yth-close{width:28px;height:28px;border:1px solid var(--bg-border);background:var(--bg-surface);border-radius:999px;cursor:pointer;color:var(--text-2);flex-shrink:0}
.yth-body{padding:16px;overflow-y:auto;flex:1;font-size:13px;line-height:1.65;color:var(--text)}
.yth-body h2{font-size:14px;font-weight:700;margin:16px 0 6px}
.yth-body h2:first-child{margin-top:0}
.yth-body p{margin:0 0 10px}
.yth-body ul{margin:0 0 10px;padding-left:20px}
.yth-body li{margin-bottom:4px}
.yth-body a{color:var(--brand-primary,#EC6628)}
.yth-empty{color:var(--text-muted);font-size:12.5px;text-align:center;padding:30px 10px}
@media (prefers-reduced-motion:reduce){ .yth-panel{transition:none} .yth-scrim{transition:none} }
@media (max-width:640px){ .yth-panel{width:100%;max-width:100%} }

/* Centro de ayuda (Sprint 6, decisión #78) — modo índice+buscador dentro de <yt-help> */
.yth-center-q{width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid var(--bg-border,#e6e2db);border-radius:9px;font-size:13.5px;font-family:inherit;background:var(--bg-surface,#fff);color:var(--text);margin-bottom:12px}
.yth-center-list{display:flex;flex-direction:column;gap:6px}
.yth-center-item{display:block;width:100%;text-align:left;border:1px solid var(--bg-border,#e6e2db);background:var(--bg-surface,#fff);border-radius:10px;padding:9px 12px;cursor:pointer;font-family:inherit}
.yth-center-item:hover{background:var(--bg-raised,#f7f4ef);border-color:var(--brand-primary,#EC6628)}
.yth-center-item .t{font-size:13px;font-weight:700;color:var(--text)}
.yth-center-item .e{font-size:12px;color:var(--text-muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yth-center-link{margin-top:18px;padding-top:14px;border-top:1px solid var(--bg-border,#e6e2db)}
.yth-center-link button{background:none;border:none;color:var(--brand-primary,#EC6628);font-size:12.5px;font-weight:600;cursor:pointer;padding:0;font-family:inherit}

/* yt-presence (Sprint 4) */
.ytpr{display:inline-flex}
.ytpr-avs{display:flex;align-items:center}
.ytpr-av{width:26px;height:26px;border-radius:50%;margin-left:-8px;border:2px solid var(--bg-surface);display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;overflow:hidden;flex-shrink:0}
.ytpr-av:first-child{margin-left:0}
.ytpr-av img{width:100%;height:100%;object-fit:cover}
.ytpr-av.editing{box-shadow:0 0 0 2px var(--ok)}
@media (prefers-reduced-motion:no-preference){ .ytpr-av.editing{animation:ytpr-pulse 1.4s ease-in-out infinite} }
@keyframes ytpr-pulse{0%,100%{box-shadow:0 0 0 2px var(--ok)}50%{box-shadow:0 0 0 4px var(--ok-border)}}

/* yt-spark: pulso "✨" al autoguardar (compartido, Sprint 4) — misma idea que .cts-magic de
   Contactos, pero genérico para que Cuentas/Ponentes lo usen sin duplicar la animación. */
@keyframes ytSparkBg{0%{background:rgba(236,102,40,.20);box-shadow:0 0 0 2px rgba(236,102,40,.45)}70%{background:rgba(236,102,40,.10)}100%{background:transparent;box-shadow:none}}
.yt-spark{position:relative;animation:ytSparkBg 1.5s ease;border-radius:8px;border-color:var(--brand-primary,#EC6628)}
.yt-spark::after{content:"✨";position:absolute;right:-2px;top:-10px;font-size:14px;animation:ytSparkFly 1.1s ease forwards;pointer-events:none}
@keyframes ytSparkFly{0%{opacity:0;transform:translateY(8px) scale(.5) rotate(-10deg)}30%{opacity:1}100%{opacity:0;transform:translateY(-16px) scale(1.3) rotate(10deg)}}

/* yt-exp-cols: 2 columnas en expedientes anchos (decisión #20) — 1 columna abajo de 1280px */
.yt-exp-cols{display:flex;flex-direction:column;gap:16px}
@media (min-width:1280px){ .yt-exp-cols{display:grid;grid-template-columns:1fr 1fr;align-items:start} }

/* ════════════════════════════════════════════════════════
   ALUNA CAD (E1.1) — motor nuevo del Constructor de planos.
   Shell mínimo: se completa a fondo en E2.1-E2.3 (modo inmersivo, riel de iconos SVG,
   catálogo-drawer, ⌘K, minimapa). Por ahora: barra superior + riel simple + lienzo + panel
   lateral de Salones (VenueSpacesList, sin cambios). Variable --cad-bg la usa renderer2d.js
   para pintar el fondo del lienzo (se lee vía getComputedStyle, no hace falta más que esto).
   ════════════════════════════════════════════════════════ */
:root{ --cad-bg:#15181d; }
.cad-shell{display:flex;flex-direction:column;height:calc(100vh - 160px);min-height:420px;border:1px solid var(--bg-border);border-radius:12px;overflow:hidden;background:var(--bg-surface)}
/* Modo inmersivo (E2.1): el shell de Aluna (topbar/sidebar) desaparece y el CAD ocupa el
   100% del viewport — a diferencia de js/board-ui.js:setImmersive (que solo alterna clases sin
   reglas CSS reales, comprobado al implementar esto), aquí SÍ hay reglas que ocultan de verdad. */
body.cad-immersive .topbar, body.cad-immersive .sidebar, body.cad-immersive #bottom-nav{ display:none !important; }
body.cad-immersive .main-inner{ padding:0 !important; max-width:none !important; }
body.cad-immersive .main{ height:100vh; }
body.cad-immersive .cad-shell{ height:100vh; border-radius:0; border:none; }
.cad-topbar{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--bg-border);flex-shrink:0;flex-wrap:wrap}
.cad-back{border:1px solid var(--bg-border);background:none;border-radius:8px;padding:6px 10px;font-size:12px;cursor:pointer;color:var(--text);font-family:inherit}
.cad-back:hover{background:var(--bg-border)}
.cad-title{font-weight:700;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.cad-plantabs{display:flex;gap:4px;overflow-x:auto;flex:1;min-width:0}
.cad-plantab{border:1px solid transparent;background:none;border-radius:7px;padding:5px 10px;font-size:12px;cursor:pointer;color:var(--text-2);white-space:nowrap;font-family:inherit}
.cad-plantab.active{background:var(--bg-border);color:var(--text);font-weight:600}
.cad-plantab-wrap{display:flex;align-items:center;gap:0;border-radius:7px}
.cad-plantab-wrap.active{background:var(--bg-border)}
.cad-plantab-wrap.active .cad-plantab{background:none}
.cad-plantab-del{display:none;border:none;background:none;color:var(--text-muted);cursor:pointer;font-size:11px;width:20px;height:20px;border-radius:5px;margin-right:3px;flex-shrink:0}
.cad-plantab-del:hover{background:#dc2626;color:#fff}
.cad-plantab-wrap:hover .cad-plantab-del,.cad-plantab-wrap.active .cad-plantab-del{display:inline-block}
.cad-plantab-add{border:1px dashed var(--bg-border);background:none;border-radius:7px;padding:5px 10px;font-size:12px;cursor:pointer;color:var(--yt-orange);font-family:inherit}
.cad-save-status{font-size:11px;color:var(--text-muted);white-space:nowrap;min-width:90px;text-align:right}
.cad-histbtn{border:1px solid var(--bg-border);background:none;border-radius:7px;width:30px;height:30px;cursor:pointer;color:var(--text);font-size:14px}
.cad-histbtn:hover:not(:disabled){background:var(--bg-border)}
.cad-histbtn:disabled{opacity:.35;cursor:default}
.cad-body{flex:1;display:flex;min-height:0}
.cad-rail{width:56px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-right:1px solid var(--bg-border);overflow-y:auto}
.cad-rail-btn{width:42px;height:42px;border-radius:9px;border:1px solid transparent;background:none;cursor:pointer;font-size:17px;color:var(--text);display:flex;align-items:center;justify-content:center}
.cad-rail-btn:hover{background:var(--bg-border)}
.cad-rail-btn.active{background:var(--yt-orange);color:#15181d}
/* Anillo de foco visible para navegación con teclado en el CAD — mismo patrón que .ytt-btn */
.cad-rail-btn:focus-visible,.cad-histbtn:focus-visible,.cad-tb-item:focus-visible{outline:2px solid var(--brand-primary,#EC6628);outline-offset:-2px}
.cad-rail-sep{width:32px;height:1px;background:var(--bg-border);margin:4px 0}
.cad-canvas-host{flex:1;position:relative;min-width:0}
.cad-canvas-wrap{position:absolute;inset:0}
/* touch-action:none: sin él iOS/Android secuestran el pinch de 2 dedos (zoom de página) y el
   long-press muestra la lupa/callout — los gestos táctiles del CAD viven 100% en input.js */
.cad-layer{position:absolute;inset:0;width:100%;height:100%;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.cad-loading-ov{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:var(--bg-page)}
.cad-statusbar{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.6);color:#d8f999;font:11px/1.4 ui-monospace,monospace;padding:5px 9px;border-radius:7px;pointer-events:none}
.cad-sidebar{width:260px;flex-shrink:0;border-left:1px solid var(--bg-border);overflow-y:auto;display:flex;flex-direction:column}
.cad-sidebar-hdr{padding:9px 12px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);border-bottom:1px solid var(--bg-border)}
@media (max-width:880px){ .cad-sidebar{display:none} }

/* Aluna CAD (E1.2): chip de entrada numérica flotante junto al cursor mientras se dibuja
   (Pared: "5.2" = longitud, "5.2<45" = longitud a ángulo explícito). */
.cad-numchip{position:fixed;z-index:100000;display:none;background:#15181d;color:#c7f000;font:600 12px ui-monospace,monospace;padding:4px 8px;border-radius:6px;border:1px solid #c7f000;pointer-events:none}

/* Aluna CAD (E1.3): selector de unidades + candado "deseable pagar" en herramientas Pro del riel. */
.cad-unit-select{border:1px solid var(--bg-border);background:var(--bg-surface);color:var(--text);border-radius:7px;padding:5px 6px;font-size:11px;font-family:inherit}
.cad-rail-locked{opacity:.4;filter:grayscale(1)}
.cad-rail-locked:hover{opacity:.65}

/* Aluna CAD (E2.1/E2.2): panel de Propiedades, árbol de objetos, catálogo-drawer, ⌘K, minimapa. */
.cad-props{padding:8px 12px}
.cad-float-props{position:absolute;z-index:30;width:280px;max-height:70%;overflow-y:auto;background:var(--bg-surface);border:1px solid var(--bg-border);border-radius:12px;box-shadow:0 10px 34px rgba(0,0,0,.28)}
/* Panel "Llenar de sillas" (E5) — antes quedaba atrapado fuera del viewport con doble scroll
   (reporte real: "no se queda atrapado abajo del fold... doble scroll"). position:fixed +
   clamp real por JS (chair-fill.js:clampPanel) + columna flex con header/footer FIJOS y solo
   el cuerpo con scroll — un único scroll, y el botón "Colocar sillas" siempre alcanzable. */
.cad-cf-panel{position:fixed;z-index:40;width:300px;display:flex;flex-direction:column;background:var(--bg-surface);border:1px solid var(--bg-border);border-radius:12px;box-shadow:0 10px 34px rgba(0,0,0,.32)}
.cad-cf-body{overflow-y:auto;flex:1 1 auto;min-height:0;padding:4px 14px 10px}
.cad-cf-sec{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin:14px 0 6px}
.cad-cf-sec:first-child{margin-top:10px}
.cad-cf-chairs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cad-cf-chair{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 4px;border-radius:9px;border:1.5px solid var(--bg-border);background:none;cursor:pointer;font-size:10.5px;color:var(--text);font-family:inherit;line-height:1.15}
.cad-cf-chair:hover{background:var(--bg-border)}
.cad-cf-chair .ic{font-size:17px}
.cad-cf-chair.on{border-color:var(--yt-orange);background:rgba(199,240,0,.12)}
.cad-cf-footer{flex:none;padding:10px 14px;border-top:1px solid var(--bg-border)}
.cad-fp-bar{display:flex;align-items:center;justify-content:space-between;padding:7px 10px 7px 12px;cursor:grab;border-bottom:1px solid var(--bg-border);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);user-select:none;position:sticky;top:0;background:var(--bg-surface);border-radius:12px 12px 0 0}
.cad-fp-bar:active{cursor:grabbing}
.cad-fp-bar button{border:none;background:none;cursor:pointer;color:var(--text-muted);font-size:13px;padding:2px 6px;border-radius:5px}
.cad-fp-bar button:hover{background:var(--bg-border)}
.cad-acc-hdr{cursor:pointer;user-select:none;display:flex;align-items:center;gap:6px}
.cad-acc-hdr:hover{color:var(--text)}
.cad-acc-arrow{font-size:10px;width:12px}
.cad-tb-group{position:relative}
.cad-tb-menu{display:none;position:absolute;top:calc(100% + 4px);right:0;min-width:220px;background:var(--bg-surface);border:1px solid var(--bg-border);border-radius:10px;padding:4px;z-index:60;box-shadow:0 8px 32px rgba(0,0,0,.25)}
.cad-tb-item{display:block;width:100%;padding:8px 12px;border:none;background:none;cursor:pointer;font-size:12.5px;font-family:inherit;color:var(--text);border-radius:7px;text-align:left;white-space:nowrap}
.cad-tb-item:hover{background:var(--bg-border)}
.cad-multibar{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:28;display:flex;align-items:center;gap:2px;background:var(--bg-surface);border:1px solid var(--bg-border);border-radius:12px;padding:5px 10px;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.cad-multibar button{border:none;background:none;cursor:pointer;font-size:14px;padding:5px 8px;border-radius:7px;color:var(--text);font-family:inherit}
.cad-multibar button:hover{background:var(--bg-border)}
.cad-mb-count{font-size:11.5px;font-weight:700;color:var(--text-muted);margin-right:6px;white-space:nowrap}
.cad-mb-sep{width:1px;height:18px;background:var(--bg-border);margin:0 4px}
.cad-mlvl{border:1px solid var(--bg-border);border-radius:10px;margin-bottom:6px;overflow:hidden}
.cad-mlvl-locked{opacity:.55}
.cad-mlvl-hdr{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;cursor:pointer;font-size:12.5px;gap:8px}
.cad-mlvl-hdr:hover{background:var(--bg-raised)}
.cad-mlvl-pts{font-size:10.5px;color:var(--text-muted);margin-left:4px}
.cad-mlvl-prog{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-muted)}
.cad-mlvl-bar{width:52px;height:5px;border-radius:3px;background:var(--bg-border);overflow:hidden;display:inline-block}
.cad-mlvl-bar span{display:block;height:100%;background:var(--yt-orange)}
.cad-mlvl-body{padding:2px 10px 8px}
.cad-mission-how{border:1px solid var(--bg-border);background:none;border-radius:50%;width:20px;height:20px;font-size:11px;cursor:pointer;color:var(--text-muted);flex-shrink:0;margin-left:6px}
.cad-mission-how:hover{border-color:var(--yt-orange);color:var(--yt-orange)}
.cad-mission-dl{margin-left:6px;font-size:13px;text-decoration:none}
.cad-tool-tip{position:fixed;z-index:99997;max-width:260px;background:var(--bg-surface);border:2px solid var(--yt-orange);border-radius:11px;padding:10px 12px;font-size:12px;line-height:1.5;color:var(--text);box-shadow:0 8px 30px rgba(0,0,0,.3);transition:opacity .4s;cursor:pointer}
.cad-tool-tip b{color:var(--yt-orange);font-size:11px;text-transform:uppercase;letter-spacing:.4px}
/* ── Stage wizard v2 (rediseño GUI) ── */
.sbw-modal{width:min(920px,96vw);height:min(640px,88vh);display:flex;flex-direction:column;overflow:hidden}
.sbw-body{flex:1;display:flex;min-height:0}
.sbw-left{width:340px;min-width:280px;overflow-y:auto;padding:12px 14px;border-right:1px solid var(--bg-border)}
.sbw-right{flex:1;display:flex;flex-direction:column;padding:12px;min-width:0}
.sbw-right #cad-sb-3d{flex:1;border-radius:12px;background:#101216;cursor:grab;min-height:0;overflow:hidden}
.sbw-hint{font-size:11px;color:var(--text-muted);margin-top:6px;text-align:center}
.sbw-footer{display:flex;gap:8px;justify-content:flex-end;padding:10px 14px;border-top:1px solid var(--bg-border);background:var(--bg-surface)}
.sbw-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:10px}
.sbw-preset{border:1px solid var(--bg-border);border-radius:10px;background:var(--bg-raised);cursor:pointer;padding:7px 2px;font-size:16px;display:flex;flex-direction:column;align-items:center;gap:2px;font-family:inherit}
.sbw-preset span{font-size:9.5px;color:var(--text)}
.sbw-preset:hover{border-color:var(--yt-orange)}
.sbw-tabs{display:flex;background:var(--bg-raised);border-radius:10px;padding:3px;gap:3px;margin-bottom:12px}
.sbw-tab{flex:1;border:none;background:none;border-radius:8px;padding:6px 4px;font-size:11.5px;cursor:pointer;color:var(--text-muted);font-family:inherit;white-space:nowrap}
.sbw-tab.on{background:var(--bg-surface);color:var(--text);font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.sbw-shapes{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:10px}
.sbw-shapes .cad-sb-shape{border:2px solid var(--bg-border);border-radius:9px;background:var(--bg-raised);cursor:pointer;padding:5px 2px;display:flex;flex-direction:column;align-items:center;gap:2px;font-family:inherit;color:var(--text)}
.sbw-shapes .cad-sb-shape span{font-size:9.5px}
.sbw-shapes .cad-sb-shape.on{border-color:var(--yt-orange)}
.sbw-shapes .cad-sb-apos{border:2px solid var(--bg-border);border-radius:9px;background:var(--bg-raised);cursor:pointer;padding:5px 2px;display:flex;flex-direction:column;align-items:center;gap:2px;font-family:inherit;color:var(--text)}
.sbw-shapes .cad-sb-apos span{font-size:9.5px}
.sbw-shapes .cad-sb-apos.on{border-color:var(--yt-orange)}
.sbw-slider{margin:8px 0 2px}
.sbw-slider label{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted)}
.sbw-slider label b{color:var(--text)}
.sbw-slider input{width:100%}
.sbw-seg{display:flex;gap:4px;margin:10px 0 6px;flex-wrap:wrap}
.sbw-seg .cad-sb-fin{flex:1;border:1px solid var(--bg-border);border-radius:9px;background:var(--bg-raised);cursor:pointer;padding:6px 3px;font-size:10.5px;font-family:inherit;color:var(--text);white-space:nowrap}
.sbw-seg .cad-sb-fin.on{border-color:var(--yt-orange);font-weight:700}
.sbw-swatches{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 8px}
.sbw-swatches .cad-sb-carpet{width:34px;height:34px;border-radius:7px;border:2px solid var(--bg-border);background-size:cover;background-position:center;cursor:pointer}
.sbw-swatches .cad-sb-carpet.on{border-color:var(--yt-orange)}
.sbw-card{border:1px solid var(--bg-border);border-radius:11px;padding:9px;margin:6px 0}
.sbw-cardtitle{font-size:11px;font-weight:700;color:var(--text-muted);margin-bottom:5px}
.sbw-card .spk-inp, .sbw-sub .spk-inp{width:100%;font-size:12px;margin:3px 0}
.sbw-mini{display:flex;gap:6px;align-items:center;font-size:12px;margin:5px 0;color:var(--text)}
.sbw-colors{display:flex;gap:6px;margin:3px 0}
.sbw-colors input{flex:1;height:28px;border:1px solid var(--bg-border);border-radius:7px;background:none;cursor:pointer}
.sbw-wide{width:100%;margin-top:5px;font-size:11.5px}
.sbw-row{border-bottom:1px solid var(--bg-border);padding:2px 0}
.sbw-rowhead{display:flex;align-items:center;gap:9px;padding:9px 2px;cursor:pointer}
.sbw-ic{font-size:16px;width:22px;text-align:center}
.sbw-lbl{flex:1;font-size:12.5px;color:var(--text)}
.sbw-switch{position:relative;width:38px;height:22px;flex-shrink:0}
.sbw-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.sbw-knob{position:absolute;inset:0;background:var(--bg-border);border-radius:11px;transition:background .18s}
.sbw-knob::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.sbw-switch input:checked + .sbw-knob{background:var(--yt-orange)}
.sbw-switch input:checked + .sbw-knob::after{transform:translateX(16px)}
.sbw-sub{padding:0 2px 10px 33px}
@media (max-width: 720px){
  .sbw-body{flex-direction:column-reverse}
  .sbw-left{width:100%;border-right:none;border-top:1px solid var(--bg-border)}
  .sbw-right{height:38vh;flex:none}
}
.cad-props-empty{color:var(--text-muted);font-size:12px}
.cad-prop-field{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}
.cad-prop-field label{font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.02em}
.cad-prop-field input,.cad-prop-field textarea{border:1px solid var(--bg-border);background:var(--bg-page);color:var(--text);border-radius:7px;padding:6px 8px;font-size:12.5px;font-family:inherit;resize:vertical}
.cad-tree-search{margin:0 12px 6px;width:calc(100% - 24px);border:1px solid var(--bg-border);background:var(--bg-page);color:var(--text);border-radius:7px;padding:6px 8px;font-size:12px;font-family:inherit}
.cad-tree{max-height:160px;overflow-y:auto}
.cad-tree-item{display:block;width:100%;text-align:left;border:none;background:none;padding:5px 12px;font-size:12px;color:var(--text);cursor:pointer;font-family:inherit}
.cad-tree-item:hover{background:var(--bg-border)}
.cad-minimap{position:absolute;right:10px;bottom:10px;z-index:5;border-radius:8px;border:1px solid var(--bg-border);cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.cad-drawer{position:fixed;z-index:100001;background:var(--bg-surface);border:1px solid var(--bg-border);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.35);padding:8px;width:260px;max-height:360px;display:flex;flex-direction:column}
.cad-drawer-search{border:1px solid var(--bg-border);background:var(--bg-page);color:var(--text);border-radius:7px;padding:7px 9px;font-size:12.5px;font-family:inherit;margin-bottom:6px}
.cad-drawer-list{overflow-y:auto}
.cad-drawer-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:none;background:none;padding:7px 8px;font-size:12.5px;color:var(--text);cursor:pointer;border-radius:7px;font-family:inherit}
.cad-drawer-item:hover,.cad-drawer-item.active{background:var(--bg-border)}
.cad-drawer-swatch{width:20px;height:20px;border-radius:5px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1}
.cad-drawer-empty{color:var(--text-muted);font-size:12px;padding:8px}
.cad-cmdk{width:360px !important}

/* Aluna CAD (F6): panel de chat de Larry AI — flotante, no forma parte del sidebar fijo. */
/* Larry 2026 · Gemini-style: glassmorphism, sombra elevada con tinte lima, entrada con spring
   y halo girando MUY sutil. Solo transform/opacity/blur.
   PALETA PROPIA DE LARRY (FIJA, independiente del tenant): --brand-* es overrideable por cliente
   (p. ej. secondary en AZUL) y arruinaba los degradados; Larry SIEMPRE va lima→durazno→naranja. */
.cad-larry-panel{--larry-lime:#C7F000;--larry-lime-hi:#d6ff3a;--larry-peach:#FF8A5B;--larry-orange:#EC6628;--larry-orange-lt:#FF9E6B;
  position:fixed;right:16px;bottom:16px;top:80px;width:344px;max-width:92vw;z-index:99998;
  background:color-mix(in srgb, var(--bg-surface) 82%, transparent);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid color-mix(in srgb, var(--bg-border) 60%, transparent);border-radius:22px;
  box-shadow:0 24px 70px -12px rgba(0,0,0,.5), 0 6px 24px -8px color-mix(in srgb,var(--larry-lime) 34%,transparent), inset 0 1px 0 rgba(255,255,255,.06);
  display:flex;flex-direction:column;overflow:hidden;
  animation:cad-larry-panel-in .42s cubic-bezier(.34,1.3,.5,1) both}
.cad-larry-panel::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:4;
  background:linear-gradient(130deg, var(--larry-lime), var(--larry-peach), transparent 55%, var(--larry-lime));
  background-size:220% 220%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:.5;animation:larry-halo 7s ease-in-out infinite}
@keyframes cad-larry-panel-in{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
.cad-larry-handle{display:none}
/* Gemini-2026: encabezado minimal y aireado, sin borde pesado. */
.cad-larry-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 12px;border-bottom:1px solid color-mix(in srgb,var(--bg-border) 28%,transparent);font-weight:700;color:var(--text);background:transparent}
/* Larry Policía (2026-07-19): mismo Larry, solo badge/indicador distintivo (decisión explícita del
   usuario: NO skin nueva). Borde/acento ámbar en el header + insignia 🕵️ junto al nombre mientras
   el modo está activo — visible pero discreto, no una identidad visual distinta. */
.cad-larry-panel.lg-police-on .cad-larry-hdr{border-bottom-color:#f59e0b;background:color-mix(in srgb,#f59e0b 8%,transparent)}
.cad-larry-panel.lg-police-on .cad-larry-ttl::after{content:"🕵️ Policía";margin-left:6px;font-size:10.5px;font-weight:800;letter-spacing:.02em;color:#b45309;background:color-mix(in srgb,#f59e0b 18%,transparent);border-radius:6px;padding:2px 7px;white-space:nowrap}
.cad-larry-ttl{display:flex;align-items:center;gap:9px;min-width:0;font-size:15px;letter-spacing:.01em}
.cad-larry-av{width:28px;height:28px;flex-shrink:0;display:inline-flex}
.cad-larry-hdr-btns{display:flex;gap:2px}
.cad-larry-hdr button{border:none;background:none;color:var(--text-muted);cursor:pointer;font-size:15px;width:30px;height:30px;border-radius:9px;transition:transform .12s,color .12s,background .12s}
.cad-larry-hdr button:hover{color:var(--text);background:color-mix(in srgb,var(--larry-lime) 15%,transparent)}
.cad-larry-hdr button:active{transform:scale(.9)}
.cad-larry-msgs{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 16px 8px;display:flex;flex-direction:column;gap:16px;scroll-behavior:smooth}
.cad-larry-msgs::-webkit-scrollbar{width:6px}
.cad-larry-msgs::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--larry-lime) 30%,transparent);border-radius:3px}
/* ARREGLO 11: pre-wrap para que los multilínea NO se aplasten + corte de palabras largas/URLs. */
.cad-larry-msg{font-size:14px;line-height:1.6;letter-spacing:.005em;padding:9px 12px;border-radius:14px;max-width:88%;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;animation:cad-larry-msg-in .34s cubic-bezier(.22,1,.36,1) both}
/* Cards auxiliares (fuentes/undo/retry/thinking): superficie translúcida sutil. */
.cad-larry-bot{background:color-mix(in srgb,var(--bg-raised) 78%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--text);align-self:flex-start;border:1px solid color-mix(in srgb,var(--bg-border) 50%,transparent);border-bottom-left-radius:5px}
/* Gemini-2026: mensaje HABLADO de Larry SIN burbuja — texto sobre el fondo con firma ✦ de marca. */
.cad-larry-bot.cad-larry-say{background:none;border:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;color:var(--text);align-self:stretch;max-width:100%;position:relative;padding:1px 2px 1px 30px;border-radius:6px;font-size:15px;line-height:1.6}
.cad-larry-bot.cad-larry-say::before{content:'✦';position:absolute;left:1px;top:0;font-size:15px;line-height:1.6;font-weight:700;
  background:linear-gradient(135deg,var(--larry-lime),var(--larry-peach) 55%,var(--larry-orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--larry-lime) 45%,transparent));animation:larry-spark 4.5s ease-in-out infinite}
@keyframes larry-spark{0%,100%{transform:scale(1) rotate(0);opacity:.9}50%{transform:scale(1.18) rotate(90deg);opacity:1}}
/* Gemini-2026: burbuja del usuario = píldora suave con degradado lima de marca. */
.cad-larry-user{background:linear-gradient(135deg,var(--larry-lime-hi),var(--larry-lime) 78%,color-mix(in srgb,var(--larry-peach) 70%,var(--larry-lime)));color:#15181d;align-self:flex-end;padding:10px 15px;border-radius:20px;border-bottom-right-radius:7px;box-shadow:0 4px 16px -6px color-mix(in srgb,var(--larry-lime) 55%,transparent)}
@keyframes cad-larry-msg-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
/* Markdown seguro: viñetas y código en línea (render por nodos DOM en larry-global.js). */
.cad-larry-ul{margin:2px 0 2px 0;padding-left:18px;display:flex;flex-direction:column;gap:2px}
.cad-larry-ul li{white-space:normal}
.cad-larry-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;background:color-mix(in srgb,var(--text) 12%,transparent);padding:1px 5px;border-radius:5px}
/* Microinteracciones táctiles en las tarjetas dinámicas (acción / feedback / upsell / fuentes). */
.cad-larry-action button,.cad-larry-fb button,.cad-larry-upsell button{transition:transform .12s ease,box-shadow .18s ease,filter .15s ease}
.cad-larry-action button:active,.cad-larry-fb button:active,.cad-larry-upsell button:active{transform:scale(.94)}
.cad-larry-action button:hover,.cad-larry-upsell button:hover{filter:brightness(1.05)}
.cad-larry-fb button:hover{transform:translateY(-1px)}
.cad-larry-sources a{transition:text-shadow .15s;border-radius:4px}
.cad-larry-sources a:hover{text-shadow:0 0 10px color-mix(in srgb,var(--larry-lime) 55%,transparent)}
/* Gemini-2026 "Pensando…": firma ✦ + barra shimmer con degradado de marca (transform-only). */
.cad-larry-thinking{display:flex;align-items:center;gap:0;min-height:22px;background:none;border:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;position:relative;padding:2px 2px 2px 30px;max-width:100%;align-self:stretch}
.cad-larry-thinking::before{content:'✦';position:absolute;left:1px;top:2px;font-size:15px;font-weight:700;
  background:linear-gradient(135deg,var(--larry-lime),var(--larry-peach) 55%,var(--larry-orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--larry-lime) 55%,transparent));animation:larry-spark 1.6s ease-in-out infinite}
.cad-larry-shimmer{position:relative;height:11px;width:52%;max-width:170px;border-radius:6px;overflow:hidden;background:color-mix(in srgb,var(--larry-lime) 15%,transparent)}
.cad-larry-shimmer::after{content:'';position:absolute;top:0;bottom:0;left:0;width:55%;border-radius:inherit;
  background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--larry-peach) 60%,transparent),color-mix(in srgb,var(--larry-lime) 65%,transparent),transparent);
  transform:translateX(-160%);animation:larry-shimmer 1.25s ease-in-out infinite}
@keyframes larry-shimmer{to{transform:translateX(300%)}}
/* legacy: puntos (por si algún flujo viejo aún los monta) */
.cad-larry-dots{display:inline-flex;gap:5px;align-items:center}
.cad-larry-dots i{width:7px;height:7px;border-radius:50%;background:linear-gradient(180deg,var(--larry-lime-hi),var(--larry-lime));display:inline-block;animation:cad-larry-bounce 1.2s ease-in-out infinite}
.cad-larry-dots i:nth-child(2){animation-delay:.18s}
.cad-larry-dots i:nth-child(3){animation-delay:.36s}
@keyframes cad-larry-bounce{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}
/* Gemini-2026: 👍/👎 iconos discretos, sin caja; se realzan al pasar el cursor. */
.cad-larry-fb{align-items:center}
.cad-larry-fb-btn{font-size:15px;line-height:1;padding:5px;border:none;border-radius:9px;cursor:pointer;background:none;opacity:.5;filter:grayscale(.45);transition:opacity .15s,transform .12s,filter .15s;min-width:30px;min-height:30px}
.cad-larry-fb-btn:hover{opacity:1;filter:none;transform:translateY(-1px) scale(1.08)}
.cad-larry-fb-btn:active{transform:scale(.9)}
.cad-larry-fb-btn.is-picked{opacity:1;filter:none;transform:scale(1.12)}
.cad-larry-fb-btn:disabled{cursor:default}
@media (prefers-reduced-motion:reduce){
  .cad-larry-dots i,.cad-larry-shimmer::after,.cad-larry-thinking::before,.cad-larry-bot.cad-larry-say::before{animation:none !important}
  .cad-larry-shimmer{opacity:.7}
  .cad-larry-panel,.cad-larry-panel::before,.cad-larry-msg{animation:none !important}
}
/* Gemini-2026: input = píldora flotante totalmente redondeada con anillo de degradado de marca. */
.cad-larry-inputrow{padding:10px 14px 14px;background:transparent}
.cad-larry-inputpill{position:relative;display:flex;align-items:flex-end;gap:6px;padding:5px 5px 5px 8px;border-radius:26px;
  background:color-mix(in srgb,var(--bg-raised) 88%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 4px 20px -10px rgba(0,0,0,.45);transition:box-shadow .2s}
/* Anillo con degradado lima→durazno animado (técnica de máscara, solo el borde). */
.cad-larry-inputpill::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:linear-gradient(120deg,var(--larry-lime),var(--larry-peach),var(--larry-orange-lt) 70%,var(--larry-lime));
  background-size:220% 220%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:.45;transition:opacity .2s;animation:larry-halo 7s ease-in-out infinite}
.cad-larry-inputpill:focus-within{box-shadow:0 6px 26px -10px color-mix(in srgb,var(--larry-lime) 55%,transparent),0 2px 10px -6px rgba(0,0,0,.4)}
.cad-larry-inputpill:focus-within::before{opacity:.95}
.cad-larry-inputrow input,.cad-larry-inputrow textarea{flex:1;min-width:0;border:none;background:transparent;color:var(--text);border-radius:22px;padding:8px 4px 8px 8px;font-size:14px;font-family:inherit;outline:none}
.cad-larry-inputrow textarea{resize:none;line-height:1.35;max-height:140px;overflow-y:auto;height:auto}
.cad-larry-inputrow input::placeholder,.cad-larry-inputrow textarea::placeholder{color:var(--text-muted)}
.cad-larry-inputrow button{flex-shrink:0;border:none;background:linear-gradient(135deg,var(--larry-lime-hi),var(--larry-lime) 65%,var(--larry-peach));color:#15181d;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:700;font-size:14px;transition:transform .12s,box-shadow .2s,filter .15s;box-shadow:0 3px 12px -3px color-mix(in srgb,var(--larry-lime) 65%,transparent)}
.cad-larry-inputrow button:hover{filter:brightness(1.06);box-shadow:0 5px 18px -3px color-mix(in srgb,var(--larry-lime) 80%,transparent)}
.cad-larry-inputrow button:active{transform:scale(.9)}
.cad-larry-inputrow button:disabled{opacity:.5;cursor:default;box-shadow:none}
@media (prefers-reduced-motion:reduce){ .cad-larry-inputpill::before{animation:none !important} }
/* ARREGLO 11 — Bottom-sheet móvil: el panel se ancla abajo a todo el ancho, con handle para arrastrar. */
@media (max-width:768px){
  .cad-larry-panel{left:0;right:0;bottom:0;top:auto;width:100%;max-width:100%;max-height:85dvh;border-radius:20px 20px 0 0;animation:cad-larry-sheet-in .4s cubic-bezier(.34,1.2,.5,1) both}
  .cad-larry-handle{display:block;width:40px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--larry-lime) 45%,transparent);margin:9px auto 1px;flex-shrink:0;cursor:grab;touch-action:none}
  .cad-larry-hdr{padding:10px 10px 9px;gap:4px}                    /* móvil #3: header más compacto para que no se encimen los botones */
  .cad-larry-hdr>span:first-child{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cad-larry-hdr-btns{gap:0;flex-shrink:0}
  .cad-larry-hdr button{min-width:40px;min-height:44px;width:40px}   /* 44 de alto (táctil) pero 40 de ancho para que quepan los 4 + ✕ */
  .cad-larry-fb-btn{min-width:44px;min-height:44px}
  .cad-larry-inputrow{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .cad-larry-inputrow input,.cad-larry-inputrow textarea{font-size:16px}   /* anti-zoom iOS (textarea incluido — regresión del multilínea) */
  .cad-larry-inputrow button{width:44px;height:44px;min-height:44px}
}
@keyframes cad-larry-sheet-in{from{opacity:.4;transform:translateY(100%)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .cad-larry-panel{animation:none !important} }
/* Badge ✨ de Larry (docs/PLAN_LARRY_AWARE.md L5a, dec. 39): puntito con pulso sutil en el
   botón que abre a Larry cuando el usuario aún no lo ha abierto hoy. NUNCA toast. */
#cad-larry{position:relative}
.larry-badge{position:absolute;top:-4px;right:-4px;width:9px;height:9px;border-radius:50%;background:#c7f000;pointer-events:none;animation:larry-pulse 2s ease-in-out infinite}
.larry-badge[hidden]{display:none}
@keyframes larry-pulse{
  0%{box-shadow:0 0 0 0 rgba(199,240,0,.65);opacity:1}
  70%{box-shadow:0 0 0 7px rgba(199,240,0,0);opacity:.7}
  100%{box-shadow:0 0 0 0 rgba(199,240,0,0);opacity:1}
}
@media (prefers-reduced-motion:reduce){ .larry-badge{animation:none} }

/* Aluna CAD (F8): tarjeta de Misiones (tutoriales guiados estilo SimCity) — flotante, esquina
   inferior izquierda (el minimapa vive en la inferior derecha del lienzo). */
.cad-missions-card{position:fixed;left:16px;bottom:16px;width:300px;max-width:90vw;max-height:60vh;z-index:99997;background:var(--bg-surface);border:1px solid var(--bg-border);border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,.4);display:flex;flex-direction:column;overflow:hidden}
.cad-missions-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--bg-border);font-weight:700;font-size:13px;color:var(--text)}
.cad-missions-hdr button{border:none;background:none;color:var(--text-muted);cursor:pointer;font-size:14px}
.cad-missions-list{overflow-y:auto;padding:6px}
.cad-mission-it{display:flex;gap:9px;padding:8px 8px;border-radius:9px}
.cad-mission-it:hover{background:var(--bg-border)}
.cad-mission-check{font-size:15px;color:var(--text-muted);flex-shrink:0;width:18px;text-align:center}
.cad-mission-done .cad-mission-check{color:#16a34a}
.cad-mission-done .cad-mission-title{text-decoration:line-through;color:var(--text-muted)}
.cad-mission-title{font-size:12.5px;font-weight:600;color:var(--text)}
.cad-mission-desc{font-size:11.5px;color:var(--text-muted);margin-top:1px}

/* ════════════════════════════════════════════════════════
   HOME dashboard (F0 B4 · js/home.js) — grid de tarjetas v1.
   Solo tokens (--bg-N / --text-N / --row-hover de la capa productividad);
   móvil: dash-grid ya colapsa a 1 columna (min(330px,100%)).
   ════════════════════════════════════════════════════════ */
.home-wrap { max-width:1180px; margin:0 auto; }
.home-greet { margin:4px 0 18px; }
.home-greet-title { font-size:clamp(20px,2.4vw,26px); font-weight:800; color:var(--text); margin:0 0 2px; line-height:1.25; }
.home-greet-date { font-size:13px; color:var(--text-muted); text-transform:capitalize; }
.home-card { background:var(--bg-surface); border:1px solid var(--bg-border); border-radius:var(--radius-card); padding:14px 16px; min-width:0; }
.home-card-h { display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:13px; font-weight:700; color:var(--text); }
.home-card-hname { font-weight:600; color:var(--text-muted); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-card-count { font-size:12px; font-weight:700; color:var(--text-muted); background:var(--bg-raised); border-radius:999px; padding:1px 8px; }
.home-card-link { margin-left:auto; border:none; background:none; color:var(--text-muted); font-size:12px; font-weight:600; cursor:pointer; padding:4px 6px; border-radius:6px; white-space:nowrap; }
.home-card-link:hover { color:var(--text); background:var(--row-hover, rgba(128,128,128,.08)); }
.home-span { grid-column:1 / -1; }
/* Agenda de hoy */
.home-ag-row { display:flex; gap:10px; align-items:flex-start; width:100%; text-align:left; background:none; border:none; border-bottom:1px solid var(--bg-border-light); padding:8px 4px; cursor:pointer; border-radius:6px; font-family:var(--font-body); }
.home-ag-row:hover { background:var(--row-hover, rgba(128,128,128,.08)); }
.home-ag-row:last-of-type { border-bottom:none; }
.home-ag-time { font-family:Menlo,monospace; font-size:12.5px; color:var(--text-2); min-width:44px; flex:0 0 auto; padding-top:2px; }
.home-ag-emoji { font-size:14px; line-height:1.4; flex:0 0 auto; }
.home-ag-main { min-width:0; }
.home-ag-title { display:block; font-size:13.5px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-ag-meta { display:block; font-size:12px; color:var(--text-muted); margin-top:2px; }
.home-chip-commute { color:var(--text-2); font-weight:600; }
/* Tareas por atender */
.home-task-row { display:flex; align-items:center; gap:10px; padding:8px 4px; border-bottom:1px solid var(--bg-border-light); }
.home-task-row:last-of-type { border-bottom:none; }
.home-task-ck { width:18px; height:18px; accent-color:var(--brand-primary); cursor:pointer; flex:0 0 auto; }
.home-task-title { flex:1 1 auto; min-width:0; border:none; background:none; text-align:left; font-family:var(--font-body); font-size:13.5px; color:var(--text); cursor:pointer; padding:4px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-task-title:hover { text-decoration:underline; }
.home-task-due { flex:0 0 auto; font-size:12px; font-weight:600; color:var(--text-muted); }
.home-task-due.overdue { color:var(--err); }
.home-task-row.done .home-task-title { text-decoration:line-through; color:var(--text-muted); }
/* Estados vacíos / candado / "ver más" */
.home-empty { font-size:13px; line-height:1.6; color:var(--text-muted); padding:6px 2px; }
.home-empty b { color:var(--text); }
.home-empty .btn { margin-left:6px; font-size:12px; }
.home-empty-ico { margin-right:6px; }
.home-more { display:block; width:100%; margin-top:8px; border:none; background:none; color:var(--text-muted); font-family:var(--font-body); font-size:12.5px; font-weight:600; cursor:pointer; padding:8px 4px; border-radius:6px; text-align:center; }
.home-more:hover { color:var(--text); background:var(--row-hover, rgba(128,128,128,.08)); }
/* Correo (F1.22, D25/D27-D28) */
.home-mail-unread-line { display:flex; align-items:center; justify-content:space-between; padding:2px 2px 10px; border-bottom:1px solid var(--bg-border-light); margin-bottom:8px; }
.home-mail-unread-count { font-size:13.5px; font-weight:700; color:var(--text); }
.home-mail-important-hd { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; color:var(--text-muted); padding:2px 2px 6px; }
.home-mail-row { display:flex; align-items:center; gap:10px; padding:8px 4px; border-bottom:1px solid var(--bg-border-light); }
.home-mail-row:last-of-type { border-bottom:none; }
.home-mail-row-main { flex:1 1 auto; min-width:0; }
.home-mail-row-top { display:flex; align-items:baseline; gap:8px; }
.home-mail-row-from { font-size:13px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-mail-row-subject { font-size:12.5px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-mail-row-snippet { font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-mail-larry-btn { flex-shrink:0; font-size:12px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
@media (max-width:640px){
  .home-card { padding:12px 13px; }
  .home-greet { margin-bottom:14px; }
  .home-mail-row-snippet { display:none; }
}

/* ── Utilidades CSS (UX-064, Fase D lote "CRM Ponentes+Calendario+UX/Frontend", 2026-07-18) ──
   Sistema chico propio (NO Tailwind — va contra la arquitectura vanilla y el peso, decisión del
   audit original). Cubre los patrones de `style=` MÁS repetidos en js/*.js (3,621 usos totales,
   ver docs/AUDITORIA_UX_FRONTEND.md#UX-064) para código NUEVO y migración del existente.
   Solo valores ESTÁTICOS aquí a propósito — nunca `display:none/flex` (esos casi siempre son
   toggles de JS vía el.style.display, una clase blind-replace rompería ese toggle). */
.u-fs11 { font-size:11px; }
.u-fs12 { font-size:12px; }
.u-fs13 { font-size:13px; }
.u-fs14 { font-size:14px; }
.u-muted { color:var(--text-muted); }
.u-muted2 { color:var(--text-2); }
.u-faint { color:var(--text-faint); }
.u-flex1 { flex:1; }
.u-flex1-mw0 { flex:1; min-width:0; }
.u-w100 { width:100%; }
.u-center { text-align:center; }
.u-row { display:flex; align-items:center; }
.u-row-g6 { display:flex; align-items:center; gap:6px; }
.u-row-g8 { display:flex; align-items:center; gap:8px; }
.u-row-between { display:flex; align-items:center; justify-content:space-between; }
.u-mt0 { margin-top:0; }
.u-mt6 { margin-top:6px; }
.u-mt8 { margin-top:8px; }
.u-mt10 { margin-top:10px; }
.u-mt12 { margin-top:12px; }
.u-mt14 { margin-top:14px; }
.u-bold { font-weight:700; }
.u-semibold { font-weight:600; }
.u-pointer { cursor:pointer; }
.u-tar { text-align:right; }
.u-fs125 { font-size:12.5px; }
.u-relative { position:relative; }
.u-mla { margin-left:auto; }
.u-o7 { opacity:.7; }
.u-p6-4 { padding:6px 4px; }
.u-p12 { padding:12px; }
.u-p20 { padding:20px; }

/* <yt-place-input> (Ubicaciones unificadas, lote grande 2026-07-18) — input base neutro, se ve
   consistente sin depender de la convención de clase del formulario que lo aloja (cts-in/spk-inp/etc). */
.ytpi-in{ width:100%; box-sizing:border-box; font-size:13px; padding:8px 11px; border:1px solid var(--bg-border,#e7e3dd); border-radius:8px; background:var(--bg-raised,var(--bg-surface,#fff)); color:var(--text); font-family:inherit; outline:none; transition:border-color .15s; }
.ytpi-in:focus{ border-color:var(--yt-orange,#EC6628); }