@charset "UTF-8";
/*
 * SKA Admin Components — Centralized CSS
 *
 * RULE: Zero hardcoded colors. Only var(--ska-*) from ska-tokens.css.
 * Location: settings/static/settings/css/
 * Loaded per-template via {% static 'settings/css/ska-admin-components.css' %}
 *
 * Components:
 * - .ska-dashboard, .ska-dash-* — KPI cards & dashboard grids
 * - .ska-stat-* — Stat cards (LLM usage, etc.)
 * - .ska-data-table — Clean data tables
 * - .ska-badge-* — Status badges
 * - .gcm-* — Google Credentials Manager
 * - .dsf-* — Drive Sync Filter dashboard
 * - .mcp-* — MCP Tester
 * - Utility classes (.ska-text-right, etc.)
 */

/* ═══════════════════════════════════════════════════
   TAILWIND-LIKE DESIGN TOKENS (Safe Mapping)
   ═══════════════════════════════════════════════════ */
.bg-ska-surface {
    background: var(--ska-surface) !important;
}

.bg-ska-surface-alt {
    background: var(--ska-surface-alt) !important;
}

.border-ska-border {
    border-color: var(--ska-border) !important;
}

.border-ska-primary {
    border-color: var(--ska-primary) !important;
}

.text-ska-text {
    color: var(--ska-text) !important;
}

.text-ska-text-secondary {
    color: var(--ska-text-secondary) !important;
}

.text-ska-text-muted {
    color: var(--ska-text-muted) !important;
}

.text-ska-text-subtle {
    color: var(--ska-text-subtle) !important;
}

.text-ska-primary {
    color: var(--ska-primary) !important;
}

/* ── Mappings Extraídos de UI_COMPONENTS.md ── */
.text-ska-success {
    color: var(--ska-success) !important;
}

.text-ska-danger {
    color: var(--ska-danger) !important;
}

.text-ska-warning {
    color: var(--ska-warning) !important;
}

.text-ska-info {
    color: var(--ska-info) !important;
}

.bg-ska-primary {
    background-color: var(--ska-primary) !important;
}

.bg-ska-primary-dark {
    background-color: var(--ska-primary-dark) !important;
}

.hover\:text-ska-primary:hover {
    color: var(--ska-primary) !important;
}

.hover\:border-ska-primary:hover {
    border-color: var(--ska-primary) !important;
}

.hover\:bg-ska-surface:hover {
    background-color: var(--ska-surface) !important;
}

.hover\:bg-ska-surface-alt:hover {
    background-color: var(--ska-surface-alt) !important;
}

.hover\:bg-ska-primary-dark:hover {
    background-color: var(--ska-primary-dark) !important;
}

/* ═══════════════════════════════════════════════════
   NATIVE <dialog>:modal CENTERING — preflight restoration
   ═══════════════════════════════════════════════════
   Tailwind preflight (unfold/css/styles.css) declares
   `*,::backdrop{margin:0}` (author origin), which OVERRIDES the browser UA
   stylesheet rule `dialog:modal{margin:auto}` that centers modal dialogs.
   Effect: every <dialog>.showModal() sticks to the top-left corner
   (UA `:modal` gives position:fixed + inset:0, but margin is now 0 instead
   of auto). Restoring margin:auto re-centers ALL native modal dialogs
   project-wide. `dialog:modal` (specificity 0,1,1) beats `*` (0,0,0), so
   this wins regardless of stylesheet load order. */
dialog:modal {
    margin: auto;
}

/* ═══════════════════════════════════════════════════
   UNIFIED DASHBOARD & DETAIL VIEWS (ska-admin-*)
   Official standard as per DESIGN_SYSTEM.md Section 8
   ═══════════════════════════════════════════════════ */

/* ── Layout — full-width (match Flutter scaffold).
       El content area Unfold ya provee padding lateral; aquí solo padding vertical. ── */
.ska-admin-wrap {
    width: 100%;
    padding: 16px 0;
    box-sizing: border-box;
}

/* ── Page Header ── */
.ska-admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.ska-admin-header h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--ska-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ska-admin-header h1 i {
    color: var(--ska-primary);
}

/* ── Nav Lateral / Tabs ── */
.ska-admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 0 20px;
    border-bottom: 1px solid var(--ska-border);
    margin-bottom: 24px;
}

.ska-admin-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--ska-radius-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--ska-text-secondary);
    background: var(--ska-surface);
    border: 1px solid var(--ska-border);
    text-decoration: none;
    transition: all 0.2s ease;
}

.ska-admin-nav-link:hover {
    color: var(--ska-text);
    background: var(--ska-surface-alt);
    border-color: var(--ska-border-hover);
    box-shadow: var(--ska-shadow-sm);
}

.ska-admin-nav-link.active {
    color: var(--ska-primary);
    background: var(--ska-surface-alt);
    border-color: var(--ska-primary);
    font-weight: 600;
}

.ska-admin-nav-link i {
    text-align: center;
    width: 1rem;
}

/* ── Breadcrumbs Unificados ── */
.ska-admin-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 13px;
    font-weight: 500;
    width: 100%;
    background-color: var(--ska-surface-alt);
    border-radius: var(--ska-radius-md);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    /* shadow-sm equivalente */
    border: 1px solid var(--ska-border);
    color: var(--ska-text-muted);
}

.ska-admin-breadcrumb-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--ska-text-muted);
    transition: color 0.2s ease-in-out;
    text-decoration: none;
}

.ska-admin-breadcrumb-link:hover {
    color: var(--ska-primary);
}

.ska-admin-breadcrumb-separator {
    color: var(--ska-border-medium);
    font-size: 9px;
    display: flex;
    align-items: center;
}

.ska-admin-breadcrumb-current {
    color: var(--ska-text);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── App Dock (Bento Navigation) ── */
.ska-admin-dock-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.ska-admin-dock-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--ska-surface);
    border: 1px solid var(--ska-border);
    border-radius: var(--ska-radius-md);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--ska-text);
    transition: all 0.2s ease;
    box-shadow: var(--ska-shadow-sm);
    margin-top: 2px;
}

.ska-admin-dock-btn:hover {
    background: var(--ska-surface-alt);
    border-color: var(--ska-border-hover);
    box-shadow: var(--ska-shadow-md);
    transform: translateY(-1px);
}

.ska-admin-dock-btn .dock-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}

.ska-admin-dock-btn .dock-icon.color-green {
    background: var(--ska-badge-green-bg);
    color: var(--ska-accent-green);
}

.ska-admin-dock-btn .dock-icon.color-gray {
    background: var(--ska-surface-alt);
    color: var(--ska-text-secondary);
    border: 1px solid var(--ska-border);
}

.ska-admin-dock-btn .dock-icon.color-amber {
    background: var(--ska-badge-yellow-bg);
    color: var(--ska-accent-amber);
}

.ska-admin-dock-btn .dock-icon.color-blue {
    background: var(--ska-badge-blue-bg);
    color: var(--ska-accent-blue);
}

.ska-admin-dock-btn .dock-icon.color-purple {
    background: var(--ska-purple-bg);
    color: var(--ska-accent-purple);
}

.ska-admin-dock-btn .dock-icon.color-red {
    background: var(--ska-badge-red-bg);
    color: var(--ska-accent-red);
}

/* ── Filter Bar ── */
.ska-admin-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px;
    background: var(--ska-surface);
    border: 1px solid var(--ska-border);
    border-radius: var(--ska-radius-md);
    margin-bottom: 20px;
    align-items: flex-end;
}

.ska-admin-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ska-admin-filter-group label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ska-text-muted);
}

.ska-admin-filter-group select,
.ska-admin-filter-group input {
    padding: 6px 10px;
    border: 1px solid var(--ska-border);
    border-radius: var(--ska-radius-sm);
    background: var(--ska-bg);
    color: var(--ska-text);
    font-size: 13px;
    min-width: 140px;
}

.ska-admin-filter-group select:focus,
.ska-admin-filter-group input:focus {
    outline: none;
    border-color: var(--ska-primary);
    box-shadow: 0 0 0 2px var(--ska-primary-glow);
}

.ska-admin-filter-btn {
    padding: 6px 16px;
    background: var(--ska-primary);
    color: var(--ska-text-on-primary);
    border: none;
    border-radius: var(--ska-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    align-content: center;
}

.ska-admin-filter-btn:hover {
    background: var(--ska-primary-dark);
}

.ska-admin-filter-btn-reset {
    padding: 8.5px 16px;
    background: transparent;
    color: var(--ska-text-muted);
    border: 1px solid var(--ska-border);
    border-radius: var(--ska-radius-sm);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    align-content: center;
}

.ska-admin-filter-btn-reset:hover {
    color: var(--ska-danger);
    border-color: var(--ska-danger);
}

/* ── Global Data Table (replaces ik-admin-table) ── */
.ska-admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--ska-border);
    border-radius: var(--ska-radius-md);
    overflow: hidden;
}

