/* =========================================================================
   Superboletos · Prototipo 01 · Capa de componentes
   Tailwind cubre layout/espaciado/tipografía desde el markup.
   Este archivo cubre lo que una utilidad no resuelve bien: controles de
   formulario, tabla densa, modo oscuro y el patrón de puntos "halftone".
   Todo se apoya en variables CSS para que el port a Angular sea copiar/pegar.
   ========================================================================= */

/* Orden canónico de capas. Lo fija este archivo por si se carga antes que
   la hoja que genera Tailwind: base (preflight) nunca debe pisar a
   components, y utilities siempre debe poder pisarlo todo. */
@layer theme, base, components, utilities;

@media (min-width: 1024px) {
  html[data-nav="collapsed"] { --sb-aside-w: 68px; }
}

/* ---------- 1. Tokens espejo (independientes del CDN de Tailwind) -------- */
:root {
  --sb-navy-950: #0b1120;
  --sb-navy-900: #111b2e;
  --sb-navy-800: #17223b;
  --sb-navy-700: #22304f;
  --sb-navy-600: #33426a;

  --sb-ink:     #1b2437;
  --sb-ink-2:   #5a6478;
  --sb-muted:   #5f6775; /* antes #6e7686: solo se midio contra blanco (4.57:1); contra --sb-line (#e8eaf0), el peor de los 5 fondos claros, daba 3.80:1 */
  --sb-line:    #e8eaf0;
  --sb-line-2:  #f1f2f7;
  --sb-canvas:  #f5f6fa;
  --sb-surface: #ffffff;
  --sb-surface-2: #fafbfd;

  --sb-brand:     #04598f;
  --sb-brand-600: #034b79;
  --sb-brand-100: #d5e8f3;
  --sb-brand-50:  #eaf3f8;
  --sb-brand-ink: #04598f; /* Contraste AA sobre --sb-brand-50. */

  --sb-ok: #12a971;   --sb-ok-50: #e3f6ed;
  --sb-warn: #d9892a; --sb-warn-50: #fbf1e2;
  --sb-bad: #cf3338;  --sb-bad-50: #fdecec; /* antes #e5484d: 3.91:1 sobre blanco, no cumplía AA */
  --sb-info: #4a6cf0; --sb-info-50: #e9edfd;
  --sb-iris: #7c5cfc; --sb-iris-50: #efeafe;

  /* --- Tinta de las píldoras suaves (.sb-badge-*) ---------------------
     El acento base (--sb-ok, --sb-warn, etc.) no siempre cumple 4.5:1
     como texto sobre su propio fondo -50; estas tintas son las que sí
     cumplen, siguiendo el mismo patrón que --sb-st-*-ink. */
  --sb-ok-ink:   #0d764f;
  --sb-warn-ink: #915c1c;
  --sb-bad-ink:  #bf2f34;
  --sb-info-ink: #3f5bcb;
  --sb-iris-ink: #674cd1;

  /* --- Estatus del calendario: tono = línea, intensidad = cerrado ---
     zlive y privado se oscurecen respecto al acento base (--sb-ok, --sb-iris)
     porque aquí cargan texto blanco encima (chip "autorizado") y el tono
     original no llega a 4.5:1 de contraste AA (verificado con script). */
  --sb-st-zlive: #0e7f55;   --sb-st-zlive-50: #e3f6ed;   --sb-st-zlive-ink: #0a6f4a;
  --sb-st-publico: #3d52d5; --sb-st-publico-50: #e6e9fc; --sb-st-publico-ink: #2a3aa0;
  --sb-st-privado: #694ed6; --sb-st-privado-50: #efeafe; --sb-st-privado-ink: #5a3fd0;
  --sb-st-montaje: #4a5a85; --sb-st-montaje-50: #eceff5; --sb-st-montaje-ink: #33426a;
  --sb-st-indef: #d9892a;   --sb-st-indef-50: #fbf1e2;   --sb-st-indef-ink: #8c5610;

  --sb-ring: color-mix(in srgb, var(--sb-brand) 38%, transparent);

  --sb-row-h: 62px;          /* densidad de tabla, conmutable */
  --sb-aside-w: 264px;       /* ancho del menú, conmutable */
  --sb-shadow-card: 0 1px 2px rgb(16 24 40 / 0.04), 0 12px 32px -12px rgb(16 24 40 / 0.14);
  --sb-shadow-pop:  0 8px 28px -6px rgb(16 24 40 / 0.18), 0 2px 6px rgb(16 24 40 / 0.06);
}

/* ---------- 2. Modo oscuro ---------------------------------------------
   Especificidad html[...] (0,1,1) para ganarle siempre a :root (0,1,0),
   sin depender del orden en que el CDN inyecte su hoja.                  */
html[data-theme="dark"] {
  --sb-ink:     #e7eaf3;
  --sb-ink-2:   #a4adc2;
  --sb-muted:   #98a0b2; /* antes #868fa4: solo se midio contra --sb-surface/--sb-canvas oscuros; contra --sb-line oscuro (#24304b), el peor de los 5 fondos, daba 4.05:1 */
  --sb-line:    #24304b;
  --sb-line-2:  #1d2740;
  --sb-canvas:  #0e1626;
  --sb-surface: #16203a;
  --sb-surface-2: #1a2543;

  --sb-brand-50:  #142b3a;
  --sb-brand-100: #1c3d53;
  --sb-brand-ink: #6cb8e6; /* Contraste AA sobre fondos azules oscuros. */
  --sb-ok-50:   #0f3a2b;
  --sb-warn-50: #3a2c12;
  --sb-bad-50:  #3c1c1e;
  --sb-info-50: #1b2a5c;
  --sb-iris-50: #2a2159;

  --color-ink: #e7eaf3;  --color-ink-2: #a4adc2;  --color-muted: #98a0b2;
  --color-line: #24304b; --color-line-2: #1d2740;
  --color-canvas: #0e1626; --color-surface: #16203a; --color-surface-2: #1a2543;
  --color-brand-50: #142b3a; --color-brand-100: #1c3d53;
  --color-brand-ink: #6cb8e6;
  --color-ok-50: #0f3a2b; --color-warn-50: #3a2c12;
  --color-bad-50: #3c1c1e; --color-info-50: #1b2a5c;
  --color-iris-50: #2a2159;

  /* Tinta de las píldoras suaves: el acento base ya sirve para "warn"
     (4.88:1 sobre --sb-warn-50 oscuro), las demás necesitan una versión
     más clara para leerse sobre su -50 oscuro. */
  --sb-ok-ink:   #39b788;
  --sb-warn-ink: #d9892a;
  --sb-bad-ink:  #df7579;
  --sb-info-ink: #8098f5;
  --sb-iris-ink: #9f87fd;

  --sb-st-zlive-50: #123326;   --sb-st-zlive-ink: #5fd6a6;
  --sb-st-publico-50: #1a2044; --sb-st-publico-ink: #9aa8f5;
  --sb-st-privado-50: #241c40; --sb-st-privado-ink: #b9a3ff;
  --sb-st-montaje-50: #1e2637; --sb-st-montaje-ink: #a9b4cc;
  --sb-st-indef-50: #33260f;   --sb-st-indef-ink: #f0b970;

  --sb-shadow-card: 0 1px 2px rgb(0 0 0 / 0.3), 0 14px 34px -14px rgb(0 0 0 / 0.6);
  --sb-shadow-pop:  0 10px 30px -6px rgb(0 0 0 / 0.55), 0 2px 6px rgb(0 0 0 / 0.3);
}

/* Plantilla Zignia: rojo de marca, carbón y superficies neutras. */
html[data-brand="zignia"] {
  --sb-brand:#b80f24; --sb-brand-600:#9d0b1e; --sb-brand-100:#f4d6da; --sb-brand-50:#fff0f2; --sb-brand-ink:#9d0b1e;
  --color-brand:#b80f24; --color-brand-600:#9d0b1e; --color-brand-700:#80091a; --color-brand-100:#f4d6da; --color-brand-50:#fff0f2; --color-brand-ink:#9d0b1e;
  --sb-navy-950:#101010; --sb-navy-900:#171717; --sb-navy-800:#1f1f1f; --sb-navy-700:#303030; --sb-navy-600:#494949; --sb-navy-500:#777777;
  --color-navy-950:#101010; --color-navy-900:#171717; --color-navy-800:#1f1f1f; --color-navy-700:#303030; --color-navy-600:#494949; --color-navy-500:#777777;
  --sb-canvas:#f6f6f7; --color-canvas:#f6f6f7;
}
html[data-brand="zignia"][data-theme="dark"] {
  --sb-brand:#e34a5c; --sb-brand-600:#c93145; --sb-brand-100:#4a2028; --sb-brand-50:#351b21; --sb-brand-ink:#ff9aa5;
  --color-brand:#e34a5c; --color-brand-600:#c93145; --color-brand-700:#a92437; --color-brand-100:#4a2028; --color-brand-50:#351b21; --color-brand-ink:#ff9aa5;
  --sb-canvas:#121212; --sb-surface:#1d1d1d; --sb-surface-2:#242424;
  --color-canvas:#121212; --color-surface:#1d1d1d; --color-surface-2:#242424;
}
.sb-brand-logo-dark.sb-zignia-logo { filter:invert(1) hue-rotate(180deg); }
.sb-brand-wordmark { display:block; width:112px; height:auto; }

/* ---------- Capa de componentes ----------------------------------------
   Todo lo que sigue vive en @layer components para que las utilidades de
   Tailwind (que ocupan una capa posterior) siempre puedan sobrescribirlo
   desde el markup: `class="sb-icon-btn lg:hidden"` debe poder ganar.
   Los tokens de arriba quedan FUERA de toda capa a propósito: sin capa
   ganan a cualquier capa, y así el tema oscuro nunca se pierde.
   ------------------------------------------------------------------------ */
