/* =============================================================================
   Componentes de interfaz de Sabora (botones, campos, desplegables, pestañas,
   menú, diálogos y avisos). Son los estilos de los componentes propios que
   sustituyeron a Radzen; el diseño sigue el de /preinscripciones.
   ============================================================================= */

/* --------------------------------------------------------------- Botones --- */
.sb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-family: var(--sb-font);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.sb-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sb-btn--sm { padding: 6px 12px; font-size: 0.78rem; }

.sb-btn--primary { background: var(--sb-brand); color: var(--sb-neutral-0); }
.sb-btn--primary:hover:not(:disabled) { background: var(--sb-brand-hover); }

.sb-btn--secondary { background: var(--sb-neutral-850); color: var(--sb-neutral-0); }
.sb-btn--secondary:hover:not(:disabled) { background: var(--sb-neutral-900); }

.sb-btn--light, .sb-btn--base { background: var(--sb-neutral-100); color: var(--sb-neutral-600); border-color: var(--sb-neutral-200); }
.sb-btn--light:hover:not(:disabled), .sb-btn--base:hover:not(:disabled) { background: var(--sb-neutral-200); }

.sb-btn--success { background: var(--sb-green-50); color: var(--sb-green-700); border-color: var(--sb-green-200); }
.sb-btn--success:hover:not(:disabled) { background: var(--sb-green-100); }

.sb-btn--danger { background: var(--sb-red-50); color: var(--sb-red-700); border-color: var(--sb-red-200); }
.sb-btn--danger:hover:not(:disabled) { background: var(--sb-red-100); }

.sb-btn--warning { background: var(--sb-amber-50); color: var(--sb-amber-700); border-color: var(--sb-amber-200); }
.sb-btn--info { background: var(--sb-blue-50); color: var(--sb-blue-700); border-color: var(--sb-blue-200); }
.sb-btn--dark { background: var(--sb-neutral-900); color: var(--sb-neutral-0); }

/* ------------------------------------------------------- Campos de texto --- */
.sb-input {
    width: 100%;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--sb-neutral-200);
    background: var(--sb-neutral-0);
    color: var(--sb-neutral-900);
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.sb-input:focus { border-color: var(--sb-brand); box-shadow: 0 0 0 3px rgba(200, 40, 0, 0.12); }
.sb-input:disabled { background: var(--sb-neutral-50); color: var(--sb-neutral-400); }

/* Variante compacta: para campos que van dentro de una fila de tabla o de una
   barra de ajustes, donde el alto normal rompe el ritmo vertical. */
.sb-input--sm {
    padding: var(--sb-space-1) var(--sb-space-2);
    font-size: var(--sb-text-sm);
    border-radius: var(--sb-radius-sm);
    width: auto;
    min-width: 7.5rem;
}

.sb-textarea { resize: vertical; min-height: 70px; }

.sb-checkbox { width: 18px; height: 18px; accent-color: var(--sb-brand); cursor: pointer; }

.sb-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--sb-neutral-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.sb-field { display: block; margin-bottom: 4px; padding-top: 6px; position: relative; }
.sb-field-control { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; }
.sb-field-control > :first-child { flex: 1 1 auto; min-width: 0; }
.sb-field-helper { margin-top: 4px; font-size: 0.75rem; color: var(--sb-neutral-400); }

/* La etiqueta descansa dentro del campo… */
.sb-field-label,
.sb-float {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    max-width: calc(100% - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 5px;
    background: var(--sb-neutral-0);
    border-radius: 4px;
    color: var(--sb-neutral-400);
    font-family: var(--sb-font);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    pointer-events: none;
    transition: top 0.16s ease, font-size 0.16s ease, color 0.16s ease, font-weight 0.16s ease;
    z-index: var(--sb-z-raised);
}

/* …y sube arriba al enfocar o cuando ya hay contenido. */
.sb-field-control:focus-within .sb-field-label,
.sb-field-control:has(.sb-input:not(:placeholder-shown)) .sb-field-label,
.sb-field-control:has(.sb-dd.has-value) .sb-field-label,
.sb-field-control:has(.sb-date) .sb-field-label,
.sb-field-control:has(.sb-cal) .sb-field-label,
.sb-field-control:has(.sb-stepper) .sb-field-label,
.sb-input-box:focus-within .sb-float,
.sb-input-box:has(.sb-input:not(:placeholder-shown)) .sb-float {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--sb-brand);
    background: var(--sb-neutral-0) !important;
    padding: 0 6px !important;
    z-index: var(--sb-z-raised) !important;
}

.sb-field-control:not(:focus-within):has(.sb-input:not(:placeholder-shown)) .sb-field-label,
.sb-field-control:not(:focus-within):has(.sb-dd.has-value) .sb-field-label,
.sb-field-control:not(:focus-within):has(.sb-date) .sb-field-label,
.sb-field-control:not(:focus-within):has(.sb-cal) .sb-field-label,
.sb-field-control:not(:focus-within):has(.sb-stepper) .sb-field-label {
    color: var(--sb-neutral-500);
}

.sb-input-box { position: relative; display: block; width: 100%; }
.sb-float--top { top: 18px; }
.sb-input-box:focus-within .sb-float--top,
.sb-input-box:has(.sb-input:not(:placeholder-shown)) .sb-float--top { top: 0; }

/* Dentro de un campo con etiqueta manda la etiqueta, no el texto de ayuda:
   ni el nuestro ni el del desplegable, que si no se solapaban. */
.sb-field-control .sb-float { display: none; }
.sb-field-control .sb-dd-text.is-placeholder { color: transparent; }
.sb-field-control:focus-within .sb-dd-text.is-placeholder,
.sb-field-control .sb-dd.is-open .sb-dd-text.is-placeholder { color: var(--sb-neutral-400); }

/* El texto de ayuda del navegador sólo se ve con el campo enfocado, para que
   no se solape con la etiqueta en reposo. */
.sb-input::placeholder { color: transparent; }
.sb-input:focus::placeholder { color: var(--sb-neutral-300); }

/* Interruptores y casillas: la etiqueta se queda encima, no flota. */
.sb-field-control:has(.sb-switch) .sb-field-label,
.sb-field-control:has(.sb-checkbox) .sb-field-label {
    position: static;
    transform: none;
    background: none;
    padding: 0;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--sb-neutral-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sb-field-control:has(.sb-switch),
.sb-field-control:has(.sb-checkbox) { flex-direction: column-reverse; align-items: flex-start; gap: 6px; }

/* Capa invisible que cierra desplegables, filtros y menús al pinchar fuera. */
.sb-backdrop { position: fixed; inset: 0; z-index: var(--sb-z-drawer); background: transparent; }
.sb-validator { display: block; margin-top: 4px; font-size: 0.75rem; font-weight: 700; color: var(--sb-red-700); }

/* ---------------------------------------------------------- Interruptor --- */
.sb-switch {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    border: none;
    background: var(--sb-neutral-300);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}

.sb-switch.is-on { background: var(--sb-green-600); }
.sb-switch:disabled { opacity: 0.5; cursor: not-allowed; }

.sb-switch-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--sb-neutral-0);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
    transition: left 0.2s ease;
}

/* Activo: la bolita se va al final. */
.sb-switch.is-on .sb-switch-knob { left: 23px; }

/* ---------------------------------------------------------- Desplegable --- */
.sb-dd { position: relative; width: 100%; }
.sb-dd.is-open { z-index: var(--sb-z-dropdown); }

.sb-dd-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--sb-neutral-200);
    background: var(--sb-neutral-0);
    color: var(--sb-neutral-900);
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    text-align: left;
}

.sb-dd-toggle:disabled { background: var(--sb-neutral-50); color: var(--sb-neutral-400); cursor: not-allowed; }

/* Si al .sb-dd se le da una altura fija (barras de filtros), el botón la respeta. */
.sb-dd[style*="height"] .sb-dd-toggle { height: 100%; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }
.sb-dd.is-open .sb-dd-toggle { border-color: var(--sb-brand); box-shadow: 0 0 0 3px rgba(200, 40, 0, 0.12); }
.sb-dd-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-dd-text.is-placeholder { color: var(--sb-neutral-400); }
.sb-dd-clear, .sb-dd-caret { color: var(--sb-neutral-400); font-size: 0.8rem; }
.sb-dd-clear:hover { color: var(--sb-brand); }

.sb-dd-panel {
    position: absolute;
    z-index: var(--sb-z-toast);
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 100%;
    background: var(--sb-neutral-0);
    border: 1px solid var(--sb-neutral-200);
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.2), 0 4px 10px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.sb-dd-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--sb-neutral-100);
    color: var(--sb-neutral-400);
}

.sb-dd-search input { border: none; outline: none; width: 100%; font-size: 0.85rem; color: var(--sb-neutral-600); }
.sb-dd-list { max-height: 260px; overflow-y: auto; }

.sb-dd-option {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: none;
    background: none;
    text-align: left;
    font-size: 0.88rem;
    color: var(--sb-neutral-700);
    cursor: pointer;
}

.sb-dd-option:hover { background: var(--sb-neutral-50); }
.sb-dd-option.is-selected { background: var(--sb-brand-surface); color: var(--sb-brand); font-weight: 700; }
.sb-dd-empty { padding: 14px 12px; color: var(--sb-neutral-400); font-size: 0.85rem; text-align: center; }

.sb-dd-group {
    padding: 8px 12px 4px;
    font-size: 0.68rem;
    font-weight: 900;
    color: var(--sb-neutral-400);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* Sugerencias */
.sb-ac { position: relative; }
.sb-ac-panel {
    position: absolute; z-index: var(--sb-z-dropdown); top: calc(100% + 4px); left: 0; right: 0;
    background: var(--sb-neutral-0); border: 1px solid var(--sb-neutral-200); border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16); max-height: 240px; overflow-y: auto;
}
.sb-ac-option { display: block; width: 100%; padding: 9px 12px; border: none; background: none; text-align: left; cursor: pointer; font-size: 0.88rem; color: var(--sb-neutral-700); }
.sb-ac-option:hover { background: var(--sb-neutral-50); }

/* ------------------------------------------------------------- Progreso --- */
.sb-progress { width: 100%; height: 6px; border-radius: 999px; background: var(--sb-neutral-100); overflow: hidden; }
.sb-progress-value { height: 100%; background: var(--sb-brand); border-radius: 999px; transition: width 0.2s; }
.sb-progress.is-indeterminate .sb-progress-value { width: 40%; animation: sb-progress-slide 1.1s infinite ease-in-out; }

@keyframes sb-progress-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

.sb-badge {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: 0.75rem; font-weight: 800;
    background: var(--sb-neutral-100); color: var(--sb-neutral-600);
}
.sb-badge--success { background: var(--sb-green-50); color: var(--sb-green-700); }
.sb-badge--danger { background: var(--sb-red-50); color: var(--sb-red-700); }
.sb-badge--warning { background: var(--sb-amber-50); color: var(--sb-amber-700); }
.sb-badge--info { background: var(--sb-blue-50); color: var(--sb-blue-700); }

.sb-slider { width: 100%; accent-color: var(--sb-brand); }

/* ------------------------------------------------------------- Pestañas --- */
.sb-tabs-header {
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    margin-bottom: 18px;
    max-width: 100%;
    background: var(--sb-neutral-150);
    border-radius: 14px;
    overflow-x: auto;
}

.sb-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: none;
    background: none;
    border-radius: 10px;
    color: var(--sb-neutral-500);
    font-family: var(--sb-font);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.sb-tab i { font-size: 0.9rem; color: var(--sb-neutral-400); transition: color 0.15s ease; }
.sb-tab:hover { color: var(--sb-neutral-900); }

.sb-tab.is-active {
    background: var(--sb-neutral-0);
    color: var(--sb-neutral-900);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
}

.sb-tab.is-active i { color: var(--sb-brand); }
.sb-tab:disabled { opacity: 0.5; cursor: not-allowed; }
.sb-menu-item.is-current > .sb-menu-link { background: rgba(200, 40, 0, 0.9); color: var(--sb-neutral-0); }
.sb-menu.is-icons .sb-menu-text, .sb-menu.is-icons .sb-menu-arrow { display: none; }
.sb-menu.is-icons .sb-menu-link { justify-content: center; }

.sb-sidebar-toggle {
    border: none;
    background: none;
    color: inherit;
    font-size: 1.15rem;
    cursor: pointer;
    padding: 6px 10px;
}

/* ------------------------------------------------------ Menú de usuario -- */
.sb-profile { position: relative; }
.sb-profile-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    cursor: pointer;
    color: var(--sb-neutral-100);
    padding: 3px 10px 3px 3px;
    transition: all 0.15s ease;
}
.sb-profile-toggle:hover,
.sb-profile.is-open .sb-profile-toggle {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.28);
    color: var(--sb-neutral-0);
}
.sb-profile-arrow,
.sb-profile-toggle i.fa-chevron-down {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.15s ease;
    margin-left: 2px;
}
.sb-profile-toggle:hover .sb-profile-arrow,
.sb-profile.is-open .sb-profile-arrow,
.sb-profile-toggle:hover i.fa-chevron-down,
.sb-profile.is-open i.fa-chevron-down {
    color: var(--sb-neutral-0);
    transform: rotate(180deg);
}
.sb-profile-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: var(--sb-z-dropdown);
    min-width: 230px;
    background: var(--sb-neutral-0);
    border: 1px solid var(--sb-neutral-200);
    border-radius: 14px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.2);
    padding: 6px;
    display: flex;
    flex-direction: column;
}

/* ------------------------------------------------------------ Diálogos --- */
.sb-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--sb-z-spotlight);
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.sb-dialog {
    background: var(--sb-neutral-0);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    max-width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Cabecera de diálogo. Antes era una franja roja con el título en blanco: el
   color de marca pesaba más que el propio contenido del diálogo y el título se
   leía peor de lo que debería para ser el elemento que lo nombra. Ahora la
   cabecera es blanca, el título va en tinta fuerte y el rojo se reserva para lo
   que de verdad es acción: el botón de cerrar y el de confirmar. */
.sb-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sb-space-4);
    padding: var(--sb-space-5) var(--sb-space-6);
    background: var(--sb-surface);
    border-bottom: 1px solid var(--sb-border-subtle);
    color: var(--sb-text);
}

.sb-dialog-header h3 {
    margin: 0;
    font-family: var(--sb-font);
    font-size: var(--sb-text-lg);
    font-weight: var(--sb-weight-black);
    letter-spacing: -0.01em;
    color: var(--sb-text);
}

/* Cerrar: círculo rojo, con área táctil de sobra. */
.sb-dialog-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 1px solid var(--sb-brand-border);
    border-radius: var(--sb-radius-full);
    background: var(--sb-brand-surface);
    color: var(--sb-brand);
    font-size: var(--sb-text-md);
    cursor: pointer;
    transition: background var(--sb-duration-fast) var(--sb-ease),
                color var(--sb-duration-fast) var(--sb-ease);
}
.sb-dialog-close:hover {
    background: var(--sb-brand);
    color: var(--sb-text-on-brand);
    border-color: var(--sb-brand);
}

/* El contenido respira: antes iba pegado a los bordes del diálogo. */
.sb-dialog-body { padding: var(--sb-space-6); overflow-y: auto; }
.sb-dialog-message { padding: 0; color: var(--sb-neutral-700); font-size: var(--sb-text-base); line-height: var(--sb-leading-relaxed); }
.sb-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sb-space-3);
    padding: var(--sb-space-5) var(--sb-space-6);
    border-top: 1px solid var(--sb-border-subtle);
}

/* -------------------------------------------------------------- Avisos --- */
.sb-toasts {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: var(--sb-z-modal);
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(360px, calc(100vw - 32px));
}

.sb-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--sb-neutral-0);
    border: 1px solid var(--sb-neutral-200);
    border-left: 4px solid var(--sb-neutral-500);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
    animation: sb-toast-in 0.18s ease-out;
}

@keyframes sb-toast-in {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: none; }
}

.sb-toast-icon { margin-top: 2px; font-size: 0.95rem; }
.sb-toast-text { flex: 1; min-width: 0; }
.sb-toast-title { margin: 0; font-weight: 800; font-size: 0.88rem; color: var(--sb-neutral-900); }
.sb-toast-detail { margin: 2px 0 0; font-size: 0.82rem; color: var(--sb-neutral-500); line-height: 1.35; }
.sb-toast-close { border: none; background: none; color: var(--sb-neutral-400); cursor: pointer; }

