/* ============================================================
   Estancos ERP · estilos propios
   ============================================================ */

:root {
    --brand:           #0d6efd;
    --brand-soft:      rgba(13, 110, 253, 0.12);
    --sidebar-width:   260px;
    --sidebar-bg:      #0f172a;
    --sidebar-bg-hover:#1e293b;
    --sidebar-text:    #cbd5e1;
    --sidebar-active:  #ffffff;
}

[data-bs-theme="dark"] {
    --sidebar-bg:      #020617;
    --sidebar-bg-hover:#0f172a;
}

html, body { height: 100%; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bs-body-bg);
    overflow-x: hidden;
}

/* ---------- Layout sidebar ---------- */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease;
}

.sidebar .brand {
    padding: 1.25rem 1.5rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: .55rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.sidebar .brand-link { text-decoration: none; transition: background .15s ease; }
.sidebar .brand-link:hover { background: var(--sidebar-bg-hover); color: #fff; }

.sidebar .brand .logo-dot {
    width: 10px; height: 10px;
    background: linear-gradient(135deg, #38bdf8, #6366f1);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(99,102,241,.2);
}

.sidebar nav {
    padding: 1rem .75rem;
    flex: 1;
    overflow-y: auto;
}

.sidebar .nav-link {
    color: var(--sidebar-text);
    padding: .55rem .85rem;
    border-radius: .55rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .92rem;
    margin-bottom: .15rem;
    transition: background .12s;
}

.sidebar .nav-link i { font-size: 1.05rem; opacity: .85; }

.sidebar .nav-link:hover {
    background: var(--sidebar-bg-hover);
    color: #fff;
}

.sidebar .nav-link.active {
    background: linear-gradient(135deg, rgba(99,102,241,.25), rgba(56,189,248,.18));
    color: var(--sidebar-active);
}

.sidebar .nav-section {
    text-transform: uppercase;
    font-size: .68rem;
    letter-spacing: .08em;
    color: #64748b;
    padding: 1rem .85rem .35rem;
}

/* Cabeceras de sección colapsables */
.sidebar .nav-section-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .4rem;
    user-select: none;
    transition: color .15s ease;
}
.sidebar .nav-section-toggle:hover {
    color: #94a3b8;
}
.sidebar .nav-chevron {
    font-size: .7rem;
    transition: transform .2s ease;
    transform: rotate(0deg);
    display: inline-block;
    color: #475569;
}
.sidebar .nav-section-toggle.collapsed .nav-chevron {
    transform: rotate(-90deg);
}
.sidebar .nav-section-body {
    overflow: hidden;
    max-height: 1000px;
    transition: max-height .25s ease;
}
.sidebar .nav-section-body.collapsed {
    max-height: 0;
}

/* Badge específico para movimientos de reparto (no hay bg-purple-subtle en Bootstrap 5) */
.badge.badge-reparto {
    background-color: #ede7fa;
    color: #5d3fbf;
    border: 1px solid #d4c7f0;
}

/* Sub-grupos colapsables dentro de una sección (p. ej. Económico → Ventas/Socios) */
.sidebar .nav-subgroup-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    padding: .45rem .85rem;
    margin: .15rem 0;
    border-radius: .4rem;
    color: #cbd5e1;
    font-weight: 500;
    font-size: .92rem;
    transition: background .15s ease, color .15s ease;
}
.sidebar .nav-subgroup-toggle:hover {
    background: rgba(255,255,255,.04);
    color: #fff;
}
.sidebar .nav-subgroup-toggle i.bi:first-child { font-size: 1.02rem; opacity: .9; }
.sidebar .nav-subgroup-chevron {
    font-size: .72rem;
    opacity: .65;
    transition: transform .2s ease;
}
.sidebar .nav-subgroup-toggle.collapsed .nav-subgroup-chevron {
    transform: rotate(-90deg);
}
/* Indent extra a los hijos del sub-grupo para diferenciar nivel */
.sidebar .nav-subgroup-body .nav-link {
    padding-left: 2.2rem;
    font-size: .9rem;
}
.sidebar-hub-hint {
    border-top: 1px dashed rgba(255,255,255,.08);
    padding-top: .75rem;
    line-height: 1.35;
}
.sidebar-hub-hint a { text-decoration: none; }
.sidebar-hub-hint kbd {
    background: rgba(255,255,255,.08);
    color: #cbd5e1;
    border: 1px solid rgba(255,255,255,.12);
    padding: 0 .25rem;
    border-radius: 3px;
    font-size: .7rem;
}

.sidebar-footer {
    padding: .85rem 1rem;
    border-top: 1px solid rgba(255,255,255,.06);
    font-size: .78rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ── Fondo de zona principal (`App\Support\ColorFondo`) ───────────────────
   --app-bg      → fondo general (el "lienzo")
   --app-surface → tarjetas, tablas, drawer, modales (la "superficie activa")
   Inyectadas por el layout. Default `estandar` = gris muy claro + blanco. */
body {
    background: var(--app-bg, #f5f7fa) !important;
}
body .card,
body .dt-wrap,
body .dt-table,
body .modal-content,
body .app-drawer,
body .kpi-card {
    background-color: var(--app-surface, #ffffff);
}
/* En modo oscuro, ajustar texto base para que se lea sobre fondos oscuros */
body.app-fondo-oscuro {
    color: #e9ecef;
}
body.app-fondo-oscuro .text-body { color: #e9ecef !important; }
body.app-fondo-oscuro .text-secondary { color: #adb5bd !important; }
body.app-fondo-oscuro .card,
body.app-fondo-oscuro .modal-content,
body.app-fondo-oscuro .dt-wrap,
body.app-fondo-oscuro .app-drawer {
    color: #e9ecef;
    border-color: rgba(255,255,255,.08);
}

.topbar {
    /* `--app-topbar-bg` lo inyecta el layout desde `App\Support\ColorTopbar`
       (preferencia por usuario, paleta cerrada). Default = white. */
    background: var(--app-topbar-bg, var(--bs-body-bg));
    border-bottom: 1px solid var(--bs-border-color);
    padding: .85rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* Cuando el fondo de topbar es oscuro, invertimos el color de texto/iconos
   del propio topbar y de la sub-topbar compacta para mantener legibilidad. */
body.topbar-contraste-light .topbar,
body.topbar-contraste-light .topbar-compacto {
    color: #f8f9fa;
}
body.topbar-contraste-light .topbar .text-secondary,
body.topbar-contraste-light .topbar-compacto .text-secondary {
    color: rgba(248, 249, 250, .72) !important;
}
body.topbar-contraste-light .topbar a:not(.btn):not(.dt-pill),
body.topbar-contraste-light .topbar-compacto a:not(.btn):not(.dt-pill) {
    color: inherit;
}

.topbar .page-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.content {
    padding: 1.5rem;
    flex: 1;
}

/* Móviles: sidebar deslizante */
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.show { transform: translateX(0); }
    .main { margin-left: 0; }
    .sidebar-backdrop {
        position: fixed; inset: 0; background: rgba(0,0,0,.5);
        z-index: 1035; display: none;
    }
    .sidebar.show ~ .sidebar-backdrop { display: block; }
}

/* ---------- Tarjetas KPI ---------- */

.kpi-card {
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    padding: 1.25rem 1.4rem;
    background: var(--bs-body-bg);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform .15s, box-shadow .15s;
    /* Igualar altura entre todas las cards del row (la más alta marca el alto). */
    height: 100%;
}
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -10px rgba(0,0,0,.12);
}
.kpi-icon {
    width: 48px; height: 48px;
    border-radius: .75rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    background: var(--brand-soft);
    color: var(--brand);
    flex-shrink: 0;
}
.kpi-label { font-size: .82rem; color: var(--bs-secondary-color); margin: 0; }
.kpi-value { font-size: 1.2rem; font-weight: 700; margin: 0; line-height: 1.2; font-variant-numeric: tabular-nums; }

.kpi-icon.is-amber { background: rgba(245,158,11,.15); color: #d97706; }
.kpi-icon.is-green { background: rgba(16,185,129,.15); color: #059669; }
.kpi-icon.is-violet{ background: rgba(139,92,246,.15); color: #7c3aed; }

/* ---------- Drag & drop ---------- */

.dropzone {
    border: 2px dashed var(--bs-border-color);
    border-radius: 1rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: var(--bs-tertiary-bg);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.is-drag {
    border-color: var(--brand);
    background: var(--brand-soft);
}
.dropzone i { font-size: 2.5rem; color: var(--brand); }
.dropzone .filename { font-weight: 600; margin-top: .5rem; }

/* ---------- Tabla ---------- */

.table-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    overflow: hidden;
}
.table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.table-card table { margin-bottom: 0; }
.table-card thead th {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--bs-border-color);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.table-card thead th .sort-ind { opacity: .35; margin-left: .25rem; }
.table-card thead th.sort-asc  .sort-ind,
.table-card thead th.sort-desc .sort-ind { opacity: 1; }

.badge-soft {
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 600;
}

.empty-state {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--bs-secondary-color);
}
.empty-state i { font-size: 2.5rem; color: var(--bs-secondary-color); opacity: .5; }

/* ---------- Hub modal ---------- */

.hub-dialog { max-width: 1480px; width: calc(100vw - 2rem); }
.hub-shell {
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18);
    position: relative;
    background: var(--bs-body-bg);
}
.hub-close {
    position: absolute;
    top: 1rem; right: 1rem;
    z-index: 5;
    width: 32px; height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bs-secondary-color);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.hub-close:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }

.hub-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 540px;
    max-height: 80vh;
}

.hub-sidebar {
    background: var(--bs-tertiary-bg);
    border-right: 1px solid var(--bs-border-color);
    padding: 1rem .75rem;
    overflow-y: auto;
}
.hub-cat-group {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bs-secondary-color);
    margin: 1rem .5rem .35rem;
}
.hub-cat-group:first-child { margin-top: 0; }
.hub-cat {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .5rem .75rem;
    border: 0;
    background: transparent;
    border-radius: .55rem;
    color: var(--bs-body-color);
    font-size: .9rem;
    text-align: left;
    margin-bottom: 2px;
    transition: background .12s, color .12s;
}
.hub-cat:hover { background: var(--bs-secondary-bg); }
.hub-cat.active {
    background: var(--brand);
    color: #fff;
}
.hub-cat.active .hub-badge { background: rgba(255,255,255,.22); color: #fff; }
.hub-cat i { font-size: 1.05rem; width: 18px; text-align: center; }
.hub-badge {
    margin-left: auto;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: .72rem;
    font-weight: 600;
    min-width: 22px;
    text-align: center;
}

.hub-main {
    padding: 1.5rem 1.75rem;
    overflow-y: auto;
}
.hub-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    padding-right: 2rem;
}
.hub-title { font-size: 1.4rem; font-weight: 700; margin: 0; }
.hub-subtitle { font-size: .85rem; margin-top: .15rem; }
.hub-search {
    position: relative;
    width: 320px;
    max-width: 50%;
}
.hub-search i {
    position: absolute;
    left: .75rem; top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
}
.hub-search input {
    padding-left: 2.25rem;
    border-radius: .65rem;
    border-color: var(--bs-border-color);
}

.hub-cards {
    display: grid;
    /* auto-fill con 230px mín. → 4 cards/fila con dialog 1480px (sidebar 240 + paddings),
       y baja a 3/2/1 grácil en pantallas más estrechas. */
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
}
.hub-card {
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    padding: 1rem;
    background: var(--bs-body-bg);
    border: 1.5px solid var(--bs-border-color);
    border-radius: .85rem;
    transition: border-color .15s, transform .15s, box-shadow .15s;
    min-height: 150px;
}
.hub-card:hover {
    border-color: var(--brand);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(13, 110, 253, 0.10);
    color: inherit;
}
.hub-card-icon {
    width: 38px; height: 38px;
    border-radius: .55rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}
.hub-card-star {
    position: absolute;
    top: .65rem; right: .65rem;
    background: transparent;
    border: 0;
    color: var(--bs-secondary-color);
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    transition: background .12s;
}
.hub-card-star:hover { background: var(--bs-tertiary-bg); }
.hub-card-body { margin-top: .75rem; }
.hub-card-title { font-weight: 600; font-size: .98rem; margin-bottom: .25rem; }
.hub-card-desc {
    font-size: .8rem;
    color: var(--bs-secondary-color);
    margin: 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hub-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--bs-secondary-color);
}
.hub-empty i { font-size: 2.5rem; opacity: .4; display: block; margin-bottom: .5rem; }

/* Chip identificador de calendario en la tabla de sacas */
.saca-cal-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    font-weight: 700;
    font-size: .72rem;
    line-height: 1;
}

/* Selector de tenant en topbar */
.tenant-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .35rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .65rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.tenant-badge:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.tenant-badge-static { cursor: default; }
.tenant-badge-static:hover { border-color: var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-body-color); }
/* Modo soporte: super-admin operando en un tenant que NO es el suyo */
.tenant-badge-soporte {
    cursor: default;
    border-color: #d97706 !important;
    background: rgba(217, 119, 6, .12) !important;
    color: #d97706 !important;
    font-weight: 600;
}
.tenant-badge-soporte:hover { background: rgba(217, 119, 6, .12) !important; color: #d97706 !important; }
.tenant-badge.dropdown-toggle::after { margin-left: .35rem; }

/* Botón super-admin: icono naranja para marcar zona sensible.
   Funciona en topbar clásico (btn-sm + .btn-super-admin-icon) y compacto
   (btn-icon + .btn-super-admin-icon). */
.btn-super-admin-icon,
.btn-super-admin-icon:hover,
.btn-super-admin-icon:focus,
.btn-super-admin-icon:active,
.btn-super-admin-icon.show {
    color: #d97706 !important;
    border-color: rgba(217, 119, 6, .35) !important;
}
.btn-super-admin-icon:hover,
.btn-super-admin-icon.show {
    background: rgba(217, 119, 6, .12) !important;
    border-color: rgba(217, 119, 6, .6) !important;
}
.text-super-admin { color: #d97706 !important; }
[data-bs-theme="dark"] .btn-super-admin-icon,
[data-bs-theme="dark"] .btn-super-admin-icon:hover,
[data-bs-theme="dark"] .btn-super-admin-icon:focus,
[data-bs-theme="dark"] .btn-super-admin-icon.show {
    color: #fb923c !important;
    border-color: rgba(251, 146, 60, .35) !important;
}
[data-bs-theme="dark"] .btn-super-admin-icon:hover,
[data-bs-theme="dark"] .btn-super-admin-icon.show {
    background: rgba(251, 146, 60, .15) !important;
    border-color: rgba(251, 146, 60, .6) !important;
}
[data-bs-theme="dark"] .text-super-admin { color: #fb923c !important; }
.tenant-dot {
    width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0;
}

/* Bloque de usuario en la sidebar (encima del footer) */
.sidebar-user {
    padding: .75rem 1rem;
    border-top: 1px solid rgba(255,255,255,.06);
}
.sidebar-user-btn {
    width: 100%;
    background: transparent;
    border: 0;
    color: var(--sidebar-text);
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .6rem;
    border-radius: .55rem;
    text-align: left;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.sidebar-user-btn:hover,
.sidebar-user-btn.show { background: var(--sidebar-bg-hover); color: var(--sidebar-active); }
.sidebar-user-btn::after { display: none; } /* ocultamos el caret nativo, usamos uno propio */

.sidebar-user-avatar {
    position: relative;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .9rem;
}
.sidebar-user-avatar .super-admin-dot {
    position: absolute; bottom: -2px; right: -2px;
    font-size: .65rem; color: #dc3545;
    background: var(--sidebar-bg);
    border-radius: 50%; padding: 2px;
}
.sidebar-user-info {
    display: flex; flex-direction: column; flex-grow: 1; min-width: 0; overflow: hidden;
}
.sidebar-user-name {
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--sidebar-active);
}
.sidebar-user-email {
    font-size: .72rem;
    color: var(--sidebar-text);
    opacity: .7;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user-caret { font-size: .75rem; opacity: .7; flex-shrink: 0; }

/* Marquesina de sacas en topbar (una caja por calendario activo) */
.topbar-actions { flex-wrap: wrap; }
.marquesina-wrapper {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.marquesina-sacas {
    --marq-accent: var(--brand);
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .3rem .75rem .3rem .5rem;
    border: 1px solid var(--bs-border-color);
    border-left: 3px solid var(--marq-accent);
    border-radius: .65rem;
    background: var(--bs-tertiary-bg);
    text-decoration: none;
    color: var(--bs-body-color);
    font-size: .82rem;
    transition: border-color .15s, background .15s, transform .12s;
}
.marquesina-sacas:hover {
    border-color: var(--marq-accent);
    border-left-color: var(--marq-accent);
    color: var(--bs-body-color);
    transform: translateY(-1px);
}
.marquesina-sacas .marq-cal-label {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .45rem;
    border-radius: .35rem;
    font-size: .68rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .04em;
}
.marquesina-sacas .marq-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.marquesina-sacas .marq-item + .marq-item {
    padding-left: .65rem;
    border-left: 1px solid var(--bs-border-color);
}
.marquesina-sacas .marq-label {
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .68rem;
    color: var(--bs-secondary-color);
}
.marquesina-sacas .marq-date { font-weight: 600; }
.marquesina-sacas .badge { font-size: .68rem; padding: .2em .5em; }

@media (max-width: 1100px) {
    .marquesina-sacas .marq-label { display: none; }
}
@media (max-width: 768px) {
    .marquesina-sacas .marq-cal-label span,
    .marquesina-sacas .marq-cal-label i + * { display: none; }
}

/* Botón "abrir hub" en topbar */
.topbar .hub-trigger {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    border-radius: .65rem;
    padding: .4rem .85rem;
    color: var(--bs-body-color);
    font-size: .9rem;
    transition: border-color .12s, background .12s;
}
.topbar .hub-trigger:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.topbar .hub-trigger i { font-size: 1.05rem; }

@media (max-width: 720px) {
    .hub-grid { grid-template-columns: 1fr; }
    .hub-sidebar { display: none; }
    .hub-header { flex-direction: column; align-items: stretch; }
    .hub-search { width: 100%; max-width: 100%; }
}

/* ---------- Ayudas contextuales ---------- */
.ayuda { position: relative; }
.ayuda-close {
    position: absolute; top: 6px; right: 8px;
    background: transparent; border: 0; color: inherit; opacity: .45;
    padding: 4px 6px; line-height: 1; cursor: pointer; border-radius: 4px;
    font-size: .8rem;
}
.ayuda-close:hover { opacity: 1; background: rgba(0,0,0,.06); }

/* HERO: banner ancho azul claro al principio de la pantalla */
.ayuda-hero {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px 18px; margin: 0 0 18px;
    background: linear-gradient(135deg, #eaf2ff 0%, #dceaff 100%);
    border: 1px solid #b6d4fe; border-left: 4px solid #0d6efd;
    border-radius: 8px; color: #0a2540;
}
[data-bs-theme="dark"] .ayuda-hero {
    background: linear-gradient(135deg, #0d1f3a 0%, #0a2845 100%);
    border-color: #1e4a8e; border-left-color: #6ea8fe;
    color: #d6e4f8;
}
.ayuda-hero .ayuda-icon {
    flex-shrink: 0; width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(13, 110, 253, .15); color: #0d6efd;
    border-radius: 50%; font-size: 1.15rem;
}
[data-bs-theme="dark"] .ayuda-hero .ayuda-icon { background: rgba(110, 168, 254, .2); color: #6ea8fe; }
.ayuda-hero .ayuda-content { flex: 1; min-width: 0; }
.ayuda-hero .ayuda-title {
    font-weight: 600; font-size: 1.02rem; margin-bottom: 4px;
    padding-right: 28px;
}
.ayuda-hero p { margin: 0; font-size: .9rem; line-height: 1.45; }

/* ASIDE: caja info compacta para columna lateral o bajo un formulario */
.ayuda-aside {
    padding: 12px 14px; margin: 0 0 14px;
    background: #f8f9fc; border: 1px solid #dce3ef; border-radius: 6px;
    font-size: .85rem; color: #495057;
}
[data-bs-theme="dark"] .ayuda-aside {
    background: #1a2030; border-color: #2d3548; color: #cbd5e1;
}
.ayuda-aside .ayuda-head {
    display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
    color: #0d6efd; font-size: .76rem; text-transform: uppercase;
    letter-spacing: .04em; padding-right: 28px;
}
[data-bs-theme="dark"] .ayuda-aside .ayuda-head { color: #6ea8fe; }
.ayuda-aside p { margin: 0 0 6px; line-height: 1.4; }
.ayuda-aside p:last-child { margin-bottom: 0; }

/* Lista compartida */
.ayuda-list {
    padding-left: 18px;
    font-size: .85rem; line-height: 1.5;
}
.ayuda-list li { margin-bottom: 3px; }

/* Estado oculto en esta sesión (clase añadida por JS) */
.ayuda.is-dismissed { display: none; }

/* ---------- Drawer lateral reutilizable ----------
 * Componente genérico para mostrar paneles colapsables sobre el contenido.
 * Uso típico: lista de detalle (paradas de ruta), filtros avanzados, etc.
 *
 *   <aside class="app-drawer app-drawer-right" id="miDrawer" data-app-drawer>
 *     <header class="app-drawer-header">…</header>
 *     <div class="app-drawer-body">…</div>
 *     <footer class="app-drawer-footer">…</footer>  (opcional)
 *   </aside>
 *
 * El JS global `window.AppDrawer.toggle('miDrawer')` lo abre/cierra.
 * El padre contenedor debe tener `position:relative` para que el drawer se
 * posicione dentro de él (típicamente un wrap del listado/mapa).
 */
.app-drawer {
    position: absolute;
    top: 10px; bottom: 10px;
    width: 340px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    display: flex;
    flex-direction: column;
    z-index: 500;
    transition: transform .25s ease, opacity .25s ease;
}
.app-drawer-right { right: 10px; }
.app-drawer-left  { left: 10px; }
.app-drawer.is-hidden                      { opacity: 0; pointer-events: none; }
.app-drawer-right.is-hidden                { transform: translateX(360px); }
.app-drawer-left.is-hidden                 { transform: translateX(-360px); }

/* Variante "overlay": anclado al viewport, ocupa altura completa, estilo Holded.
   Tiene backdrop semitransparente y click-outside cierra. */
.app-drawer-overlay {
    position: fixed !important;
    top: 0; right: 0; bottom: 0;
    width: min(560px, 92vw);
    height: 100vh;
    border-radius: 0;
    border-left: 1px solid rgba(0,0,0,.08);
    box-shadow: -8px 0 24px rgba(0,0,0,.12);
    z-index: 1080;
}
.app-drawer-overlay.is-hidden { transform: translateX(100%); opacity: 1; }
[data-bs-theme="dark"] .app-drawer-overlay { border-left-color: rgba(255,255,255,.1); }

/* Backdrop compartido por drawers overlay. Lo gestiona JS desde main.php. */
.app-drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.28);
    z-index: 1070;       /* por debajo del drawer (1080), por encima de modales BS (1050) */
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.app-drawer-backdrop.is-visible { opacity: 1; pointer-events: auto; }
.app-drawer-header {
    display: flex; justify-content: space-between; align-items: center;
    gap: 8px; padding: 10px 14px; border-bottom: 1px solid rgba(0,0,0,.08);
}
.app-drawer-body   { flex: 1; overflow-y: auto; padding: 4px; }
.app-drawer-footer { padding: 10px 14px; border-top: 1px solid rgba(0,0,0,.08);
    display: flex; justify-content: space-between; align-items: center; }
[data-bs-theme="dark"] .app-drawer { background: #1e1e1e; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
[data-bs-theme="dark"] .app-drawer-header,
[data-bs-theme="dark"] .app-drawer-footer { border-color: rgba(255,255,255,.1); }

/* Variante: filas internas de tipo "stop" (numerito + body),
 * útil para listados verticales con click sincronizado a otra parte de la UI. */
.app-drawer-row {
    display: flex; gap: 8px; padding: 8px 10px;
    border-radius: 8px; cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s, border-color .15s;
}
.app-drawer-row:hover  { background: #f1f3f5; }
.app-drawer-row.active { background: #e7f1ff; border-color: #0d6efd; }
.app-drawer-row-num {
    background: #0d6efd; color: white;
    min-width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 11px; flex-shrink: 0;
}
.app-drawer-row-body { flex: 1; min-width: 0; }
[data-bs-theme="dark"] .app-drawer-row:hover  { background: #2a2a2a; }
[data-bs-theme="dark"] .app-drawer-row.active { background: #1a3654; border-color: #3d8bfd; }

/* ───── Pill gmbos en topbar (logo SVG inline, tintable) ─────
   El color de relleno del logo lo manda el padre (.text-success / .text-danger
   / .text-secondary), gracias a `fill="currentColor"` en todos los paths.
   Altura igualada al .tenant-badge (padding .35rem .75rem; .65rem radius).
*/
.topbar-gmbos-pill {
    display: inline-flex;
    align-items: center;
    padding: .35rem .75rem;
    border-radius: .65rem;
    border: 1px solid currentColor;
    background: transparent;
    transition: background .15s, transform .12s;
    line-height: 1;
    font-size: .85rem; /* mismo que tenant-badge, controla altura del logo (1.1em) */
}
.topbar-gmbos-pill.text-success { background: rgba(25, 135, 84, .08); border-color: rgba(25, 135, 84, .35); }
.topbar-gmbos-pill.text-danger  { background: rgba(220, 53, 69, .08); border-color: rgba(220, 53, 69, .35); }
.topbar-gmbos-pill:hover { transform: translateY(-1px); }
.topbar-gmbos-pill.text-success:hover { background: rgba(25, 135, 84, .15); }
.topbar-gmbos-pill.text-danger:hover  { background: rgba(220, 53, 69, .15); }
[data-bs-theme="dark"] .topbar-gmbos-pill.text-success { background: rgba(25, 135, 84, .18); border-color: rgba(25, 135, 84, .5); }
[data-bs-theme="dark"] .topbar-gmbos-pill.text-danger  { background: rgba(220, 53, 69, .18); border-color: rgba(220, 53, 69, .5); }

/* Topbar compacto: el chip ya tenía estilos propios; sustituimos texto por SVG.
   El logo escala con font-size del chip (13px) → 18.2px de alto. */
.topbar-compacta .gmbos-chip svg { height: 1.4em; width: auto; }

/* ───── Pill Strator en topbar (al lado de gmbos) ─────
   Estética similar al gmbos-chip pero con el wordmark de Strator dentro,
   en color azul corporativo Logista. Acción: lleva al panel /super-admin/strator.
*/
.topbar-strator-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: .35rem .75rem;
    border-radius: .65rem;
    font-size: .85rem; /* iguala altura con tenant-badge */
    font-weight: 700;
    color: #0066cc;
    background: #e7f0fb;
    border: 1px solid #cbe0f5;
    transition: background .15s, border-color .15s, transform .12s;
    line-height: 1;
}
.topbar-strator-pill:hover {
    background: #d9e7f7;
    border-color: #a5c5e8;
    transform: translateY(-1px);
}
[data-bs-theme="dark"] .topbar-strator-pill {
    color: #6ea8e0;
    background: rgba(13, 110, 253, .12);
    border-color: rgba(13, 110, 253, .25);
}
[data-bs-theme="dark"] .topbar-strator-pill:hover {
    background: rgba(13, 110, 253, .18);
    border-color: rgba(13, 110, 253, .4);
}
/* Variante dentro del topbar compacto: iguala al .btn-tenant-chip
   (padding 6px 12px, font-size 13px, border-radius 20px, line-height 1.5) */
.topbar-compacta .topbar-strator-pill {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    line-height: 1.5;
}
@media (max-width: 768px) {
    .topbar-strator-pill { padding: 6px 10px; }
}

/* ───── Pill Logista en topbar (logo PNG) ─────
   Como Logista no tiene estado verde/rojo (no es una API en vivo),
   el pill solo lleva el logo en su color natural sobre fondo neutro.
*/
.topbar-logista-pill {
    display: inline-flex;
    align-items: center;
    padding: .35rem .75rem;
    border-radius: .65rem;
    font-size: .85rem; /* iguala altura con tenant-badge */
    background: #fafafa;
    border: 1px solid #e0e0e0;
    transition: background .15s, transform .12s, border-color .15s;
    line-height: 1;
}
.topbar-logista-pill img {
    height: 1.4em; /* escala con font-size del pill, queda como el wordmark Strator */
    width: auto;
    display: block;
}
.topbar-logista-pill:hover {
    background: #f0f0f0;
    border-color: #c5c5c5;
    transform: translateY(-1px);
}
[data-bs-theme="dark"] .topbar-logista-pill {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.15);
}
[data-bs-theme="dark"] .topbar-logista-pill img {
    /* En oscuro: invertir el logo para que el azul oscuro no desaparezca */
    filter: brightness(1.4) contrast(1.1);
}
[data-bs-theme="dark"] .topbar-logista-pill:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.25);
}
.topbar-compacta .topbar-logista-pill {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    line-height: 1.5;
}
@media (max-width: 768px) {
    .topbar-logista-pill { padding: 6px 10px; }
}