.ska-admin-table thead th {
    padding: 10px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ska-text-muted);
    background: var(--ska-surface-alt);
    border-bottom: 1px solid var(--ska-border);
}

.ska-admin-table tbody tr {
    transition: background 0.15s;
}

.ska-admin-table tbody tr:hover {
    background: var(--ska-surface-alt);
}

.ska-admin-table tbody td,
.ska-admin-table tbody th {
    /* tbody th = cabecera de FILA (key-value): mismas guías que td */
    padding: 10px 14px;
    font-size: 13px;
    color: var(--ska-text);
    border-bottom: 1px solid var(--ska-border);
    vertical-align: middle;
}

.ska-admin-table tbody th {
    text-align: left;
    /* th por defecto centra → forzar izquierda */
    font-weight: 600;
}

.ska-admin-table tbody tr:last-child td,
.ska-admin-table tbody tr:last-child th {
    border-bottom: none;
}

.ska-admin-table--flush {
    /* Tabla que vive DENTRO de un panel ya bordeado (card con header propio):
       el panel aporta el borde + radio; la tabla NO debe duplicarlos (evita el
       efecto "tabla dentro de tabla"). Conserva separadores de fila y thead. */
    border: none;
    border-radius: 0;
}

/* ── KPI Cards ── */
.ska-admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.ska-admin-kpi-card {
    padding: 16px 20px;
    background: var(--ska-surface);
    border: 1px solid var(--ska-border);
    border-radius: var(--ska-radius-md);
    transition: box-shadow 0.2s;
}

.ska-admin-kpi-card:hover {
    box-shadow: var(--ska-shadow-md);
}

/* ``.kpi-*`` sirven tanto DENTRO de ``.ska-admin-kpi-card`` (grid de KPIs) como SUELTAS
   (p.ej. el Pulso del Home, que apila los números en una lista dividida sin card por número). */
.ska-admin-kpi-card .kpi-label,
.kpi-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ska-text-muted);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ska-admin-kpi-card .kpi-value,
.kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--ska-text);
    line-height: 1.1;
}

.ska-admin-kpi-card .kpi-sub,
.kpi-sub {
    font-size: 12px;
    color: var(--ska-text-secondary);
    margin-top: 4px;
}

/* ── Custom Detail Views (Detail Grid) ── */
.ska-admin-detail-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

@media (max-width: 900px) {
    .ska-admin-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Columnas del split 2:1 (grid children). Regla compartida del platform admin:
   min-width:0 evita el overflow de grid items con contenido ancho (grids de
   fotos, texto largo); flex+gap apila las secciones con espaciado consistente
   sin depender del margin de cada sección. */
.ska-admin-detail-column-main,
.ska-admin-detail-column-side {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ska-admin-detail-section {
    background: var(--ska-surface);
    border: 1px solid var(--ska-border);
    border-radius: var(--ska-radius-md);
    padding: 20px;
    margin-bottom: 20px;
}

.ska-admin-detail-section h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--ska-text);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ska-admin-detail-section h3 i {
    color: var(--ska-primary);
}

.ska-admin-detail-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--ska-surface);
    border: 1px solid var(--ska-border);
    border-radius: var(--ska-radius-md);
    padding: 16px 20px;
    margin-bottom: 20px;
}

.ska-admin-detail-icon {
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: var(--ska-surface-alt);
    border-radius: var(--ska-radius-md);
    color: var(--ska-text-muted);
}

.ska-admin-detail-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 6px 0;
    color: var(--ska-text);
}

/* ── Universal Tabs ── */
.ska-admin-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--ska-border);
}

.ska-admin-tab {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ska-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ska-admin-tab:hover {
    color: var(--ska-text);
}

.ska-admin-tab.active {
    color: var(--ska-primary);
    border-bottom-color: var(--ska-primary);
}

.ska-admin-tab .tab-count {
    background: var(--ska-border);
    color: var(--ska-text-muted);
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.ska-admin-tab.active .tab-count {
    background: var(--ska-primary);
    color: var(--ska-text-on-primary);
}

/* ── JSON Block ── */
.ska-admin-json-block {
    background: var(--ska-bg);
    border: 1px solid var(--ska-border);
    border-radius: var(--ska-radius-md);
    padding: 12px;
    font-family: var(--ska-font-mono, monospace);
    font-size: 12px;
    color: var(--ska-text);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
}

/* ═══════════════════════════════════════════════════
   DASHBOARD (Admin Dashboard)
   ═══════════════════════════════════════════════════ */

.ska-dashboard,
.ik-chat-dashboard {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.ska-dash-grid,
.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.ska-dash-card,
.dash-card {
    background: var(--ska-surface);
    border: 1px solid var(--ska-border-medium);
    border-radius: var(--ska-radius-md);
    padding: 20px;
    box-shadow: var(--ska-shadow-sm);
}

.ska-dash-card h3,
.dash-card h3 {
    margin: 0 0 4px 0;
    font-size: 14px;
    color: var(--ska-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ska-dash-card .value,
.dash-card .value {
    font-size: 32px;
    font-weight: 700;
    color: var(--ska-text);
}

.ska-dash-card .sub,
.dash-card .sub {
    font-size: 13px;
    color: var(--ska-text-subtle);
    margin-top: 4px;
}

.ska-dash-section,
.dash-section {
    margin-bottom: 30px;
}

.ska-dash-section h2,
.dash-section h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--ska-primary);
}

/* ═══════════════════════════════════════════════════
   DATA TABLES (shared by dashboard, llmusage, etc.)
   ═══════════════════════════════════════════════════ */

.ska-data-table,
.dash-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.ska-data-table th,
.dash-table th {
    text-align: left;
    padding: 10px 12px;
    background: var(--ska-surface-alt);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ska-text-muted);
}

.ska-data-table td,
.dash-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--ska-border);
}

.ska-data-table tr:hover td,
.dash-table tr:hover td {
    background: var(--ska-surface-alt);
}

/* ═══════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════ */

.ska-badge,
[class^="ska-badge-"],
[class*=" ska-badge-"],
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    /* Separación consistente entre iconos y texto */
    padding: 0.125rem 0.5rem;
    /* px-2 py-0.5 fallback */
    border-radius: 9999px;
    font-size: 0.75rem;
    /* 12px text-xs */
    font-weight: 500;
    white-space: nowrap;
    /* Previene rupturas de línea inestéticas */
    line-height: 1.25rem;
}

.ska-badge-green,
.badge-green {
    background: var(--ska-badge-green-bg);
    color: var(--ska-badge-green-text);
}

.ska-badge-red,
.badge-red {
    background: var(--ska-badge-red-bg);
    color: var(--ska-badge-red-text);
}

.ska-badge-yellow,
.badge-yellow {
    background: var(--ska-badge-yellow-bg);
    color: var(--ska-badge-yellow-text);
}

.ska-badge-blue,
.badge-blue {
    background: var(--ska-badge-blue-bg);
    color: var(--ska-badge-blue-text);
}

.ska-badge-gray,
.badge-gray {
    background: var(--ska-surface-alt);
    color: var(--ska-text-muted);
}

/* ═══════════════════════════════════════════════════
   FLAG ROWS (feature flags in dashboard)
   ═══════════════════════════════════════════════════ */

.ska-flag-row,
.flag-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ska-border);
}

.ska-flag-name,
.flag-name {
    font-family: var(--ska-font-mono);
    font-size: 13px;
    font-weight: 600;
    min-width: 320px;
}

.ska-flag-value,
.flag-value {
    font-size: 13px;
}

/* ═══════════════════════════════════════════════════
   STAT CARDS (LLM Usage)
   ═══════════════════════════════════════════════════ */

.ska-stat-dashboard,
.llm-dashboard {
    margin-bottom: 24px;
}

.ska-stat-grid,
.llm-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.ska-stat-card,
.llm-stat-card {
    border-radius: var(--ska-radius-md);
    padding: 16px;
    text-align: center;
    border: 1px solid var(--ska-border);
    background: var(--ska-surface);
}

.ska-stat-value,
.llm-stat-value {
    font-size: 28px;
    font-weight: 700;
}

.ska-stat-label,
.llm-stat-label {
    font-size: 12px;
    margin-top: 4px;
    color: var(--ska-text-muted);
}

.ska-section-title,
.llm-section-title {
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    padding: 8px 0;
    color: var(--ska-text-secondary);
}

.ska-stat-table,
.llm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ska-stat-table thead tr,
.llm-table thead tr {
    border-bottom: 2px solid var(--ska-border-medium);
}

.ska-stat-table th,
.llm-table th {
    padding: 10px 12px;
    color: var(--ska-text-muted);
}

.ska-stat-table td,
.llm-table td {
    padding: 8px 12px;
}

.ska-stat-table tbody tr,
.llm-table tbody tr {
    border-bottom: 1px solid var(--ska-border);
}

/* ── Current shift row highlight ── */
.llm-row-current {
    background: var(--ska-primary-glow);
    font-weight: 600;
}