.sb-toast--success { border-left-color: var(--sb-green-600); }
.sb-toast--success .sb-toast-icon { color: var(--sb-green-600); }
.sb-toast--error { border-left-color: var(--sb-red-600); }
.sb-toast--error .sb-toast-icon { color: var(--sb-red-600); }
.sb-toast--warning { border-left-color: var(--sb-amber-600); }
.sb-toast--warning .sb-toast-icon { color: var(--sb-amber-600); }
.sb-toast--info { border-left-color: var(--sb-blue-600); }
.sb-toast--info .sb-toast-icon { color: var(--sb-blue-600); }

.sb-profile-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    margin-top: 6px;
    border: none;
    background: none;
    border-radius: 10px;
    color: var(--sb-red-700);
    font-family: var(--sb-font);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}

.sb-profile-item:hover { background: var(--sb-red-50); }

/* Rueda de carga (barra de progreso en modo circular) */
.sb-spinner {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 3px solid var(--sb-neutral-100);
    border-top-color: var(--sb-brand);
    border-radius: 50%;
    animation: sb-spin 0.8s linear infinite;
}

@keyframes sb-spin { to { transform: rotate(360deg); } }

.sb-ac-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: var(--sb-neutral-400);
    cursor: pointer;
}

.sb-ac-clear:hover { color: var(--sb-brand); }


.sb-input,.sb-input-box,.sb-dd,.sb-field,.sb-textarea {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Campo + botón de acción ("+"): el botón va DENTRO del mismo campo, como un
   segmento pegado a la derecha que comparte el borde redondeado. Antes era un
   círculo suelto por fuera que chocaba con el campo. */
.input-with-action {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    border: 1px solid var(--sb-neutral-200);
    border-radius: 10px;
    background: var(--sb-neutral-0);
    overflow: visible !important;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.input-with-action:focus-within {
    border-color: var(--sb-brand);
    box-shadow: 0 0 0 3px rgba(200, 40, 0, 0.12);
}

/* El campo interior pierde su borde/fondo propios: manda el contenedor. */
.input-with-action > .sb-dd,
.input-with-action > .sb-input-box,
.input-with-action > input.sb-input {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
}
.input-with-action > .sb-dd .sb-dd-toggle,
.input-with-action > input.sb-input,
.input-with-action > .sb-input-box .sb-input {
    border: none !important;
    border-top-left-radius: 9px !important;
    border-bottom-left-radius: 9px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    min-height: 42px;
}
.input-with-action > .sb-dd.is-open .sb-dd-toggle { box-shadow: none !important; }

/* El botón: segmento vertical a la derecha integrado con estilo refinado */
.input-with-action > .inline-action,
.input-with-action > button {
    flex: 0 0 auto;
    align-self: stretch;
    width: auto;
    min-width: 44px;
    height: auto !important;
    padding: 0 14px;
    border: none !important;
    border-left: 1px solid var(--sb-neutral-200) !important;
    border-top-right-radius: 9px !important;
    border-bottom-right-radius: 9px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    background: var(--sb-neutral-50) !important;
    color: var(--sb-brand) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.input-with-action > .inline-action:hover,
.input-with-action > button:hover {
    background: var(--sb-brand) !important;
    color: var(--sb-neutral-0) !important;
    border-left-color: var(--sb-brand) !important;
}
.input-with-action > .inline-action i,
.input-with-action > button i {
    color: inherit !important;
    font-size: 0.9rem;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.input-with-action > .inline-action:hover i,
.input-with-action > button:hover i {
    transform: scale(1.15) rotate(90deg);
}

.round-button,.round-buttonTwo,.round-button-gold,.round-button-danger,.btn-dialog-primary,.btn-dialog-secondary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto !important;
    height: auto !important;
    min-width: 0;
    padding: 9px 16px !important;
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    font-family: var(--sb-font);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    overflow: visible !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.10);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

/* El texto y el icono, siempre visibles y en línea (ya no hay expand-on-hover). */
.round-button span,
.round-buttonTwo span,
.round-button-gold span,
.round-button-danger span {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    left: auto !important;
    color: inherit !important;
    font-weight: inherit;
}

.round-button i,
.round-buttonTwo i,
.round-button-gold i,
.round-button-danger i {
    position: static !important;
    transform: none !important;
    color: inherit !important;
    font-size: 0.9rem;
    margin: 0 !important;
}

.round-button:hover,.round-buttonTwo:hover,.round-button-gold:hover,.round-button-danger:hover,.btn-dialog-primary:hover,.btn-dialog-secondary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);
    width: auto !important;
    border-radius: 10px !important;
    padding: 9px 16px !important;
}

.round-button {
    background-color: var(--sb-brand) !important;
    color: var(--sb-neutral-0) !important;
}
.round-button:hover { background-color: var(--sb-brand-hover) !important; color: var(--sb-neutral-0) !important; }

/* Dorado/ámbar para acciones destacadas secundarias. */
.round-button-gold {
    background-color: var(--sb-gold) !important;
    color: var(--sb-neutral-0) !important;
}
.round-button-gold:hover { background-color: var(--sb-gold-strong) !important; }

/* Neutro: acciones terciarias (volver, etc.). */
.round-buttonTwo,
.btn-dialog-secondary {
    background-color: var(--sb-neutral-100) !important;
    color: var(--sb-neutral-600) !important;
    border-color: var(--sb-neutral-200) !important;
}
.round-buttonTwo:hover,
.btn-dialog-secondary:hover { background-color: var(--sb-neutral-200) !important; color: var(--sb-neutral-700) !important; }

.round-button-danger {
    background-color: var(--sb-red-50) !important;
    color: var(--sb-red-700) !important;
    border-color: var(--sb-red-200) !important;
}
.round-button-danger:hover { background-color: var(--sb-red-100) !important; color: var(--sb-red-800) !important; }
.round-button-danger i { color: var(--sb-red-700) !important; }

/* Diálogo primario: rojo sólido. */
.btn-dialog-primary { background-color: var(--sb-brand) !important; color: var(--sb-neutral-0) !important; }
.btn-dialog-primary:hover { background-color: var(--sb-brand-hover) !important; }

/* Botones de acción dentro de la cabecera / toolbar */
.ItruCard > .cardaling .round-button-gold,
.ItruCard > .cardaling .button-container .round-button-gold,
.ItruCard > .cardaling .button-container2 .round-button-gold,
.card-primary-header .round-button-gold,
.topbar-actions .round-button-gold {
    background: linear-gradient(135deg, var(--sb-brand), var(--sb-brand-gradient-end)) !important;
    color: var(--sb-neutral-0) !important;
}

.ItruCard > .cardaling .round-button-gold i,
.ItruCard > .cardaling .round-button-gold span,
.ItruCard > .cardaling .button-container .round-button-gold i,
.ItruCard > .cardaling .button-container .round-button-gold span,
.ItruCard > .cardaling .button-container2 .round-button-gold i,
.ItruCard > .cardaling .button-container2 .round-button-gold span,
.card-primary-header .round-button-gold i,
.card-primary-header .round-button-gold span,
.topbar-actions .round-button-gold i,
.topbar-actions .round-button-gold span {
    color: var(--sb-neutral-0) !important;
    display: inline !important;
    opacity: 1 !important;
}

/* =============================================================================
   Numérico tipo stepper  [ − ] valor [ + ]
   ============================================================================= */
.sb-stepper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    height: 42px;
    padding: 3px 4px;
    border: 1px solid var(--sb-neutral-200);
    border-radius: 10px;
    background: var(--sb-neutral-0);
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sb-stepper:focus-within {
    border-color: var(--sb-brand);
    box-shadow: 0 0 0 3px rgba(200, 40, 0, 0.12);
}

.sb-stepper--no-buttons {
    padding: 0;
}

.sb-stepper-btn {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 1px solid var(--sb-neutral-200);
    border-radius: 8px;
    background: var(--sb-neutral-50);
    color: var(--sb-neutral-600);
    font-size: 0.82rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
}
.sb-stepper-btn:hover:not(:disabled) {
    background: var(--sb-brand-50);
    color: var(--sb-brand);
    border-color: var(--sb-brand-200);
}
.sb-stepper-btn:active:not(:disabled) {
    transform: scale(0.93);
}
.sb-stepper-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: var(--sb-neutral-100);
    border-color: transparent;
}

.sb-stepper-input.sb-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0 8px;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--sb-neutral-900);
    background: transparent !important;
    outline: none !important;
    -moz-appearance: textfield;
}

.sb-stepper-input.sb-input::-webkit-outer-spin-button,
.sb-stepper-input.sb-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* =============================================================================
   Calendario propio
   ============================================================================= */
.sb-cal { position: relative; width: 100%; }

.sb-cal-field {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--sb-neutral-200);
    border-radius: 10px;
    background: var(--sb-neutral-0);
    color: var(--sb-neutral-900);
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    text-align: left;
}
.sb-cal.is-open .sb-cal-field { border-color: var(--sb-brand); box-shadow: 0 0 0 3px rgba(200, 40, 0, 0.12); }
.sb-cal-field:disabled { background: var(--sb-neutral-50); color: var(--sb-neutral-400); cursor: not-allowed; }
.sb-cal-ico { color: var(--sb-brand); font-size: 0.95rem; }
.sb-cal-text { flex: 1; }
.sb-cal-text.is-placeholder { color: var(--sb-neutral-400); }
.sb-cal-clear { color: var(--sb-neutral-400); }
.sb-cal-clear:hover { color: var(--sb-brand); }

.sb-cal-panel {
    position: absolute;
    z-index: var(--sb-z-dropdown);
    top: calc(100% + 6px);
    left: 0;
    width: 300px;
    max-width: 92vw;
    background: var(--sb-neutral-0);
    border: 1px solid var(--sb-neutral-250);
    border-radius: 16px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18);
    padding: 14px;
}

.sb-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.sb-cal-title { font-weight: 800; font-size: 0.92rem; color: var(--sb-neutral-900); }
.sb-cal-nav {
    width: 30px; height: 30px;
    border: 1px solid var(--sb-neutral-250); border-radius: 9px;
    background: var(--sb-neutral-0); color: var(--sb-neutral-600); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.sb-cal-nav:hover { border-color: var(--sb-brand); color: var(--sb-brand); }

.sb-cal-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
}
.sb-cal-week span {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--sb-neutral-400);
    text-transform: uppercase;
    padding: 4px 0;
}

.sb-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.sb-cal-day {
    aspect-ratio: 1 / 1;
    border: none;
    background: none;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sb-neutral-700);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.sb-cal-day:hover { background: var(--sb-brand-50); color: var(--sb-brand); }
.sb-cal-day.is-other { color: var(--sb-neutral-300); }
.sb-cal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--sb-brand-border); color: var(--sb-brand); }
.sb-cal-day.is-selected { background: var(--sb-brand) !important; color: var(--sb-neutral-0) !important; font-weight: 800; }

.sb-cal-time {
    display: flex; align-items: center; gap: 8px;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sb-neutral-100);
    color: var(--sb-neutral-500);
}
.sb-cal-time input {
    border: 1px solid var(--sb-neutral-200); border-radius: 8px; padding: 6px 8px;
    font-size: 0.85rem; color: var(--sb-neutral-900); outline: none;
}

.sb-cal-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--sb-neutral-100);
}
.sb-cal-link {
    border: none; background: none; cursor: pointer;
    font-size: 0.82rem; font-weight: 700; color: var(--sb-neutral-500);
}
.sb-cal-link:hover { color: var(--sb-neutral-900); }
.sb-cal-link.is-primary { color: var(--sb-brand); }

/* =============================================================================
   Componentes nuevos: search, segmentado, chip, avatar, empty, alert, stat,
   radios, tooltip, skeleton
   ============================================================================= */

/* ---- Buscador ---- */
.sb-search {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 220px;
    max-width: 100%;
    height: 38px;
    padding: 0 10px 0 32px;
    border: 1px solid var(--sb-neutral-200);
    border-radius: 10px;
    background: var(--sb-neutral-0);
}
.sb-search:focus-within { border-color: var(--sb-brand); box-shadow: 0 0 0 3px rgba(200, 40, 0, 0.12); }
.sb-search-ico { position: absolute; left: 11px; color: var(--sb-neutral-400); font-size: 0.82rem; }
.sb-search-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 0.85rem; font-weight: 500; color: var(--sb-neutral-700); }
.sb-search-clear { border: none; background: none; color: var(--sb-neutral-400); cursor: pointer; }
.sb-search-clear:hover { color: var(--sb-brand); }
.sb-search-panel {
    position: absolute; z-index: var(--sb-z-dropdown); top: calc(100% + 4px); left: 0; right: 0;
    background: var(--sb-neutral-0); border: 1px solid var(--sb-neutral-200); border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16); max-height: 260px; overflow-y: auto;
}
.sb-search-option { display: block; width: 100%; padding: 9px 12px; border: none; background: none; text-align: left; cursor: pointer; font-size: 0.86rem; color: var(--sb-neutral-700); }
.sb-search-option:hover { background: var(--sb-neutral-50); }

/* ---- Segmentado ---- */
.sb-seg {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--sb-neutral-150);
    border-radius: 12px;
    max-width: 100%;
    overflow-x: auto;
}
.sb-seg-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: none;
    background: none;
    border-radius: 9px;
    color: var(--sb-neutral-500);
    font-family: var(--sb-font);
    font-size: 0.83rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.sb-seg-item i { font-size: 0.85rem; }
.sb-seg-item:hover { color: var(--sb-neutral-900); }
.sb-seg-item.is-active {
    background: var(--sb-neutral-0);
    color: var(--seg-color, var(--sb-brand));
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
}
.sb-seg-count {
    min-width: 18px; padding: 0 6px; height: 18px; border-radius: 999px;
    background: rgba(15, 23, 42, 0.08); color: inherit;
    font-size: 0.68rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}

/* ---- Chip ---- */
.sb-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px 4px 11px; border-radius: 999px;
    font-size: 0.78rem; font-weight: 700;
    background: var(--sb-neutral-100); color: var(--sb-neutral-600); border: 1px solid var(--sb-neutral-200);
}
.sb-chip i { font-size: 0.75rem; opacity: 0.8; }
.sb-chip--brand { background: var(--sb-brand-50); color: var(--sb-brand); border-color: var(--sb-brand-border); }
.sb-chip--success { background: var(--sb-green-50); color: var(--sb-green-700); border-color: var(--sb-green-200); }
.sb-chip--info { background: var(--sb-blue-50); color: var(--sb-blue-700); border-color: var(--sb-blue-200); }
.sb-chip-x { border: none; background: rgba(15,23,42,0.06); color: inherit; width: 16px; height: 16px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 0.62rem; }
.sb-chip-x:hover { background: rgba(200,40,0,0.15); color: var(--sb-brand); }

