/* ==========================================================================
   FBWebAdmin — Design System (Track K)
   --------------------------------------------------------------------------
   Tokens + utilities + componentes propios.
   - Bootstrap 5.3.3 sigue siendo la base.
   - Las variables aquí complementan, no reemplazan, las de Bootstrap.
   - Ver docs/08-design-system.md para guidelines y mapeo de uso.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) TOKENS — variables CSS root
   -------------------------------------------------------------------------- */
:root {
    /* -- Tipografía: escala basada en ratio 1.125 (12px → 14px → 16px → ...) -- */
    --fs-xs:   0.75rem;    /* 12px — captions, microcopy, badges */
    --fs-sm:   0.875rem;   /* 14px — labels, secondary text, sidebar items */
    --fs-base: 1rem;       /* 16px — body */
    --fs-lg:   1.125rem;   /* 18px — h3, énfasis */
    --fs-xl:   1.5rem;     /* 24px — h2, titulares de sección */
    --fs-2xl:  2rem;       /* 32px — h1, hero */

    /* -- Spacing: múltiplos de 4px (alineado con Bootstrap pero accesible vía tokens) -- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;

    /* -- Color semántico de la app — limitado y trazable -- */
    --c-tech:    #a78bfa;   /* SchemaAgent técnico (morado) */
    --c-data:    #25d366;   /* DataAgent / WhatsApp (verde) */
    --c-ai:      #6c63ff;   /* IA general (índigo) */
    --c-success: #10b981;
    --c-warning: #f59e0b;   /* también brand-title */
    --c-danger:  #ef4444;
    --c-danger-soft: #fca5a5;
    --c-info:    #0ea5e9;

    /* -- Editor oscuro permanente (consola SQL, schema_console) -- */
    --editor-bg:       #1e293b;
    --editor-bg-2:     #0f1117;
    --editor-bg-3:     #1a1d2e;   /* fondo schema_console messages */
    --editor-border:   #334155;
    --editor-border-2: #2d3148;
    --editor-text:     #e2e8f0;
    --editor-muted:    #94a3b8;
    --editor-muted-2:  #9ca3af;

    /* -- Grises de texto secundarios (text-muted variants) -- */
    --text-muted-2: #64748b;      /* slate-500 */
    --text-muted-3: #6b7280;      /* gray-500 */

    /* -- Colores extendidos del estado (variantes oscuras para fondos sutiles) -- */
    --c-success-bg:    #052e16;
    --c-success-bdr:   #14532d;
    --c-success-deep:  #166534;
    --c-danger-bg:     #2a0a0a;
    --c-danger-bdr:    #7f1d1d;
    --c-warning-bg:    #1c1a0a;   /* fondo amber muy oscuro (confirm panels) */
    --c-warning-bdr:   #713f12;   /* borde amber-900 */
    --c-warning-deep:  #92400e;
    --c-indigo:        #6366f1;
    --c-purple-deep:   #1e1b4b;
    --c-purple-bdr:    #3730a3;

    /* -- Sidebar (variables existentes preservadas) -- */
    --sb-bg:          #1e293b;
    --sb-hover:       #334155;
    --sb-link:        #cbd5e1;   /* mejorado: era #94a3b8 (contraste 4.0 → 7.2) WCAG AA */
    --sb-section:     #94a3b8;   /* labels de sección — antes #64748b */
    --sb-db-bg:       #334155;
    --sb-db-sel-bg:   #1e293b;
    --sb-db-sel-col:  #e2e8f0;
    --sb-db-sel-bdr:  #475569;
    --sb-srch-bg:     #334155;
    --sb-srch-col:    #e2e8f0;
    --sb-srch-bdr:    #475569;
    --sb-width:       260px;
    --sb-width-compact: 64px;
}

[data-bs-theme="dark"] {
    --sb-bg:          #0f172a;
    --sb-hover:       #1e293b;
    --sb-link:        #c2cde0;   /* mejorado contraste */
    --sb-section:     #7c8da3;
    --sb-db-bg:       #1e293b;
    --sb-db-sel-bg:   #0f172a;
    --sb-db-sel-col:  #cbd5e1;
    --sb-db-sel-bdr:  #334155;
    --sb-srch-bg:     #1e293b;
    --sb-srch-col:    #cbd5e1;
    --sb-srch-bdr:    #334155;
}


/* --------------------------------------------------------------------------
   2) RESET / BASE
   -------------------------------------------------------------------------- */
body {
    font-size: var(--fs-base);
}

/* Focus visible accesible — WCAG 2.4.7 */
*:focus-visible {
    outline: 2px solid var(--c-info);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Skip link visualmente oculto pero accesible al tab */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--c-ai);
    color: #fff;
    padding: var(--sp-2) var(--sp-4);
    z-index: 9999;
    text-decoration: none;
}
.skip-link:focus {
    top: 0;
}