.llm-row-current td:first-child::before {
    content: "▶ ";
}

/* ═══════════════════════════════════════════════════
   GOOGLE CREDENTIALS MANAGER
   ═══════════════════════════════════════════════════ */

.gcm-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.gcm-section {
    margin-bottom: 32px;
}

.gcm-section-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--ska-primary);
    color: var(--ska-text);
}

.gcm-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--ska-accent);
    text-decoration: none;
}

.gcm-back-link:hover {
    text-decoration: underline;
}

/* ── Cards ── */
.gcm-card {
    background: var(--ska-surface);
    border: 1px solid var(--ska-border-medium);
    border-radius: var(--ska-radius-md);
    padding: 24px;
    box-shadow: var(--ska-shadow-sm);
    margin-bottom: 16px;
}

.gcm-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.gcm-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ska-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.gcm-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.gcm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}

/* ── GCM Badges ── */
.gcm-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.gcm-badge-valid {
    background: var(--ska-success-bg);
    color: var(--ska-success);
}

.gcm-badge-expired {
    background: var(--ska-danger-bg);
    color: var(--ska-danger);
}

.gcm-badge-expiring {
    background: var(--ska-warning-bg);
    color: var(--ska-warning);
}

.gcm-badge-none {
    background: var(--ska-surface-alt);
    color: var(--ska-text-muted);
}

.gcm-badge-oauth {
    background: var(--ska-info-bg);
    color: var(--ska-info);
}

.gcm-badge-sa {
    background: var(--ska-purple-bg);
    color: var(--ska-purple);
}

/* ── GCM Info rows ── */
.gcm-info-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ska-border);
}

.gcm-info-row:last-child {
    border-bottom: none;
}

.gcm-info-label {
    font-size: 13px;
    color: var(--ska-text-muted);
    min-width: 120px;
    font-weight: 500;
}

.gcm-info-value {
    font-size: 13px;
    color: var(--ska-text);
}

/* ── Sync chips ── */
.gcm-sync-grid {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.gcm-sync-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.gcm-sync-chip:hover {
    opacity: 0.8;
}

.gcm-sync-on {
    background: var(--ska-success-bg);
    color: var(--ska-success);
}

.gcm-sync-off {
    background: var(--ska-surface-alt);
    color: var(--ska-text-subtle);
    text-decoration: line-through;
}

/* ── GCM Buttons ── */
.gcm-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.gcm-btn-primary {
    background: var(--ska-primary);
    color: var(--ska-text-on-primary);
}

.gcm-btn-primary:hover {
    opacity: 0.9;
    color: var(--ska-surface);
}

.gcm-btn-danger {
    background: var(--ska-danger-bg);
    color: var(--ska-danger);
    border-color: var(--ska-danger-bg);
}

.gcm-btn-danger:hover {
    opacity: 0.85;
}

.gcm-btn-sm {
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
}

.gcm-input-inline {
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
    border: 1px solid var(--ska-border-medium);
    border-radius: var(--ska-radius);
    background: var(--ska-surface-alt);
    color: var(--ska-text);
    width: 140px;
}

.gcm-input-inline:focus {
    outline: none;
    border-color: var(--ska-accent);
}

.gcm-btn-secondary {
    background: var(--ska-surface-alt);
    color: var(--ska-text);
    border-color: var(--ska-border-medium);
}

.gcm-btn-secondary:hover {
    background: var(--ska-border-medium);
}

/* ── GCM Inline Confirm Modal ── */
.gcm-confirm-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ska-radius);
    z-index: 50;
    backdrop-filter: blur(2px);
}

.gcm-confirm-box {
    background: var(--ska-surface);
    border: 1px solid var(--ska-border-medium);
    border-radius: var(--ska-radius);
    padding: 1.5rem 2rem;
    text-align: center;
    max-width: 320px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.gcm-confirm-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.gcm-confirm-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ska-text);
    margin-bottom: 0.4rem;
}

.gcm-confirm-text {
    font-size: 0.82rem;
    color: var(--ska-text-dim);
    margin-bottom: 1rem;
    line-height: 1.4;
}

.gcm-confirm-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.gcm-confirm-actions .gcm-btn {
    min-width: 100px;
}

/* ── GCM Username Form ── */
.gcm-username-form {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
}

.gcm-btn-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--ska-radius);
    border: 1px solid var(--ska-accent);
    background: var(--ska-accent);
    color: var(--ska-text-on-primary);
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.15s;
    padding: 0;
}

.gcm-btn-save:hover {
    opacity: 0.85;
}

/* Card needs position:relative for the confirm overlay */
.gcm-card {
    position: relative;
}

/* ── GCM Empty state ── */
.gcm-empty {
    text-align: center;
    padding: 40px 24px;
    color: var(--ska-text-subtle);
}

.gcm-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.gcm-empty-text {
    font-size: 14px;
    margin-bottom: 16px;
}

/* ── Changelist banner ── */
.gcm-changelist-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: var(--ska-radius-md);
    background: var(--ska-primary-glow);
    border: 1px solid var(--ska-primary-glow);
}

.gcm-manage-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    background: var(--ska-primary);
    color: var(--ska-text-on-primary);
    transition: opacity 0.15s ease;
}

.gcm-manage-btn:hover {
    opacity: 0.9;
    color: var(--ska-surface);
}

.gcm-manage-hint {
    font-size: 13px;
    color: var(--ska-text-muted);
}

/* ═══════════════════════════════════════════════════
   MCP TESTER
   ═══════════════════════════════════════════════════ */

.mcp-tester-body {
    font-family: var(--ska-font-sans);
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    line-height: 1.6;
    background: var(--ska-bg);
    color: var(--ska-text);
}

.mcp-tester-body h1 {
    color: var(--ska-text);
    text-align: center;
    margin-bottom: 30px;
}

.mcp-container {
    display: flex;
    gap: 20px;
}

.mcp-panel {
    flex: 1;
    border: 1px solid var(--ska-border-medium);
    border-radius: var(--ska-radius-sm);
    padding: 15px;
    background: var(--ska-surface);
}

.mcp-tester-body textarea {
    width: 100%;
    height: 300px;
    font-family: var(--ska-font-mono);
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid var(--ska-border-medium);
    border-radius: 4px;
    margin-bottom: 15px;
    background: var(--ska-surface);
    color: var(--ska-text);
}

.mcp-tester-body button {
    background-color: var(--ska-primary);
    color: var(--ska-text-on-primary);
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.mcp-tester-body button:hover {
    background-color: var(--ska-primary-dark);
}

.mcp-examples {
    margin-top: 20px;
}

.mcp-example-btn {
    background-color: var(--ska-info);
    color: var(--ska-surface);
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.mcp-example-btn:hover {
    background-color: var(--ska-info-light);
}

.mcp-cursor-example {
    background-color: var(--ska-purple);
}

.mcp-cursor-example:hover {
    background-color: var(--ska-purple-light);
}

.mcp-tester-body pre {
    background-color: var(--ska-surface-alt);
    padding: 10px;
    border-radius: 4px;
    overflow-x: auto;
    color: var(--ska-text);
}

.mcp-header-info {
    text-align: center;
    margin-bottom: 20px;
    color: var(--ska-text-muted);
}

/* ═══════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════ */

/* Color dot — replaces inline style="background:{{ color }}" */
.ska-color-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 6px;
    border: 2px solid var(--ska-border-medium);
    background: attr(data-color);
}

.ska-color-dot--lg {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

.ska-text-right {
    text-align: right;
}

.ska-text-left {
    text-align: left;
}

.ska-text-center {
    text-align: center;
}

.ska-text-bold {
    font-weight: 500;
}

.ska-text-semibold {
    font-weight: 600;
}

.ska-overflow-auto {
    overflow-x: auto;
}

.ska-mb-sm {
    margin-bottom: 8px;
}

.ska-mb-md {
    margin-bottom: 16px;
}

.ska-mb-lg {
    margin-bottom: 24px;
}

.ska-mt-sm {
    margin-top: 8px;
}

.ska-mt-md {
    margin-top: 16px;
}

/* ═══════════════════════════════════════════════════
   KPI STAT CARDS (config-inspection, memory-dashboard)
   Accent-colored number values on neutral surface cards.
   All colors derive from ska-tokens — zero hardcode.
   ═══════════════════════════════════════════════════ */

/* -- Grid -- */
.ska-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* -- Card -- */
.ska-kpi-card {
    background: var(--ska-surface);
    border: 1px solid var(--ska-border-medium);
    border-radius: var(--ska-radius-md);
    padding: 16px;
    text-align: center;
    box-shadow: var(--ska-shadow-sm);
    transition: box-shadow 0.2s;
}

.ska-kpi-card:hover {
    box-shadow: var(--ska-shadow-md);
}

.ska-kpi-card .label {
    margin: 0 0 4px;
    font-size: 11px;
    color: var(--ska-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}

.ska-kpi-card .val {
    font-size: 28px;
    font-weight: 700;
}

.ska-kpi-card .sub {
    font-size: 11px;
    color: var(--ska-text-subtle);
    margin-top: 4px;
}

/* -- Accent colors for .val numbers -- */
.ska-accent-blue {
    color: var(--ska-info);
}

.ska-accent-green {
    color: var(--ska-success);
}

.ska-accent-amber {
    color: var(--ska-warning);
}

.ska-accent-red {
    color: var(--ska-danger);
}

.ska-accent-purple {
    color: var(--ska-purple);
}

.ska-accent-cyan {
    color: var(--ska-primary);
}

/* -- Sections (h3 with bottom border) -- */
.ska-kpi-section {
    margin-bottom: 24px;
}

.ska-kpi-section h3 {
    font-size: 15px;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ska-border-medium);
    color: var(--ska-text);
}

/* -- Metadata grid (dt/dd) -- */
.ska-kpi-meta {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 4px 12px;
    font-size: 13px;
    margin-bottom: 16px;
}

.ska-kpi-meta dt {
    font-weight: 600;
    color: var(--ska-text-muted);
}

.ska-kpi-meta dd {
    margin: 0;
    font-family: var(--ska-font-mono);
    font-size: 12px;
    word-break: break-all;
    color: var(--ska-text);
}

/* -- Badge (monospace tag) -- */
.ska-kpi-badge {
    display: inline-block;
    background: var(--ska-surface-alt);
    border: 1px solid var(--ska-border-medium);
    border-radius: 4px;
    padding: 2px 8px;
    font-family: var(--ska-font-mono);
    font-size: 11px;
    margin: 2px;
    color: var(--ska-text);
}

/* -- Quiet/muted text -- */
.ska-text-quiet {
    color: var(--ska-text-subtle);
}

/* -- Data table variant (compact, for breakdown/dist tables) -- */
.ska-kpi-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.ska-kpi-table th,
.ska-kpi-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--ska-border);
    font-size: 13px;
}