/* ---- Avatar ---- */
.sb-avatar { 
    flex: 0 0 auto; 
    border-radius: 50%; 
    object-fit: cover; 
    background: var(--sb-neutral-100); 
    border: 1px solid var(--sb-neutral-200); 
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    box-sizing: border-box;
}
.sb-avatar--xs { width: 28px; height: 28px; font-size: 0.68rem; }
.sb-avatar--sm { width: 32px; height: 32px; font-size: 0.74rem; }
.sb-avatar--md { width: 38px; height: 38px; font-size: 0.82rem; }
.sb-avatar--lg { width: 52px; height: 52px; font-size: 1.05rem; }
.sb-avatar--xl { width: 68px; height: 68px; font-size: 1.35rem; }
.sb-avatar--initials { 
    background: linear-gradient(135deg, var(--sb-blue-500), var(--sb-blue-600)); 
    border-color: var(--sb-blue-600); 
    color: var(--sb-neutral-0); 
    font-weight: 800; 
    text-transform: uppercase; 
    user-select: none;
    letter-spacing: 0.5px;
}
.sb-avatar--zoomable {
    cursor: zoom-in !important;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.sb-avatar--zoomable:hover {
    transform: scale(1.12);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}
.sb-user-cell {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}
.sb-user-cell-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.sb-user-cell-primary {
    font-weight: 600;
    color: var(--sb-neutral-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sb-user-cell-secondary {
    font-size: 0.8rem;
    color: var(--sb-neutral-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Estado vacío ---- */
.sb-empty { text-align: center; padding: 46px 20px; color: var(--sb-neutral-400); }
.sb-empty-ico { font-size: 2.2rem; color: var(--sb-neutral-300); margin-bottom: 12px; }
.sb-empty-title { margin: 0; font-size: 1rem; font-weight: 800; color: var(--sb-neutral-600); }
.sb-empty-text { margin: 6px 0 0; font-size: 0.88rem; }
.sb-empty-actions { margin-top: 16px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---- Alerta ---- */
.sb-alert {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px; border-radius: 14px;
    border: 1px solid var(--sb-blue-200); background: var(--sb-blue-50);
}
.sb-alert-ico { margin-top: 1px; font-size: 1rem; color: var(--sb-blue-600); }
.sb-alert-body { flex: 1; min-width: 0; }
.sb-alert-title { margin: 0; font-weight: 800; font-size: 0.9rem; color: var(--sb-neutral-900); }
.sb-alert-text { margin: 3px 0 0; font-size: 0.85rem; color: var(--sb-neutral-600); line-height: 1.4; }
.sb-alert-x { border: none; background: none; color: var(--sb-neutral-400); cursor: pointer; }
.sb-alert--success { background: var(--sb-green-50); border-color: var(--sb-green-200); }
.sb-alert--success .sb-alert-ico { color: var(--sb-green-600); }
.sb-alert--warning { background: var(--sb-amber-50); border-color: var(--sb-amber-200); }
.sb-alert--warning .sb-alert-ico { color: var(--sb-amber-600); }
.sb-alert--danger { background: var(--sb-red-50); border-color: var(--sb-red-200); }
.sb-alert--danger .sb-alert-ico { color: var(--sb-red-600); }

/* ---- Tarjeta KPI ---- */
.sb-stat {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px; background: var(--sb-neutral-0);
    border: 1px solid var(--sb-neutral-150); border-radius: 16px;
    border-left: 4px solid var(--stat-accent, var(--sb-brand));
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
.sb-stat-ico {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--stat-accent, var(--sb-brand)) 12%, var(--sb-neutral-0));
    color: var(--stat-accent, var(--sb-brand)); font-size: 1.15rem;
}
.sb-stat-body { display: flex; flex-direction: column; line-height: 1.15; }
.sb-stat-label { font-size: 0.72rem; font-weight: 800; color: var(--sb-neutral-400); text-transform: uppercase; letter-spacing: 0.5px; }
.sb-stat-value { font-size: 1.5rem; font-weight: 900; color: var(--sb-neutral-900); }
.sb-stat-hint { font-size: 0.75rem; color: var(--sb-neutral-500); }

/* ---- Radios ---- */
.sb-radios { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.sb-radios.is-vertical { flex-direction: column; }
.sb-radio {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 14px; border: 1px solid var(--sb-neutral-200); border-radius: 10px;
    background: var(--sb-neutral-0); color: var(--sb-neutral-600); cursor: pointer;
    font-family: var(--sb-font); font-size: 0.86rem; font-weight: 600;
    transition: border-color 0.15s, background 0.15s;
}
.sb-radio-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--sb-neutral-300); position: relative; flex: 0 0 auto; }
.sb-radio.is-active { border-color: var(--sb-brand); background: var(--sb-brand-surface); color: var(--sb-brand); }
.sb-radio.is-active .sb-radio-dot { border-color: var(--sb-brand); }
.sb-radio.is-active .sb-radio-dot::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--sb-brand); }

/* ---- Tooltip System (Floating Dark Bubble with Pointer Arrow) ---- */
.sb-tip,
.sb-tooltip-wrapper,
[data-tooltip],
[data-tip] {
    position: relative;
}

.sb-tooltip-wrapper {
    display: inline-flex;
    align-items: center;
}

/* Tooltip Bubble (::after) */
.sb-tip::after,
.sb-tooltip-wrapper::after,
[data-tooltip]::after,
[data-tip]::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: var(--sb-z-tooltip);
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%) translateY(4px) scale(0.96);
    transform-origin: bottom center;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--sb-neutral-900); /* Deep obsidian dark slate */
    color: var(--sb-neutral-0);
    font-family: var(--sb-font);
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.015em;
    line-height: 1.25;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.45), 0 4px 6px -2px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: opacity 0.16s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.16s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.16s;
}

/* Fallback for data-tip when data-tooltip is not present */
[data-tip]:not([data-tooltip])::after {
    content: attr(data-tip);
}

/* Tooltip Pointer Triangle Arrow (::before) */
.sb-tip::before,
.sb-tooltip-wrapper::before,
[data-tooltip]::before,
[data-tip]::before {
    content: '';
    position: absolute;
    z-index: var(--sb-z-tooltip);
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    transform-origin: top center;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--sb-neutral-900);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.16s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.16s;
}

/* Don't show tooltip if text is empty or blank */
[data-tooltip=""]::after,
[data-tooltip=""]::before,
[data-tip=""]::after,
[data-tip=""]::before {
    display: none !important;
}

/* Hover States - Reveal with smooth spring */
.sb-tip:hover::after,
.sb-tip:hover::before,
.sb-tooltip-wrapper:hover::after,
.sb-tooltip-wrapper:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tip]:hover::after,
[data-tip]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}

/* Position: Bottom */
.sb-tip--bottom::after,
.sb-tooltip-wrapper.sb-tip--bottom::after,
[data-tooltip-pos="bottom"]::after {
    bottom: auto;
    top: calc(100% + 9px);
    transform: translateX(-50%) translateY(-4px) scale(0.96);
    transform-origin: top center;
}
.sb-tip--bottom::before,
.sb-tooltip-wrapper.sb-tip--bottom::before,
[data-tooltip-pos="bottom"]::before {
    bottom: auto;
    top: calc(100% + 3px);
    border-top: none;
    border-bottom: 6px solid var(--sb-neutral-900);
    transform: translateX(-50%) translateY(-4px);
}
.sb-tip--bottom:hover::after,
.sb-tooltip-wrapper.sb-tip--bottom:hover::after,
[data-tooltip-pos="bottom"]:hover::after {
    transform: translateX(-50%) translateY(0) scale(1);
}
.sb-tip--bottom:hover::before,
.sb-tooltip-wrapper.sb-tip--bottom:hover::before,
[data-tooltip-pos="bottom"]:hover::before {
    transform: translateX(-50%) translateY(0);
}

/* Position: Left */
.sb-tip--left::after,
.sb-tooltip-wrapper.sb-tip--left::after,
[data-tooltip-pos="left"]::after {
    bottom: auto;
    left: auto;
    top: 50%;
    right: calc(100% + 9px);
    transform: translateY(-50%) translateX(4px) scale(0.96);
    transform-origin: right center;
}
.sb-tip--left::before,
.sb-tooltip-wrapper.sb-tip--left::before,
[data-tooltip-pos="left"]::before {
    bottom: auto;
    left: auto;
    top: 50%;
    right: calc(100% + 3px);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid var(--sb-neutral-900);
    border-right: none;
    transform: translateY(-50%) translateX(4px);
}
.sb-tip--left:hover::after,
.sb-tooltip-wrapper.sb-tip--left:hover::after,
[data-tooltip-pos="left"]:hover::after {
    transform: translateY(-50%) translateX(0) scale(1);
}
.sb-tip--left:hover::before,
.sb-tooltip-wrapper.sb-tip--left:hover::before,
[data-tooltip-pos="left"]:hover::before {
    transform: translateY(-50%) translateX(0);
}

/* Position: Right */
.sb-tip--right::after,
.sb-tooltip-wrapper.sb-tip--right::after,
[data-tooltip-pos="right"]::after {
    bottom: auto;
    right: auto;
    top: 50%;
    left: calc(100% + 9px);
    transform: translateY(-50%) translateX(-4px) scale(0.96);
    transform-origin: left center;
}
.sb-tip--right::before,
.sb-tooltip-wrapper.sb-tip--right::before,
[data-tooltip-pos="right"]::before {
    bottom: auto;
    right: auto;
    top: 50%;
    left: calc(100% + 3px);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid var(--sb-neutral-900);
    border-left: none;
    transform: translateY(-50%) translateX(-4px);
}
.sb-tip--right:hover::after,
.sb-tooltip-wrapper.sb-tip--right:hover::after,
[data-tooltip-pos="right"]:hover::after {
    transform: translateY(-50%) translateX(0) scale(1);
}
.sb-tip--right:hover::before,
.sb-tooltip-wrapper.sb-tip--right:hover::before,
[data-tooltip-pos="right"]:hover::before {
    transform: translateY(-50%) translateX(0);
}

/* ---- Tooltip Smart Alignment: Rightmost Buttons & Table Actions Never Clip ---- */
.button-container .round-button:last-child::after,
.button-container [data-tooltip]:last-child::after,
.button-container2 .round-button:last-child::after,
.button-container2 [data-tooltip]:last-child::after,
.button-containerCe .round-button:last-child::after,
.button-containerCe [data-tooltip]:last-child::after,
.sabora-table td:last-child [data-tooltip]::after,
.sabora-table th:last-child [data-tooltip]::after,
.sabora-table td:last-of-type [data-tooltip]::after,
.sabora-grid td:last-child [data-tooltip]::after,
.sabora-grid th:last-child [data-tooltip]::after,
.sabora-grid-scroll td:last-child [data-tooltip]::after,
[data-tooltip-align="right"]::after,
.sb-tip--end::after {
    left: auto !important;
    right: -4px !important;
    transform: translateY(4px) scale(0.96) !important;
    transform-origin: bottom right !important;
}

.button-container .round-button:last-child::before,
.button-container [data-tooltip]:last-child::before,
.button-container2 .round-button:last-child::before,
.button-container2 [data-tooltip]:last-child::before,
.button-containerCe .round-button:last-child::before,
.button-containerCe [data-tooltip]:last-child::before,
.sabora-table td:last-child [data-tooltip]::before,
.sabora-table th:last-child [data-tooltip]::before,
.sabora-table td:last-of-type [data-tooltip]::before,
.sabora-grid td:last-child [data-tooltip]::before,
.sabora-grid th:last-child [data-tooltip]::before,
.sabora-grid-scroll td:last-child [data-tooltip]::before,
[data-tooltip-align="right"]::before,
.sb-tip--end::before {
    left: auto !important;
    right: 14px !important;
    transform: translateY(4px) !important;
    transform-origin: top center !important;
}

.button-container .round-button:last-child:hover::after,
.button-container [data-tooltip]:last-child:hover::after,
.button-container2 .round-button:last-child:hover::after,
.button-container2 [data-tooltip]:last-child:hover::after,
.button-containerCe .round-button:last-child:hover::after,
.button-containerCe [data-tooltip]:last-child:hover::after,
.sabora-table td:last-child [data-tooltip]:hover::after,
.sabora-table th:last-child [data-tooltip]:hover::after,
.sabora-table td:last-of-type [data-tooltip]:hover::after,
.sabora-grid td:last-child [data-tooltip]:hover::after,
.sabora-grid th:last-child [data-tooltip]:hover::after,
.sabora-grid-scroll td:last-child [data-tooltip]:hover::after,
[data-tooltip-align="right"]:hover::after,
.sb-tip--end:hover::after {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
}

.button-container .round-button:last-child:hover::before,
.button-container [data-tooltip]:last-child:hover::before,
.button-container2 .round-button:last-child:hover::before,
.button-container2 [data-tooltip]:last-child:hover::before,
.button-containerCe .round-button:last-child:hover::before,
.button-containerCe [data-tooltip]:last-child:hover::before,
.sabora-table td:last-child [data-tooltip]:hover::before,
.sabora-table th:last-child [data-tooltip]:hover::before,
.sabora-table td:last-of-type [data-tooltip]:hover::before,
.sabora-grid td:last-child [data-tooltip]:hover::before,
.sabora-grid th:last-child [data-tooltip]:hover::before,
.sabora-grid-scroll td:last-child [data-tooltip]:hover::before,
[data-tooltip-align="right"]:hover::before,
.sb-tip--end:hover::before {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Tooltip on First Column or Left Align */
.sabora-table td:first-child [data-tooltip]::after,
.sabora-table th:first-child [data-tooltip]::after,
.sabora-grid td:first-child [data-tooltip]::after,
.sabora-grid th:first-child [data-tooltip]::after,
[data-tooltip-align="left"]::after,
.sb-tip--start::after {
    left: -4px !important;
    right: auto !important;
    transform: translateY(4px) scale(0.96) !important;
    transform-origin: bottom left !important;
}

.sabora-table td:first-child [data-tooltip]::before,
.sabora-table th:first-child [data-tooltip]::before,
.sabora-grid td:first-child [data-tooltip]::before,
.sabora-grid th:first-child [data-tooltip]::before,
[data-tooltip-align="left"]::before,
.sb-tip--start::before {
    left: 14px !important;
    right: auto !important;
    transform: translateY(4px) !important;
    transform-origin: top center !important;
}

.sabora-table td:first-child [data-tooltip]:hover::after,
.sabora-table th:first-child [data-tooltip]:hover::after,
.sabora-grid td:first-child [data-tooltip]:hover::after,
.sabora-grid th:first-child [data-tooltip]:hover::after,
[data-tooltip-align="left"]:hover::after,
.sb-tip--start:hover::after {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
}

.sabora-table td:first-child [data-tooltip]:hover::before,
.sabora-table th:first-child [data-tooltip]:hover::before,
.sabora-grid td:first-child [data-tooltip]:hover::before,
.sabora-grid th:first-child [data-tooltip]:hover::before,
[data-tooltip-align="left"]:hover::before,
.sb-tip--start:hover::before {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* ---- Skeleton (carga) ---- */
.sb-skel { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--sb-neutral-150) 25%, var(--sb-neutral-50) 37%, var(--sb-neutral-150) 63%); background-size: 400% 100%; animation: sb-skel 1.3s ease infinite; height: 14px; }
.sb-skel--line { height: 14px; margin-bottom: 8px; }
.sb-skel--title { height: 22px; width: 40%; margin-bottom: 12px; }
.sb-skel--row { height: 46px; border-radius: 10px; margin-bottom: 8px; }
.sb-skel--circle { width: 40px; height: 40px; border-radius: 50%; }
@keyframes sb-skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }


/* Botones de limpiar (×) alineados y con el mismo tamaño en todos los campos. */
.sb-cal-clear, .sb-search-clear, .sb-dd-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.72rem;
    line-height: 1;
    padding: 0;
}
.sb-cal-clear:hover, .sb-search-clear:hover, .sb-dd-clear:hover { background: var(--sb-brand-50); }

/* =============================================================================
   Más componentes: steps, card, rating, breadcrumb, accordion, timeline,
   upload, gauge
   ============================================================================= */

/* ---- Steps ---- */
.sb-steps { display: flex; align-items: center; width: 100%; }
.sb-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; }
.sb-step-dot {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 0.85rem;
    background: var(--sb-neutral-150); color: var(--sb-neutral-400); border: 2px solid var(--sb-neutral-150);
    transition: all 0.15s;
}
.sb-step-label { font-size: 0.78rem; font-weight: 700; color: var(--sb-neutral-400); white-space: nowrap; }
.sb-step.is-active .sb-step-dot { background: var(--sb-brand); color: var(--sb-neutral-0); border-color: var(--sb-brand); box-shadow: 0 0 0 4px rgba(200,40,0,0.14); }
.sb-step.is-active .sb-step-label { color: var(--sb-brand); }
.sb-step.is-done .sb-step-dot { background: var(--sb-neutral-0); color: var(--sb-brand); border-color: var(--sb-brand); }
.sb-step.is-done .sb-step-label { color: var(--sb-neutral-600); }
.sb-step-line { flex: 1 1 auto; height: 2px; background: var(--sb-neutral-200); margin: 0 6px; margin-bottom: 22px; }
.sb-step-line.is-done { background: var(--sb-brand); }

/* ---- Card ---- */
.sb-card { background: var(--sb-neutral-0); border: 1px solid var(--sb-neutral-150); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 14px rgba(15,23,42,0.05); }
.sb-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--sb-neutral-100); }
.sb-card-title { display: flex; align-items: center; gap: 9px; font-family: var(--sb-font); font-weight: 800; font-size: 0.95rem; color: var(--sb-neutral-900); }
.sb-card-title i { color: var(--sb-brand); }
.sb-card-body { padding: 18px; }
.sb-card-foot { padding: 12px 18px; border-top: 1px solid var(--sb-neutral-100); background: var(--sb-neutral-25); }

/* ---- Rating ---- */
.sb-rating { display: inline-flex; align-items: center; gap: 3px; }
.sb-star { border: none; background: none; cursor: pointer; color: var(--sb-neutral-200); font-size: 1.05rem; padding: 2px; transition: color 0.1s, transform 0.1s; }
.sb-star.is-on { color: var(--sb-gold); }
.sb-rating:not(.is-readonly) .sb-star:hover { transform: scale(1.15); }
.sb-rating.is-readonly .sb-star { cursor: default; }
.sb-rating-val { margin-left: 8px; font-size: 0.82rem; font-weight: 700; color: var(--sb-neutral-500); }