/* --------------------------------------------------------------------------
   3) UTILITIES tipografía (use estas en vez de style="font-size:...")
   -------------------------------------------------------------------------- */
.text-xs   { font-size: var(--fs-xs) !important; }
.text-sm   { font-size: var(--fs-sm) !important; }
.text-base { font-size: var(--fs-base) !important; }
.text-lg   { font-size: var(--fs-lg) !important; }
.text-xl   { font-size: var(--fs-xl) !important; }
.text-2xl  { font-size: var(--fs-2xl) !important; }

.font-mono { font-family: 'Fira Code','Cascadia Code','Consolas',monospace !important; }


/* --------------------------------------------------------------------------
   4) SIDEBAR — refactor app-shell (Track K.2)
   -------------------------------------------------------------------------- */
.sidebar {
    min-height: 100vh;
    background: var(--sb-bg);
    width: var(--sb-width);
    min-width: var(--sb-width);
    transition: width 0.2s ease, transform 0.25s ease;
}

.sidebar .brand-title {
    color: var(--c-warning);
    font-weight: 700;
    font-size: var(--fs-lg);
}

.sidebar .nav-link {
    color: var(--sb-link);
    font-size: var(--fs-sm);
    padding: 0.5rem 1rem;   /* +0.1rem vs antes — click target más grande */
    border-radius: 6px;
    margin-bottom: 1px;
    transition: background 0.15s ease, color 0.15s ease;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    color: #fff;
    background: var(--sb-hover);
}
.sidebar .nav-link.active {
    border-left: 3px solid var(--c-warning);
    padding-left: calc(1rem - 3px);
}
.sidebar .nav-link i { width: 20px; }

/* Sección colapsable */
.sidebar .sb-section {
    margin-top: var(--sp-2);
}
.sidebar .sb-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: 0;
    color: var(--sb-section);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.3rem 1rem;
    cursor: pointer;
    transition: color 0.15s ease;
}
.sidebar .sb-section-toggle:hover {
    color: #cbd5e1;
}
.sidebar .sb-section-toggle .sb-caret {
    transition: transform 0.2s ease;
    font-size: 0.6rem;
}
.sidebar .sb-section.collapsed .sb-section-toggle .sb-caret {
    transform: rotate(-90deg);
}
.sidebar .sb-section.collapsed .sb-section-items {
    display: none;
}

/* Label legacy (mantener compat con templates no migrados) */
.sidebar .section-label {
    color: var(--sb-section);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.3rem 1rem;
    margin-top: var(--sp-2);
}

.db-switcher {
    background: var(--sb-db-bg);
    border-radius: 6px;
    padding: var(--sp-2);
    margin-bottom: var(--sp-2);
}
.db-switcher select {
    font-size: var(--fs-xs);
    background: var(--sb-db-sel-bg);
    color: var(--sb-db-sel-col);
    border-color: var(--sb-db-sel-bdr);
}
.db-switcher .db-name {
    font-size: var(--fs-xs);
    color: var(--sb-link);
}

.sidebar .sb-search {
    background: var(--sb-srch-bg);
    color: var(--sb-srch-col);
    border-color: var(--sb-srch-bdr);
    font-size: var(--fs-xs);
}
.sidebar .sb-search::placeholder { color: var(--sb-section); }
.sidebar hr { border-color: var(--sb-hover) !important; }
.sidebar .text-muted { color: var(--sb-link) !important; }

.btn-theme {
    color: var(--sb-link);
    border-color: var(--sb-hover);
    font-size: var(--fs-xs);
    padding: 0.2rem 0.5rem;
}
.btn-theme:hover {
    color: #fff;
    border-color: var(--sb-link);
    background: var(--sb-hover);
}

/* Hamburguesa para mobile */
.sb-mobile-toggle {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1050;
    background: var(--sb-bg);
    color: #fff;
    border: 1px solid var(--sb-hover);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: var(--fs-lg);
    cursor: pointer;
}

/* Backdrop al abrir sidebar en mobile */
.sb-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1040;
}
.sb-backdrop.show {
    display: block;
}


/* --------------------------------------------------------------------------
   5) RESPONSIVE — mobile minimal
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .sb-mobile-toggle { display: inline-flex; }
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        transform: translateX(-100%);
        z-index: 1045;
        box-shadow: 4px 0 20px rgba(0,0,0,0.3);
    }
    .sidebar.open { transform: translateX(0); }

    /* Empujar el contenido a full width cuando el sidebar está oculto */
    .main-content {
        width: 100% !important;
        margin-left: 0 !important;
    }
}


/* --------------------------------------------------------------------------
   6) EDITOR / CONSOLA SQL — variables ya definidas en tokens
   -------------------------------------------------------------------------- */