.ska-kpi-table th {
    font-weight: 600;
    background: var(--ska-surface-alt);
    color: var(--ska-text-muted);
}

.ska-kpi-table .num {
    text-align: right;
    font-family: var(--ska-font-mono);
}

/* -- Collapsible sections -- */
.ska-kpi-toggle {
    cursor: pointer;
    user-select: none;
}

.ska-kpi-toggle::before {
    content: "▶ ";
    font-size: 10px;
}

.ska-kpi-toggle.open::before {
    content: "▼ ";
}

.ska-hidden {
    display: none;
}

/* -- Code/instruction block -- */
.ska-kpi-code {
    background: var(--ska-surface-alt);
    border: 1px solid var(--ska-border-medium);
    border-radius: var(--ska-radius-sm);
    padding: 16px;
    font-family: var(--ska-font-mono);
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 500px;
    overflow-y: auto;
    color: var(--ska-text);
}

/* -- Score pills (memory dashboard relevance) -- */
.ska-score-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.ska-score-pill.green {
    background: var(--ska-badge-green-bg);
    color: var(--ska-badge-green-text);
}

.ska-score-pill.amber {
    background: var(--ska-badge-yellow-bg);
    color: var(--ska-badge-yellow-text);
}

.ska-score-pill.red {
    background: var(--ska-badge-red-bg);
    color: var(--ska-badge-red-text);
}

/* -- Preference items -- */
.ska-pref-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    background: var(--ska-surface-alt);
    border-radius: 8px;
    font-size: 13px;
    border: 1px solid var(--ska-border);
    color: var(--ska-text);
}

.ska-pref-badge {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--ska-surface);
    border: 1px solid var(--ska-border-medium);
    color: var(--ska-text-muted);
    flex-shrink: 0;
}

/* -- Alert/error box -- */
.ska-alert-error {
    background: var(--ska-danger-bg);
    border: 1px solid var(--ska-danger);
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    color: var(--ska-danger);
}

/* ═══════════════════════════════════════════════════
   KNOWLEDGE GRAPH (memory-dashboard — Cytoscape.js)
   ═══════════════════════════════════════════════════ */

/* Wrapper: provides positioning context for controls + legend */
.md-graph-wrap {
    position: relative;
}

/* Canvas container where Cytoscape renders */
.md-graph-canvas {
    width: 100%;
    height: 900px;
    border-radius: var(--ska-radius-md);
    border: 1px solid var(--ska-border);
    background: var(--ska-surface);
    position: relative;
}

/* Zoom / fit controls (top-right) */
.md-graph-controls {
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 10;
}

.md-graph-controls button {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--ska-border-medium);
    background: var(--ska-surface-alt);
    color: var(--ska-text);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.md-graph-controls button:hover {
    background: var(--ska-border-medium);
}

.md-graph-controls button.fit {
    font-size: 12px;
}

/* Tooltip (follows mouse on node hover) */
.md-graph-tooltip {
    position: absolute;
    display: none;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--ska-surface-alt);
    border: 1px solid var(--ska-border-medium);
    color: var(--ska-text);
    font-size: 11px;
    line-height: 1.5;
    max-width: 260px;
    z-index: 999;
    pointer-events: none;
    box-shadow: var(--ska-shadow-md);
}

/* Floating legend card (bottom-left inside graph) */
.md-graph-legend {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 10;
    background: var(--ska-surface-alt);
    border: 1px solid var(--ska-border-medium);
    border-radius: 10px;
    padding: 10px 14px;
    box-shadow: var(--ska-shadow-sm);
    font-size: 10px;
    color: var(--ska-text-subtle);
    line-height: 1.8;
    max-width: 200px;
}

.md-graph-legend-title {
    font-weight: 700;
    font-size: 11px;
    margin-bottom: 4px;
    color: var(--ska-text);
}

/* Node-type swatch (colored dot) */
.md-graph-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 4px;
}

.md-graph-swatch.rect {
    border-radius: 4px;
}

.md-graph-swatch.user {
    background: var(--ska-graph-user);
}

.md-graph-swatch.person {
    background: var(--ska-graph-person);
}

.md-graph-swatch.organization {
    background: var(--ska-graph-org);
}

.md-graph-swatch.place {
    background: var(--ska-graph-place);
}

/* Edge-type swatch (colored line) */
.md-graph-edge-swatch {
    display: inline-block;
    width: 16px;
    vertical-align: middle;
    margin-right: 4px;
}

.md-graph-edge-swatch.relation {
    border-top: 2px solid var(--ska-graph-edge-relation);
}

.md-graph-edge-swatch.agent {
    border-top: 2px dashed var(--ska-graph-edge-agent);
}

.md-graph-edge-swatch.crossref {
    border-top: 1px dotted var(--ska-graph-edge-crossref);
}

.md-graph-edge-swatch.entity-rel {
    border-top: 2px dashed var(--ska-graph-edge-entity);
}

/* Divider inside legend */
.md-graph-legend-divider {
    margin-top: 4px;
    border-top: 1px solid var(--ska-border);
    padding-top: 4px;
}

/* No-data empty state */
.md-graph-empty {
    padding: 40px;
    text-align: center;
    color: var(--ska-text-subtle);
    font-size: 14px;
}

/* ═══════════════════════════════════════════════════
   CONFIG INSPECTION (config-inspection view)
   Copy buttons, collapsible sections, context groups.
   All colors derive from ska-tokens — zero hardcode.
   ═══════════════════════════════════════════════════ */

/* -- Copy button -- */
.ci-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid var(--ska-border-medium);
    border-radius: 6px;
    background: transparent;
    color: var(--ska-text-muted);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-left: 8px;
    vertical-align: middle;
}

.ci-copy-btn:hover {
    background: var(--ska-surface-alt);
    color: var(--ska-text);
    border-color: var(--ska-border-medium);
}

.ci-copy-btn.copied {
    color: var(--ska-success);
    border-color: var(--ska-success);
}

/* -- Collapsible toggle (replaces ska-kpi-toggle for smooth animation) -- */
.ci-toggle {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 4px;
    padding: 8px 12px;
    border-radius: var(--ska-radius-sm);
    transition: background 0.15s ease;
    font-size: 14px;
    font-weight: 600;
    color: var(--ska-text);
}

.ci-toggle:hover {
    background: var(--ska-surface-alt);
}

.ci-toggle::before {
    content: '▶';
    font-size: 10px;
    transition: transform 0.2s ease;
    color: var(--ska-text-muted);
    flex-shrink: 0;
}

.ci-toggle.open::before {
    transform: rotate(90deg);
}

/* -- Collapsible content (smooth expand/collapse) -- */
.ci-collapsible {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.ci-collapsible.open {
    max-height: 20000px;
}

/* -- Dynamic context groups (user info, security, time, etc.) -- */
.ci-ctx-group {
    margin: 6px 0;
    padding: 8px 12px;
    border-left: 3px solid var(--ska-border-medium);
    border-radius: 0 var(--ska-radius-sm) var(--ska-radius-sm) 0;
    background: var(--ska-surface-alt);
}

.ci-ctx-group-label {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--ska-text);
}