/* ---- Breadcrumb ---- */
.sb-bc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sb-bc-item { font-size: 0.85rem; font-weight: 600; color: var(--sb-neutral-500); text-decoration: none; }
a.sb-bc-item:hover { color: var(--sb-brand); }
.sb-bc-item.is-current { color: var(--sb-neutral-900); font-weight: 800; }
.sb-bc-sep { font-size: 0.6rem; color: var(--sb-neutral-300); }

/* ---- Accordion ---- */
.sb-acc { display: flex; flex-direction: column; gap: 8px; }
.sb-acc-item { border: 1px solid var(--sb-neutral-150); border-radius: 12px; overflow: hidden; background: var(--sb-neutral-0); }
.sb-acc-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; border: none; background: var(--sb-neutral-0); cursor: pointer; font-family: var(--sb-font); font-weight: 700; font-size: 0.9rem; color: var(--sb-neutral-900); text-align: left; }
.sb-acc-head:hover { background: var(--sb-neutral-25); }
.sb-acc-ico { color: var(--sb-brand); }
.sb-acc-title { flex: 1; }
.sb-acc-caret { color: var(--sb-neutral-400); font-size: 0.75rem; transition: transform 0.2s; }
.sb-acc-item.is-open .sb-acc-caret { transform: rotate(180deg); }
.sb-acc-item.is-open .sb-acc-head { border-bottom: 1px solid var(--sb-neutral-100); }
.sb-acc-body { padding: 16px; font-size: 0.9rem; color: var(--sb-neutral-600); }

/* ---- Timeline ---- */
.sb-timeline { display: flex; flex-direction: column; }
.sb-tl-item { display: flex; gap: 14px; }
.sb-tl-marker {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--tl-color,var(--sb-brand)) 14%, var(--sb-neutral-0));
    color: var(--tl-color, var(--sb-brand)); font-size: 0.8rem;
    position: relative; z-index: var(--sb-z-base);
}
.sb-tl-item:not(:last-child) .sb-tl-marker::after {
    content: ""; position: absolute; top: 34px; left: 50%; transform: translateX(-50%);
    width: 2px; height: calc(100% + 18px); background: var(--sb-neutral-250); z-index: var(--sb-z-below);
}
.sb-tl-content { padding-bottom: 20px; }
.sb-tl-top { display: flex; align-items: baseline; gap: 10px; }
.sb-tl-title { font-weight: 800; font-size: 0.9rem; color: var(--sb-neutral-900); }
.sb-tl-time { font-size: 0.75rem; color: var(--sb-neutral-400); }
.sb-tl-text { margin: 3px 0 0; font-size: 0.85rem; color: var(--sb-neutral-500); }

/* ---- Upload ---- */
.sb-upload {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 26px 20px; border: 2px dashed var(--sb-neutral-300); border-radius: 16px;
    background: var(--sb-neutral-25); cursor: pointer; text-align: center; transition: all 0.15s;
}
.sb-upload:hover { border-color: var(--sb-brand); background: var(--sb-brand-50); }
.sb-upload-ico { font-size: 1.8rem; color: var(--sb-brand); }
.sb-upload-title { font-weight: 700; font-size: 0.9rem; color: var(--sb-neutral-700); }
.sb-upload-hint { font-size: 0.78rem; color: var(--sb-neutral-400); }

/* ---- Gauge ---- */
.sb-gauge { position: relative; width: 120px; height: 120px; }
.sb-gauge-svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.sb-gauge-track { fill: none; stroke: var(--sb-neutral-150); stroke-width: 12; }
.sb-gauge-fill { fill: none; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 0.5s ease; }
.sb-gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sb-gauge-value { font-size: 1.5rem; font-weight: 900; color: var(--sb-neutral-900); }
.sb-gauge-label { font-size: 0.72rem; font-weight: 700; color: var(--sb-neutral-400); text-transform: uppercase; letter-spacing: 0.5px; }

/* =============================================================================
   Gráficas, calendario de eventos, árbol, lista de datos, botón-menú
   ============================================================================= */

/* ---- Gráficas (barras / líneas) ---- */
.sb-chart { width: 100%; }
.sb-chart-svg { width: 100%; height: auto; display: block; }
.sb-chart-grid { stroke: var(--sb-neutral-150); stroke-width: 1; }
.sb-chart-bar { transition: opacity 0.15s; }
.sb-chart-bar:hover { opacity: 0.82; }
.sb-chart-xlabel { font-size: 8px; font-weight: 700; fill: var(--sb-neutral-400); font-family: var(--sb-font); }

/* ---- Dona ---- */
.sb-donut { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sb-donut-svg { width: 130px; height: 130px; flex: 0 0 auto; }
.sb-donut-num { font-size: 18px; font-weight: 900; fill: var(--sb-neutral-900); font-family: var(--sb-font); }
.sb-donut-cap { font-size: 8px; font-weight: 800; fill: var(--sb-neutral-400); text-transform: uppercase; letter-spacing: 0.5px; }
.sb-donut-legend { display: flex; flex-direction: column; gap: 8px; }
.sb-donut-leg { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--sb-neutral-600); }
.sb-donut-leg b { margin-left: auto; color: var(--sb-neutral-900); }
.sb-donut-swatch { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 auto; }

/* ---- Sparkline ---- */
.sb-spark { width: 100px; height: 30px; display: block; }

/* ---- Calendario de eventos (agenda) ---- */
.sb-agenda { background: var(--sb-neutral-0); border: 1px solid var(--sb-neutral-150); border-radius: 16px; overflow: hidden; }
.sb-agenda-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; }
.sb-agenda-title { font-weight: 800; font-size: 0.98rem; color: var(--sb-neutral-900); }
.sb-agenda-week { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--sb-neutral-850); }
.sb-agenda-week span { text-align: center; padding: 8px 0; font-size: 0.68rem; font-weight: 800; color: var(--sb-neutral-300); text-transform: uppercase; letter-spacing: 0.5px; }
.sb-agenda-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.sb-agenda-cell { min-height: 84px; border-right: 1px solid var(--sb-neutral-100); border-bottom: 1px solid var(--sb-neutral-100); padding: 5px 6px; display: flex; flex-direction: column; gap: 3px; }
.sb-agenda-cell:nth-child(7n) { border-right: none; }
.sb-agenda-cell.is-other { background: var(--sb-neutral-25); }
.sb-agenda-daynum { font-size: 0.78rem; font-weight: 700; color: var(--sb-neutral-500); }
.sb-agenda-cell.is-other .sb-agenda-daynum { color: var(--sb-neutral-300); }
.sb-agenda-cell.is-today .sb-agenda-daynum { background: var(--sb-brand); color: var(--sb-neutral-0); width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.sb-agenda-ev { font-size: 0.68rem; font-weight: 700; padding: 2px 6px; border-radius: 5px; background: color-mix(in srgb, var(--ev, var(--sb-brand)) 14%, var(--sb-neutral-0)); color: var(--ev, var(--sb-brand)); border-left: 3px solid var(--ev, var(--sb-brand)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-agenda-more { font-size: 0.64rem; font-weight: 700; color: var(--sb-neutral-400); }

/* ---- Árbol ---- */
.sb-tree { font-size: 0.9rem; }
.sb-tree-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: none; background: none; cursor: pointer; color: var(--sb-neutral-700); text-align: left; border-radius: 8px; font-family: var(--sb-font); font-weight: 600; }
.sb-tree-row:hover { background: var(--sb-neutral-50); }
.sb-tree-caret { width: 14px; flex: 0 0 auto; font-size: 0.7rem; color: var(--sb-neutral-400); text-align: center; }
.sb-tree-ico { color: var(--sb-brand); }

/* ---- Lista de datos ---- */
.sb-dl { margin: 0; }
.sb-dl-row { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--sb-neutral-100); }
.sb-dl-row:last-child { border-bottom: none; }
.sb-dl dt { flex: 0 0 40%; font-size: 0.72rem; font-weight: 800; color: var(--sb-neutral-400); text-transform: uppercase; letter-spacing: 0.5px; margin: 0; padding-top: 1px; }
.sb-dl dd { flex: 1; margin: 0; font-size: 0.92rem; font-weight: 600; color: var(--sb-neutral-900); }

/* ---- Botón con menú ---- */
.sb-mbtn { position: relative; display: inline-block; }
.sb-mbtn-caret { font-size: 0.7rem; opacity: 0.8; }
.sb-mbtn-menu { position: absolute; z-index: var(--sb-z-dropdown); top: calc(100% + 4px); right: 0; min-width: 190px; background: var(--sb-neutral-0); border: 1px solid var(--sb-neutral-250); border-radius: 12px; box-shadow: 0 14px 30px rgba(15,23,42,0.16); padding: 6px; }
.sb-mbtn-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: none; background: none; border-radius: 9px; cursor: pointer; font-family: var(--sb-font); font-size: 0.86rem; font-weight: 600; color: var(--sb-neutral-700); text-align: left; }
.sb-mbtn-item i { width: 18px; text-align: center; color: var(--sb-neutral-400); }
.sb-mbtn-item:hover { background: var(--sb-neutral-50); color: var(--sb-neutral-900); }
.sb-mbtn-item.is-danger { color: var(--sb-red-700); }
.sb-mbtn-item.is-danger i { color: var(--sb-red-700); }
.sb-mbtn-item.is-danger:hover { background: var(--sb-red-50); }

/* =============================================================================
   Botones de icono · Toggle múltiple · Grupo de botones · Tamaños de modal
   ============================================================================= */

/* ---- Botón de solo icono ---- */
.sb-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: 10px;
    cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
    line-height: 1; flex: 0 0 auto;
}
.sb-iconbtn:hover:not(:disabled) { transform: translateY(-1px); }
.sb-iconbtn:disabled { opacity: 0.45; cursor: not-allowed; }
.sb-iconbtn.is-circle { border-radius: 50%; }
.sb-iconbtn--sm { width: 30px; height: 30px; font-size: 0.78rem; }
.sb-iconbtn--md { width: 38px; height: 38px; font-size: 0.92rem; }
.sb-iconbtn--lg { width: 46px; height: 46px; font-size: 1.05rem; }

/* variantes × colores */
.sb-iconbtn--soft.sb-iconbtn--primary { background:var(--sb-brand-50); color:var(--sb-brand); }
.sb-iconbtn--soft.sb-iconbtn--danger  { background:var(--sb-red-50); color:var(--sb-red-700); }
.sb-iconbtn--soft.sb-iconbtn--success { background:var(--sb-green-50); color:var(--sb-green-700); }
.sb-iconbtn--soft.sb-iconbtn--warning { background:var(--sb-amber-50); color:var(--sb-amber-700); }
.sb-iconbtn--soft.sb-iconbtn--info    { background:var(--sb-blue-50); color:var(--sb-blue-700); }
.sb-iconbtn--soft.sb-iconbtn--neutral { background:var(--sb-neutral-100); color:var(--sb-neutral-600); }
.sb-iconbtn--soft:hover:not(:disabled) { filter: brightness(0.96); }

.sb-iconbtn--solid.sb-iconbtn--primary { background:var(--sb-brand); color:var(--sb-neutral-0); }
.sb-iconbtn--solid.sb-iconbtn--danger  { background:var(--sb-red-600); color:var(--sb-neutral-0); }
.sb-iconbtn--solid.sb-iconbtn--success { background:var(--sb-green-600); color:var(--sb-neutral-0); }
.sb-iconbtn--solid.sb-iconbtn--warning { background:var(--sb-amber-600); color:var(--sb-neutral-0); }
.sb-iconbtn--solid.sb-iconbtn--info    { background:var(--sb-blue-600); color:var(--sb-neutral-0); }
.sb-iconbtn--solid.sb-iconbtn--neutral { background:var(--sb-neutral-700); color:var(--sb-neutral-0); }
.sb-iconbtn--solid:hover:not(:disabled) { filter: brightness(1.08); }

.sb-iconbtn--outline { background:var(--sb-neutral-0); }
.sb-iconbtn--outline.sb-iconbtn--primary { border-color:var(--sb-brand-border); color:var(--sb-brand); }
.sb-iconbtn--outline.sb-iconbtn--danger  { border-color:var(--sb-red-200); color:var(--sb-red-700); }
.sb-iconbtn--outline.sb-iconbtn--success { border-color:var(--sb-green-200); color:var(--sb-green-700); }
.sb-iconbtn--outline.sb-iconbtn--neutral { border-color:var(--sb-neutral-200); color:var(--sb-neutral-600); }
.sb-iconbtn--outline:hover:not(:disabled) { background:var(--sb-neutral-50); }

.sb-iconbtn--ghost { background:transparent; color:var(--sb-neutral-500); }
.sb-iconbtn--ghost.sb-iconbtn--primary { color:var(--sb-brand); }
.sb-iconbtn--ghost.sb-iconbtn--danger  { color:var(--sb-red-700); }
.sb-iconbtn--ghost:hover:not(:disabled) { background:var(--sb-neutral-100); }

/* ---- Toggle múltiple ---- */
.sb-toggrp { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.sb-tog {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border: 1px solid var(--sb-neutral-200); border-radius: 10px;
    background: var(--sb-neutral-0); color: var(--sb-neutral-600); cursor: pointer;
    font-family: var(--sb-font); font-size: 0.85rem; font-weight: 700;
    transition: all 0.15s;
}
.sb-tog:hover:not(:disabled) { border-color: var(--sb-neutral-300); background: var(--sb-neutral-50); }
.sb-tog.is-active { border-color: var(--sb-brand); background: var(--sb-brand-surface); color: var(--sb-brand); }
.sb-tog-check { font-size: 0.7rem; }
.sb-tog:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Grupo de botones (unidos) ---- */
.sb-btngrp { display: inline-flex; }
.sb-btngrp > * { border-radius: 0 !important; margin: 0 !important; }
.sb-btngrp > *:first-child { border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; }
.sb-btngrp > *:last-child { border-top-right-radius: 10px !important; border-bottom-right-radius: 10px !important; }
.sb-btngrp > * + * { margin-left: -1px !important; }
.sb-btngrp > *:hover { z-index: var(--sb-z-base); }

/* ---- Tamaños de modal ---- */
.sb-dialog--sm { width: 380px; }
.sb-dialog--md { width: 520px; }
.sb-dialog--lg { width: 720px; }
.sb-dialog--xl { width: 960px; }
.sb-dialog--full { width: calc(100vw - 40px); height: calc(100vh - 40px); max-height: calc(100vh - 40px); }
/* Un Width explícito en el estilo gana sobre estas clases. */

/* =============================================================================
   Tarjetas modernas: métrica, perfil, curso, y variantes de estilo
   ============================================================================= */

/* ---- Métrica ---- */
.sb-mcard {
    background: var(--sb-neutral-0); border: 1px solid var(--sb-neutral-150); border-radius: 18px;
    padding: 18px; box-shadow: 0 4px 14px rgba(15,23,42,0.05);
    position: relative; overflow: hidden;
}
.sb-mcard-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sb-mcard-ico { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--mc,var(--sb-brand)) 12%, var(--sb-neutral-0)); color: var(--mc,var(--sb-brand)); font-size: 1.05rem; }
.sb-mcard-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; }
.sb-mcard-trend.is-up { background: var(--sb-green-50); color: var(--sb-green-700); }
.sb-mcard-trend.is-down { background: var(--sb-red-50); color: var(--sb-red-700); }
.sb-mcard-value { font-size: 1.9rem; font-weight: 900; color: var(--sb-neutral-900); line-height: 1.1; }
.sb-mcard-label { font-size: 0.8rem; font-weight: 700; color: var(--sb-neutral-400); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.sb-mcard-spark { width: 100%; height: 34px; margin-top: 10px; }

/* ---- Perfil ---- */
.sb-pcard { background: var(--sb-neutral-0); border: 1px solid var(--sb-neutral-150); border-radius: 18px; overflow: hidden; text-align: center; box-shadow: 0 4px 14px rgba(15,23,42,0.05); }
.sb-pcard-cover { height: 66px; background: linear-gradient(135deg, var(--sb-brand), var(--sb-gold)); }
.sb-pcard-avatar { margin: -32px auto 0; border: 4px solid var(--sb-neutral-0) !important; box-shadow: 0 4px 12px rgba(15,23,42,0.14); }
.sb-pcard-name { font-weight: 800; font-size: 1.05rem; color: var(--sb-neutral-900); margin-top: 10px; }
.sb-pcard-role { font-size: 0.82rem; color: var(--sb-neutral-500); }
.sb-pcard-body { padding: 12px 18px 0; color: var(--sb-neutral-600); font-size: 0.88rem; }
.sb-pcard-actions { display: flex; gap: 10px; justify-content: center; padding: 16px 18px; }

/* ---- Curso ---- */
.sb-ccard { background: var(--sb-neutral-0); border: 1px solid var(--sb-neutral-150); border-radius: 18px; overflow: hidden; box-shadow: 0 4px 14px rgba(15,23,42,0.05); transition: transform 0.15s, box-shadow 0.15s; }
.sb-ccard:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(15,23,42,0.12); }
.sb-ccard-cover { height: 110px; position: relative; }
.sb-ccard-nivel { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,0.92); color: var(--sb-brand); font-size: 0.7rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.5px; }
.sb-ccard-body { padding: 14px 16px; }
.sb-ccard-title { font-weight: 800; font-size: 1rem; color: var(--sb-neutral-900); }
.sb-ccard-sub { font-size: 0.82rem; color: var(--sb-neutral-500); margin-top: 1px; }
.sb-ccard-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 0.8rem; color: var(--sb-neutral-600); }
.sb-ccard-meta i { color: var(--sb-neutral-400); margin-right: 3px; }
.sb-ccard-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sb-neutral-100); }
.sb-card--gradient .sb-card-title, .sb-card--gradient .sb-card-title i { color: var(--sb-neutral-0); }
.sb-card--gradient .sb-card-head { border-bottom-color: rgba(255,255,255,0.15); }
.sb-card--dark .sb-card-title { color: var(--sb-neutral-0); }
.sb-card--dark .sb-card-head { border-bottom-color: rgba(255,255,255,0.10); }