.sql-preview {
    background: var(--editor-bg);
    color: var(--editor-text);
    border: 1px solid var(--editor-border);
    border-radius: 6px;
    padding: var(--sp-4);
    font-family: 'Fira Code','Cascadia Code','Consolas',monospace;
    font-size: var(--fs-sm);
    white-space: pre-wrap;
}
.sql-preview .keyword { color: #60a5fa; }
pre.sql-result {
    max-height: 500px;
    overflow: auto;
    font-size: var(--fs-sm);
}

/* Card del editor SQL sticky al top del viewport mientras scrolleas resultados.
   NO tocar dimensiones internas de CodeMirror — CM6 ya define maxHeight 380px
   en .cm-scroller y minHeight 72px en .cm-content (ver templates/sql/console.php
   línea ~1169). Sobreescribir aquí rompe el flex interno y bloquea los eventos
   del contenteditable. */
.sql-console-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--bs-card-bg, #fff);
    box-shadow: 0 4px 8px -4px rgba(0,0,0,0.15);
}


/* --------------------------------------------------------------------------
   7) TABLAS — densidad consistente + sticky header/cols
   -------------------------------------------------------------------------- */
.table-sm td, .table-sm th {
    padding: 0.3rem 0.5rem;
    font-size: var(--fs-sm);
}

/* Contenedor con altura limitada y scroll en ambos ejes — habilita sticky */
.table-scroll {
    max-height: calc(100vh - 280px);
    min-height: 240px;
    overflow: auto;
}

/* Header de tabla pegado al borde superior del .table-scroll */
.table-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    /* Bootstrap pone bg en .table-dark > thead > th sólo en hover/striped; lo forzamos */
    background-color: var(--bs-table-bg, #212529);
}

/* Primera columna (acciones) pegada al borde izquierdo cuando hay scroll horizontal */
.table-sticky tbody td.col-sticky,
.table-sticky thead th.col-sticky {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: var(--bs-body-bg, #fff);
}
.table-sticky thead th.col-sticky {
    z-index: 4;   /* gana al thead-sticky cuando se cruzan */
    background-color: var(--bs-table-bg, #212529);
}
/* Striped: aseguramos que la celda sticky de la fila zebra mantenga su fondo */
.table-striped > tbody > tr:nth-of-type(odd) > td.col-sticky {
    background-color: var(--bs-table-striped-bg, #f2f2f2);
}
[data-bs-theme="dark"] .table-sticky tbody td.col-sticky {
    background-color: var(--bs-body-bg, #212529);
}


/* --------------------------------------------------------------------------
   8) COMPONENTES PROPIOS
   -------------------------------------------------------------------------- */

/* Separador vertical en toolbars (reemplazo de style="width:1px;height:18px;...") */
.toolbar-sep {
    display: inline-block;
    width: 1px;
    height: 18px;
    background: var(--editor-border);
    margin: 0 6px;
    vertical-align: middle;
}

/* Scroll containers con max-height (reemplaza style="max-height:Xpx;overflow:...") */
.scroll-300 { max-height: 300px; overflow-y: auto; }
.scroll-420 { max-height: 420px; overflow-y: auto; }
.scroll-500 { max-height: 500px; overflow-y: auto; }
.scroll-600 { max-height: 600px; overflow-y: auto; }

/* Cards/blocks oscuros (editor look — reemplaza style="background:#1e293b;color:#e2e8f0;border:1px solid #334155;") */
.editor-block {
    background: var(--editor-bg);
    color: var(--editor-text);
    border: 1px solid var(--editor-border);
    border-radius: 6px;
}
.editor-header {
    background: var(--editor-bg-2);
    border-color: var(--editor-border);
}

/* Cursor utilities */
.cursor-pointer { cursor: pointer; }
.cursor-help { cursor: help; }

/* Botón "más acciones" en toolbars sobrecargadas */
.toolbar-more-btn {
    font-size: var(--fs-sm);
}

/* Badges semánticos */
.badge-tech    { background: var(--c-tech);    color: #fff; }
.badge-data    { background: var(--c-data);    color: #fff; }
.badge-ai      { background: var(--c-ai);      color: #fff; }
.badge-warning { background: var(--c-warning); color: #fff; }


/* --------------------------------------------------------------------------
   9) ACCESIBILIDAD
   -------------------------------------------------------------------------- */

/* Asegurar que aria-busy sea visible */
[aria-busy="true"] {
    cursor: progress;
    opacity: 0.7;
}

/* Estado de error en formularios — refuerzo visual del Bootstrap is-invalid */
.is-invalid {
    border-color: var(--c-danger) !important;
}
.invalid-feedback {
    color: var(--c-danger);
    font-size: var(--fs-xs);
}