.ci-ctx-line {
    font-family: var(--ska-font-mono);
    font-size: 12px;
    line-height: 1.5;
    color: var(--ska-text-muted);
    word-break: break-word;
}

/* -- Disclaimer (admin preview warning) -- */
.ci-disclaimer {
    margin: 20px 0 0;
    padding: 10px 16px;
    border-radius: var(--ska-radius-sm);
    background: var(--ska-warning-bg);
    border: 1px solid var(--ska-warning);
    font-size: 12px;
    color: var(--ska-text-muted);
}

/* -- Role display -- */
.ci-role-line {
    margin: 12px 0 0;
    font-size: 13px;
}

/* -- Context lines heading -- */
.ci-ctx-heading {
    font-size: 13px;
    margin: 0 0 8px;
    color: var(--ska-text-muted);
}

/* ═══════════════════════════════════════════════════
   DRIVE SYNC FILTER DASHBOARD
   ═══════════════════════════════════════════════════ */

/* ── Stats grid ── */
.dsf-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

/* ── Stat value color accents ── */
.dsf-stat-pending {
    color: var(--ska-warning);
}

.dsf-stat-processing {
    color: var(--ska-info);
}

.dsf-stat-completed {
    color: var(--ska-success);
}

.dsf-stat-failed {
    color: var(--ska-danger);
}

/* ── Section header with inline action ── */
.dsf-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--ska-primary);
    margin-bottom: 24px;
    padding-bottom: 12px;
}

.dsf-section-header .gcm-section-title {
    margin: 0;
    padding: 0;
    border-bottom: none;
    flex: 1;
}

/* ── Form card ── */
.dsf-form-card {
    border-left: 3px solid var(--ska-primary);
    margin-bottom: 16px;
}

.dsf-form-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ska-text);
    margin-bottom: 16px;
}

.dsf-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.dsf-form-group {
    margin-bottom: 8px;
}

.dsf-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--ska-text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dsf-input {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid var(--ska-border-medium);
    border-radius: var(--ska-radius);
    background: var(--ska-surface-alt);
    color: var(--ska-text);
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

.dsf-input:focus {
    outline: none;
    border-color: var(--ska-accent);
    box-shadow: 0 0 0 2px var(--ska-primary-glow);
}

.dsf-form-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 20px;
}

.dsf-form-checkbox .dsf-label {
    display: inline;
    text-transform: none;
    margin-bottom: 0;
    cursor: pointer;
}

.dsf-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--ska-border);
}

/* ── Filter cards ── */
.dsf-filter-card {
    transition: opacity 0.15s ease;
}

.dsf-filter-inactive {
    opacity: 0.6;
}

.dsf-filter-inactive:hover {
    opacity: 0.85;
}

.dsf-filter-details {
    margin-bottom: 12px;
}

.dsf-filter-details code {
    font-family: var(--ska-font-mono);
    font-size: 12px;
    background: var(--ska-surface-alt);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--ska-text-secondary);
}

/* ── Stat chips inside filter cards ── */
.dsf-filter-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--ska-border);
}

.dsf-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.dsf-chip-pending {
    background: var(--ska-warning-bg);
    color: var(--ska-warning);
}

.dsf-chip-processing {
    background: var(--ska-info-bg);
    color: var(--ska-info);
}

.dsf-chip-completed {
    background: var(--ska-success-bg);
    color: var(--ska-success);
}

.dsf-chip-failed {
    background: var(--ska-danger-bg);
    color: var(--ska-danger);
}

.dsf-chip-total {
    background: var(--ska-surface-alt);
    color: var(--ska-text-muted);
}

/* ── Visibility toggle ── */
.dsf-hidden {
    display: none !important;
}

/* Utility: accent-colored link */
.ska-link-accent {
    color: var(--ska-accent);
    text-decoration: none;
}

.ska-link-accent:hover {
    text-decoration: underline;
    opacity: 0.85;
}

/* ═══════════════════════════════════════════════════
   AGENT CONTEXT SELECTOR
   Estilos de la barra de selector que usa `brand_selector.html` y
   cualquier dashboard que necesite mostrar "estás operando como X".
   ═══════════════════════════════════════════════════ */

.ska-selector-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 20px;
    margin-bottom: 24px;
    background: var(--ska-surface);
    border: 1px solid var(--ska-border);
    border-radius: var(--ska-radius-md);
}

.ska-selector-bar--single {
    justify-content: flex-start;
}

.ska-selector-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ska-selector-avatar {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--ska-border);
}

.ska-selector-avatar-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ska-primary) 10%, var(--ska-bg));
    color: var(--ska-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border: 1px solid var(--ska-border);
}

.ska-selector-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ska-text-muted);
    font-weight: 600;
    margin-bottom: 2px;
}