/* =============================================================================
   Rango fechas · tags · password · copiar · color · drawer · carrusel · divisor
   ============================================================================= */

/* ---- Rango de fechas ---- */
.sb-range { display: inline-flex; align-items: center; gap: 10px; }
.sb-range > .sb-cal { width: 170px; }
.sb-range-sep { color: var(--sb-neutral-400); }

/* ---- Tags input ---- */
.sb-tagsin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 40px; padding: 5px 10px; border: 1px solid var(--sb-neutral-200); border-radius: 10px; background: var(--sb-neutral-0); cursor: text; }
.sb-tagsin:focus-within { border-color: var(--sb-brand); box-shadow: 0 0 0 3px rgba(200,40,0,0.12); }
.sb-tagsin-input { flex: 1; min-width: 90px; border: none; outline: none; background: transparent; font-size: 0.88rem; color: var(--sb-neutral-700); padding: 4px 2px; }

/* ---- Password ---- */
.sb-pwd { position: relative; }
.sb-pwd-input { padding-right: 40px !important; }
.sb-pwd-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: none; color: var(--sb-neutral-400); cursor: pointer; width: 30px; height: 30px; border-radius: 8px; }
.sb-pwd-toggle:hover { color: var(--sb-brand); background: var(--sb-neutral-50); }

/* ---- Copiar ---- */
.sb-copy { display: flex; align-items: stretch; border: 1px solid var(--sb-neutral-200); border-radius: 10px; overflow: hidden; background: var(--sb-neutral-0); }
.sb-copy-input { flex: 1; min-width: 0; border: none !important; border-radius: 0 !important; box-shadow: none !important; background: var(--sb-neutral-50) !important; color: var(--sb-neutral-600); font-family: monospace; font-size: 0.85rem; }
.sb-copy-btn { display: flex; align-items: center; gap: 7px; border: none; border-left: 1px solid var(--sb-neutral-200); background: var(--sb-neutral-0); color: var(--sb-neutral-600); padding: 0 14px; cursor: pointer; font-family: var(--sb-font); font-size: 0.82rem; font-weight: 700; white-space: nowrap; }
.sb-copy-btn:hover { background: var(--sb-neutral-50); color: var(--sb-brand); }
.sb-copy-btn.is-ok { color: var(--sb-green-600); }

/* ---- Color picker ---- */
.sb-colorpick { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.sb-swatch { width: 30px; height: 30px; border-radius: 9px; border: 2px solid var(--sb-neutral-0); box-shadow: 0 0 0 1px var(--sb-neutral-200); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--sb-neutral-0); font-size: 0.72rem; padding: 0; position: relative; }
.sb-swatch.is-active { box-shadow: 0 0 0 2px var(--sb-neutral-900); }
.sb-swatch--custom { background: var(--sb-neutral-0); color: var(--sb-neutral-500); box-shadow: 0 0 0 1px var(--sb-neutral-200); overflow: hidden; }
.sb-swatch--custom input[type=color] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ---- Drawer ---- */
.sb-drawer-root { position: fixed; inset: 0; z-index: var(--sb-z-dropdown); pointer-events: none; }
.sb-drawer-root.is-open { pointer-events: auto; }
.sb-drawer-scrim { position: absolute; inset: 0; background: rgba(15,23,42,0.45); opacity: 0; transition: opacity 0.22s; }
.sb-drawer-root.is-open .sb-drawer-scrim { opacity: 1; }
.sb-drawer { position: absolute; top: 0; bottom: 0; width: 380px; max-width: 92vw; background: var(--sb-neutral-0); display: flex; flex-direction: column; box-shadow: -10px 0 40px rgba(15,23,42,0.2); transition: transform 0.24s cubic-bezier(0.4,0,0.2,1); }
.sb-drawer--right { right: 0; transform: translateX(100%); }
.sb-drawer--left { left: 0; box-shadow: 10px 0 40px rgba(15,23,42,0.2); transform: translateX(-100%); }
.sb-drawer-root.is-open .sb-drawer { transform: none; }
.sb-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--sb-neutral-100); }
.sb-drawer-title { font-family: var(--sb-font); font-weight: 800; font-size: 1rem; color: var(--sb-neutral-900); }
.sb-drawer-body { flex: 1; overflow-y: auto; padding: 18px; }
.sb-drawer-foot { padding: 14px 18px; border-top: 1px solid var(--sb-neutral-100); display: flex; gap: 10px; justify-content: flex-end; }

/* ---- Carrusel ---- */
.sb-carousel { position: relative; overflow: hidden; border-radius: 14px; }
.sb-carousel-track { display: flex; transition: transform 0.3s ease; }
.sb-carousel-slide { flex: 0 0 100%; }
.sb-carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(255,255,255,0.9); color: var(--sb-neutral-900); cursor: pointer; box-shadow: 0 4px 12px rgba(15,23,42,0.18); }
.sb-carousel-nav.is-prev { left: 10px; }
.sb-carousel-nav.is-next { right: 10px; }
.sb-carousel-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; gap: 6px; justify-content: center; }
.sb-carousel-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255,255,255,0.6); cursor: pointer; }
.sb-carousel-dot.is-active { background: var(--sb-neutral-0); width: 22px; border-radius: 999px; }

/* ---- Divisor ---- */
.sb-divider { border: none; border-top: 1px solid var(--sb-neutral-150); margin: 18px 0; }
.sb-divider-txt { display: flex; align-items: center; text-align: center; color: var(--sb-neutral-400); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin: 18px 0; }
.sb-divider-txt::before, .sb-divider-txt::after { content: ""; flex: 1; height: 1px; background: var(--sb-neutral-150); }
.sb-divider-txt span { padding: 0 14px; }

/* =============================================================================
   Máscara · editor · avatares apilados · estado · popover · FAB · tira · expander
   ============================================================================= */

/* ---- Editor de texto ---- */
.sb-rte { border: 1px solid var(--sb-neutral-200); border-radius: 12px; overflow: hidden; background: var(--sb-neutral-0); }
.sb-rte:focus-within { border-color: var(--sb-brand); box-shadow: 0 0 0 3px rgba(200,40,0,0.12); }
.sb-rte-bar { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--sb-neutral-100); background: var(--sb-neutral-25); }
.sb-rte-bar button { width: 30px; height: 30px; border: none; background: none; border-radius: 7px; color: var(--sb-neutral-600); cursor: pointer; font-size: 0.82rem; }
.sb-rte-bar button:hover { background: var(--sb-neutral-150); color: var(--sb-brand); }
.sb-rte-div { width: 1px; height: 18px; background: var(--sb-neutral-200); margin: 0 4px; }
.sb-rte-area { min-height: 120px; padding: 12px 14px; outline: none; font-size: 0.92rem; color: var(--sb-neutral-900); line-height: 1.5; }
.sb-rte-area:empty::before { content: "Escribe aquí…"; color: var(--sb-neutral-400); }

/* ---- Avatares apilados ---- */
.sb-avgrp { display: inline-flex; }
.sb-avgrp-item { border: 2px solid var(--sb-neutral-0) !important; }
.sb-avgrp .sb-avgrp-item + .sb-avgrp-item { margin-left: -10px; }
.sb-avgrp-more { background: var(--sb-neutral-500) !important; color: var(--sb-neutral-0); font-weight: 800; margin-left: -10px; display: inline-flex; align-items: center; justify-content: center; }

/* ---- Estado ---- */
.sb-status { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 700; color: var(--sb-neutral-600); }
.sb-status-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.sb-status--online .sb-status-dot { background: var(--sb-green-600); box-shadow: 0 0 0 3px rgba(22,163,74,0.18); }
.sb-status--busy .sb-status-dot { background: var(--sb-red-600); box-shadow: 0 0 0 3px rgba(220,38,38,0.18); }
.sb-status--away .sb-status-dot { background: var(--sb-gold); box-shadow: 0 0 0 3px rgba(232,164,28,0.18); }
.sb-status--offline .sb-status-dot { background: var(--sb-neutral-300); }

/* ---- Popover ---- */
.sb-pop { position: relative; display: inline-flex; }
.sb-pop-trigger { cursor: pointer; }
.sb-pop-panel { position: absolute; z-index: var(--sb-z-dropdown); left: 50%; transform: translateX(-50%); min-width: 200px; background: var(--sb-neutral-0); border: 1px solid var(--sb-neutral-250); border-radius: 12px; box-shadow: 0 14px 30px rgba(15,23,42,0.16); padding: 12px 14px; }
.sb-pop--bottom { top: calc(100% + 8px); }
.sb-pop--top { bottom: calc(100% + 8px); }
.sb-pop-title { font-weight: 800; font-size: 0.88rem; color: var(--sb-neutral-900); margin-bottom: 6px; }
.sb-pop-body { font-size: 0.85rem; color: var(--sb-neutral-600); }

/* ---- FAB ---- */
.sb-fab-root { position: fixed; z-index: var(--sb-z-drawer); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sb-fab--bottom-right { right: 24px; bottom: 24px; }
.sb-fab--bottom-left { left: 24px; bottom: 24px; }
.sb-fab { width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--sb-brand); color: var(--sb-neutral-0); font-size: 1.2rem; cursor: pointer; box-shadow: 0 10px 24px rgba(200,40,0,0.4); transition: transform 0.15s, background 0.15s; }
.sb-fab:hover { background: var(--sb-brand-hover); transform: translateY(-2px); }
.sb-fab-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; opacity: 0; transform: translateY(10px); pointer-events: none; transition: all 0.18s; }
.sb-fab-root.is-open .sb-fab-actions { opacity: 1; transform: none; pointer-events: auto; }

/* ---- Tira de métricas ---- */
.sb-strip { display: inline-flex; align-items: center; gap: 24px; padding: 14px 20px; background: var(--sb-neutral-0); border: 1px solid var(--sb-neutral-150); border-radius: 14px; box-shadow: 0 4px 14px rgba(15,23,42,0.05); }
.sb-strip-item { display: flex; flex-direction: column; }
.sb-strip-value { font-size: 1.35rem; font-weight: 900; color: var(--sb-neutral-900); line-height: 1.1; }
.sb-strip-label { font-size: 0.72rem; font-weight: 700; color: var(--sb-neutral-400); text-transform: uppercase; letter-spacing: 0.5px; }
.sb-strip-sep { width: 1px; height: 34px; background: var(--sb-neutral-150); }

/* ---- Expander ---- */
.sb-exp { border: 1px solid var(--sb-neutral-150); border-radius: 12px; overflow: hidden; background: var(--sb-neutral-0); }
.sb-exp-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 16px; border: none; background: var(--sb-neutral-0); cursor: pointer; font-family: var(--sb-font); font-weight: 700; font-size: 0.92rem; color: var(--sb-neutral-900); text-align: left; }
.sb-exp-head:hover { background: var(--sb-neutral-25); }
.sb-exp-ico { color: var(--sb-brand); }
.sb-exp-title { flex: 1; }
.sb-exp-caret { color: var(--sb-neutral-400); font-size: 0.75rem; transition: transform 0.2s; }
.sb-exp.is-open .sb-exp-caret { transform: rotate(180deg); }
.sb-exp.is-open .sb-exp-head { border-bottom: 1px solid var(--sb-neutral-100); }
.sb-exp-body { padding: 16px; font-size: 0.9rem; color: var(--sb-neutral-600); }

/* =============================================================================
   OTP · multiselect · rango doble · chat · kanban · timeline H · archivo ·
   precios · banner · notificación · ribbon
   ============================================================================= */

/* ---- OTP ---- */
.sb-otp { display: inline-flex; gap: 10px; }
.sb-otp-box { width: 44px; height: 52px; text-align: center; font-size: 1.3rem; font-weight: 800; color: var(--sb-neutral-900); border: 1px solid var(--sb-neutral-200); border-radius: 12px; outline: none; background: var(--sb-neutral-0); }
.sb-otp-box:focus { border-color: var(--sb-brand); box-shadow: 0 0 0 3px rgba(200,40,0,0.12); }

/* ---- MultiSelect ---- */
.sb-ms-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: none; background: none; cursor: pointer; font-size: 0.88rem; color: var(--sb-neutral-700); text-align: left; }
.sb-ms-option:hover { background: var(--sb-neutral-50); }
.sb-ms-check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--sb-neutral-300); display: inline-flex; align-items: center; justify-content: center; color: var(--sb-neutral-0); font-size: 0.62rem; flex: 0 0 auto; }
.sb-ms-option.is-checked .sb-ms-check { background: var(--sb-brand); border-color: var(--sb-brand); }
.sb-ms-option.is-checked { color: var(--sb-brand); font-weight: 700; }

/* ---- Rango doble ---- */
.sb-rangesl { position: relative; height: 44px; padding-top: 8px; }
.sb-rangesl-track { position: absolute; top: 14px; left: 0; right: 0; height: 5px; border-radius: 999px; background: var(--sb-neutral-200); }
.sb-rangesl-fill { position: absolute; top: 0; bottom: 0; background: var(--sb-brand); border-radius: 999px; }
.sb-rangesl-input { position: absolute; top: 6px; left: 0; width: 100%; height: 20px; margin: 0; -webkit-appearance: none; appearance: none; background: none; pointer-events: none; }
.sb-rangesl-input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--sb-neutral-0); border: 3px solid var(--sb-brand); cursor: pointer; box-shadow: 0 2px 6px rgba(15,23,42,0.2); }
.sb-rangesl-input::-moz-range-thumb { pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--sb-neutral-0); border: 3px solid var(--sb-brand); cursor: pointer; }
.sb-rangesl-vals { display: flex; justify-content: space-between; margin-top: 22px; font-size: 0.8rem; font-weight: 700; color: var(--sb-neutral-600); }

/* ---- Chat ---- */
.sb-bubble-row { display: flex; gap: 8px; margin-bottom: 10px; align-items: flex-end; }
.sb-bubble-row.is-mine { flex-direction: row-reverse; }
.sb-bubble { max-width: 74%; padding: 9px 13px; border-radius: 16px; background: var(--sb-neutral-0); border: 1px solid var(--sb-neutral-150); box-shadow: 0 1px 3px rgba(15,23,42,0.05); }
.sb-bubble-row.is-mine .sb-bubble { background: var(--sb-brand); border-color: var(--sb-brand); color: var(--sb-neutral-0); border-bottom-right-radius: 4px; }
.sb-bubble-row:not(.is-mine) .sb-bubble { border-bottom-left-radius: 4px; }
.sb-bubble-name { display: block; font-size: 0.72rem; font-weight: 800; color: var(--sb-brand); margin-bottom: 2px; }
.sb-bubble-text { font-size: 0.9rem; line-height: 1.35; }
.sb-bubble-time { display: block; text-align: right; font-size: 0.66rem; margin-top: 3px; opacity: 0.7; }