@layer components {

  /* ---------- 3. Base ------------------------------------------------------ */
  * { -webkit-tap-highlight-color: transparent; }

  html { scroll-behavior: smooth; }

  body {
    background: var(--sb-canvas);
    color: var(--sb-ink);
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background-color .25s ease, color .25s ease;
  }

  /* Cifras siempre alineadas: es una app de datos. */
  .tnum, table, .sb-kpi-figure, input[type="number"] { font-variant-numeric: tabular-nums; }

  /* Foco visible y consistente en todo el prototipo. */
  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--sb-brand);
    outline-offset: 2px;
    border-radius: 5px;
  }

  ::selection { background: var(--sb-brand); color: #fff; }

  /* ---------- 4. Scrollbars ------------------------------------------------ */
  .sb-scroll { scrollbar-width: thin; scrollbar-color: var(--sb-line) transparent; }
  .sb-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
  .sb-scroll::-webkit-scrollbar-track { background: transparent; }
  .sb-scroll::-webkit-scrollbar-thumb {
    background: var(--sb-line);
    border-radius: 99px;
    border: 3px solid transparent;
    background-clip: content-box;
  }
  .sb-scroll::-webkit-scrollbar-thumb:hover { background: var(--sb-muted); background-clip: content-box; }

  /* Tiras que deben poder desplazarse pero sin mostrar barra (tabs). */
  .sb-scroll-none { scrollbar-width: none; -sb-overflow-style: none; }
  .sb-scroll-none::-webkit-scrollbar { display: none; }

  .sb-scroll-dark { scrollbar-width: thin; scrollbar-color: #2a3a5c transparent; }
  .sb-scroll-dark::-webkit-scrollbar { width: 8px; }
  .sb-scroll-dark::-webkit-scrollbar-thumb { background: #2a3a5c; border-radius: 99px; }

  /* ---------- 5. Tarjeta (el radio grande de Fincan) ---------------------- */
  .sb-card {
    background: var(--sb-surface);
    border: 1px solid var(--sb-line);
    border-radius: 8px;
    box-shadow: var(--sb-shadow-card);
  }
  .sb-card-flat {
    background: var(--sb-surface);
    border: 1px solid var(--sb-line);
    border-radius: 7px;
  }

  /* ---------- 6. Botones --------------------------------------------------- */
  .sb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 42px; padding: 0 16px;
    border-radius: 5px;
    font-size: 14px; font-weight: 600; line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease,
                box-shadow .16s ease, transform .1s ease;
  }
  .sb-btn:active { transform: translateY(1px); }
  .sb-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
  .sb-btn svg { width: 17px; height: 17px; flex: none; }

  .sb-btn-primary { background: var(--sb-brand); color: #fff; box-shadow: 0 6px 16px -8px var(--sb-brand); }
  .sb-btn-primary:hover:not(:disabled) { background: var(--sb-brand-600); }

  .sb-btn-secondary { background: var(--sb-surface); color: var(--sb-ink-2); border-color: var(--sb-line); }
  .sb-btn-secondary:hover:not(:disabled) { background: var(--sb-surface-2); border-color: var(--sb-muted); color: var(--sb-ink); }

  .sb-btn-ghost { background: var(--sb-surface); color: var(--sb-ink); border-color: var(--sb-line); }
  .sb-btn-ghost:hover:not(:disabled) { background: var(--sb-surface-2); border-color: var(--sb-muted); }

  .sb-btn-quiet { background: transparent; color: var(--sb-ink-2); }
  .sb-btn-quiet:hover:not(:disabled) { background: var(--sb-line-2); color: var(--sb-ink); }

  .sb-btn-danger { background: var(--sb-bad-50); color: var(--sb-bad-ink); }
  .sb-btn-danger:hover:not(:disabled) { background: var(--sb-bad); color: #fff; }

  .sb-btn-sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 4px; }
  .sb-btn-lg { height: 50px; padding: 0 22px; font-size: 15px; border-radius: 5px; }

  .sb-icon-btn {
    display: inline-grid; place-items: center;
    width: 38px; height: 38px; border-radius: 5px;
    color: var(--sb-ink-2); background: transparent;
    border: 1px solid transparent; cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
  }
  .sb-icon-btn:hover { background: var(--sb-line-2); color: var(--sb-ink); }
  /* Sin esto, un icono al que se le olvida la clase de tamaño se renderiza
     al tamaño por defecto del SVG (300x150) y revienta el control. */
  .sb-icon-btn > svg,
  .sb-seg button > svg,
  .sb-tab > svg { width: 18px; height: 18px; flex: none; }

  /* ---------- 7. Campos ---------------------------------------------------- */
  .sb-field {
    width: 100%; height: 44px;
    padding: 0 14px;
    background: var(--sb-surface);
    border: 1px solid var(--sb-line);
    border-radius: 5px;
    color: var(--sb-ink);
    font-size: 14px; font-family: inherit;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
  }
  textarea.sb-field { height: auto; padding: 12px 14px; line-height: 1.6; resize: vertical; min-height: 96px; }
  .sb-field::placeholder { color: var(--sb-muted); }
  .sb-field:hover:not(:disabled) { border-color: #cfd4e2; }
  .sb-field:focus { outline: none; border-color: var(--sb-brand); box-shadow: 0 0 0 4px var(--sb-ring); }
  .sb-field:disabled { background: var(--sb-line-2); color: var(--sb-muted); cursor: not-allowed; }
  .sb-field[aria-invalid="true"] { border-color: var(--sb-bad); background: var(--sb-bad-50); }
  .sb-field[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sb-bad) 25%, transparent); }

  /* select nativo con caret propio */
  select.sb-field {
    appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238c93a3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 13px center;
    cursor: pointer;
  }
  html[data-theme="dark"] select.sb-field,
  html[data-theme="dark"] input[type="date"].sb-field,
  html[data-theme="dark"] input[type="time"].sb-field { color-scheme: dark; }

  .sb-label { display: block; font-size: 13px; font-weight: 600; color: var(--sb-ink); margin-bottom: 7px; }
  .sb-help  { font-size: 12.5px; color: var(--sb-muted); margin-top: 6px; line-height: 1.5; }
  .sb-error { font-size: 12.5px; color: var(--sb-bad); margin-top: 6px; font-weight: 500; display: none; }
  .sb-error.is-on { display: flex; align-items: center; gap: 5px; }

  /* Input con icono a la izquierda */
  .sb-field-icon { position: relative; }
  .sb-field-icon > svg {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    width: 17px; height: 17px; color: var(--sb-muted); pointer-events: none;
  }
  .sb-field-icon > .sb-field { padding-left: 40px; }

  /* ---------- 8. Switch ---------------------------------------------------- */
  .sb-switch { position: relative; display: inline-flex; flex: none; width: 44px; height: 25px; cursor: pointer; }
  .sb-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
  .sb-switch span {
    position: absolute; inset: 0;
    background: #cdd2e0; border-radius: 99px;
    transition: background-color .2s ease;
  }
  html[data-theme="dark"] .sb-switch span { background: #33415f; }
  .sb-switch span::after {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 19px; height: 19px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgb(16 24 40 / 0.3);
    transition: transform .2s cubic-bezier(.34,1.4,.64,1);
  }
  .sb-switch input:checked + span { background: var(--sb-brand); }
  .sb-switch input:checked + span::after { transform: translateX(19px); }
  .sb-switch input:focus-visible + span { box-shadow: 0 0 0 4px var(--sb-ring); }

  /* ---------- 9. Segmented control ---------------------------------------- */
  .sb-seg {
    display: inline-flex; gap: 3px; padding: 3px;
    background: var(--sb-line-2); border-radius: 5px;
    border: 1px solid var(--sb-line);
  }
  .sb-seg button {
    height: 34px; padding: 0 14px;
    border-radius: 4px; border: 0; background: transparent;
    font-size: 13px; font-weight: 600; color: var(--sb-ink-2);
    cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 7px;
    transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
  }
  .sb-seg button:hover { color: var(--sb-ink); }
  .sb-seg button[aria-pressed="true"] {
    background: var(--sb-surface); color: var(--sb-brand);
    box-shadow: 0 1px 3px rgb(16 24 40 / 0.1);
  }

  /* ---------- 10. Badges / píldoras de estado ------------------------------ */
  .sb-badge {
    display: inline-flex; align-items: center; gap: 5px;
    height: 25px; padding: 0 9px;
    border-radius: 8px;
    font-size: 12px; font-weight: 600; letter-spacing: -.01em;
    white-space: nowrap;
  }
  .sb-badge svg { width: 13px; height: 13px; flex: none; }
  .sb-badge-ok    { background: var(--sb-ok-50);   color: var(--sb-ok-ink); }
  .sb-badge-warn  { background: var(--sb-warn-50); color: var(--sb-warn-ink); }
  .sb-badge-bad   { background: var(--sb-bad-50);  color: var(--sb-bad-ink); }
  .sb-badge-info  { background: var(--sb-info-50); color: var(--sb-info-ink); }
  .sb-badge-iris  { background: var(--sb-iris-50); color: var(--sb-iris-ink); }
  .sb-badge-mute  { background: var(--sb-line-2);  color: var(--sb-ink-2); }

  /* ---------- 11. Tabla densa (referencia: Listado.png) ------------------- */
  .sb-table { width: 100%; border-collapse: separate; border-spacing: 0; }
  .sb-table thead th {
    position: sticky; top: 0; z-index: 5;
    background: var(--sb-surface);
    padding: 13px 14px;
    text-align: left;
    font-size: 11.5px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase;
    color: var(--sb-muted);
    border-bottom: 1px solid var(--sb-line);
    white-space: nowrap;
    user-select: none;
  }
  .sb-table thead th.is-sortable { cursor: pointer; }
  .sb-table thead th.is-sortable:hover { color: var(--sb-ink); }
  .sb-table tbody td {
    height: var(--sb-row-h);
    padding: 10px 14px;
    border-bottom: 1px solid var(--sb-line-2);
    font-size: 13.5px;
    color: var(--sb-ink);
    vertical-align: middle;
  }
  .sb-table tbody tr { transition: background-color .12s ease; }
  .sb-table tbody tr:hover { background: var(--sb-surface-2); }
  .sb-table tbody tr.is-selected { background: var(--sb-brand-50); }
  .sb-table tbody tr.is-selected:hover { background: var(--sb-brand-100); }
  .sb-table tbody tr:last-child td { border-bottom: 0; }
  .sb-table .sb-row-actions { opacity: 0; transition: opacity .14s ease; }
  .sb-table tbody tr:hover .sb-row-actions,
  .sb-table tbody tr:focus-within .sb-row-actions { opacity: 1; }

  /* Indicador de orden */
  .sb-sort { display: inline-flex; align-items: center; gap: 5px; }
  .sb-sort svg { width: 13px; height: 13px; opacity: .35; transition: opacity .14s, transform .14s; }
  th[data-dir="asc"] .sb-sort svg  { opacity: 1; color: var(--sb-brand); }
  th[data-dir="desc"] .sb-sort svg { opacity: 1; color: var(--sb-brand); transform: rotate(180deg); }

  /* Checkbox propio */
  .sb-check {
    appearance: none;
    width: 17px; height: 17px; flex: none;
    border: 1.8px solid #c3c9d8; border-radius: 5px;
    background: var(--sb-surface);
    cursor: pointer;
    display: grid; place-content: center;
    transition: background-color .14s ease, border-color .14s ease;
  }
  html[data-theme="dark"] .sb-check { border-color: #3a4766; }
  .sb-check::after {
    content: ""; width: 9px; height: 9px;
    transform: scale(0);
    transition: transform .14s cubic-bezier(.34,1.4,.64,1);
    box-shadow: inset 1em 1em #fff;
    clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 84% 0%, 38% 68%);
  }
  .sb-check:checked, .sb-check:indeterminate { background: var(--sb-brand); border-color: var(--sb-brand); }
  .sb-check:checked::after { transform: scale(1); }
  .sb-check:indeterminate::after {
    transform: scale(1); clip-path: none; height: 2px; width: 9px; border-radius: 2px;
  }
  .sb-check:hover:not(:checked):not(:indeterminate) { border-color: var(--sb-brand); }

  /* Swatch de color de sala/edificio */
  .sb-swatch { width: 22px; height: 22px; border-radius: 6px; flex: none; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08); }

  /* Densidad compacta */
  html[data-density="compact"] { --sb-row-h: 46px; }
  html[data-density="compact"] .sb-table tbody td { padding: 6px 12px; font-size: 13px; }
  html[data-density="compact"] .sb-sub { display: none; }

  /* ---------- 12. Sidebar -------------------------------------------------- */
  .sb-nav-link {
    display: flex; align-items: center; gap: 12px;
    height: 43px; padding: 0 13px; margin: 0 12px;
    border-radius: 6px;
    color: #9aa6c4; font-size: 14px; font-weight: 500;
    text-decoration: none;
    transition: background-color .16s ease, color .16s ease;
    position: relative;
  }
  .sb-nav-link svg { width: 19px; height: 19px; flex: none; }
  .sb-nav-link:hover { background: var(--sb-navy-700); color: #eef1f8; }
  .sb-nav-link.is-active { background: var(--sb-brand); color: #fff; font-weight: 600; box-shadow: 0 8px 20px -10px var(--sb-brand); }
  .sb-nav-link.is-active:hover { background: var(--sb-brand-600); }
  .sb-nav-group {
    padding: 20px 25px 8px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: #5d6b8d;
  }

  /* ---------- 12b. Menú colapsado (rail de iconos) ------------------------ */
  /* En el menú abierto se muestra el wordmark; el isotipo se reserva al rail. */
  .sb-brand > img { display: none; }
  .sb-aside {
    width: var(--sb-aside-w);
    transition: width .22s cubic-bezier(.4, 0, .2, 1);
  }

  /* Lo que desaparece al colapsar: etiquetas, contadores y títulos de grupo. */
  .sb-nav-text, .sb-brand-text, .sb-org-text {
    min-width: 0;
    transition: opacity .12s ease;
  }

  @media (min-width: 1024px) {
    html[data-nav="collapsed"] .sb-nav-text,
    html[data-nav="collapsed"] .sb-brand-text,
    html[data-nav="collapsed"] .sb-org-text { display: none; }

    /* En modo compacto solo destaca el isotipo, cuadrado y sin deformar. */
    html[data-nav="collapsed"] .sb-brand > img { display: block; width: 48px; height: 48px; border-radius: 9px; }

    html[data-nav="collapsed"] .sb-nav-link {
      width: 44px;
      margin-inline: auto;
      padding: 0;
      justify-content: center;
    }

    html[data-nav="collapsed"] .sb-brand,
    html[data-nav="collapsed"] .sb-org { justify-content: center; padding-inline: 0; }

    html[data-brand="zignia"][data-nav="collapsed"] .sb-brand > .sb-brand-mark { width:50px; height:auto; border-radius:0; object-fit:contain; }
    html[data-brand="zignia"][data-nav="collapsed"] .sb-org [data-brand-mark] { width:44px; height:auto; border-radius:0; object-fit:contain; }

    /* El título de grupo se convierte en un separador. */
    html[data-nav="collapsed"] .sb-nav-group {
      font-size: 0; line-height: 0;
      padding: 14px 18px 12px;
    }
    html[data-nav="collapsed"] .sb-nav-group::before {
      content: ""; display: block; height: 1px; background: rgb(255 255 255 / .09);
    }

  }

  html[data-brand="zignia"] .sb-nav-link { color:#b8b8b8; }
  html[data-brand="zignia"] .sb-nav-link:hover { background:#303030; color:#fff; }
  html[data-brand="zignia"] .sb-nav-group { color:#888; }
  html[data-brand="zignia"] .sb-aside [class*="border-white/"] { border-color:rgb(255 255 255 / .08); }
  html[data-brand="zignia"] .sb-brand-wordmark { width:112px; }
  html[data-brand="zignia"] .sb-org [data-brand-mark] { width:38px; height:auto; border-radius:0; object-fit:contain; }

  /* Etiqueta emergente del rail. Vive en <body>, no dentro del menú: el <nav>
     tiene overflow-y:auto, que según la especificación también recorta en
     horizontal, y ahí dentro la etiqueta se cortaba. */
  .sb-navtip {
    position: fixed; z-index: 80;
    transform: translateY(-50%);
    padding: 7px 11px; border-radius: 9px;
    background: var(--sb-navy-950); color: #fff;
    font-size: 12.5px; font-weight: 600; white-space: nowrap;
    box-shadow: 0 10px 28px -10px rgb(0 0 0 / .6);
    opacity: 0; pointer-events: none;
    transition: opacity .12s ease;
  }
  .sb-navtip::before {
    content: ""; position: absolute; right: 100%; top: 50%;
    transform: translate(4px, -50%) rotate(45deg);
    width: 8px; height: 8px; background: inherit;
  }
  .sb-navtip.is-on { opacity: 1; }

  /* La barra de acciones del formulario sigue al menú. */
  .sb-formbar { left: 0; }
  @media (min-width: 1024px) { .sb-formbar { left: var(--sb-aside-w); } }

  /* ---------- 13. Patrón halftone (elemento firma) ------------------------ */
  .sb-dots { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .sb-hero-fade {
    position: absolute; inset: 0;
    background: linear-gradient(100deg, var(--sb-navy-900) 0%, var(--sb-navy-900) 38%, transparent 78%);
    pointer-events: none;
  }

  /* ---------- 14. Dropdown / popover -------------------------------------- */
  .sb-pop {
    position: absolute; z-index: 60;
    min-width: 190px; padding: 6px;
    background: var(--sb-surface);
    border: 1px solid var(--sb-line);
    border-radius: 6px;
    box-shadow: var(--sb-shadow-pop);
    opacity: 0; transform: translateY(-6px) scale(.98);
    transition: opacity .14s ease, transform .14s ease;
    pointer-events: none;
  }
  .sb-pop.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .sb-pop-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 11px; border-radius: 4px; border: 0; background: transparent;
    font-size: 13.5px; color: var(--sb-ink); text-align: left; cursor: pointer;
    font-family: inherit;
  }
  .sb-pop-item:hover { background: var(--sb-line-2); }
  .sb-pop-item svg { width: 16px; height: 16px; color: var(--sb-ink-2); flex: none; }
  .sb-pop-item.is-danger { color: var(--sb-bad); }
  .sb-pop-item.is-danger svg { color: var(--sb-bad); }
  .sb-pop-sep { height: 1px; background: var(--sb-line); margin: 5px 4px; }

  /* ---------- 15. Tabs con contador (Listado.png) ------------------------- */
  .sb-tab {
    display: inline-flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 14px; border-radius: 4px;
    border: 0; background: transparent; cursor: pointer;
    font-size: 13.5px; font-weight: 600; color: var(--sb-ink-2);
    font-family: inherit; white-space: nowrap;
    transition: background-color .16s ease, color .16s ease;
  }
  .sb-tab:hover { background: var(--sb-line-2); color: var(--sb-ink); }
  .sb-tab[aria-selected="true"] { background: var(--sb-surface); color: var(--sb-ink); box-shadow: 0 1px 3px rgb(16 24 40 / .1); }
  .sb-tab .n { font-size: 13px; font-weight: 700; }

  /* Tabs subrayadas (hero del dashboard) */
  .sb-utab {
    position: relative; height: 40px; padding: 0 2px; margin-right: 26px;
    border: 0; background: transparent; cursor: pointer;
    font-size: 14px; font-weight: 600; color: #8b99bb; font-family: inherit;
    transition: color .16s ease;
  }
  .sb-utab:hover { color: #dfe5f3; }
  .sb-utab[aria-selected="true"] { color: #fff; }
  .sb-utab::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--sb-brand); border-radius: 2px;
    transform: scaleX(0); transform-origin: left;
    transition: transform .22s cubic-bezier(.4,0,.2,1);
  }
  .sb-utab[aria-selected="true"]::after { transform: scaleX(1); }

  /* ---------- 16. Chips (filtros activos, asistentes) --------------------- */
  .sb-chip {
    display: inline-flex; align-items: center; gap: 7px;
    height: 30px; padding: 0 6px 0 10px;
    border-radius: 6px;
    background: var(--sb-brand-50); color: var(--sb-brand-ink);
    font-size: 12.5px; font-weight: 600;
    max-width: 100%;
  }
  .sb-chip button {
    display: grid; place-items: center; width: 18px; height: 18px;
    border: 0; border-radius: 5px; background: transparent; color: inherit; cursor: pointer;
  }
  .sb-chip button:hover { background: color-mix(in srgb, currentColor 18%, transparent); }
  .sb-chip svg { width: 12px; height: 12px; }

  /* ---------- 17. Tarjeta-radio (selector de sala) ------------------------ */
  .sb-radio-card { position: relative; display: block; cursor: pointer; }
  .sb-radio-card input { position: absolute; opacity: 0; pointer-events: none; }
  .sb-radio-card .box {
    display: block;              /* es un <span>: sin esto el borde se parte en trozos */
    border: 1.5px solid var(--sb-line);
    border-radius: 5px; padding: 15px;
    background: var(--sb-surface);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
    height: 100%;
  }
  .sb-radio-card:hover .box { border-color: #c3c9d8; }
  .sb-radio-card input:checked + .box {
    border-color: var(--sb-brand);
    background: var(--sb-brand-50);
    box-shadow: 0 0 0 4px var(--sb-ring);
  }
  .sb-radio-card input:focus-visible + .box { box-shadow: 0 0 0 4px var(--sb-ring); }
  .sb-radio-card input:disabled + .box { opacity: .55; cursor: not-allowed; }
  .sb-radio-card .tick { opacity: 0; transform: scale(.7); transition: .18s cubic-bezier(.34,1.4,.64,1); }
  .sb-radio-card input:checked + .box .tick { opacity: 1; transform: none; }

  /* ---------- 18. Selector de días (L→D, máscara de 7) -------------------- */
  .sb-day { position: relative; }
  .sb-day input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
  .sb-day span {
    display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: 6px;
    border: 1.5px solid var(--sb-line);
    font-size: 13px; font-weight: 700; color: var(--sb-ink-2);
    transition: .16s ease;
  }
  .sb-day input:checked + span { background: var(--sb-brand); border-color: var(--sb-brand); color: #fff; }
  .sb-day input:focus-visible + span { box-shadow: 0 0 0 4px var(--sb-ring); }
  .sb-day:hover input:not(:checked) + span { border-color: var(--sb-brand); color: var(--sb-brand); }

  /* ---------- 19. Range ---------------------------------------------------- */
  .sb-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; background: var(--sb-line); cursor: pointer; }
  .sb-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; border: 5px solid var(--sb-brand);
    box-shadow: 0 2px 6px rgb(16 24 40 / .25);
    cursor: grab;
  }
  .sb-range::-webkit-slider-thumb:active { cursor: grabbing; }
  .sb-range::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; border: 5px solid var(--sb-brand);
    box-shadow: 0 2px 6px rgb(16 24 40 / .25);
  }

  /* ---------- 20. Dropzone ------------------------------------------------- */
  .sb-drop {
    border: 1.5px dashed var(--sb-line);
    border-radius: 6px;
    background: var(--sb-surface-2);
    transition: border-color .16s ease, background-color .16s ease;
  }
  .sb-drop.is-over { border-color: var(--sb-brand); background: var(--sb-brand-50); }

  /* ---------- 21. Barra segmentada (Expenses Analytics del Figma) --------- */
  .sb-segbar { display: flex; gap: 3px; height: 9px; }
  .sb-segbar > i { display: block; border-radius: 99px; transition: flex-grow .5s cubic-bezier(.4,0,.2,1); }

  /* ---------- 22. Progreso ------------------------------------------------- */
  .sb-progress { height: 8px; border-radius: 99px; background: var(--sb-line); overflow: hidden; }
  .sb-progress > i { display: block; height: 100%; border-radius: 99px; background: var(--sb-brand); transition: width .7s cubic-bezier(.4,0,.2,1); }

  /* ---------- 23. Toasts --------------------------------------------------- */
  .sb-toasts {
    position: fixed; right: 22px; bottom: 22px; z-index: 90;
    display: flex; flex-direction: column; gap: 11px;
    width: min(380px, calc(100vw - 32px));
  }
  .sb-toast {
    position: relative; overflow: hidden;
    display: flex; gap: 12px; padding: 14px 14px 14px 16px;
    background: var(--sb-surface);
    border: 1px solid var(--sb-line);
    border-left: 3px solid var(--sb-brand);
    border-radius: 14px;
    box-shadow: var(--sb-shadow-pop);
    animation: sb-toast-in .32s cubic-bezier(.16,1,.3,1);
  }
  .sb-toast.is-out { animation: sb-toast-out .22s ease forwards; }
  .sb-toast[data-kind="ok"]   { border-left-color: var(--sb-ok); }
  .sb-toast[data-kind="bad"]  { border-left-color: var(--sb-bad); }
  .sb-toast[data-kind="warn"] { border-left-color: var(--sb-warn); }
  @keyframes sb-toast-in  { from { opacity: 0; transform: translateX(28px) scale(.97); } }
  @keyframes sb-toast-out { to   { opacity: 0; transform: translateX(28px) scale(.97); } }

  /* ---------- 24. Animaciones de entrada ---------------------------------- */
  @keyframes sb-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .sb-rise { animation: sb-rise .5s cubic-bezier(.16,1,.3,1) both; }
  .sb-rise-1 { animation-delay: .04s; } .sb-rise-2 { animation-delay: .08s; }
  .sb-rise-3 { animation-delay: .12s; } .sb-rise-4 { animation-delay: .16s; }
  .sb-rise-5 { animation-delay: .20s; } .sb-rise-6 { animation-delay: .24s; }

  @keyframes sb-spin { to { transform: rotate(360deg); } }
  .sb-spin { animation: sb-spin .8s linear infinite; }

  /* Skeleton de carga */
  @keyframes sb-shimmer { 100% { transform: translateX(100%); } }
  .sb-skel { position: relative; overflow: hidden; background: var(--sb-line-2); border-radius: 8px; }
  .sb-skel::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / .55), transparent);
    animation: sb-shimmer 1.4s infinite;
  }
  html[data-theme="dark"] .sb-skel::after { background: linear-gradient(90deg, transparent, rgb(255 255 255 / .07), transparent); }

  /* ---------- 25. Utilidades varias --------------------------------------- */
  .sb-sub { font-size: 12px; color: var(--sb-muted); margin-top: 2px; }
  .sb-divider { height: 1px; background: var(--sb-line); }
  .sb-kbd {
    display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 6px; border: 1px solid var(--sb-line); border-bottom-width: 2px;
    background: var(--sb-surface); color: var(--sb-muted);
    font-size: 11px; font-weight: 700; font-family: inherit;
  }
  .sb-link { color: var(--sb-brand); font-weight: 600; text-decoration: none; }
  .sb-link:hover { text-decoration: underline; text-underline-offset: 3px; }

  /* ---------- 25b. Chip de evento del calendario --------------------------
     Deriva su color de SBEstatus.clase(ev): el tono dice de quién es la
     fecha, la intensidad dice si ya está cerrada. Suave = hold, sólido =
     autorizado. */
  .sb-evt {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    text-align: left;
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 4px 6px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: background-color .14s ease, border-color .14s ease;
  }
  .sb-evt:focus-visible {
    outline: 2px solid var(--sb-brand);
    outline-offset: 1px;
  }

  .sb-evt--zlive-hold           { background: var(--sb-st-zlive-50);   color: var(--sb-st-zlive-ink);   border-color: color-mix(in srgb, var(--sb-st-zlive) 35%, transparent); }
  .sb-evt--rentado-publico-hold { background: var(--sb-st-publico-50); color: var(--sb-st-publico-ink); border-color: color-mix(in srgb, var(--sb-st-publico) 35%, transparent); }
  .sb-evt--rentado-privado-hold { background: var(--sb-st-privado-50); color: var(--sb-st-privado-ink); border-color: color-mix(in srgb, var(--sb-st-privado) 35%, transparent); }

  .sb-evt--zlive-autorizado           { background: var(--sb-st-zlive);   color: #fff; }
  .sb-evt--rentado-publico-autorizado { background: var(--sb-st-publico); color: #fff; }
  .sb-evt--rentado-privado-autorizado { background: var(--sb-st-privado); color: #fff; }
  .sb-evt--montaje                    { background: var(--sb-st-montaje); color: #fff; }
  .sb-evt--indefinido {
    background: var(--sb-st-indef-50);
    color: var(--sb-st-indef-ink);
    border: 1px dashed color-mix(in srgb, var(--sb-st-indef) 45%, transparent);
  }

  /* Barra de madurez en el borde inferior del chip. */
  .sb-evt-madurez {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    background: currentColor;
    opacity: .45;
  }

  .sb-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 11.5px; font-weight: 600; }
  .sb-leyenda button { display: flex; align-items: center; gap: 6px; color: var(--sb-ink-2); transition: color .14s ease; }
  .sb-leyenda button:hover { color: var(--sb-ink); }
  .sb-leyenda .sw { width: 12px; height: 12px; border-radius: 4px; border: 1px solid transparent; }
  .sb-leyenda [aria-pressed="false"] { opacity: .4; }

  .sb-rolpill {
    display: none;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border-radius: 11px;
    background: var(--sb-brand-50);
    color: var(--sb-brand-ink);
    font-size: 12.5px;
    font-weight: 700;
    transition: background-color .14s ease;
  }
  .sb-rolpill:hover { background: var(--sb-brand-100); }
  @media (min-width: 768px) { .sb-rolpill { display: flex; } }

  /* ---------- 26. Piso de calidad: movimiento reducido -------------------- */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* ---------- 27. Impresión ------------------------------------------------ */
  @media print {
    .sb-no-print, aside, header { display: none !important; }
    body { background: #fff; }
    .sb-card { box-shadow: none; border-color: #ddd; }
  }

}

/* ---------- Calendario mensual de eventos ------------------------------- */
.sb-calendar { overflow: hidden; }
.sb-calendar-head, .sb-calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.sb-calendar-head { background: var(--sb-canvas); border-bottom: 1px solid var(--sb-line); }
.sb-calendar-head > div { padding: 10px 8px; color: var(--sb-muted); font-size: 11px; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .06em; }
.sb-calendar-day { position: relative; min-height: 142px; min-width: 0; padding: 7px; border-right: 1px solid var(--sb-line); border-bottom: 1px solid var(--sb-line); background: var(--sb-surface); }
.sb-calendar-day:nth-child(7n) { border-right: 0; }
.sb-calendar-day.is-outside { background: var(--sb-canvas); }
.sb-calendar-day.is-selected { box-shadow: inset 0 0 0 2px var(--sb-brand); }
.sb-calendar-day > header { position: relative; display: flex; align-items: center; gap: 5px; min-height: 23px; margin-bottom: 4px; }
.sb-day-num { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: var(--sb-ink-2); font-size: 12px; font-weight: 700; }
.sb-day-count { color: var(--sb-muted); font-size: 9px; }
.sb-day-add { display: none; margin-left: auto; width: 23px; height: 23px; border: 1px solid var(--sb-line); border-radius: 5px; color: var(--sb-brand); background: var(--sb-surface); text-align: center; font-size: 17px; line-height: 20px; text-decoration: none; }
.sb-calendar-day:not(.is-outside):hover .sb-day-add, .sb-day-add:focus-visible { display: block; }
.sb-day-events { display: grid; gap: 4px; }
.sb-calendar-event { display: block; position: relative; min-width: 0; padding: 4px 5px 5px; border-radius: 6px; text-decoration: none; line-height: 1.15; outline-offset: 2px; }
.sb-calendar-event-top { display: flex; min-width: 0; align-items: center; gap: 3px; }
.sb-calendar-event-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; font-weight: 700; }
.sb-evt-hold { flex: none; font-size: 8px; font-weight: 800; }
.sb-calendar-event-sub { display: block; overflow: hidden; margin-top: 2px; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; opacity: .85; }
.sb-evt-madurez { display: block; height: 2px; margin-top: 4px; overflow: hidden; border-radius: 2px; background: rgb(127 127 127 / .18); }
.sb-evt-madurez > i { display: block; height: 100%; background: currentColor; opacity: .8; }
.sb-deadline-dot { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; vertical-align: 1px; background: var(--sb-warn); }
.sb-deadline-dot.is-late { background: var(--sb-bad); }
.sb-calendar-release { color: var(--sb-bad-ink); font-weight: 700; }
.sb-calendar-more { justify-self: start; padding: 2px 4px; color: var(--sb-brand); background: none; border: 0; font-size: 9px; font-weight: 700; cursor: pointer; }
.sb-calendar-year { padding: 7px 12px; border-radius: 5px; color: var(--sb-ink-2); font-size: 12px; font-weight: 700; }
.sb-calendar-year.is-active { color: #fff; background: var(--sb-brand); }
.sb-calendar-legend { display: flex; flex-wrap: wrap; gap: 7px; }
.sb-calendar-legend-item { border: 0; padding: 0; border-radius: 7px; background: transparent; cursor: pointer; }
.sb-calendar-legend-item > span { display: block; padding: 6px 9px; border: 2px solid transparent; border-radius: 5px; font-size: 10px; font-weight: 700; }
.sb-calendar-legend-item[aria-pressed="true"] > span { outline: 2px solid var(--sb-brand); outline-offset: 1px; }
.sb-calendar-legend-item.is-off { opacity: .45; }
.sb-calendar-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border: 1px solid var(--sb-line); border-radius: 5px; color: var(--sb-ink-2); font-size: 12px; font-weight: 600; }
@media (max-width: 767px) {
  .sb-calendar-head { display: none; }
  .sb-calendar-grid { display: block; }
  .sb-calendar-day { display: grid; grid-template-columns: 44px minmax(0,1fr); min-height: 0; padding: 8px 10px; border-right: 0; }
  .sb-calendar-day.is-outside { display: none; }
  .sb-calendar-day > header { align-self: start; margin: 1px 0 0; }
  .sb-day-count { display: none; }
  .sb-day-add { display: block; position: absolute; top: 0; right: 0; }
  .sb-day-events { grid-column: 2; grid-row: 1; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sb-calendar-event-name { font-size: 10px; }
  .sb-calendar-event-sub { font-size: 9px; }
}

/* Ficha de evento y gestión densa --------------------------------------- */
.sb-kicker { color: var(--sb-brand); font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.sb-section-title { margin-top: 3px; color: var(--sb-ink); font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.sb-checkline { display: flex; align-items: center; gap: 8px; min-height: 40px; color: var(--sb-ink-2); font-size: 12px; }
.sb-timeline { border-left: 1px solid var(--sb-line); padding-left: 15px; }
.sb-timeline-item { position: relative; padding: 0 0 17px; }
.sb-timeline-dot { position: absolute; left: -20px; top: 3px; width: 9px; height: 9px; border: 2px solid var(--sb-brand); border-radius: 50%; background: var(--sb-surface); }
.sb-timeline-item:last-child { padding-bottom: 0; }
@media print { .sb-timeline { break-inside: avoid; } }
.sb-calendar-years { display: flex; align-items: center; gap: 3px; padding: 3px; border-radius: 11px; background: var(--sb-line-2); }
.sb-annual-week, .sb-annual-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 2px; }
.sb-annual-week { margin-top: 8px; color: var(--sb-muted); font-size: 8px; text-align: center; }
.sb-annual-day { display: grid; place-items: center; min-width: 0; aspect-ratio: 1; border-radius: 4px; color: var(--sb-ink-2); background: var(--sb-line-2); font-size: 8px; line-height: 1; text-decoration: none; }
.sb-annual-day.is-empty { background: transparent; }
.sb-annual-day.is-busy { color: var(--sb-ink); font-weight: 700; }
.sb-annual-day:hover, .sb-annual-day:focus-visible { outline: 2px solid var(--sb-brand); outline-offset: 1px; z-index: 1; }
.sb-occupancy-row { display: grid; grid-template-columns: 40px minmax(60px,1fr) 32px; align-items: center; gap: 6px; font-size: 9px; }
.sb-occupancy-row div { height: 5px; background: var(--sb-line-2); border-radius: 99px; overflow: hidden; }
.sb-occupancy-row i { display: block; height: 100%; background: var(--sb-brand); border-radius: inherit; }
.sb-status-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 4px; border-radius: 5px; background: var(--sb-line-2); scrollbar-width: thin; }
.sb-status-tab { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 9px 12px; border: 1px solid transparent; border-radius: 4px; color: var(--sb-muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
.sb-status-tab b { color: var(--sb-ink-2); font-variant-numeric: tabular-nums; }
.sb-status-tab.is-active { color: var(--sb-ink); background: var(--sb-surface); border-color: var(--sb-line); box-shadow: 0 1px 2px rgb(16 24 40 / .05); }
.sb-status-tab.is-active b { color: var(--sb-brand); }
.sb-dot { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; vertical-align: 1px; }
.sb-panel-tab { position:relative; display:inline-flex; align-items:center; height:40px; margin-right:24px; padding:0 2px; color:#8b99bb; font-size:13px; font-weight:600; white-space:nowrap; transition:color .16s ease; }
.sb-panel-tab:hover { color:#dfe5f3; }
.sb-panel-tab::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:2px; background:var(--sb-brand); transform:scaleX(0); transform-origin:left; transition:transform .22s cubic-bezier(.4,0,.2,1); }
.sb-panel-tab.is-active { color:#fff; }
.sb-panel-tab.is-active::after { transform:scaleX(1); }
.sb-proy-months { display: grid; grid-template-columns: repeat(12,minmax(34px,1fr)); align-items: end; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.sb-proy-month { display: flex; min-width: 34px; height: 145px; flex-direction: column; align-items: center; justify-content: end; gap: 4px; }
.sb-proy-bar { display: flex; width: 70%; height: 100px; flex-direction: column-reverse; justify-content: flex-start; overflow: hidden; border-radius: 5px 5px 2px 2px; background: var(--sb-line-2); }
.sb-proy-bar i { display: block; width: 100%; }
.sb-proy-bar .is-zlive { background: var(--sb-brand); }
.sb-proy-bar .is-rentas { background: var(--sb-iris); }
.sb-proy-month > span { color: var(--sb-muted); font-size: 9px; text-transform: uppercase; }
.sb-proy-month > small { max-width: 70px; overflow: hidden; color: var(--sb-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767px) { .sb-proy-months { grid-template-columns: repeat(12,56px); } }
.sb-modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgb(11 17 32 / .58); backdrop-filter: blur(2px); }
.sb-modal-backdrop.hidden { display: none; }
.sb-modal { width: min(100%,520px); max-height: min(90dvh,760px); overflow: auto; box-shadow: var(--sb-shadow-pop); }

/* Estado de captura: el porcentaje y la siguiente acción deben leerse sin depender del gráfico. */
.sb-capture-card { align-self: start; }
.sb-capture-target { padding: 5px 8px; border-radius: 5px; color: var(--sb-brand); background: var(--sb-brand-50); font-size: 10px; font-weight: 800; white-space: nowrap; }
.sb-capture-score { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sb-capture-percent { display: block; color: var(--sb-ink); font-size: 34px; font-weight: 800; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.sb-capture-of { display: block; margin-top: 4px; color: var(--sb-muted); font-size: 10px; }
.sb-capture-status { max-width: 142px; padding: 7px 9px; border-radius: 5px; color: var(--sb-warn-ink); background: var(--sb-warn-50); font-size: 10px; font-weight: 700; line-height: 1.4; text-align: right; }
.sb-capture-status.is-ready { color: var(--sb-ok-ink); background: var(--sb-ok-50); }
.sb-capture-status.is-start { color: var(--sb-bad-ink); background: var(--sb-bad-50); }
.sb-capture-progress-label { display: flex; justify-content: space-between; gap: 8px; margin-top: 18px; color: var(--sb-muted); font-size: 10px; }
.sb-capture-progress-label strong { color: var(--sb-ink-2); font-variant-numeric: tabular-nums; }
.sb-capture-track { height: 7px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: var(--sb-line-2); }
.sb-capture-track > i { display: block; height: 100%; border-radius: inherit; transition: width .2s ease; }
.sb-capture-missing { margin-top: 20px; }
.sb-capture-missing-title { color: var(--sb-ink); font-size: 11px; font-weight: 800; }
.sb-capture-list { display: grid; gap: 9px; margin-top: 10px; }
.sb-capture-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--sb-ink-2); font-size: 10px; line-height: 1.35; }
.sb-capture-list li a { color: var(--sb-brand); font-weight: 600; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 2px; }
.sb-capture-list li a:hover { text-decoration-color: currentColor; }
.sb-capture-list li span { flex: none; color: var(--sb-muted); font-size: 9px; }
.sb-capture-list .sb-capture-complete { color: var(--sb-ok-ink); }
.sb-capture-hold { margin-top: 18px; padding: 11px; border: 1px solid var(--sb-line); border-radius: 6px; background: var(--sb-canvas); }
.sb-capture-hold.is-warning { border-color: color-mix(in srgb, var(--sb-warn) 24%, transparent); background: var(--sb-warn-50); }
.sb-capture-hold.is-expired { border-color: color-mix(in srgb, var(--sb-bad) 24%, transparent); background: var(--sb-bad-50); }
.sb-capture-hold-title { color: var(--sb-ink-2); font-size: 10px; font-weight: 800; }
.sb-capture-hold-text { margin-top: 4px; color: var(--sb-ink-2); font-size: 10px; line-height: 1.5; }

/* Conversación y editor colaborativo de la ficha de evento. */
.sb-collab-card { overflow: visible; }
.sb-collab-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--sb-line); }
.sb-collab-head .sb-section-title { margin-top: 2px; }
.sb-conversation-list { display: grid; gap: 10px; max-height: 380px; overflow: auto; padding: 14px 18px; }
.sb-conversation-empty { display: grid; justify-items: center; gap: 5px; padding: 18px 12px; color: var(--sb-muted); text-align: center; }
.sb-conversation-empty > span { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 3px; border-radius: 7px; background: var(--sb-brand-50); color: var(--sb-brand); font-size: 20px; }
.sb-conversation-empty b { color: var(--sb-ink-2); font-size: 12px; }
.sb-conversation-empty p { margin: 0; font-size: 11px; }
.sb-comment { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 11px 12px; border-left: 3px solid var(--sb-line); border-radius: 0 6px 6px 0; background: var(--sb-canvas); }
.sb-comment.is-internal { border-left-color: var(--sb-warn); background: var(--sb-warn-50); }
.sb-comment-avatar { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 6px; color: var(--sb-brand); background: var(--sb-brand-50); font-size: 10px; font-weight: 800; }
.sb-comment-body { flex: 1; min-width: 0; }
.sb-comment-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--sb-ink-2); font-size: 10px; }
.sb-comment-meta > div { display: flex; align-items: center; gap: 7px; min-width: 0; }
.sb-comment-meta b { color: var(--sb-ink); font-size: 11px; }
.sb-comment-role { color: var(--sb-muted); }
.sb-comment-meta time { flex: none; color: var(--sb-muted); }
.sb-comment-text { margin-top: 6px; color: var(--sb-ink); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.sb-comment-text p { margin: 0 0 5px; }
.sb-comment-text p:last-child { margin-bottom: 0; }
.sb-comment-text ul, .sb-comment-text ol { margin: 5px 0; padding-left: 21px; }
.sb-internal-badge { padding: 3px 6px; border-radius: 4px; color: var(--sb-warn-ink); background: var(--sb-warn-50); font-size: 9px; font-weight: 800; }
.sb-comment-actions { display: flex; gap: 12px; margin-top: 6px; }
.sb-comment-actions button { padding: 0; border: 0; background: none; color: var(--sb-muted); font-size: 10px; cursor: pointer; }
.sb-comment-actions button:hover, .sb-comment-actions button.is-active { color: var(--sb-brand); }
.sb-composer { position: relative; margin: 0 18px 18px; border: 1px solid var(--sb-line); border-radius: 5px; background: var(--sb-surface); }
.sb-editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; min-height: 40px; padding: 4px 8px; border-bottom: 1px solid var(--sb-line); background: var(--sb-canvas); }
.sb-editor-toolbar button { display: grid; place-items: center; min-width: 29px; height: 28px; padding: 0 6px; border: 0; border-radius: 4px; color: var(--sb-ink-2); background: transparent; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.sb-editor-toolbar button:hover, .sb-editor-toolbar button:focus-visible { color: var(--sb-brand); background: var(--sb-brand-50); }
.sb-toolbar-divider { width: 1px; height: 18px; margin: 0 4px; background: var(--sb-line); }
.sb-rich-editor { min-height: 112px; max-height: 360px; overflow: auto; padding: 12px 13px; outline: none; color: var(--sb-ink); font-size: 13px; line-height: 1.55; }
.sb-rich-editor:empty::before { content: attr(data-placeholder); color: var(--sb-muted); font-style: italic; pointer-events: none; }
.sb-composer.is-expanded .sb-rich-editor { min-height: 230px; }
.sb-rich-editor p { margin: 0 0 6px; }
.sb-rich-editor ul, .sb-rich-editor ol { padding-left: 22px; }
.sb-composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px; border-top: 1px solid var(--sb-line); }
.sb-composer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.sb-mention-at { color: var(--sb-brand); font-weight: 800; }
.sb-note-toggle { display: inline-flex; align-items: center; gap: 7px; color: var(--sb-ink-2); font-size: 12px; white-space: nowrap; cursor: pointer; }
.sb-note-toggle .sb-check { width: 17px; height: 17px; }
.sb-quick-wrap { position: relative; }
.sb-quick-menu, .sb-mention-suggestions { position: absolute; z-index: 20; display: grid; min-width: 220px; padding: 5px; border: 1px solid var(--sb-line); border-radius: 6px; background: var(--sb-surface); box-shadow: var(--sb-shadow-pop); }
.sb-quick-menu { bottom: calc(100% + 6px); left: 0; }
.sb-quick-menu.hidden, .sb-mention-suggestions.hidden { display: none; }
.sb-quick-menu button { padding: 9px 10px; border: 0; border-radius: 4px; color: var(--sb-ink-2); background: transparent; font: inherit; font-size: 11px; text-align: left; cursor: pointer; }
.sb-quick-menu button:hover { color: var(--sb-brand); background: var(--sb-brand-50); }
.sb-mention-suggestions { right: 9px; bottom: 57px; }
.sb-mention-suggestions button { display: flex; align-items: center; gap: 8px; padding: 6px; border: 0; border-radius: 4px; color: var(--sb-ink); background: transparent; font: inherit; font-size: 11px; text-align: left; cursor: pointer; }
.sb-mention-suggestions button:hover { background: var(--sb-brand-50); }
@media (max-width: 560px) {
  .sb-collab-head { align-items: flex-start; padding: 13px; }
  .sb-conversation-list { padding: 12px; }
  .sb-composer { margin: 0 12px 12px; }
  .sb-composer-actions { align-items: stretch; flex-direction: column; }
  .sb-composer-actions > .sb-btn { width: 100%; }
  .sb-composer-tools { gap: 5px; }
}

/* Agenda operativa: vistas de calendario, franjas horarias y recursos */
.sb-agenda-shell { border-radius: 8px; }
.sb-agenda-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px; border-bottom:1px solid var(--sb-line); background:var(--sb-surface); }
.sb-agenda-period { min-width:180px; margin-left:7px; color:var(--sb-ink); font-size:16px; font-weight:800; text-transform:capitalize; }
.sb-agenda-count { color:var(--sb-muted); font-size:11px; }
.sb-agenda-spacer { flex:1; }
.sb-agenda-filter { display:flex; align-items:center; gap:6px; color:var(--sb-muted); font-size:10px; font-weight:700; }
.sb-agenda-filter .sb-field { min-height:34px; padding:0 27px 0 9px; font-size:11px; }
.sb-agenda-views { display:flex; flex-wrap:wrap; gap:2px; padding:3px; border:1px solid var(--sb-line); border-radius:5px; background:var(--sb-canvas); }
.sb-agenda-views button { min-height:30px; padding:0 10px; border:0; border-radius:3px; color:var(--sb-muted); background:transparent; font:inherit; font-size:11px; font-weight:700; cursor:pointer; }
.sb-agenda-views button:hover,.sb-agenda-views button.is-active { color:var(--sb-brand); background:var(--sb-surface); box-shadow:0 1px 3px #10182818; }
.sb-agenda-layout { display:grid; grid-template-columns:218px minmax(0,1fr); min-height:660px; }
.sb-agenda-aside { padding:14px 12px; border-right:1px solid var(--sb-line); background:var(--sb-canvas); }
.sb-mini-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; color:var(--sb-ink); font-size:12px; text-transform:capitalize; }
.sb-mini-head button { width:26px; height:26px; border:1px solid var(--sb-line); border-radius:4px; color:var(--sb-ink-2); background:var(--sb-surface); font-size:18px; line-height:1; cursor:pointer; }
.sb-mini-week,.sb-mini-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); text-align:center; }
.sb-mini-week { margin-bottom:4px; color:var(--sb-muted); font-size:9px; font-weight:800; }
.sb-mini-day { position:relative; width:27px; height:27px; justify-self:center; border:0; border-radius:4px; color:var(--sb-ink-2); background:transparent; font:inherit; font-size:10px; cursor:pointer; }
.sb-mini-day:hover { background:var(--sb-brand-50); }.sb-mini-day.is-outside { color:var(--sb-muted); opacity:.5; }.sb-mini-day.is-selected { color:white; background:var(--sb-brand); }.sb-mini-day.has-items:not(.is-selected):after { position:absolute; bottom:2px; left:50%; width:4px; height:4px; border-radius:50%; background:var(--sb-brand); content:""; transform:translateX(-50%); }
.sb-agenda-key { display:grid; gap:10px; margin-top:20px; padding-top:13px; border-top:1px solid var(--sb-line); color:var(--sb-ink-2); font-size:10px; }.sb-agenda-key span { display:flex; align-items:center; gap:7px; }.sb-agenda-key i { width:8px; height:8px; border-radius:2px; background:#1d5f98; }.sb-agenda-key i.is-range { background:#d68a16; }.sb-agenda-key p { margin:2px 0 0; color:var(--sb-muted); line-height:1.55; }
.sb-agenda-classifiers-head { display:flex; align-items:center; justify-content:space-between; gap:6px; color:var(--sb-ink); font-size:10px; }.sb-agenda-classifiers-head button { border:0; padding:2px 0; color:var(--sb-brand); background:none; font:inherit; font-size:9px; cursor:pointer; }.sb-agenda-classifiers { display:grid; gap:5px; }.sb-agenda-classifier { display:flex; align-items:center; gap:7px; min-width:0; width:100%; padding:5px 7px; border:1px solid color-mix(in srgb,var(--classifier-tone) 35%,var(--sb-line)); border-radius:4px; color:var(--sb-ink-2); background:color-mix(in srgb,var(--classifier-tone) 9%,var(--sb-surface)); font:inherit; font-size:9px; text-align:left; cursor:pointer; transition:opacity .14s ease,background .14s ease; }.sb-agenda-classifier:hover { background:color-mix(in srgb,var(--classifier-tone) 16%,var(--sb-surface)); }.sb-agenda-classifier.is-off { opacity:.42; background:var(--sb-surface); }.sb-agenda-classifier i { flex:none; width:8px; height:8px; border-radius:2px; background:var(--classifier-tone); }.sb-agenda-classifier span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.sb-agenda-range-key { margin-top:4px; }
.sb-agenda-stage { min-width:0; overflow:auto; background:var(--sb-surface); }.sb-agenda-canvas { min-width:0; min-height:100%; }
.sb-agenda-month-head,.sb-agenda-month-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }.sb-agenda-month-head { position:sticky; top:0; z-index:2; border-bottom:1px solid var(--sb-line); background:var(--sb-surface); }.sb-agenda-month-head span { padding:10px 7px; color:var(--sb-muted); font-size:10px; font-weight:800; text-align:center; text-transform:uppercase; }
.sb-agenda-month-day { position:relative; min-width:0; min-height:128px; padding:6px; border-right:1px solid var(--sb-line); border-bottom:1px solid var(--sb-line); }.sb-agenda-month-day:nth-child(7n) { border-right:0; }.sb-agenda-month-day.is-outside { background:var(--sb-canvas); }.sb-agenda-month-day.is-today { background:color-mix(in srgb,var(--sb-brand-50) 35%,var(--sb-surface)); }
.sb-agenda-date { display:flex; align-items:center; justify-content:space-between; width:100%; padding:0 2px 5px; border:0; color:var(--sb-ink-2); background:none; text-align:left; cursor:pointer; }.sb-agenda-date b { display:grid; place-items:center; width:23px; height:23px; border-radius:4px; font-size:11px; }.is-today .sb-agenda-date b { color:white; background:var(--sb-brand); }.sb-agenda-date small { color:var(--sb-muted); font-size:8px; }.sb-agenda-day-items { display:grid; gap:3px; }
.sb-agenda-event { display:grid; grid-template-columns:7px minmax(0,1fr); column-gap:5px; position:relative; padding:4px 5px; border:1px solid var(--sb-line); border-left:3px solid var(--sb-brand); border-radius:4px; color:var(--sb-ink); background:var(--sb-surface); text-decoration:none; line-height:1.25; }.sb-agenda-event:hover { border-color:var(--sb-brand); background:var(--sb-brand-50); }.sb-agenda-event-dot { grid-row:1/4; align-self:start; width:6px; height:6px; margin-top:3px; border-radius:50%; background:var(--sb-brand); }.sb-agenda-event-title { overflow:hidden; color:var(--sb-brand); font-size:9px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }.sb-agenda-event-meta,.sb-agenda-event-time { overflow:hidden; color:var(--sb-muted); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }.sb-agenda-event-time { grid-column:2; }
.sb-agenda-event[style*="--agenda-tone"] { border-color:color-mix(in srgb,var(--agenda-tone) 35%,transparent); border-left:3px solid var(--agenda-tone); color:var(--agenda-ink); background:var(--agenda-bg); }.sb-agenda-event[style*="--agenda-tone"]:hover { border-color:var(--agenda-tone); filter:brightness(.98); }.sb-agenda-event[style*="--agenda-tone"] .sb-agenda-event-dot { background:var(--agenda-tone); }.sb-agenda-event[style*="--agenda-tone"] .sb-agenda-event-title { color:var(--agenda-ink); }.sb-agenda-event[style*="--agenda-tone"] .sb-agenda-event-meta,.sb-agenda-event[style*="--agenda-tone"] .sb-agenda-event-time { color:color-mix(in srgb,var(--agenda-ink) 78%,transparent); }.sb-agenda-event.is-undefined { border-style:dashed; }
.sb-agenda-day-view { padding:18px; }.sb-agenda-view-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--sb-line); }.sb-agenda-view-heading>div>span { color:var(--sb-brand); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.sb-agenda-view-heading h3 { margin:3px 0 0; color:var(--sb-ink); font-size:17px; font-weight:800; text-transform:capitalize; }.sb-agenda-view-heading>b { color:var(--sb-muted); font-size:10px; white-space:nowrap; }.sb-agenda-detail-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr)); gap:10px; }.sb-agenda-detail-event { display:grid; align-content:start; gap:8px; min-width:0; padding:12px; border:1px solid color-mix(in srgb,var(--agenda-tone) 35%,transparent); border-left:4px solid var(--agenda-tone); border-radius:5px; color:var(--agenda-ink); background:var(--agenda-bg); text-decoration:none; }.sb-agenda-detail-event:hover { border-color:var(--agenda-tone); filter:brightness(.98); }.sb-agenda-detail-event.is-undefined { border-style:dashed; }.sb-agenda-detail-event>header { display:flex; align-items:center; justify-content:space-between; gap:8px; }.sb-agenda-detail-status { width:fit-content; padding:3px 6px; border:1px solid color-mix(in srgb,var(--agenda-ink) 28%,transparent); border-radius:3px; font-size:9px; font-weight:800; }.sb-agenda-detail-hold { font-size:9px; font-weight:700; }.sb-agenda-detail-event h3 { overflow:hidden; margin:0; font-size:14px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }.sb-agenda-detail-venue { overflow:hidden; font-size:10px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }.sb-agenda-detail-venue span { font-weight:500; }.sb-agenda-detail-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 10px; padding-top:8px; border-top:1px solid color-mix(in srgb,var(--agenda-ink) 20%,transparent); }.sb-agenda-detail-meta span { overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.sb-agenda-detail-meta b { display:block; margin-bottom:2px; color:color-mix(in srgb,var(--agenda-ink) 70%,transparent); font-size:8px; font-weight:600; text-transform:uppercase; }.sb-agenda-detail-event>footer { display:flex; justify-content:space-between; gap:8px; padding-top:6px; border-top:1px solid color-mix(in srgb,var(--agenda-ink) 20%,transparent); font-size:9px; font-weight:700; }.sb-agenda-day-ranges { margin-top:18px; }.sb-agenda-day-ranges h4 { margin:0 0 8px; color:var(--sb-ink); font-size:11px; }.sb-agenda-day-ranges>div { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px; }.sb-agenda-day-ranges .sb-agenda-range { min-height:58px; }.sb-agenda-week-view { display:grid; grid-template-columns:repeat(7,minmax(175px,1fr)); min-width:1225px; min-height:660px; }.sb-agenda-week-day { display:flex; min-width:0; flex-direction:column; border-right:1px solid var(--sb-line); }.sb-agenda-week-day:last-child { border-right:0; }.sb-agenda-week-day.is-today { background:color-mix(in srgb,var(--sb-brand-50) 28%,var(--sb-surface)); }.sb-agenda-week-day>header { display:grid; justify-items:center; gap:2px; padding:11px 4px; border-bottom:1px solid var(--sb-line); color:var(--sb-ink-2); text-transform:capitalize; }.sb-agenda-week-day>header span { font-size:9px; font-weight:800; }.sb-agenda-week-day>header b { font-size:13px; }.sb-agenda-week-day>header small { color:var(--sb-muted); font-size:8px; }.sb-agenda-week-items { display:grid; align-content:start; gap:7px; padding:7px; }.sb-agenda-week-items .sb-agenda-detail-event { gap:6px; padding:8px; }.sb-agenda-week-items .sb-agenda-detail-event h3 { font-size:11px; }.sb-agenda-week-items .sb-agenda-detail-meta { gap:6px; }.sb-agenda-week-items .sb-agenda-detail-meta span { font-size:8px; }.sb-agenda-week-items .sb-agenda-detail-meta b { font-size:7px; }.sb-agenda-week-add { margin:auto 7px 8px; padding:6px; border:1px dashed var(--sb-line); border-radius:4px; color:var(--sb-brand); background:transparent; font:inherit; font-size:9px; cursor:pointer; }
.sb-agenda-range { display:grid; width:100%; gap:2px; padding:4px 5px; border:1px solid #f0dfbd; border-left:3px solid #d68a16; border-radius:4px; color:#81530a; background:#fff8e8; text-align:left; cursor:pointer; }.sb-agenda-range b { overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.sb-agenda-range small,.sb-agenda-range-time { overflow:hidden; color:#936416; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }.sb-agenda-more { display:block; padding:2px 4px; color:var(--sb-brand); font-size:9px; font-weight:800; }.sb-agenda-add-day { position:absolute; top:6px; right:6px; display:none; width:20px; height:20px; border:1px solid var(--sb-line); border-radius:4px; color:var(--sb-brand); background:var(--sb-surface); cursor:pointer; }.sb-agenda-month-day:hover .sb-agenda-add-day { display:block; }
.sb-agenda-footer { display:flex; justify-content:space-between; gap:12px; padding:9px 13px; border-top:1px solid var(--sb-line); color:var(--sb-muted); font-size:10px; }
.sb-timeline { min-width:620px; }.sb-timeline-head,.sb-timeline-allday,.sb-timeline-body { display:grid; grid-template-columns:68px repeat(var(--days,7),minmax(100px,1fr)); }.sb-timeline-head { position:sticky; top:0; z-index:3; border-bottom:1px solid var(--sb-line); background:var(--sb-surface); }.sb-timeline-head:has(.sb-timeline-day-head:only-child),.sb-timeline-allday:has(.sb-timeline-allday-cell:only-child),.sb-timeline-body:has(.sb-timeline-column:only-child) { --days:1; }.sb-timeline-head:not(:has(.sb-timeline-day-head:only-child)),.sb-timeline-allday:not(:has(.sb-timeline-allday-cell:only-child)),.sb-timeline-body:not(:has(.sb-timeline-column:only-child)) { --days:7; }.sb-timeline-time-head { padding:10px 6px; color:var(--sb-muted); font-size:9px; text-align:center; }.sb-timeline-day-head { display:grid; justify-items:center; gap:2px; padding:9px 4px; border-left:1px solid var(--sb-line); color:var(--sb-ink-2); font-size:10px; text-transform:capitalize; }.sb-timeline-day-head span { color:var(--sb-muted); }.sb-timeline-day-head.is-today b { color:var(--sb-brand); }
.sb-timeline-head,.sb-timeline-allday,.sb-timeline-body { --days:inherit !important; }
.sb-timeline-allday { border-bottom:1px solid var(--sb-line); background:var(--sb-canvas); }.sb-timeline-allday-cell { display:grid; align-content:start; gap:3px; min-height:44px; padding:4px; border-left:1px solid var(--sb-line); }.sb-timeline-allday-cell .sb-agenda-event { grid-template-columns:7px minmax(0,1fr); }.sb-timeline-allday-cell .sb-agenda-event-meta,.sb-timeline-allday-cell .sb-agenda-event-time { display:none; }
.sb-timeline-body { min-height:1080px; }.sb-timeline-hours { display:grid; grid-template-rows:repeat(18,60px); color:var(--sb-muted); font-size:9px; text-align:center; }.sb-timeline-hours div { padding-top:3px; border-bottom:1px solid var(--sb-line); }.sb-timeline-columns { grid-column:2/-1; display:grid; grid-template-columns:repeat(var(--days,7),minmax(100px,1fr)); }.sb-timeline-column { position:relative; display:grid; grid-template-rows:repeat(18,60px); border-left:1px solid var(--sb-line); cursor:crosshair; }.sb-timeline-column > i { border-bottom:1px solid var(--sb-line); pointer-events:none; }.sb-timeline-range { position:absolute; z-index:1; right:3px; left:3px; display:grid; align-content:start; gap:3px; overflow:hidden; padding:5px; border:1px solid #f0dfbd; border-left:3px solid #d68a16; border-radius:4px; color:#81530a; background:#fff8e8; text-align:left; cursor:pointer; }.sb-timeline-range small,.sb-timeline-range span { overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.sb-timeline-range b { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.sb-agenda-list { padding:8px 16px; }.sb-agenda-list-day { padding:10px 0; border-bottom:1px solid var(--sb-line); }.sb-agenda-list-day header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; color:var(--sb-ink); font-size:12px; text-transform:capitalize; }.sb-agenda-list-day header button,.sb-resource-grid section>button { border:0; color:var(--sb-brand); background:none; font:inherit; font-size:10px; font-weight:700; cursor:pointer; }.sb-agenda-list-event,.sb-agenda-list-range { max-width:600px; margin:5px 0 5px 15px; }.sb-agenda-list-event .sb-agenda-event { grid-template-columns:8px minmax(0,1fr) auto; align-items:center; padding:8px; }.sb-agenda-list-event .sb-agenda-event-dot { grid-row:1/3; }.sb-agenda-list-event .sb-agenda-event-time { grid-column:3; grid-row:1/3; }.sb-agenda-list-event .sb-agenda-event-meta { grid-column:2; }.sb-agenda-list-range .sb-agenda-range { display:grid; grid-template-columns:105px minmax(0,1fr) auto; align-items:center; padding:8px; }.sb-agenda-list-range .sb-agenda-range small { grid-column:3; }.sb-agenda-empty { display:grid; place-content:center; justify-items:center; gap:6px; min-height:400px; color:var(--sb-muted); font-size:12px; }.sb-agenda-empty b { color:var(--sb-ink); font-size:14px; }
.sb-resource-view { padding:16px; }.sb-resource-date { display:flex; justify-content:space-between; margin-bottom:12px; color:var(--sb-ink); font-size:12px; text-transform:capitalize; }.sb-resource-date span { color:var(--sb-muted); font-size:10px; }.sb-resource-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }.sb-resource-grid section { border:1px solid var(--sb-line); border-radius:5px; }.sb-resource-grid section header { display:grid; gap:2px; padding:10px; border-bottom:1px solid var(--sb-line); background:var(--sb-canvas); }.sb-resource-grid section header b { font-size:11px; }.sb-resource-grid section header span,.sb-resource-free { color:var(--sb-muted); font-size:9px; }.sb-resource-grid section>div { display:grid; align-content:start; gap:5px; min-height:120px; padding:8px; }.sb-resource-grid section>button { padding:7px; border-top:1px solid var(--sb-line); width:100%; text-align:left; }
.sb-agenda-year { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:12px; }.sb-agenda-year-month { padding:8px; border:1px solid var(--sb-line); border-radius:5px; }.sb-agenda-year-month>button { margin-bottom:6px; border:0; color:var(--sb-ink); background:none; font:inherit; font-size:11px; font-weight:800; text-transform:capitalize; cursor:pointer; }.sb-agenda-year-dow,.sb-agenda-year-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); text-align:center; }.sb-agenda-year-dow { color:var(--sb-muted); font-size:8px; }.sb-agenda-year-grid button,.sb-agenda-year-grid i { display:grid; place-items:center; min-height:24px; border:0; border-radius:3px; color:var(--sb-ink-2); background:transparent; font:inherit; font-size:9px; cursor:pointer; }.sb-agenda-year-grid button.has-items { color:var(--sb-brand); background:var(--sb-brand-50); font-weight:800; }.sb-agenda-year-grid button.is-selected { color:white; background:var(--sb-brand); }
.sb-range-dialog { position:fixed; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:min(520px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); overflow:auto; margin:0; padding:0; border:1px solid var(--sb-line); border-radius:7px; color:var(--sb-ink); background:var(--sb-surface); box-shadow:0 20px 60px #0b173333; }.sb-range-dialog::backdrop { background:#0b173388; backdrop-filter:blur(2px); }.sb-range-dialog form { display:grid; gap:13px; padding:17px; }.sb-range-dialog-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:11px; border-bottom:1px solid var(--sb-line); }.sb-range-dialog-head h2 { margin-top:3px; font-size:16px; font-weight:800; }.sb-range-dialog form>label,.sb-range-grid label { display:grid; gap:5px; color:var(--sb-ink-2); font-size:10px; font-weight:700; }.sb-range-dialog .sb-field { width:100%; min-height:37px; font-size:11px; }.sb-range-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.sb-range-dialog-actions { display:flex; justify-content:flex-end; gap:7px; padding-top:9px; border-top:1px solid var(--sb-line); }
@media(max-width:1000px) { .sb-agenda-layout { grid-template-columns:185px minmax(0,1fr); }.sb-agenda-toolbar { gap:6px; }.sb-agenda-filter { font-size:0; }.sb-agenda-year { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:900px) { .sb-agenda-layout { grid-template-columns:minmax(0,1fr); }.sb-agenda-aside { display:none; }.sb-agenda-period,.sb-mini-head b { white-space:nowrap; } }
@media(max-width:700px) { .sb-agenda-layout { grid-template-columns:minmax(0,1fr); }.sb-agenda-aside { display:none; }.sb-agenda-views { order:4; width:100%; overflow:auto; }.sb-agenda-views button { flex:1; padding:0 8px; }.sb-agenda-period { min-width:0; flex:1; font-size:14px; }.sb-agenda-filter { flex:1; font-size:10px; }.sb-agenda-filter .sb-field { min-width:0; flex:1; }.sb-agenda-month-day { min-height:90px; padding:3px; }.sb-agenda-month-head span { padding:7px 2px; font-size:8px; }.sb-agenda-event { padding:3px; }.sb-agenda-event-title { font-size:8px; }.sb-agenda-event-meta,.sb-agenda-event-time { display:none; }.sb-agenda-range { padding:3px; }.sb-agenda-range b { font-size:8px; }.sb-agenda-month-day .sb-agenda-day-items { max-height:70px; overflow:hidden; }.sb-agenda-add-day { display:block; top:auto; right:4px; bottom:4px; }.sb-agenda-year { grid-template-columns:repeat(2,minmax(0,1fr)); }.sb-agenda-footer { flex-direction:column; gap:3px; } }

/* Plantillas de marca en la pantalla Apariencia. */
.sb-appearance-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.sb-appearance-option { display:block; padding:0; overflow:hidden; border:1px solid var(--sb-line); border-radius:7px; background:var(--sb-surface); color:var(--sb-ink); text-align:left; cursor:pointer; transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease; }
.sb-appearance-option:hover { transform:translateY(-2px); border-color:var(--sb-muted); }
.sb-appearance-option.is-active { border:2px solid var(--sb-brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--sb-brand) 12%,transparent); }
.sb-appearance-preview { position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; height:132px; padding:20px; overflow:hidden; }
.sb-appearance-preview.is-zignia { background:#f5f5f5; }
.sb-appearance-preview.is-superboletos { background:#17223b; }
.sb-appearance-preview>img { position:relative; z-index:1; width:142px; max-height:36px; object-fit:contain; }
.sb-appearance-preview.is-superboletos>img { filter:none; }
.sb-appearance-preview-button { position:relative; z-index:1; padding:9px 12px; border-radius:4px; color:#fff; background:var(--sb-brand); font-size:10px; font-weight:700; white-space:nowrap; }
.sb-appearance-preview-nav { position:absolute; right:0; bottom:0; left:0; height:20px; border-top:1px solid rgb(128 128 128 / .18); background:rgb(255 255 255 / .7); }
.sb-appearance-preview.is-superboletos .sb-appearance-preview-nav { border-color:rgb(255 255 255 / .1); background:#111b2e; }
.sb-appearance-preview.is-zignia .sb-appearance-preview-button { background:#b80f24; }
.sb-appearance-preview.is-superboletos .sb-appearance-preview-button { background:#04598f; }
.sb-appearance-option-copy { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 16px; }
.sb-appearance-option-copy>span { display:grid; gap:4px; }.sb-appearance-option-copy b { font-size:14px; }.sb-appearance-option-copy small { color:var(--sb-muted); font-size:11px; }
.sb-appearance-swatch { flex:none; width:32px; height:32px; border:5px solid var(--sb-line-2); border-radius:50%; background:#b80f24; box-shadow:0 0 0 1px var(--sb-line); }
.sb-appearance-swatch.is-superboletos { background:#04598f; }
.sb-appearance-note { display:grid; gap:3px; padding:13px 15px; border-left:3px solid var(--sb-brand); border-radius:4px; background:var(--sb-brand-50); color:var(--sb-brand-ink); font-size:11px; }
.sb-appearance-note span { color:var(--sb-ink-2); }
@media(max-width:700px) { .sb-appearance-options { grid-template-columns:1fr; } .sb-appearance-preview { height:112px; padding:15px; } .sb-appearance-preview>img { width:120px; } }
html[data-brand="superboletos"] .sb-login-mobile-logo { filter:brightness(0); }