.ska-selector-name {
    font-weight: 600;
    color: var(--ska-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ska-selector-type-badge {
    font-size: 10px;
}

.ska-selector-form {
    flex-shrink: 0;
    min-width: 200px;
}

.ska-selector-form form {
    margin: 0;
}

.ska-selector-select {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--ska-border);
    background: var(--ska-surface);
    color: var(--ska-text);
    font-size: 14px;
    font-weight: 500;
    outline: none;
    appearance: auto;
}

.ska-selector-select:focus {
    border-color: var(--ska-primary);
    box-shadow: 0 0 0 2px var(--ska-primary-glow);
}

/* ── UI Element: Code Pills (Code Blocks / JSON representation) ── */
.ska-code-pill {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.75rem;
    /* text-xs */
    padding: 0.25rem 0.5rem;
    /* px-2 py-1 */
    background-color: var(--ska-surface-alt);
    border: 1px solid var(--ska-border);
    border-radius: 0.375rem;
    /* rounded-md */
    color: var(--ska-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════
 * Changelist con CARDS — neutralizar la "caja" del toolbar de Unfold.
 *
 * El toolbar de búsqueda de Unfold (el div que contiene #toolbar) está
 * estilizado como el ENCABEZADO de una caja que la TABLA de resultados por
 * defecto completa: en desktop trae `lg:border` + `lg:rounded-t-default`
 * (borde 4 lados, solo esquinas de arriba redondeadas) + `lg:pb-11` (44px de
 * padding inferior) + `lg:-mb-8` (margin inferior -32px, que jala hacia arriba
 * lo que sigue para encajar la tabla).
 *
 * Pero TODOS nuestros changelists renderizan CARDS (no la tabla), así que la
 * caja nunca se cierra → queda: (1) padding muerto bajo "Type to search",
 * (2) una línea suelta (el borde inferior del toolbar), (3) los cards jalados
 * a traslaparse con esa línea (`-mb-8`).
 *
 * Fix: en card-pages el toolbar vuelve a ser una fila simple (buscador +
 * Filtros) y los cards flotan debajo (depth-over-borders del DS — los cards ya
 * traen su sombra).
 *
 * SCOPE SEGURO: SOLO changelists SIN la tabla default (`table#result_list`).
 * Las páginas de tabla (clinicalentitymention, consultorioprofile,
 * funneltransition, *suggestion, llm/rekognition usage, etc.) SÍ tienen
 * `table#result_list` → quedan EXCLUIDAS y conservan su caja intacta. Solo
 * aplica en `lg` (donde Unfold pinta la caja). No toca buscador ni filtros
 * (son hijos). Ver memoria [[spa-nav-htmx-boost]] / [[cards-changelist-keep-bulk-actions]].
 *
 * ⚠️ ENTREGA (causa de "siempre ocurre"): este archivo es SHARED y se carga sin
 * hash de manifest. Si su `?v=` no se bumpea, Cloudflare/el browser sirven una
 * copia VIEJA y este fix no llega → la caja vuelve a verse con los cards encima.
 * Fuente de verdad del `?v=`: `core/settings/unfold.py` STYLES (ska-admin-components.css?v=N).
 * Al editar este archivo, BUMPEAR ese `?v=N` (y los `<link>` directos que lo
 * dupliquen). Ver memoria [[changelist-toolbar-box-overlap]] + ADMIN_PATTERN §2.5.A.
 *
 * El contenedor de cards puede llamarse `*-cards` (molde per-prefijo) o
 * `ska-card-grid` (vocabulario compartido de inventory.css); ambos cubiertos.
 * ═══════════════════════════════════════════════════════════════════════ */
/* BORDE + redondeo + sombra de la caja: FUERA solo en CARD-changelists.
 *
 * ⚠️ Guard `:not(:has(#result_list))`: la TABLA default de Unfold renderiza
 * `<table id="result_list">`; un card-changelist (override de result_list) NO.
 * Así las TABLAS reales (petownership, catálogos) CONSERVAN su caja (borde) y solo
 * las cards la pierden + ganan espacio arriba. Ver ADR-019 (revierte ADR-006).
 *   Trade-off: `:has()` lo ignora Firefox <121 → ahí la regla entera se cae →
 * TODA changelist conserva la caja (cards muestran el borde; degradación cosmética
 * aceptable para un admin interno 2026; nada se rompe). Se eligió sobre marcar ~31
 * templates a mano (footgun: cada card-changelist nueva tendría que recordar la
 * marca o la caja vuelve). El combo `[class*="lg:pb-11"][class*="lg:-mb-8"]`
 * identifica el wrapper del toolbar. */
body.change-list:not(:has(#result_list)) [class*="lg:pb-11"][class*="lg:-mb-8"] {
    border: 0 none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

@media (min-width: 1024px) {

    /* pb-11 (padding muerto) + -mb-8 (margen negativo) solo existen en lg.
     * margin-top: separa el toolbar del header (simétrico al bottom, alineado con
     * el buscador del sidebar) — antes quedaba pegado arriba en card-changelists. */
    body.change-list:not(:has(#result_list)) [class*="lg:pb-11"][class*="lg:-mb-8"] {
        padding: 0 !important;
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    /* Contenedor de cards: ya no completa una caja → flota sin borde. */
    body.change-list:not(:has(#result_list)) #changelist-form>[class*="cards"],
    body.change-list:not(:has(#result_list)) #changelist-form>[class*="card-grid"] {
        border: 0 !important;
        border-radius: 0 !important;
        margin-top: 0 !important;
        padding-top: 4px !important;
    }

    /* Estado vacío: que no quede empujado dentro de la (ex)caja. */
    body.change-list:not(:has(#result_list)) #changelist-form>[class*="empty"] {
        margin-top: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
 * Sidebar — ítem ACTIVO (fuente ÚNICA de verdad) — "estás aquí".
 *
 * El estilo del ítem activo del menú vive SOLO acá. El HTML (app_list.html) y el
 * JS de navegación AJAX (spa-nav.js) únicamente togglean la clase marcadora
 * `.active` — NINGUNO lleva clases de color. Antes el estilo activo estaba
 * duplicado como utilities Tailwind en los dos lados; al navegar con hx-boost el
 * sidebar NO se re-renderiza y spa-nav.js repintaba el activo con una copia
 * desactualizada de esas clases → el seleccionado "desaparecía" (texto del color
 * de marca sobre fondo oscuro). Centralizar mata esa desincronización.
 *
 * Tratamiento (3 señales, inconfundible) — antes el activo usaba el MISMO
 * `bg-base-100`/`bg-base-800` que el hover → activo y hover se veían idénticos
 * (no se sabía en qué página estabas):
 *   1) BARRA de acento a la izquierda (box-shadow inset, no desplaza el flex y
 *      respeta `rounded-default`). Color de MARCA (`--color-primary-600`, igual
 *      que #spa-progress): decorativo, siempre visible en cualquier marca/tema.
 *      Se hereda al modo dark (la regla `.dark` no lo pisa).
 *   2) FONDO un paso más fuerte que el hover (base-200 vs hover base-100;
 *      dark base-700 vs hover base-800) → activo ≠ hover.
 *   3) Texto `font-important` + 600. Marca-agnóstico: el TEXTO usa font tokens
 *      (no `primary`), legible con cualquier marca (incl. Pet Club carbón).
 * La specificity con #id gana al hover utility → el activo conserva fondo+barra
 * aun en hover. Al editar este archivo BUMPEAR el `?v=` en core/settings/unfold.py
 * STYLES. Ver [[admin-sidebar-brand-agnostic-and-unfold-purgecss]].
 * ═══════════════════════════════════════════════════════════════════════ */
#nav-sidebar-apps a.active {
    /* Más sutil + armonizado al tono de la sección: tinte de MARCA translúcido (mismo
       hue que el fondo del escenario) en vez del gris opaco base-200. La barra de
       acento inset + el peso 600 + el color font-important siguen siendo la señal
       fuerte de "estás aquí"; el fondo solo es un escalón suave sobre el del grupo. */
    background-color: color-mix(in srgb, var(--color-primary-600) 13%, transparent);
    font-weight: 600;
    color: var(--color-font-important-light);
    box-shadow: inset 3px 0 0 var(--color-primary-600);
}

.dark #nav-sidebar-apps a.active {
    background-color: color-mix(in srgb, var(--color-primary-600) 18%, transparent);
    color: var(--color-font-important-dark);
}

/* ═══════════════════════════════════════════════════════════════════════
 * Sidebar — TÍTULO de sección (CONTABILIDAD, etc.) — diferenciarlo del ítem.
 *
 * Antes el título era un LABEL muteado (`text-font-subtle-*`, inline en
 * app_list.html) → se leía casi igual que sus ítems y se perdía ("¿esto es
 * encabezado o ítem?"). Bajar el tono lo empeoró. La jerarquía la dan ahora
 * tipografía (uppercase + text-xs) + TRACKING + un DIVISOR por sección, NO un
 * color apagado: el texto vuelve a contraste legible (`font-default`, el mismo
 * del cuerpo). #id gana a la utility `.text-font-subtle-*` inline sin !important.
 * Dentro de #nav-sidebar-apps los únicos <h2> son los títulos de sección (el
 * bloque "All applications" queda FUERA de ese id). Iconos teal intactos (su
 * `.text-teal-500` propio gana por su clase). BUMPEAR `?v=` al editar. */
#nav-sidebar-apps h2 {
    color: var(--color-font-default-light);
    font-size: 0.6875rem;
    /* 11px — menor que el ítem (14px): se lee como LABEL, no como fila */
    letter-spacing: 0.06em;
    border-top: 1px solid var(--color-base-200);
    margin-top: 0.85rem;
    /* más aire antes de la sección (whitespace = corte, consenso UX) */
    padding-top: 0.95rem;
}

.dark #nav-sidebar-apps h2 {
    color: var(--color-font-default-dark);
    border-top-color: var(--color-base-800);
}

/* Ítems ANIDADOS bajo su título (patrón árbol VS Code/Notion): indent + guía
 * vertical → los ítems CUELGAN del título como su contenido, no como hermanos.
 * Esta era la señal que faltaba: sin anidación, "Catálogo Clínico" se leía igual
 * que "Especie/Razas/Condiciones" (mezclados). Selector DESCENDIENTE por SimpleBar;
 * el <ol> cerrado va display:none → la guía solo aparece en secciones ABIERTAS
 * (refuerza el cue de abierto). NO tocar el <a> (su `-mx-3 px-3` estira el fondo de
 * hover/activo a todo el ancho — moverlo rompería esos estados). */
#nav-sidebar-apps ol {
    padding-left: 2.35rem;
    margin-left: 1rem;
    border-left: 1px solid var(--color-base-200);
}

.dark #nav-sidebar-apps ol {
    border-left-color: var(--color-base-800);
}

/* Sin divisor donde sobraría: el PRIMER grupo (pegado al buscador) y los grupos
 * que YA traen un divisor arriba — la banda `.ska-admin-band-label`
 * ("Administración") o un `<hr>` separador — para no dibujar línea doble. */
#nav-sidebar-apps>div:first-child h2,
#nav-sidebar-apps .ska-admin-band-label~h2,
#nav-sidebar-apps hr~h2 {
    border-top: 0;
    margin-top: 0;
    padding-top: 0.375rem;
}

/* ═══════════════════════════════════════════════════════════════════════
 * Sidebar — INTERIOR de una sección desplegada (agrupa sus ítems).
 *
 * #nav-sidebar-apps lleva `data-simplebar`: SimpleBar REESTRUCTURA el DOM en
 * runtime, envolviendo el contenido en .simplebar-wrapper/.../.simplebar-content.
 * Por eso el grupo `div[x-data]` NO es hijo directo de #nav-sidebar-apps en el
 * DOM vivo (sí lo es en el HTML del servidor) → combinador DESCENDIENTE, no `>`.
 * Verificado en el DOM vivo: `#nav-sidebar-apps div[x-data] ol` = 11 grupos;
 * con `>` desde #nav-sidebar-apps = 0 (ese era el bug). El <ol> sí es hijo
 * directo del div[x-data].
 *
 * Tratamiento (referencias: Tailwind UI / Linear / Notion / Vercel / Stripe /
 * Unfold default + DESIGN_SYSTEM propio). Consenso: la señal fuerte es el ÍTEM
 * ACTIVO (fondo base-200/700 + barra inset primary — intacto). "Abierto" se
 * comunica por el CHEVRON rotado; el tinte es solo refuerzo, ultra sutil, plano,
 * sin rail ni radio. ANTIPATRÓN evitado: rellenar TODOS los títulos o el bloque.
 *
 * LLAVE = la sección que CONTIENE el ítem ACTIVO (`:has(a.active)`), NO cualquier
 * sección abierta. El sidebar usa hx-boost y NO se re-renderiza al navegar → el
 * estado abierto/cerrado PERSISTE en el cliente (Alpine); keyear en "abierto"
 * dejaba iluminada la sección ANTERIOR al cambiar de vista. `a.active` lo actualiza
 * spa-nav.js en cada navegación → el realce sigue a la página y no queda obsoleto.
 *   (a) HEADER de la sección activa → primary ~5% (light)/9% (dark). Solo ese <h2>.
 *   (b) INTERIOR (<ol>) de la sección activa → primary ~3% (light)/6% (dark), un
 *       escalón por debajo y muy por debajo del ítem activo. Marca-agnóstico
 *       (primary carbón de Pet Club ⇒ casi nulo; jerarquía por chevron + indent).
 * BUMPEAR `?v=` en unfold.py al editar. */
/* La sección ACTIVA = UN contenedor: un solo fondo en el GRUPO (no dos fondos
 * separados en título y contenido). Antes el fondo del contenido iba INDENTADO por
 * el árbol → no cuadraba con el del título ("descuadrado"). Con una sola capa detrás
 * de todo el grupo, título y contenido quedan ALINEADOS; los ítems siguen indentados
 * DENTRO. El título pierde divisor + margen (el contenedor ya lo separa). */
#nav-sidebar-apps div[x-data]:has(a.active) {
    background-color: color-mix(in srgb, var(--color-primary-600) 5%, transparent);
    padding-top: 0.1rem;
    padding-bottom: 0.4rem;
}

.dark #nav-sidebar-apps div[x-data]:has(a.active) {
    background-color: color-mix(in srgb, var(--color-primary-600) 9%, transparent);
}

#nav-sidebar-apps div[x-data]:has(a.active)>h2 {
    background-color: transparent;
    border-top-color: transparent;
    margin-top: 0;
    padding-top: 0.55rem;
}

#nav-sidebar-apps div[x-data]:has(a.active)>ol {
    background-color: transparent;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

/* ── Barra de progreso de navegación (spa-nav.js / hx-boost) ─────────────────
   Feedback de "cargando la página siguiente": una barra fina fija arriba que
   arranca en htmx:beforeRequest y termina en htmx:afterRequest. Sin esto, un
   click boosted no daba ninguna señal ("no pasa nada"). Color = primary de la
   marca activa (Unfold expone --color-primary-600 como rgb(...) por tenant). */
#spa-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--color-primary-600, #2563eb);
    box-shadow: 0 0 8px var(--color-primary-600, #2563eb);
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

#spa-progress.spa-progress--active {
    opacity: 1;
    width: 88%;
    /* Avance perceptual: rápido al inicio, asintótico (nunca llega al 100% solo). */
    transition: width 9s cubic-bezier(0.1, 0.7, 0.2, 1), opacity 0.15s ease;
}

#spa-progress.spa-progress--done {
    opacity: 0;
    width: 100%;
    transition: width 0.2s ease, opacity 0.4s ease 0.2s;
}

@media (prefers-reduced-motion: reduce) {
    #spa-progress.spa-progress--active {
        transition: opacity 0.15s ease;
        width: 88%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
 * Input/panel primitives — vocabulario ÚNICO de inputs SUELTOS del admin
 * (filtros de listas/reports, POS, forms de acción en detalles). Reemplaza el
 * CSS de inputs legacy del carril §1 (account_balance), ya erradicado (ADR-020).
 * Mismo look que los .jmf-field (forms) → un solo lenguaje visual. NO confundir
 * con .jmf-* (esos viven en ska_admin_form.css, scope .jmf-wrap, para el form).
 * Solo tokens var(--ska-*). Ver docs/admin/surfaces/page.md.
 * ═══════════════════════════════════════════════════════════════════════ */
.ska-panel {
    background: var(--ska-surface);
    border: 1px solid var(--ska-border);
    border-radius: var(--ska-radius-lg, 12px);
    box-shadow: var(--ska-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
}

.ska-input,
.ska-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--ska-text);
    background: var(--ska-surface);
    border: 1px solid var(--ska-border);
    border-radius: var(--ska-radius-md, 8px);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ska-input:focus,
.ska-select:focus {
    outline: none;
    border-color: var(--ska-primary);
    box-shadow: 0 0 0 3px var(--ska-primary-glow);
}

.ska-input::placeholder {
    color: var(--ska-text-subtle);
}

/* Select: chevron propio (appearance:none quita la flecha nativa → la dibujamos
   con dos gradientes, idéntico al de los .jmf-field, sin SVG ni hex). */
.ska-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 2.1rem;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ska-text-muted) 50%),
        linear-gradient(135deg, var(--ska-text-muted) 50%, transparent 50%);
    background-position: calc(100% - 16px) calc(50% - 1px), calc(100% - 11px) calc(50% - 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.ska-check {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--ska-primary);
    cursor: pointer;
}