/* ---- Kanban ---- */
.sb-kb-col { background: var(--sb-neutral-50); border-radius: 14px; padding: 10px; min-width: 220px; }
.sb-kb-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 12px; }
.sb-kb-head::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--kb, var(--sb-brand)); }
.sb-kb-title { font-family: var(--sb-font); font-weight: 800; font-size: 0.85rem; color: var(--sb-neutral-700); text-transform: uppercase; letter-spacing: 0.5px; }
.sb-kb-count { margin-left: auto; background: var(--sb-neutral-0); color: var(--sb-neutral-500); font-size: 0.72rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.sb-kb-body { display: flex; flex-direction: column; gap: 8px; }
.sb-kb-card { background: var(--sb-neutral-0); border-radius: 11px; padding: 12px; box-shadow: 0 2px 6px rgba(15,23,42,0.06); cursor: grab; }
.sb-kb-card:hover { box-shadow: 0 6px 16px rgba(15,23,42,0.1); }
.sb-kb-tag { display: inline-block; font-size: 0.66rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--kbt,var(--sb-brand)) 14%, var(--sb-neutral-0)); color: var(--kbt,var(--sb-brand)); margin-bottom: 8px; }
.sb-kb-card-title { font-weight: 700; font-size: 0.88rem; color: var(--sb-neutral-900); }
.sb-kb-card-body { font-size: 0.82rem; color: var(--sb-neutral-500); margin-top: 4px; }
.sb-kb-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }

/* ---- Timeline horizontal ---- */
.sb-tlh { display: flex; }
.sb-tlh-item { flex: 1; position: relative; text-align: center; padding-top: 34px; }
/* La línea conecta con el paso SIGUIENTE (a la derecha). El último no tiene, y
   nunca hay línea a la izquierda del primero. Roja solo si el paso ya se completó. */
.sb-tlh-line { position: absolute; top: 15px; left: 50%; width: 100%; height: 3px; background: var(--sb-neutral-200); z-index: var(--sb-z-base); }
.sb-tlh-item:last-child .sb-tlh-line { display: none; }
.sb-tlh-item.is-done .sb-tlh-line { background: var(--sb-brand); }
.sb-tlh-dot { z-index: var(--sb-z-base); }
.sb-tlh-dot { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 32px; height: 32px; border-radius: 50%; background: var(--sb-neutral-150); color: var(--sb-neutral-400); border: 2px solid var(--sb-neutral-150); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8rem; }
.sb-tlh-item.is-active .sb-tlh-dot { background: var(--sb-brand); color: var(--sb-neutral-0); border-color: var(--sb-brand); box-shadow: 0 0 0 4px rgba(200,40,0,0.14); }
.sb-tlh-item.is-done .sb-tlh-dot { background: var(--sb-neutral-0); color: var(--sb-brand); border-color: var(--sb-brand); }
.sb-tlh-label { font-weight: 700; font-size: 0.82rem; color: var(--sb-neutral-700); }
.sb-tlh-item.is-todo .sb-tlh-label { color: var(--sb-neutral-400); }
.sb-tlh-text { font-size: 0.74rem; color: var(--sb-neutral-400); margin-top: 2px; }

/* ---- Archivo ---- */
.sb-file { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--sb-neutral-150); border-radius: 12px; background: var(--sb-neutral-0); }
.sb-file-ico { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--fi,var(--sb-neutral-500)) 12%, var(--sb-neutral-0)); color: var(--fi,var(--sb-neutral-500)); font-size: 1.1rem; flex: 0 0 auto; }
.sb-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sb-file-name { font-weight: 700; font-size: 0.86rem; color: var(--sb-neutral-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-file-size { font-size: 0.75rem; color: var(--sb-neutral-400); }

/* ---- Precios ---- */
.sb-price { background: var(--sb-neutral-0); border: 1px solid var(--sb-neutral-150); border-radius: 18px; padding: 24px; position: relative; box-shadow: 0 4px 14px rgba(15,23,42,0.05); }
.sb-price.is-featured { border: 2px solid var(--sb-brand); box-shadow: 0 16px 34px rgba(200,40,0,0.14); }
.sb-price-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--sb-brand); color: var(--sb-neutral-0); font-size: 0.7rem; font-weight: 800; padding: 4px 14px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.5px; }
.sb-price-name { font-weight: 800; font-size: 1.05rem; color: var(--sb-neutral-900); }
.sb-price-amount { font-size: 2.2rem; font-weight: 900; color: var(--sb-neutral-900); margin: 6px 0; }
.sb-price-period { font-size: 0.85rem; font-weight: 700; color: var(--sb-neutral-400); }
.sb-price-desc { font-size: 0.85rem; color: var(--sb-neutral-500); margin: 0 0 14px; }
.sb-price-feats { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 9px; }
.sb-price-feats li { display: flex; align-items: center; gap: 9px; font-size: 0.88rem; color: var(--sb-neutral-600); }
.sb-price-feats li i { color: var(--sb-green-600); }
.sb-price-action { }
.sb-price-action > * { width: 100%; justify-content: center; }

/* ---- Banner ---- */
.sb-banner { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; }
.sb-banner-ico { font-size: 1.15rem; }
.sb-banner-body { flex: 1; min-width: 0; }
.sb-banner-title { font-weight: 800; margin-right: 8px; }
.sb-banner-text { font-size: 0.9rem; }
.sb-banner-x { border: none; background: none; cursor: pointer; opacity: 0.6; color: inherit; }
.sb-banner--brand { background: linear-gradient(135deg, var(--sb-brand), var(--sb-brand-800)); color: var(--sb-neutral-0); }
.sb-banner--info { background: var(--sb-blue-50); color: var(--sb-blue-700); }
.sb-banner--success { background: var(--sb-green-50); color: var(--sb-green-800); }
.sb-banner--warning { background: var(--sb-amber-50); color: var(--sb-amber-700); }
.sb-banner--danger { background: var(--sb-red-50); color: var(--sb-red-800); }

/* ---- Notificación ---- */
.sb-noti { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: none; background: var(--sb-neutral-0); border-bottom: 1px solid var(--sb-neutral-100); cursor: pointer; text-align: left; }
.sb-noti:hover { background: var(--sb-neutral-25); }
.sb-noti.is-unread { background: var(--sb-brand-50); }
.sb-noti-ico { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; background: color-mix(in srgb, var(--ni,var(--sb-brand)) 14%, var(--sb-neutral-0)); color: var(--ni,var(--sb-brand)); }
.sb-noti-ico img { width: 100%; height: 100%; object-fit: cover; }
.sb-noti-body { flex: 1; min-width: 0; }
.sb-noti-text { font-size: 0.88rem; color: var(--sb-neutral-700); }
.sb-noti-time { font-size: 0.74rem; color: var(--sb-neutral-400); }
.sb-noti-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sb-brand); flex: 0 0 auto; }

/* ---- Ribbon ---- */
.sb-ribbon-wrap { position: relative; overflow: hidden; border-radius: 16px; }
.sb-ribbon { position: absolute; top: 14px; right: -34px; transform: rotate(45deg); width: 140px; text-align: center; font-size: 0.7rem; font-weight: 800; padding: 4px 0; color: var(--sb-neutral-0); text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 4px 10px rgba(15,23,42,0.18); z-index: var(--sb-z-raised); }
.sb-ribbon--brand { background: var(--sb-brand); }
.sb-ribbon--success { background: var(--sb-green-600); }
.sb-ribbon--info { background: var(--sb-blue-600); }
.sb-ribbon--dark { background: var(--sb-neutral-850); }

/* =============================================================================
   NUEVOS COMPONENTES Y MEJORAS AVANZADAS · SISTEMA DE DISEÑO SABORA
   ============================================================================= */

/* ------------------------------------------- SaboraGrid: Mejoras avanzadas --- */
.sb-grid-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--sb-neutral-900);
    color: var(--sb-neutral-0);
    padding: 10px 18px;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
    animation: sbSlideDown 0.2s ease-out;
}
.sb-grid-actions-bar .sb-count-badge {
    background: var(--sb-brand);
    color: var(--sb-neutral-0);
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
}

/* ------------------------------------- Formulario: Validación y Addons --- */
.sb-input-group {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
}
.sb-input-addon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    background: var(--sb-neutral-50);
    border: 1px solid var(--sb-neutral-300);
    color: var(--sb-neutral-600);
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1;
    user-select: none;
    box-sizing: border-box;
}
.sb-input-addon--prefix {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-right: none;
}
.sb-input-addon--suffix {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-left: none;
}
.sb-input-group .sb-input {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 10px;
    box-sizing: border-box;
}
.sb-input-group:focus-within .sb-input-addon {
    border-color: var(--sb-brand);
    background: var(--sb-brand-surface);
    color: var(--sb-brand);
}
.sb-input-group .sb-input:has(~ .sb-input-addon--suffix) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.sb-input-group .sb-input-addon--prefix + .sb-input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}


.sb-field.is-invalid .sb-input {
    border-color: var(--sb-red-500);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}
.sb-field.is-invalid .sb-field-label {
    color: var(--sb-red-500) !important;
}
.sb-field.is-valid .sb-input {
    border-color: var(--sb-green-500);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}
.sb-field-error {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--sb-red-500);
}
.sb-field-success {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--sb-green-500);
}
.sb-cal-preset-btn.is-active {
    background: var(--sb-brand);
    color: var(--sb-neutral-0);
    border-color: var(--sb-brand);
}
.sb-cal-time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-top: 1px solid var(--sb-neutral-150);
    background: var(--sb-neutral-25);
}

/* ----------------------------------- Command Palette / Spotlight (Cmd+K) --- */
/* ----------------------------------- Command Palette / Spotlight (Cmd+K) --- */
.sb-spotlight-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: var(--sb-z-drawer);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 70px 20px 20px;
    animation: sbFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-spotlight {
    width: 100%;
    max-width: 680px;
    background: var(--sb-neutral-0);
    border-radius: 20px;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.2);
    border: 1px solid var(--sb-neutral-200);
    overflow: hidden;
    animation: sbScaleUp 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.sb-spotlight-head {
    position: relative;
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--sb-neutral-100);
    gap: 14px;
    background: var(--sb-neutral-0);
}

.sb-spotlight-search-icon {
    font-size: 1.25rem;
    color: var(--sb-brand);
}

.sb-spotlight-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1.05rem;
    font-family: var(--sb-font);
    font-weight: 600;
    color: var(--sb-neutral-900);
    background: transparent;
}

.sb-spotlight-input::placeholder {
    color: var(--sb-neutral-400);
    font-weight: 400;
}

.sb-spotlight-clear-btn {
    border: none;
    background: var(--sb-neutral-100);
    color: var(--sb-neutral-500);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.15s ease;
}

.sb-spotlight-clear-btn:hover {
    background: var(--sb-neutral-200);
    color: var(--sb-neutral-900);
}

/* Categorías / Tabs */
.sb-spotlight-categories {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--sb-neutral-50);
    border-bottom: 1px solid var(--sb-neutral-150);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.sb-spotlight-categories:hover {
    scrollbar-color: var(--sb-neutral-300) transparent;
}

.sb-spotlight-categories::-webkit-scrollbar {
    height: 4px;
}

.sb-spotlight-categories::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 999px;
}

.sb-spotlight-categories:hover::-webkit-scrollbar-thumb {
    background: var(--sb-neutral-300);
}

.sb-spotlight-categories > .sb-spotlight-cat-chip {
    flex: 0 0 auto;
}

.sb-spotlight-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--sb-neutral-200);
    background: var(--sb-neutral-0);
    color: var(--sb-neutral-500);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.sb-spotlight-cat-chip:hover {
    background: var(--sb-neutral-100);
    color: var(--sb-neutral-900);
    border-color: var(--sb-neutral-300);
}

.sb-spotlight-cat-chip.is-active {
    background: var(--sb-neutral-900);
    color: var(--sb-neutral-0);
    border-color: var(--sb-neutral-900);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
}

.sb-spotlight-cat-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--sb-neutral-100);
    color: var(--sb-neutral-500);
    font-size: 0.7rem;
    font-weight: 800;
}

.sb-spotlight-cat-chip.is-active .sb-spotlight-cat-count {
    background: rgba(255, 255, 255, 0.2);
    color: var(--sb-neutral-0);
}

.sb-spotlight-list {
    max-height: 420px;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sb-spotlight-group-title {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--sb-neutral-400);
    padding: 10px 10px 4px;
    display: flex;
    align-items: center;
}

.sb-spotlight-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.12s ease;
    text-decoration: none;
    color: var(--sb-neutral-900);
    border: 1px solid transparent;
}

.sb-spotlight-item:hover,
.sb-spotlight-item.is-selected {
    background: var(--sb-neutral-50);
    border-color: var(--sb-neutral-200);
    transform: translateX(2px);
}

.sb-spotlight-item--ai {
    background: var(--sb-neutral-25);
    border: 1px dashed var(--sb-neutral-200);
}

.sb-spotlight-item--ai:hover,
.sb-spotlight-item--ai.is-selected {
    background: var(--sb-brand-surface);
    border-color: var(--sb-red-200);
    border-style: solid;
}

.sb-spotlight-item-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex: 0 0 36px;
}

.sb-spotlight-item-content {
    flex: 1;
    min-width: 0;
}

.sb-spotlight-item-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--sb-neutral-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-spotlight-item-sub {
    font-size: 0.78rem;
    color: var(--sb-neutral-500);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-spotlight-badge {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-left: 8px;
    white-space: nowrap;
}

.sb-spotlight-shortcut {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 3px 8px;
}

.sb-spotlight-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--sb-neutral-400);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
}

.sb-spotlight-empty i {
    font-size: 2rem;
    opacity: 0.5;
}

.sb-spotlight-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    background: var(--sb-neutral-50);
    border-top: 1px solid var(--sb-neutral-150);
    font-size: 0.75rem;
    color: var(--sb-neutral-500);
}

.sb-spotlight-hints {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sb-spotlight-hint {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sb-spotlight-brand {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    color: var(--sb-neutral-900);
}

/* -------------------------------- 1. Parrilla Horaria Semanal (Schedule) --- */
.sb-schedule {
    background: var(--sb-neutral-0);
    border: 1px solid var(--sb-neutral-200);
    border-radius: 16px;
    overflow-x: auto;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}
.sb-schedule-header {
    display: grid;
    grid-template-columns: 70px repeat(5, minmax(140px, 1fr));
    background: var(--sb-neutral-50);
    border-bottom: 2px solid var(--sb-neutral-200);
    text-align: center;
    font-weight: 800;
    font-size: 0.82rem;
    color: var(--sb-neutral-600);
}
.sb-schedule-header > div {
    padding: 12px 6px;
    border-right: 1px solid var(--sb-neutral-150);
}
.sb-schedule-header > div:last-child {
    border-right: none;
}
.sb-schedule-body {
    display: flex;
    flex-direction: column;
}
.sb-schedule-row {
    display: grid;
    grid-template-columns: 70px repeat(5, minmax(140px, 1fr));
    min-height: 85px;
    border-bottom: 1px solid var(--sb-neutral-150);
}
.sb-schedule-time {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--sb-neutral-400);
    background: var(--sb-neutral-25);
    border-right: 1px solid var(--sb-neutral-150);
}
.sb-schedule-cell {
    position: relative;
    padding: 6px;
    border-right: 1px solid var(--sb-neutral-150);
    background: var(--sb-neutral-0);
}
.sb-schedule-cell:last-child {
    border-right: none;
}
.sb-schedule-card {
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 0.78rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    border-left: 4px solid var(--sch-color, var(--sb-brand));
    background: color-mix(in srgb, var(--sch-color, var(--sb-brand)) 8%, var(--sb-neutral-0));
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.sb-schedule-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}
.sb-schedule-card-title {
    font-weight: 800;
    color: var(--sb-neutral-900);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sb-schedule-card-teacher {
    font-size: 0.72rem;
    color: var(--sb-neutral-500);
    margin-top: 2px;
}
.sb-schedule-card-room {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.06);
    margin-top: 4px;
}
.sb-schedule-occupancy {
    margin-top: 6px;
}
.sb-schedule-occupancy-bar {
    height: 4px;
    border-radius: 999px;
    background: var(--sb-neutral-200);
    overflow: hidden;
}
.sb-schedule-occupancy-fill {
    height: 100%;
    background: var(--sch-color, var(--sb-brand));
    border-radius: 999px;
}

/* --------------------------------- 2. Balance Leader & Follower --- */
.sb-balance {
    background: var(--sb-neutral-0);
    border: 1px solid var(--sb-neutral-200);
    border-radius: 14px;
    padding: 16px;
}
.sb-balance-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.sb-balance-title {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--sb-neutral-900);
}
.sb-balance-ratio {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--sb-neutral-100);
    color: var(--sb-neutral-600);
}
.sb-balance-bar {
    height: 16px;
    border-radius: 999px;
    background: var(--sb-neutral-100);
    display: flex;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}