/* Disabled: hace VISIBLE que el control está bloqueado (p. ej. "venta a crédito"
   deshabilitada hasta asignar cliente) — sin esto el checkbox se ve activo y "no responde". */
.ska-check:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.ska-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ska-text);
    margin-bottom: 0.25rem;
}

/* ──────────────────────────────────────────────────────────────────────────
   Helpers servidos — reemplazan utilidades Tailwind que NO están en el safelist
   precompilado de Unfold (space-y-*, opacity-*, font-mono, divide-y, tracking-*,
   text-7xl/8xl, shadow-xl/2xl…). Esas se purgan en silencio (no hay build de
   Tailwind del proyecto) → usar estas clases servidas en su lugar.
   ────────────────────────────────────────────────────────────────────────── */
.ska-admin-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ska-admin-stack--sm {
    gap: 12px;
}

.ska-admin-stack--xs {
    gap: 8px;
}

.ska-admin-divider {
    border: 0;
    border-top: 1px solid var(--ska-border);
    margin: 12px 0;
}

.ska-admin-muted {
    color: var(--ska-text-muted);
}

.ska-admin-subtle {
    color: var(--ska-text-subtle);
}

/* Numerales tabulares/monoespaciados (tickets, montos, ids) */
.ska-admin-num {
    font-variant-numeric: tabular-nums;
    font-family: var(--ska-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

/* Número/figura de display grande (KPIs) */
.ska-admin-display {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--ska-text);
}

/* Empty-state (icono muted → texto), proporción según global-rules §3 */
.ska-admin-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 40px 16px;
    color: var(--ska-text-muted);
}

.ska-admin-empty>i {
    font-size: 30px;
    opacity: 0.5;
}

.ska-admin-empty p {
    margin: 0;
    font-size: 14px;
}

/* Fila de metadatos (hero): chips separados, envuelve */
.ska-admin-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    font-size: 14px;
    color: var(--ska-text-subtle);
}

.ska-admin-meta-row>span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Botones servidos (ghost = secundario/volver/editar) */
.ska-admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--ska-radius-md);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.ska-admin-btn--ghost {
    background: var(--ska-surface);
    color: var(--ska-text);
    border-color: var(--ska-border);
}

.ska-admin-btn--ghost:hover {
    background: var(--ska-surface-alt);
    border-color: var(--ska-primary);
}

/* Imagen dentro del icono del hero del detalle */
.ska-admin-detail-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Acciones a la derecha del hero del detalle */
.ska-admin-detail-header__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   BARRIDO CSS MUERTO (scripts/check_dead_tailwind.py)
   Utilidades usadas por templates admin que el bundle PRECOMPILADO de Unfold
   purga (no hay build de Tailwind del proyecto → safelist fijo). Se DEFINEN acá
   para realizar la intención original sin tocar 54 templates (cero regresión).
   Las ska-* base (líneas 23-45) NO se repiten. Memoria: admin-sidebar...purgecss.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ska-* faltantes (bg/text/border + estados) ── */
.bg-ska-primary-glow {
    background-color: var(--ska-primary-glow) !important;
}

.bg-ska-danger {
    background-color: var(--ska-danger) !important;
}

.bg-ska-danger-bg {
    background-color: var(--ska-danger-bg) !important;
}

.bg-ska-success {
    background-color: var(--ska-success) !important;
}

.bg-ska-success-bg {
    background-color: var(--ska-success-bg) !important;
}

.bg-ska-warning {
    background-color: var(--ska-warning) !important;
}

.bg-ska-warning-bg {
    background-color: var(--ska-warning-bg) !important;
}

.bg-ska-text-muted {
    background-color: var(--ska-text-muted) !important;
}

.bg-ska-info-bg {
    background-color: var(--ska-info-bg) !important;
}

.bg-ska-primary-bg {
    background-color: var(--ska-primary-bg) !important;
}

.bg-ska-border {
    background-color: var(--ska-border) !important;
}

.bg-ska-primary\/10 {
    background-color: var(--ska-primary) !important;
}

.bg-ska-danger\/10 {
    background-color: var(--ska-danger) !important;
}

.bg-ska-success\/10 {
    background-color: var(--ska-success) !important;
}

.bg-ska-warning\/10 {
    background-color: var(--ska-warning) !important;
}

.bg-ska-accent\/10 {
    background-color: var(--ska-accent) !important;
}