.sb-balance-leaders {
    background: linear-gradient(90deg, var(--sb-blue-600), var(--sb-blue-500));
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sb-neutral-0);
    font-size: 0.65rem;
    font-weight: 800;
}
.sb-balance-followers {
    background: linear-gradient(90deg, var(--sb-role-follower), var(--sb-red-500));
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sb-neutral-0);
    font-size: 0.65rem;
    font-weight: 800;
}
.sb-balance-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 0.8rem;
    font-weight: 700;
}
.sb-balance-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sb-balance-dot-l {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sb-blue-600);
}
.sb-balance-dot-f {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sb-role-follower);
}

/* --------------------------------- 3. Check-In Rápido con QR / Asistencia --- */
.sb-checkin {
    background: var(--sb-neutral-0);
    border: 2px solid var(--sb-neutral-200);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.sb-checkin.is-granted {
    border-color: var(--sb-green-500);
}
.sb-checkin.is-denied {
    border-color: var(--sb-red-500);
}
.sb-checkin-banner {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}
.sb-checkin-banner.is-ok {
    background: var(--sb-green-100);
    color: var(--sb-green-800);
}
.sb-checkin-banner.is-debt {
    background: var(--sb-red-100);
    color: var(--sb-red-800);
}
.sb-checkin-avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--sb-neutral-0);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.sb-checkin-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--sb-neutral-900);
    margin-bottom: 2px;
}
.sb-checkin-course {
    font-size: 0.85rem;
    color: var(--sb-neutral-500);
    margin-bottom: 14px;
}
.sb-checkin-bday {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--sb-amber-100);
    color: var(--sb-amber-700);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    margin-bottom: 14px;
}
.sb-checkin-action {
    width: 100%;
    padding: 12px;
    font-size: 0.95rem;
    font-weight: 800;
    border-radius: 12px;
}

/* --------------------------------- 4. Mapa de Aforo y Mesas (Floor Plan) --- */
.sb-floorplan {
    background: var(--sb-neutral-900);
    border-radius: 18px;
    padding: 24px;
    color: var(--sb-neutral-0);
}
.sb-floorplan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.sb-floorplan-center {
    background: linear-gradient(135deg, rgba(200, 40, 0, 0.2), rgba(232, 164, 28, 0.2));
    border: 2px dashed rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sb-amber-200);
    margin-bottom: 20px;
}
.sb-floorplan-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.sb-table-box {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
}
.sb-table-box:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}
.sb-table-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--sb-neutral-0);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.sb-table-box.is-free .sb-table-circle {
    background: var(--sb-green-500);
}
.sb-table-box.is-occupied .sb-table-circle {
    background: var(--sb-red-500);
}
.sb-table-box.is-reserved .sb-table-circle {
    background: var(--sb-accent-violet);
}
.sb-table-box.is-vip .sb-table-circle {
    background: var(--sb-amber-500);
}
.sb-table-label {
    font-size: 0.78rem;
    font-weight: 700;
}
.sb-seat-dot.is-filled {
    background: var(--sb-neutral-0);
}

/* --------------------------------- 5. Arqueo y Desglose de Caja --- */
.sb-cashcount {
    background: var(--sb-neutral-0);
    border: 1px solid var(--sb-neutral-200);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}
.sb-cash-table {
    width: 100%;
    border-collapse: collapse;
}
.sb-cash-table th {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--sb-neutral-500);
    text-transform: uppercase;
    padding: 8px 10px;
    text-align: left;
    border-bottom: 2px solid var(--sb-neutral-200);
}
.sb-cash-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--sb-neutral-100);
    font-size: 0.88rem;
}
.sb-cash-table input.sb-cash-qty {
    width: 70px;
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid var(--sb-neutral-300);
    text-align: center;
    font-weight: 700;
    font-family: inherit;
}
.sb-cash-table input.sb-cash-qty:focus {
    border-color: var(--sb-brand);
    outline: none;
}
.sb-cash-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--sb-neutral-50);
    border-radius: 12px;
    padding: 14px 18px;
    margin-top: 16px;
}
.sb-cash-variance {
    font-size: 0.8rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 999px;
}
.sb-cash-variance.is-match {
    background: var(--sb-green-100);
    color: var(--sb-green-800);
}
.sb-cash-variance.is-short {
    background: var(--sb-red-100);
    color: var(--sb-red-800);
}
.sb-cash-variance.is-over {
    background: var(--sb-amber-100);
    color: var(--sb-amber-700);
}

/* --------------------------------- 6. Cobro Dividido (Split Payment) --- */
.sb-splitpay {
    background: var(--sb-neutral-0);
    border: 1px solid var(--sb-neutral-200);
    border-radius: 16px;
    padding: 20px;
}
.sb-split-total-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--sb-brand-surface);
    border: 1px solid var(--sb-amber-200);
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 16px;
}
.sb-split-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.sb-split-method {
    width: 130px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--sb-neutral-700);
}

/* --------------------------------- 7. Calculadora de Liquidación de Profesores --- */
.sb-profpay {
    background: var(--sb-neutral-0);
    border: 1px solid var(--sb-neutral-200);
    border-radius: 16px;
    padding: 20px;
}
.sb-profpay-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--sb-neutral-100);
    font-size: 0.88rem;
    color: var(--sb-neutral-600);
}
.sb-profpay-total {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--sb-neutral-900);
    border-top: 2px solid var(--sb-neutral-200);
    margin-top: 8px;
}

/* --------------------------------- 8. Selector de Intervalo Horario (TimeSlot) --- */
.sb-timeslot {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--sb-neutral-0);
    border: 1px solid var(--sb-neutral-200);
    border-radius: 12px;
    padding: 8px 12px;
    max-width: 360px;
}
.sb-timeslot-val {
    border: none;
    outline: none;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--sb-neutral-900);
    width: 70px;
    background: var(--sb-neutral-50);
    padding: 4px 8px;
    border-radius: 6px;
    text-align: center;
}
.sb-timeslot-badge {
    margin-left: auto;
    background: var(--sb-blue-100);
    color: var(--sb-blue-700);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
}

/* --------------------------------- 9. Selector Dual / PickList --- */
.sb-picklist {
    display: grid;
    grid-template-columns: 1fr 50px 1fr;
    gap: 12px;
    align-items: center;
}
.sb-picklist-box {
    background: var(--sb-neutral-0);
    border: 1px solid var(--sb-neutral-200);
    border-radius: 12px;
    overflow: hidden;
    height: 220px;
    display: flex;
    flex-direction: column;
}
.sb-picklist-head {
    background: var(--sb-neutral-50);
    padding: 8px 12px;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--sb-neutral-500);
    border-bottom: 1px solid var(--sb-neutral-200);
    display: flex;
    justify-content: space-between;
}
.sb-picklist-items {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}
.sb-picklist-item {
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.1s ease;
    margin-bottom: 2px;
}
.sb-picklist-item:hover {
    background: var(--sb-neutral-100);
}
.sb-picklist-item.is-selected {
    background: var(--sb-brand-surface);
    color: var(--sb-brand);
    font-weight: 700;
}
.sb-picklist-btns {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

/* --------------------------------- 10. Pad de Firma Digital --- */
.sb-signpad {
    background: var(--sb-neutral-0);
    border: 1px solid var(--sb-neutral-200);
    border-radius: 16px;
    padding: 16px;
    max-width: 440px;
}
.sb-signpad-canvas {
    width: 100%;
    height: 140px;
    background: var(--sb-neutral-25);
    border: 2px dashed var(--sb-neutral-300);
    border-radius: 12px;
    cursor: crosshair;
    display: block;
    touch-action: none;
}
.sb-signpad-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

/* --------------------------------- 11. Previsualizador WhatsApp --- */
.sb-wspreview {
    width: 100%;
    max-width: 380px;
    background: var(--sb-whatsapp-canvas);
    border: 8px solid var(--sb-neutral-800);
    border-radius: 36px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2);
}
.sb-ws-header {
    background: var(--sb-whatsapp);
    color: var(--sb-neutral-0);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sb-ws-body {
    padding: 14px;
    min-height: 260px;
    background-image: radial-gradient(var(--sb-neutral-300) 1px, transparent 1px);
    background-size: 16px 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.sb-ws-bubble {
    background: var(--sb-whatsapp-bubble);
    padding: 8px 12px;
    border-radius: 10px;
    border-top-right-radius: 2px;
    font-size: 0.85rem;
    color: var(--sb-neutral-900);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    max-width: 90%;
    margin-left: auto;
    line-height: 1.4;
}
.sb-ws-var {
    background: var(--sb-blue-200);
    color: var(--sb-blue-700);
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.78rem;
}
.sb-ws-time {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    font-size: 0.65rem;
    color: var(--sb-neutral-500);
    margin-top: 4px;
}
.sb-ws-time i {
    color: var(--sb-accent-sky);
}

/* --------------------------------- 12. Barra Flotante Inferior (Bottom Bar) --- */
.sb-bottombar {
    position: sticky;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--sb-neutral-200);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.06);
    border-radius: 14px 14px 0 0;
    z-index: var(--sb-z-raised);
}
.sb-bottombar-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sb-bottombar-actions {
    display: flex;
    gap: 10px;
}

@keyframes sbFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes sbScaleUp {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@keyframes sbSlideDown {
    from { transform: translateY(-8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* =============================================================================
   22 NUEVOS COMPONENTES ULTRA MODERNOS · SUITE SABORA 2.0
   ============================================================================= */

/* 1. Carnet Digital de Alumno (NFC / QR Member Pass) */
.sb-membercard {
    background: linear-gradient(135deg, var(--sb-accent-night) 0%, var(--sb-neutral-900) 50%, var(--sb-accent-plum) 100%);
    border-radius: 20px;
    padding: 24px;
    color: var(--sb-neutral-0);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.35);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.sb-membercard::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(200, 40, 0, 0.15) 0%, transparent 60%);
    pointer-events: none;
}
.sb-membercard-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.sb-membercard-chip {
    width: 38px;
    height: 28px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--sb-amber-600), var(--sb-amber-500));
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
    position: relative;
}
.sb-membercard-body {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.sb-membercard-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid var(--sb-brand-accent);
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
    object-fit: cover;
}
.sb-membercard-num {
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sb-neutral-200);
    margin-top: 4px;
}
.sb-membercard-foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 14px;
}

/* 2. Ecualizador de Nivel de Baile (Skill Matrix Slider) */
.sb-skillmatrix {
    background: var(--sb-neutral-0);
    border: 1px solid var(--sb-neutral-200);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}
.sb-skill-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.sb-skill-label {
    width: 140px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--sb-neutral-600);
}
.sb-skill-slider {
    flex: 1;
    accent-color: var(--sb-brand);
    cursor: pointer;
}
.sb-skill-score {
    width: 32px;
    text-align: right;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--sb-brand);
}

/* 3. Reproductor de Música para Clases & BPM Tapper */
.sb-audioplayer {
    background: var(--sb-neutral-900);
    border-radius: 18px;
    padding: 20px;
    color: var(--sb-neutral-0);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
.sb-audio-waveform {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 48px;
    margin: 16px 0;
    padding: 0 8px;
}
.sb-wave-bar {
    flex: 1;
    background: var(--sb-neutral-600);
    border-radius: 999px;
    transition: height 0.1s ease, background 0.15s ease;
}
.sb-wave-bar.is-played {
    background: var(--sb-brand-accent);
}
.sb-bpm-badge {
    background: linear-gradient(135deg, var(--sb-brand), var(--sb-brand-accent));
    color: var(--sb-neutral-0);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 900;
    cursor: pointer;
    user-select: none;
    transition: transform 0.08s ease;
}
.sb-bpm-badge:active {
    transform: scale(0.92);
}

/* 4. Ticket Térmico de Recibo (Thermal Receipt POS) */
.sb-thermalticket {
    background: var(--sb-neutral-0);
    width: 100%;
    max-width: 320px;
    padding: 24px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.82rem;
    color: var(--sb-neutral-900);
    position: relative;
    border-top: 4px solid var(--sb-neutral-900);
}
.sb-thermalticket::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background: radial-gradient(circle, transparent, transparent 50%, var(--sb-neutral-0) 50%, var(--sb-neutral-0) 100%);
    background-size: 12px 12px;
}
.sb-thermal-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}
.sb-thermal-divider {
    border-top: 1px dashed var(--sb-neutral-300);
    margin: 12px 0;
}

/* 5. Funnel de Pre-inscripciones (Lead Funnel) */
.sb-funnel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--sb-neutral-0);
    border: 1px solid var(--sb-neutral-200);
    border-radius: 16px;
    padding: 20px;
}
.sb-funnel-step {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sb-funnel-bar-wrap {
    flex: 1;
    height: 28px;
    background: var(--sb-neutral-100);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}
.sb-funnel-fill {
    height: 100%;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding-left: 12px;
    color: var(--sb-neutral-0);
    font-weight: 800;
    font-size: 0.75rem;
    transition: width 0.4s ease;
}

/* 6. Asistente de IA para WhatsApp (AI Prompt Copilot) */
.sb-aicopilot {
    background: linear-gradient(135deg, var(--sb-neutral-50), var(--sb-brand-surface));
    border: 1px solid var(--sb-amber-200);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(200, 40, 0, 0.05);
}
.sb-ai-draft {
    background: var(--sb-neutral-0);
    border: 1px solid var(--sb-neutral-200);
    border-radius: 12px;
    padding: 14px;
    font-size: 0.88rem;
    color: var(--sb-neutral-700);
    margin: 12px 0;
    border-left: 4px solid var(--sb-brand);
}

/* 7. Gamificación & Racha de Asistencia (Loyalty Streak) */
.sb-loyalty {
    background: var(--sb-neutral-0);
    border: 1px solid var(--sb-neutral-200);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 18px;
}
.sb-streak-flame {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--sb-accent-ember), var(--sb-accent-flame));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sb-neutral-0);
    font-size: 1.6rem;
    box-shadow: 0 6px 16px rgba(255, 69, 0, 0.3);
    animation: sbPulse 2s infinite;
}

/* 8. Matriz de Disponibilidad de Salas (Gantt Room Bar) */
.sb-roomgantt {
    background: var(--sb-neutral-0);
    border: 1px solid var(--sb-neutral-200);
    border-radius: 16px;
    padding: 18px;
    overflow-x: auto;
}
.sb-gantt-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}
.sb-gantt-track {
    height: 32px;
    background: var(--sb-neutral-100);
    border-radius: 8px;
    position: relative;
    display: flex;
    overflow: hidden;
}
.sb-gantt-block {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: var(--sb-neutral-0);
    font-weight: 800;
    font-size: 0.72rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    cursor: pointer;
}

/* 9. Selector Visual de Parejas (Pair Matching Matrix) */
.sb-pairmatch {
    background: var(--sb-neutral-0);
    border: 1px solid var(--sb-neutral-200);
    border-radius: 16px;
    padding: 16px;
}
.sb-pair-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--sb-neutral-50);
    border-radius: 12px;
    margin-bottom: 8px;
}
.sb-bundle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--sb-neutral-25);
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.sb-bundle-item.is-selected {
    background: var(--sb-brand-surface);
    border: 1px solid var(--sb-amber-200);
}

/* 11. Entrada de Evento / Social con QR Desprendible (Ticket Pass) */
.sb-ticketpass {
    background: var(--sb-neutral-0);
    border-radius: 20px;
    display: flex;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1);
    overflow: hidden;
    max-width: 480px;
    border: 1px solid var(--sb-neutral-200);
}
.sb-ticket-main {
    flex: 1;
    padding: 20px;
}
.sb-ticket-stub {
    width: 140px;
    background: var(--sb-neutral-900);
    color: var(--sb-neutral-0);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-left: 2px dashed var(--sb-neutral-300);
    text-align: center;
}

/* 12. Feed de Actividad en Tiempo Real (Live Activity Feed) */
.sb-livefeed {
    background: var(--sb-neutral-0);
    border: 1px solid var(--sb-neutral-200);
    border-radius: 16px;
    padding: 18px;
}
.sb-feed-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--sb-neutral-100);
}
.sb-pulse-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sb-green-500);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: sbPulseGlow 1.8s infinite;
    margin-top: 4px;
}

/* 13. Temporizador de Rotación de Parejas (Rotation Timer) */
.sb-rotationtimer {
    background: var(--sb-neutral-900);
    border-radius: 20px;
    padding: 24px;
    color: var(--sb-neutral-0);
    text-align: center;
}
.sb-timer-circle {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 6px solid var(--sb-brand-accent);
    margin: 14px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 900;
    font-family: var(--sb-font);
}

/* 14. Tarjetas Delta (Comparador Mes a Mes) */
.sb-deltacard {
    background: var(--sb-neutral-0);
    border: 1px solid var(--sb-neutral-200);
    border-radius: 16px;
    padding: 18px;
}
.sb-delta-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 999px;
}
.sb-delta-badge.is-pos { background: var(--sb-green-100); color: var(--sb-green-800); }
.sb-delta-badge.is-neg { background: var(--sb-red-100); color: var(--sb-red-800); }

/* 15. Control de Acceso RFID / Torno (Biometric Gate) */
.sb-rfidlog {
    background: var(--sb-neutral-800);
    border-radius: 16px;
    padding: 20px;
    color: var(--sb-neutral-0);
}
.sb-rfid-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
}

/* 16. Lista de Tareas de Recepción (Checklist) */
.sb-checklist {
    background: var(--sb-neutral-0);
    border: 1px solid var(--sb-neutral-200);
    border-radius: 16px;
    padding: 18px;
}
.sb-check-task {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 0.88rem;
    cursor: pointer;
}
.sb-check-task.is-done span {
    text-decoration: line-through;
    color: var(--sb-neutral-400);
}

/* 17. Valoración con Emojis & Reseña (Feedback Card) */
.sb-feedbackcard {
    background: var(--sb-neutral-0);
    border: 1px solid var(--sb-neutral-200);
    border-radius: 16px;
    padding: 20px;
}
.sb-emoji-row {
    display: flex;
    justify-content: space-around;
    margin: 14px 0;
}
.sb-emoji-btn {
    font-size: 1.8rem;
    border: none;
    background: none;
    cursor: pointer;
    transition: transform 0.15s ease;
}
.sb-emoji-btn:hover {
    transform: scale(1.3);
}

/* 20. Visualizador de Tarjeta de Crédito 3D (Interactive Card Mockup) */
.sb-creditcard3d {
    width: 320px;
    height: 190px;
    background: linear-gradient(135deg, var(--sb-neutral-900), var(--sb-neutral-700));
    border-radius: 18px;
    padding: 20px;
    color: var(--sb-neutral-0);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* 21. Termómetro de Riesgo de Abandono / Churn */
.sb-churnrisk {
    background: var(--sb-neutral-0);
    border: 1px solid var(--sb-neutral-200);
    border-radius: 16px;
    padding: 18px;
}
.sb-churn-meter {
    height: 12px;
    border-radius: 999px;
    background: var(--sb-neutral-100);
    overflow: hidden;
    display: flex;
    margin: 10px 0;
}

/* 22. Barra de Atajos Flotante (Speed Dial FAB) & Backdrop Blur */
.sb-speeddial-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: var(--sb-z-backdrop);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-speeddial-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.sb-speeddial-wrap {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: var(--sb-z-backdrop);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.sb-speeddial-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 4px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px) scale(0.95);
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-speeddial-wrap.is-open .sb-speeddial-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.sb-speeddial-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    border-radius: 14px;
    border: 1px solid transparent;
    font-family: var(--sb-font);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    white-space: nowrap;
    text-decoration: none;
}

.sb-speeddial-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

.sb-speeddial-btn-icon {
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.sb-speeddial-wrap .sb-fab {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--sb-brand), var(--sb-brand-gradient-end));
    color: var(--sb-neutral-0);
    font-size: 1.35rem;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(200, 40, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, background 0.2s ease;
}

.sb-speeddial-wrap .sb-fab:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 14px 36px rgba(200, 40, 0, 0.6);
}

.sb-speeddial-wrap.is-open .sb-fab {
    transform: rotate(90deg);
    background: var(--sb-neutral-900);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.45);
}

@keyframes sbPulseGlow {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
@keyframes sbPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

/* =============================================================================
   23. SABORA APP SHELL & LAYOUT ARCHITECTURE
   ============================================================================= */
.sb-app-shell {
    display: flex;
    width: 100%;
    min-height: 100vh;
    background-color: var(--sb-neutral-50);
}

.sb-main-panel {
    flex: 1;
    min-width: 0;
    margin-left: 72px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    background-color: var(--sb-neutral-50);
}

@media (max-width: 1024px) {
    .sb-main-panel {
        margin-left: 0 !important;
    }}

/* Header */
.sb-header {
    position: sticky;
    top: 0;
    z-index: var(--sb-z-header);
    height: 64px;
    background: var(--sb-neutral-900);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    gap: 16px;
    box-sizing: border-box;
}

.sb-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sb-header-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    font-size: 1.05rem;
    transition: all 0.15s ease;
}

.sb-header-menu-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    color: var(--sb-neutral-0);
    border-color: rgba(255, 255, 255, 0.25);
}

@media (max-width: 1024px) {
    .sb-header-menu-btn {
        display: inline-flex;
    }
}

.sb-header-academy-badge {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.sb-header-academy-name {
    font-weight: 800;
    font-size: 0.96rem;
    color: var(--sb-neutral-0);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.sb-header-period-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--sb-neutral-100);
    font-family: var(--sb-font);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.sb-header-period-pill:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.32);
    transform: translateY(-1px);
}

.sb-header-period-icon {
    font-size: 0.84rem;
    color: var(--sb-brand-accent);
}

.sb-header-period-text {
    font-size: 0.85rem;
    font-weight: 700;
}

.sb-header-period-arrow {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
    transition: transform 0.15s ease;
}

.sb-header-center {
    flex: 1;
    max-width: 440px;
    display: flex;
    justify-content: center;
}

.sb-header-search-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sb-header-search-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.25);
}

.sb-header-search-btn i {
    color: var(--sb-brand);
    font-size: 0.95rem;
}

.sb-header-search-placeholder {
    flex: 1;
    text-align: left;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.sb-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sb-header-notif-wrap {
    position: relative;
}

.sb-header-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 1.15rem;
    transition: color 0.15s ease, background 0.15s ease;
}

.sb-header-icon-btn:hover {
    color: var(--sb-neutral-0);
    background: rgba(255, 255, 255, 0.08);
}

.sb-header-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: var(--sb-red-500);
    color: var(--sb-neutral-0);
    font-size: 0.68rem;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 999px;
    border: 2px solid var(--sb-neutral-900);
}

.sb-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sb-header-avatar--initials {
    background: linear-gradient(135deg, var(--sb-brand), var(--sb-brand-accent));
    color: var(--sb-neutral-0);
    font-weight: 800;
    font-size: 0.95rem;
}

/* Viewport principal: 100% Full Responsive Width */
.sb-main-viewport {
    flex: 1;
    padding: 20px 24px 48px;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

@media (max-width: 768px) {
    .sb-main-viewport {
        padding: 12px 10px 36px;
    }}

/* ----------------------------------------------------------- Hub Tabs --- */
.profile-hub-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 24px;
    background: var(--sb-neutral-0);
    padding: 6px;
    border-radius: 16px;
    border: 1px solid var(--sb-neutral-200);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.profile-hub-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    background: transparent;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--sb-neutral-500);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.profile-hub-tab:hover {
    color: var(--sb-neutral-900);
    background: var(--sb-neutral-50);
}

.profile-hub-tab.active {
    background: var(--sb-brand) !important;
    color: var(--sb-neutral-0) !important;
    box-shadow: 0 4px 12px rgba(200, 40, 0, 0.25) !important;
}

.profile-hub-tab.active i {
    color: var(--sb-neutral-0) !important;
}

.sb-form-group,.form-group:not(.btn-group),.period-create-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
}

.sb-form-group:last-child,.form-group:last-child,.period-create-field:last-child {
    margin-bottom: 0 !important;
}

.sb-form-group label,.form-group label,.form-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--sb-neutral-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.modal-body,.period-modal-body {
    padding: 22px 24px !important;
    box-sizing: border-box !important;
}

.modal-body .form-group,
.sb-modal-body .form-group,
.rz-dialog-content .form-group {
    margin-bottom: 16px !important;
}

.sb-form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

.sb-form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 18px;
}

@media (max-width: 768px) {
    .sb-form-row-2,
    .sb-form-row-3 {
        grid-template-columns: 1fr;
    }}

.sb-filter-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 14px 18px;
    background: var(--sb-neutral-0);
    border-radius: 16px;
    border: 1px solid var(--sb-neutral-200);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.sb-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sb-filter-label {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--sb-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.sb-filter-control {
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--sb-neutral-300);
    font-weight: 700;
    font-size: 0.88rem;
    background: var(--sb-neutral-0);
    color: var(--sb-neutral-900);
    outline: none;
    transition: all 0.15s ease;
}

.sb-filter-control:focus {
    border-color: var(--sb-brand);
    box-shadow: 0 0 0 3px rgba(200, 40, 0, 0.12);
}

/* ----------------------------------------------------------- WhatsApp Theme Cards & Badges --- */
.wa-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.wa-badge.success { background: var(--sb-green-100); color: var(--sb-green-800); }
.wa-badge.warning { background: var(--sb-amber-100); color: var(--sb-amber-700); }
.wa-badge.danger  { background: var(--sb-red-100); color: var(--sb-red-700); }
.wa-badge.info    { background: var(--sb-blue-50); color: var(--sb-blue-700); }
.wa-badge.neutral { background: var(--sb-neutral-100); color: var(--sb-neutral-500); }

.ModalDemo-overlay,.ModalPack-overlay,.modal-overlay,.sb-dialog-overlay,.period-modal-backdrop,.app-confirm-overlay,.schedule-modal-overlay,.home-date-modal-overlay,.desglose-overlay,.receipt-detail-overlay,.photo-zoom-overlay,.caja-photo-zoom-overlay,.morosidad-photo-zoom-overlay,.home-class-photo-zoom-overlay,.modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.68) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    z-index: var(--sb-z-spotlight);
    /* Permite ocultar el overlay con display: none desde el componente. */
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}

.ModalDemo-content,.ModalPack-content,.sb-dialog,.period-modal-dialog,.app-confirm,.modal-dialog {
    position: relative !important;
    z-index: var(--sb-z-spotlight);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45) !important;
}

/* --------------------------------------------------- Título de diálogo ---
   Antes iba como style="color:white;font-weight:600" repetido en cada modal. */
.sb-modal-title {
    margin: 0;
    color: var(--sb-text-on-inverse);
    font-size: var(--sb-text-base);
    font-weight: var(--sb-weight-semibold);
}

/* --------------------------------------------- Pantalla de error / vacío ---
   La usa la barrera de errores del layout y el bloque de "acceso restringido".
   Antes eran estilos en línea repetidos con colores escritos a mano. */
.sb-page-error {
    max-width: 520px;
    margin: var(--sb-space-16) auto;
    padding: var(--sb-space-8);
    text-align: center;
}
.sb-page-error-icon {
    font-size: 2.5rem;
    color: var(--sb-brand);
    margin-bottom: var(--sb-space-3);
}
.sb-page-error h2 {
    font-size: var(--sb-text-xl);
    margin-bottom: var(--sb-space-2);
}
.sb-page-error p {
    color: var(--sb-text-muted);
    font-size: var(--sb-text-md);
    line-height: var(--sb-leading-normal);
    margin: 0;
}
.sb-page-error-detail {
    margin-top: var(--sb-space-4);
    padding: var(--sb-space-3);
    border-radius: var(--sb-radius-sm);
    background: var(--sb-surface-muted);
    color: var(--sb-danger-text);
    font-family: var(--sb-font-mono);
    font-size: var(--sb-text-xs);
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------- Píldora de estado ------
   Estado de un cobro, un recibo o una confirmación. Convivían TRES versiones
   distintas de `.status-pill` (una por pantalla) y el mismo estado no se leía
   igual: "pendiente" salía ámbar en el flujo de inscripción y ROJO en la ficha
   del alumno, o sea "hay que cobrarlo" frente a "algo ha fallado". Una sola
   definición, un solo significado.

   `.status-pill` se mantiene como alias mientras quedan pantallas que lo
   construyen dinámicamente (class="status-pill @@estado"). */
.sb-status-pill,
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-1);
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: var(--sb-radius-full);
    font-size: var(--sb-text-2xs);
    font-weight: var(--sb-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* Cobrado, confirmado: hecho y cerrado. */
.sb-status-pill.pagado,   .status-pill.pagado,
.sb-status-pill.confirmed, .status-pill.confirmed,
.sb-status-pill.paid,      .status-pill.paid {
    background: var(--sb-success-surface);
    border-color: var(--sb-success-border);
    color: var(--sb-success-text);
}

/* Pendiente: falta una acción, no es un error. */
.sb-status-pill.pendiente, .status-pill.pendiente,
.sb-status-pill.pending,   .status-pill.pending {
    background: var(--sb-warning-surface);
    border-color: var(--sb-warning-border);
    color: var(--sb-warning-text);
}

/* Emitido: informativo, aún sin cobrar. */
.sb-status-pill.emitido, .status-pill.emitido {
    background: var(--sb-info-surface);
    border-color: var(--sb-info-border);
    color: var(--sb-info-text);
}

/* Anulado o cancelado: sin efecto. */
.sb-status-pill.anulado,   .status-pill.anulado,
.sb-status-pill.cancelado, .status-pill.cancelado {
    background: var(--sb-surface-muted);
    border-color: var(--sb-border);
    color: var(--sb-text-muted);
}

/* Vencido: aquí sí es un problema. */
.sb-status-pill.vencido, .status-pill.vencido {
    background: var(--sb-danger-surface);
    border-color: var(--sb-danger-border);
    color: var(--sb-danger-text);
}

/* --------------------------------------------- Carga de tarjeta de página ---
   La pinta CardPrimary mientras espera datos. Hasta ahora su parámetro
   IsLoading no se leía y siete pantallas mostraban "sin registros" antes de
   que la petición hubiera vuelto. */
.card-primary-loading { display: block; }

/* Celda de usuario que enlaza a su ficha. Sólo enlazan los textos: la foto
   queda fuera del enlace para poder ampliarla con un clic. */
.sb-user-cell-link,
.sb-user-cell--link {
    text-decoration: none;
    color: inherit;
    border-radius: var(--sb-radius-sm);
    transition: background var(--sb-duration-fast) var(--sb-ease);
    min-width: 0;
}
.sb-user-cell-link:hover,
.sb-user-cell--link:hover { background: var(--sb-surface-subtle); text-decoration: none; }
.sb-user-cell-link:hover .sb-user-cell-primary,
.sb-user-cell--link:hover .sb-user-cell-primary { color: var(--sb-brand); }


/* ------------------------------------------------------- Esqueleto de carga ---
   Movido desde legacy/screens-extra.css: lo usa CardPrimary, que es un
   componente del sistema, y no puede depender de una hoja que sólo cargan las
   pantallas internas. Es el indicador de carga estándar del producto: anticipa
   la forma del contenido en lugar de tapar la pantalla con una rueda. */
/* ==========================================================================
   Skeleton Loading System (Enhanced Visibility)
   ========================================================================== */
.skeleton-shimmer {
    background: var(--sb-neutral-120);
    /* Darker than pure white for visibility */
    background-image: linear-gradient(90deg,
            var(--sb-neutral-120) 0%,
            var(--sb-neutral-50) 50%,
            var(--sb-neutral-120) 100%);
    background-size: 200% 100%;
    animation: skeleton-load-wave 1.6s infinite ease-in-out;
    border-radius: 8px;
    display: block;
    position: relative;
    overflow: hidden;
}

@keyframes skeleton-load-wave {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.skeleton-card {
    background: var(--sb-neutral-0) !important;
    border: 1px solid var(--sb-neutral-200) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden;
}

.skeleton-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.skeleton-shimmer--toolbar { height: 60px; border-radius: var(--sb-radius-lg); }
.skeleton-shimmer--row { height: 44px; border-radius: var(--sb-radius-md); }

.card-primary-loading .skeleton-container { padding: var(--sb-space-5); gap: var(--sb-space-3); }