.text-ska-accent {
    color: var(--ska-accent) !important;
}

.text-ska-accent-amber {
    color: var(--ska-accent-amber) !important;
}

.text-ska-purple {
    color: var(--ska-purple) !important;
}

.text-ska-border {
    color: var(--ska-border) !important;
}

.text-ska-danger\/90 {
    color: var(--ska-danger) !important;
}

.border-ska-border-light {
    border-color: var(--ska-border-light) !important;
}

.border-ska-accent {
    border-color: var(--ska-accent) !important;
}

.border-ska-danger {
    border-color: var(--ska-danger) !important;
}

.border-ska-success {
    border-color: var(--ska-success) !important;
}

.border-ska-success-border {
    border-color: var(--ska-success-border) !important;
}

.border-ska-warning {
    border-color: var(--ska-warning) !important;
}

.border-ska-danger\/30 {
    border-color: var(--ska-danger) !important;
}

.border-ska-success\/30 {
    border-color: var(--ska-success) !important;
}

.border-ska-warning\/30 {
    border-color: var(--ska-warning) !important;
}

.border-ska-border\/40 {
    border-color: var(--ska-border) !important;
}

.divide-ska-border> :not([hidden])~ :not([hidden]) {
    border-color: var(--ska-border) !important;
}

.hover\:bg-ska-danger-bg:hover {
    background-color: var(--ska-danger-bg) !important;
}

.hover\:bg-ska-success-bg:hover {
    background-color: var(--ska-success-bg) !important;
}

.hover\:bg-ska-danger\/10:hover {
    background-color: var(--ska-danger) !important;
}

.hover\:bg-ska-danger\/85:hover {
    background-color: var(--ska-danger) !important;
}

.hover\:bg-ska-warning\/85:hover {
    background-color: var(--ska-warning) !important;
}

.hover\:text-ska-text:hover {
    color: var(--ska-text) !important;
}

.hover\:text-ska-primary-dark:hover {
    color: var(--ska-primary-dark) !important;
}

.hover\:text-ska-danger:hover {
    color: var(--ska-danger) !important;
}

.hover\:border-ska-border:hover {
    border-color: var(--ska-border) !important;
}

.hover\:border-ska-danger:hover {
    border-color: var(--ska-danger) !important;
}

.hover\:border-ska-success:hover {
    border-color: var(--ska-success) !important;
}

.hover\:border-ska-warning:hover {
    border-color: var(--ska-warning) !important;
}

.hover\:border-ska-surface-alt:hover {
    border-color: var(--ska-surface-alt) !important;
}

.focus\:border-ska-primary:focus {
    border-color: var(--ska-primary) !important;
}

.focus\:ring-ska-primary:focus {
    box-shadow: 0 0 0 2px var(--ska-primary) !important;
}

.focus\:ring-ska-border:focus {
    box-shadow: 0 0 0 2px var(--ska-border) !important;
}

.focus\:ring-offset-ska-surface:focus {
    --tw-ring-offset-color: var(--ska-surface) !important;
}

.group:hover .group-hover\:text-ska-primary {
    color: var(--ska-primary) !important;
}

.group:hover .group-hover\:border-ska-primary {
    border-color: var(--ska-primary) !important;
}

/* ── Compat Tailwind v3 (valores default; colores → tokens ska-*) ── */
.space-y-1> :not([hidden])~ :not([hidden]) {
    margin-top: 0.25rem;
}

.space-y-3> :not([hidden])~ :not([hidden]) {
    margin-top: 0.75rem;
}

.space-y-4> :not([hidden])~ :not([hidden]) {
    margin-top: 1rem;
}

.space-y-6> :not([hidden])~ :not([hidden]) {
    margin-top: 1.5rem;
}

.divide-y> :not([hidden])~ :not([hidden]) {
    border-top-width: 1px;
}

.opacity-5 {
    opacity: 0.05;
}

.opacity-20 {
    opacity: 0.2;
}

.opacity-30 {
    opacity: 0.3;
}

.opacity-40 {
    opacity: 0.4;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-60 {
    opacity: 0.6;
}

.opacity-70 {
    opacity: 0.7;
}

.opacity-80 {
    opacity: 0.8;
}

.shadow-none {
    box-shadow: 0 0 #0000;
}

.shadow-md {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.shadow-xl {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

.tracking-wide {
    letter-spacing: 0.025em;
}

.tracking-wider {
    letter-spacing: 0.05em;
}

.tracking-widest {
    letter-spacing: 0.1em;
}

.text-7xl {
    font-size: 4.5rem;
    line-height: 1;
}

.text-8xl {
    font-size: 6rem;
    line-height: 1;
}

.text-\[8px\] {
    font-size: 8px;
}

.text-\[9px\] {
    font-size: 9px;
}

.text-\[10px\] {
    font-size: 10px;
}

.text-\[13px\] {
    font-size: 13px;
}

.font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.font-black {
    font-weight: 900;
}

.leading-tight {
    line-height: 1.25;
}

.w-11 {
    width: 2.75rem;
}

.w-12 {
    width: 3rem;
}

.w-14 {
    width: 3.5rem;
}

.w-28 {
    width: 7rem;
}

.w-64 {
    width: 16rem;
}

.w-2\/12 {
    width: 16.666667%;
}

.w-3\/12 {
    width: 25%;
}

.w-4\/12 {
    width: 33.333333%;
}

.w-5\/12 {
    width: 41.666667%;
}

.w-6\/12 {
    width: 50%;
}

.h-11 {
    height: 2.75rem;
}

.h-14 {
    height: 3.5rem;
}

.h-48 {
    height: 12rem;
}

.max-h-48 {
    max-height: 12rem;
}

.max-h-56 {
    max-height: 14rem;
}

.max-h-60 {
    max-height: 15rem;
}

.max-h-64 {
    max-height: 16rem;
}

.max-h-\[600px\] {
    max-height: 600px;
}

.max-w-xs {
    max-width: 20rem;
}

.max-w-md {
    max-width: 28rem;
}

.max-w-lg {
    max-width: 32rem;
}

.max-w-\[120px\] {
    max-width: 120px;
}

.max-w-\[200px\] {
    max-width: 200px;
}

.min-w-\[150px\] {
    min-width: 150px;
}

.min-w-\[200px\] {
    min-width: 200px;
}

.z-\[9999\] {
    z-index: 9999;
}

.flex-\[2\] {
    flex: 2 2 0%;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.col-span-full {
    grid-column: 1 / -1;
}

.items-end {
    align-items: flex-end;
}

.items-baseline {
    align-items: baseline;
}

.self-end {
    align-self: flex-end;
}

.gap-0 {
    gap: 0;
}

.gap-x-6 {
    column-gap: 1.5rem;
}

.gap-y-2 {
    row-gap: 0.5rem;
}

.gap-y-4 {
    row-gap: 1rem;
}

.rounded-b-lg {
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.rounded-bl-full {
    border-bottom-left-radius: 9999px;
}

.rounded-r-full {
    border-top-right-radius: 9999px;
    border-bottom-right-radius: 9999px;
}

.outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.overflow-y-hidden {
    overflow-y: hidden;
}

.inset-y-0 {
    top: 0;
    bottom: 0;
}

.border-dotted {
    border-style: dotted;
}

.border-opacity-50 {
    --tw-border-opacity: 0.5;
}

.text-gray-200 {
    color: var(--ska-text-muted) !important;
}

.text-gray-400 {
    color: var(--ska-text-subtle) !important;
}

.text-gray-700 {
    color: var(--ska-text-secondary) !important;
}

.bg-black\/40 {
    background-color: rgb(0 0 0 / 0.4);
}

.border-black\/5 {
    border-color: rgb(0 0 0 / 0.05);
}

.transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-150 {
    transition-duration: 150ms;
}

.duration-200 {
    transition-duration: 200ms;
}

.bg-gradient-to-l {
    background-image: linear-gradient(to left, var(--tw-gradient-stops));
}

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

.animate-spin-slow {
    animation: ska-spin 3s linear infinite;
}

.hover\:opacity-80:hover {
    opacity: 0.8;
}

.hover\:opacity-90:hover {
    opacity: 0.9;
}

.hover\:underline:hover {
    text-decoration-line: underline;
}

.disabled\:opacity-40:disabled {
    opacity: 0.4;
}

.focus\:ring-2:focus {
    box-shadow: 0 0 0 2px currentColor;
}

.focus\:ring-offset-2:focus {
    outline-offset: 2px;
}

@media (min-width: 640px) {
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .md\:hidden {
        display: none;
    }

    .md\:justify-between {
        justify-content: space-between;
    }

    .md\:text-right {
        text-align: right;
    }
}

/* ── Triage (hooks/legacy) ── */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ring-1 {
    box-shadow: 0 0 0 1px var(--tw-ring-color, var(--ska-primary));
}

.ring-primary-500 {
    --tw-ring-color: var(--ska-primary);
}