/* ============================================================
   EFECTIVALE — Tema Tailwind (variables CSS light/dark)
   Sustituye la paleta AdminLTE. Colores de marca conservados
   (azul EfectiVale #3498db) mapeados a tokens Tailwind vía
   tailwind.config (ver main.php / login.html).
   ============================================================ */

:root {
    --color-primary:       #3498db;
    --color-primary-dark:  #217dbb;
    --color-primary-light: #eaf4fc;
    --color-surface:       #f4f6f9;
    --color-card:          #ffffff;
    --color-border:        #e2e8f0;
    --color-border-strong: #cbd5e1;
    --color-ink:           #1e293b;
    --color-text-2:        #475569;
    --color-muted:         #64748b;
    --color-neutral-bg:    #f1f5f9;
    --color-ok:            #16A34A;
    --color-ok-bg:         #E8F8EF;
    --color-warn:          #D97706;
    --color-warn-bg:       #FEF3E2;
    --color-err:           #DC2626;
    --color-err-bg:        #FEECEC;
    --color-info:          #2563EB;
    --color-info-bg:       #E5F0FA;
}

.dark {
    /* Brand — naranja POS_Delivery */
    --color-primary:       #FB8137;
    --color-primary-dark:  #C2410C;
    --color-primary-light: #31190D;
    /* Superficies — cálidas oscuras */
    --color-surface:       #131211;
    --color-card:          #1B1A18;
    --color-surface-2:     #211F1D;
    /* Bordes */
    --color-border:        #2E2B28;
    --color-border-strong: #3D3935;
    /* Textos */
    --color-ink:           #F5F3F0;
    --color-text-2:        #B8B2AB;
    --color-muted:         #8B837B;
    /* Hover / alternado */
    --color-neutral-bg:    #26241F;
    /* Estados */
    --color-ok:            #4ADE80;
    --color-ok-bg:         #12251A;
    --color-warn:          #FBBF24;
    --color-warn-bg:       #2A2010;
    --color-err:           #F87171;
    --color-err-bg:        #2C1514;
    --color-info:          #93B4FD;
    --color-info-bg:       #151E33;
}

body {
    font-family: 'Source Sans Pro', system-ui, sans-serif;
}

/* ── Safe area iOS (notch / home indicator) ─────────────────────────── */
.safe-top    { padding-top: env(safe-area-inset-top); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* ── Scrollbar personalizado ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-muted); }

/* ── Transición de módulo al navegar (SPA-like) ─────────────────────── */
#content-wrapper {
    animation: fadeInModule 0.18s ease-out;
}
@keyframes fadeInModule {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Transición de tema claro/oscuro ─────────────────────────────────── */
html.transitioning, html.transitioning * {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

/* ── Modal (shim compatible con Bootstrap $.fn.modal, ver js/app-shell.js)
   Nota: se usa la clase propia ".show-modal" (en vez de las utilidades
   Tailwind hidden/flex) para evitar conflictos de orden/especificidad
   con el stylesheet inyectado por el Tailwind Play CDN. ────────────── */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}
.modal.show-modal {
    display: flex;
}
.modal.show-modal .modal-dialog {
    animation: modalPop 0.18s ease-out;
}
@keyframes modalPop {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-dialog { width: 100%; max-width: 500px; margin: 0 auto; }
.modal-dialog.modal-sm { max-width: 320px; }
.modal-dialog.modal-lg { max-width: 800px; }
.modal-dialog.modal-xl { max-width: 1140px; }
.modal-content {
    background: var(--color-card);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(15,23,42,0.2);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); flex-shrink: 0;
}
.modal-title { font-size: 1rem; font-weight: 700; color: var(--color-ink); margin: 0; }
.modal-body { padding: 1.25rem; overflow-y: auto; flex: 1; min-height: 0; }
.modal-footer {
    padding: 0.9rem 1.25rem; border-top: 1px solid var(--color-border);
    display: flex; justify-content: flex-end; gap: 0.5rem; flex-shrink: 0;
}
.modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* ── Bottom-nav activo (móvil) ────────────────────────────────────────── */
.nav-btn.active {
    color: var(--color-primary);
}
.nav-btn.active span:first-child {
    transform: scale(1.08);
}

/* ── Sidebar activo (desktop) ─────────────────────────────────────────── */
.sidebar-link.active {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-weight: 600;
}
.dark .sidebar-link.active {
    background-color: #4A3525;
    color: var(--color-primary);
}

/* ── Ocultar scrollbar en listas horizontales (chips, tabs) ──────────── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Spinner de carga (botón de login, usado por login.js) ──────────── */
.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spinner-rotate 0.6s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}
@keyframes spinner-rotate {
    to { transform: rotate(360deg); }
}

/* ── SweetAlert2 — integración dark mode ─────────────────────────────── */
.dark .swal2-popup {
    background: var(--color-card) !important;
    color: var(--color-ink) !important;
}
.dark .swal2-title { color: var(--color-ink) !important; }
.dark .swal2-html-container { color: var(--color-text-2) !important; }
.dark .swal2-confirm {
    background: var(--color-primary) !important;
}
.dark .swal2-cancel {
    background: var(--color-neutral-bg) !important;
    color: var(--color-ink) !important;
    border-color: var(--color-border) !important;
}
.dark .swal2-styled:focus { box-shadow: 0 0 0 3px rgba(251,129,55,0.3) !important; }
.dark .swal2-input, .swal2-select, .swal2-textarea {
    background: var(--color-surface) !important;
    color: var(--color-ink) !important;
    border-color: var(--color-border-strong) !important;
}

/* ============================================================
   CAPA DE COMPATIBILIDAD — Bootstrap/AdminLTE → look Tailwind
   ------------------------------------------------------------
   Muchas páginas generan su HTML dinámicamente desde pages/*.js
   (badges de estatus, botones con ícono, grid de columnas, etc.)
   usando nombres de clase de Bootstrap. Para no tocar esa lógica
   JS, redefinimos aquí esas mismas clases con un estilo plano,
   limpio y responsive (mismos tokens de color que el resto del
   sistema), en vez de cargar Bootstrap/AdminLTE CSS.
   ============================================================ */

/* ── Grid (row / col-*) — sistema de 12 columnas tipo Bootstrap ──────── */
.container-fluid { width: 100%; padding-left: 1rem; padding-right: 1rem; }
.row { display: flex; flex-wrap: wrap; margin-left: -0.5rem; margin-right: -0.5rem; }
.row > [class*="col-"] { padding-left: 0.5rem; padding-right: 0.5rem; width: 100%; }
[class*="col-"] { box-sizing: border-box; }
.col-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
.col-2  { flex: 0 0 16.666%; max-width: 16.666%; }
.col-3  { flex: 0 0 25%;     max-width: 25%; }
.col-4  { flex: 0 0 33.333%; max-width: 33.333%; }
.col-5  { flex: 0 0 41.666%; max-width: 41.666%; }
.col-6  { flex: 0 0 50%;     max-width: 50%; }
.col-7  { flex: 0 0 58.333%; max-width: 58.333%; }
.col-8  { flex: 0 0 66.666%; max-width: 66.666%; }
.col-9  { flex: 0 0 75%;     max-width: 75%; }
.col-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.col-11 { flex: 0 0 91.666%; max-width: 91.666%; }
.col-12, .col { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 576px) {
    .col-sm-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
    .col-sm-2  { flex: 0 0 16.666%; max-width: 16.666%; }
    .col-sm-3  { flex: 0 0 25%;     max-width: 25%; }
    .col-sm-4  { flex: 0 0 33.333%; max-width: 33.333%; }
    .col-sm-5  { flex: 0 0 41.666%; max-width: 41.666%; }
    .col-sm-6  { flex: 0 0 50%;     max-width: 50%; }
    .col-sm-7  { flex: 0 0 58.333%; max-width: 58.333%; }
    .col-sm-8  { flex: 0 0 66.666%; max-width: 66.666%; }
    .col-sm-9  { flex: 0 0 75%;     max-width: 75%; }
    .col-sm-10 { flex: 0 0 83.333%; max-width: 83.333%; }
    .col-sm-11 { flex: 0 0 91.666%; max-width: 91.666%; }
    .col-sm-12 { flex: 0 0 100%;    max-width: 100%; }
    .d-sm-inline-block { display: inline-block; }
}
@media (min-width: 768px) {
    .col-md-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
    .col-md-2  { flex: 0 0 16.666%; max-width: 16.666%; }
    .col-md-3  { flex: 0 0 25%;     max-width: 25%; }
    .col-md-4  { flex: 0 0 33.333%; max-width: 33.333%; }
    .col-md-5  { flex: 0 0 41.666%; max-width: 41.666%; }
    .col-md-6  { flex: 0 0 50%;     max-width: 50%; }
    .col-md-7  { flex: 0 0 58.333%; max-width: 58.333%; }
    .col-md-8  { flex: 0 0 66.666%; max-width: 66.666%; }
    .col-md-9  { flex: 0 0 75%;     max-width: 75%; }
    .col-md-10 { flex: 0 0 83.333%; max-width: 83.333%; }
    .col-md-11 { flex: 0 0 91.666%; max-width: 91.666%; }
    .col-md-12 { flex: 0 0 100%;    max-width: 100%; }
}
@media (min-width: 992px) {
    .col-lg-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
    .col-lg-2  { flex: 0 0 16.666%; max-width: 16.666%; }
    .col-lg-3  { flex: 0 0 25%;     max-width: 25%; }
    .col-lg-4  { flex: 0 0 33.333%; max-width: 33.333%; }
    .col-lg-5  { flex: 0 0 41.666%; max-width: 41.666%; }
    .col-lg-6  { flex: 0 0 50%;     max-width: 50%; }
    .col-lg-7  { flex: 0 0 58.333%; max-width: 58.333%; }
    .col-lg-8  { flex: 0 0 66.666%; max-width: 66.666%; }
    .col-lg-9  { flex: 0 0 75%;     max-width: 75%; }
    .col-lg-10 { flex: 0 0 83.333%; max-width: 83.333%; }
    .col-lg-11 { flex: 0 0 91.666%; max-width: 91.666%; }
    .col-lg-12 { flex: 0 0 100%;    max-width: 100%; }
}

/* ── Content header + breadcrumb ──────────────────────────────────────── */
.content-header { padding: 1.1rem 0 0.6rem; }
.content-header h1 { font-size: 1.2rem; font-weight: 700; color: var(--color-ink); }
.content { padding-bottom: 2rem; }
.breadcrumb { display: flex; list-style: none; gap: 0.4rem; font-size: 0.75rem; color: var(--color-muted); padding: 0; margin: 0; }
.breadcrumb-item + .breadcrumb-item::before { content: '/'; margin-right: 0.4rem; }
.breadcrumb-item a { color: var(--color-muted); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--color-primary); }
.breadcrumb-item.active { color: var(--color-ink); font-weight: 600; }
.float-sm-right { float: none; }
@media (min-width: 576px) { .float-sm-right { float: right; } }

/* ── Card ──────────────────────────────────────────────────────────────── */
.card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
    margin-bottom: 1rem;
    overflow: hidden;
}
.card-outline { border-top: 3px solid var(--color-border); }
.card-primary.card-outline { border-top-color: var(--color-primary); }
.card-success.card-outline { border-top-color: #16A34A; }
.card-info.card-outline     { border-top-color: #2563EB; }
.card-warning.card-outline  { border-top-color: #D97706; }
.card-danger.card-outline   { border-top-color: #DC2626; }
.card-header {
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
}
.card-title { font-size: 0.95rem; font-weight: 700; color: var(--color-ink); margin: 0; display: flex; align-items: center; }
.card-body { padding: 1.25rem; }
.card-body.p-0 { padding: 0; }
.card-footer { padding: 0.75rem 1.25rem; border-top: 1px solid var(--color-border); }
.card-tools { display: flex; gap: 0.4rem; align-items: center; }

/* ── Badge ─────────────────────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 0.3em 0.65em;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 9999px;
    line-height: 1.2;
}
.badge-primary   { background: var(--color-primary-light); color: var(--color-primary-dark); }
.badge-success   { background: #E8F8EF; color: #16A34A; }
.badge-warning   { background: #FEF3E2; color: #D97706; }
.badge-danger    { background: #FEECEC; color: #DC2626; }
.badge-info      { background: #E5F0FA; color: #2563EB; }
.badge-secondary { background: #f1f5f9; color: #64748b; }
.badge-light     { background: #f8fafc; color: #334155; }
.badge-dark      { background: #1e293b; color: #f8fafc; }
.navbar-badge     { position: relative; }
.dark .badge-primary   { background: var(--color-primary-light); color: var(--color-primary); }
.dark .badge-success   { background: var(--color-ok-bg); color: var(--color-ok); }
.dark .badge-warning   { background: var(--color-warn-bg); color: var(--color-warn); }
.dark .badge-danger    { background: var(--color-err-bg); color: var(--color-err); }
.dark .badge-info      { background: var(--color-info-bg); color: var(--color-info); }
.dark .badge-secondary { background: var(--color-neutral-bg); color: var(--color-text-2); }
.dark .badge-light     { background: var(--color-neutral-bg); color: var(--color-text-2); }
.dark .badge-dark      { background: var(--color-ink); color: var(--color-card); }

/* ── Botones ───────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem; font-weight: 600;
    border-radius: 0.6rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.1s ease;
    text-decoration: none;
    line-height: 1.3;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-sm { padding: 0.35rem 0.7rem; font-size: 0.78rem; border-radius: 0.5rem; }
.btn-block { display: flex; width: 100%; }
.btn-primary   { background: var(--color-primary); color: #fff; }
.btn-success   { background: #16A34A; color: #fff; }
.btn-danger    { background: #DC2626; color: #fff; }
.btn-warning   { background: #D97706; color: #fff; }
.btn-info      { background: #2563EB; color: #fff; }
.btn-secondary { background: #64748b; color: #fff; }
.btn-light     { background: #f1f5f9; color: var(--color-ink); border-color: var(--color-border); }
.btn-outline-secondary { background: transparent; color: var(--color-muted); border-color: var(--color-border); }
.btn:hover { filter: brightness(0.94); }
.close {
    background: none; border: 0; font-size: 1.4rem; line-height: 1; color: var(--color-muted);
    cursor: pointer; padding: 0.2rem 0.4rem;
}
.close:hover { color: var(--color-ink); }

/* ── Formularios ───────────────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--color-ink); margin-bottom: 0.35rem; }
.form-control {
    width: 100%;
    padding: 0.55rem 0.8rem;
    font-size: 0.88rem;
    color: var(--color-ink);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus {
    outline: none; border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgb(52 152 219 / 0.15);
}
.form-control[readonly] { background: var(--color-surface); color: var(--color-muted); }
.input-group { display: flex; align-items: stretch; }
.input-group .form-control { border-radius: 0; flex: 1 1 auto; width: 1%; }
.input-group-prepend .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-append .input-group-text  { border-top-left-radius: 0;  border-bottom-left-radius: 0; }
.input-group > .form-control:first-child,
.input-group-prepend + .form-control { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; }
.input-group > .form-control:last-child { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
.input-group-text {
    display: flex; align-items: center; padding: 0 0.8rem;
    background: var(--color-surface); border: 1px solid var(--color-border);
    color: var(--color-muted); font-size: 0.85rem;
}
/* Botones dentro de input-group (ej. mostrar/ocultar contraseña) */
.input-group-append .btn, .input-group-prepend .btn { flex-shrink: 0; border-radius: 0; }
.input-group-append .btn:last-child { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
.input-group-prepend .btn:first-child { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; }

/* ── Archivo personalizado (custom-file, usado en Datos de Empresa) ──── */
.custom-file { position: relative; display: block; width: 100%; }
.custom-file-input {
    position: relative; z-index: 2; width: 100%; height: 42px; margin: 0;
    opacity: 0; cursor: pointer;
}
.custom-file-label {
    position: absolute; inset: 0; z-index: 1; height: 42px;
    display: flex; align-items: center; padding: 0 0.9rem;
    background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: 0.6rem; color: var(--color-muted); font-size: 0.85rem;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.custom-file-label::after {
    content: "Buscar"; position: absolute; right: 0; top: 0; bottom: 0;
    display: flex; align-items: center; padding: 0 0.9rem;
    background: var(--color-surface); border-left: 1px solid var(--color-border);
    color: var(--color-ink); font-size: 0.8rem; font-weight: 600;
    border-top-right-radius: 0.6rem; border-bottom-right-radius: 0.6rem;
}
.img-thumbnail {
    border: 1px solid var(--color-border); border-radius: 0.6rem; padding: 0.25rem;
    background: var(--color-card); max-width: 100%;
}
.form-text { font-size: 0.75rem; margin-top: 0.25rem; }

/* ── Tablas ────────────────────────────────────────────────────────────── */
.table-responsive { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.table th, .table td { padding: 0.65rem 0.9rem; text-align: left; }
.table thead th {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.02em;
    color: var(--color-muted); border-bottom: 1px solid var(--color-border);
}
.table-bordered th, .table-bordered td, .table-bordered { border: 1px solid var(--color-border); }
.table-striped tbody tr:nth-of-type(odd) { background: var(--color-surface); }
.table-hover tbody tr:hover { background: var(--color-primary-light); }
.table td, .table tr { border-color: var(--color-border); }
.table-sm th, .table-sm td { padding: 0.4rem 0.6rem; }
.dark .table-striped tbody tr:nth-of-type(odd) { background: var(--color-neutral-bg); }
.dark .table-hover tbody tr:hover { background: rgba(251,129,55,0.08); }
.dark .table thead th { color: var(--color-muted); border-bottom-color: var(--color-border); }
.dark .table-bordered th, .dark .table-bordered td, .dark .table-bordered { border-color: var(--color-border); }

/* ── Info-box / small-box (métricas AdminLTE) ─────────────────────────── */
.info-box {
    display: flex; align-items: center; background: var(--color-card);
    border: 1px solid var(--color-border); border-radius: 14px; padding: 0.9rem;
    box-shadow: 0 2px 12px rgba(15,23,42,0.06); margin-bottom: 1rem; min-height: 80px;
}
.info-box.bg-light { background: var(--color-surface); box-shadow: none; }
.info-box-icon {
    width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.1rem; margin-right: 0.9rem;
}
.info-box-content { min-width: 0; }
.info-box-text { display: block; font-size: 0.75rem; color: var(--color-muted); }
.info-box-number { display: block; font-size: 1.15rem; font-weight: 700; color: var(--color-ink); }
.small-box { border-radius: 14px; padding: 1.1rem; color: #fff; display: flex; align-items: center; justify-content: space-between; position: relative; overflow: hidden; }
.small-box .inner h3 { font-size: 1.6rem; font-weight: 700; margin: 0; }
.small-box .inner p { font-size: 0.8rem; opacity: 0.9; margin: 0; }
.small-box .icon { font-size: 2rem; opacity: 0.35; }

/* ── Colores de fondo/texto usados directamente en markup ─────────────── */
.bg-primary { background: var(--color-primary) !important; }
.bg-success { background: #16A34A !important; }
.bg-danger  { background: #DC2626 !important; }
.bg-warning { background: #D97706 !important; }
.bg-info    { background: #2563EB !important; }
.bg-secondary { background: #64748b !important; }
.bg-light   { background: var(--color-surface) !important; }
.bg-dark    { background: #1e293b !important; }
.text-primary { color: var(--color-primary) !important; }
.text-success { color: #16A34A !important; }
.text-danger  { color: #DC2626 !important; }
.text-warning { color: #D97706 !important; }
.text-info    { color: #2563EB !important; }
.text-secondary { color: #64748b !important; }
.text-muted   { color: var(--color-muted) !important; }
.text-white   { color: #fff !important; }
.elevation-1  { box-shadow: 0 2px 6px rgba(15,23,42,0.12); }
.text-decoration-none { text-decoration: none; }
.text-nowrap  { white-space: nowrap; }
.d-none       { display: none; }
.d-block      { display: block; }
/* Dark mode: colores de texto más brillantes para contraste */
.dark .text-success { color: var(--color-ok) !important; }
.dark .text-danger  { color: var(--color-err) !important; }
.dark .text-warning { color: var(--color-warn) !important; }
.dark .text-info    { color: var(--color-info) !important; }
.dark .text-secondary { color: var(--color-text-2) !important; }
.dark .elevation-1  { box-shadow: 0 2px 6px rgba(0,0,0,0.5); }

/* ── Dark mode: colores de módulos de permisos (roles.html) ─────────── */
.dark .border-success { border-color: var(--color-ok) !important; }
.dark .bg-success { background: var(--color-ok-bg) !important; color: var(--color-ok) !important; }
.dark .border-secondary { border-color: var(--color-text-2) !important; }
.dark .bg-secondary { background: var(--color-neutral-bg) !important; color: var(--color-text-2) !important; }
.dark .border-danger { border-color: var(--color-err) !important; }
.dark .bg-danger { background: var(--color-err-bg) !important; color: var(--color-err) !important; }
.dark .border-info { border-color: var(--color-info) !important; }
.dark .bg-info { background: var(--color-info-bg) !important; color: var(--color-info) !important; }
.dark .border-primary { border-color: var(--color-primary) !important; }
.dark .bg-primary { background: var(--color-primary) !important; color: #fff !important; }
.dark .border-warning { border-color: var(--color-warn) !important; }
.dark .bg-warning { background: var(--color-warn-bg) !important; color: var(--color-warn) !important; }
.dark .border-dark { border-color: var(--color-border-strong) !important; }
.dark .bg-dark { background: var(--color-border-strong) !important; color: var(--color-ink) !important; }
.dark .bg-light { background: var(--color-neutral-bg) !important; color: var(--color-ink) !important; }

/* ── Checkboxes de permisos (Roles / Usuarios) ────────────────────────── */
.form-check { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.5rem; }
.form-check-input { width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer; }
.form-check-label { font-size: 0.85rem; color: var(--color-ink); cursor: pointer; user-select: none; }

/* ── Barra de progreso (subida de documentos) ─────────────────────────── */
.progress { height: 0.9rem; background: var(--color-surface); border-radius: 9999px; overflow: hidden; }
.progress-bar {
    height: 100%; background: var(--color-primary); color: #fff; font-size: 0.65rem;
    display: flex; align-items: center; justify-content: center; transition: width 0.3s ease;
}

/* ── Select2 (usado en Nuevo Vale) — integración visual con Tailwind ─── */
.select2-container .select2-selection--single {
    height: 42px !important;
    border-radius: 0.5rem !important;
    border-color: var(--color-border) !important;
    display: flex;
    align-items: center;
    background-color: var(--color-card) !important;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    color: var(--color-ink);
    line-height: 42px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
}
.select2-dropdown {
    border-color: var(--color-border) !important;
    border-radius: 0.5rem !important;
    overflow: hidden;
    background: var(--color-card) !important;
}
.dark .select2-dropdown {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
}
.dark .select2-search--dropdown .select2-search__field {
    background: var(--color-surface) !important;
    color: var(--color-ink) !important;
    border-color: var(--color-border) !important;
}
.dark .select2-results__option {
    color: var(--color-ink) !important;
}
.dark .select2-results__option--highlighted {
    background: var(--color-primary) !important;
    color: #fff !important;
}

/* ========================================
   Optimizaciones Móvil / PWA
   ======================================== */

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Interacción táctil tipo app nativa: sin destello azul al tocar, sin menú
   contextual por pulsación larga y sin que el rebote del scroll arrastre a
   la página contenedora (evita el pull-to-refresh del navegador). */
html { -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior-y: contain; }

/* La UI de navegación no se selecciona al mantener pulsado (el contenido sí) */
header, nav, aside, .btn, .fab, .nav-btn, .card-dropdown-menu {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

@media (max-width: 768px) {
    /* Touch-friendly: mínimo 44x44px */
    .btn, button, [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    /* Se excluyen checkbox/radio: forzarles min-height los deforma (caja de
       44px de alto con 18px de ancho). Su área táctil la aporta el <label>
       que los envuelve. */
    .form-control,
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        min-height: 44px;
        font-size: 16px; /* Evitar zoom automático de iOS al enfocar */
    }
    input[type="checkbox"], input[type="radio"] {
        min-height: 0;
        min-width: 0;
    }

    /* Modales a pantalla completa real: sin marco de backdrop alrededor y sin
       el tope de 90vh/60vh que dejaba un hueco muerto bajo el contenido. */
    .modal { padding: 0; align-items: stretch; }
    .modal-dialog { margin: 0; max-width: 100%; height: 100%; }
    .modal-content { height: 100%; max-height: 100%; border-radius: 0; }
    .modal-body { max-height: none; flex: 1; overflow-y: auto; }
    /* Varios modales envuelven body+footer en un <form>: sin esto el form se
       queda del alto de su contenido y el footer no baja al pie de la pantalla. */
    .modal-content > form {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }
    /* Respetar notch y barra de gestos cuando el modal ocupa toda la pantalla */
    .modal-header { padding-top: calc(1rem + env(safe-area-inset-top)); }
    .modal-footer { padding-bottom: calc(0.9rem + env(safe-area-inset-bottom)); }
}

/* Reduced motion para accesibilidad */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Cards: Avatar + Dropdown ─────────────────────────────────────────── */
.card-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8125rem;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    user-select: none;
}

.card-dropdown { position: relative; }

.card-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.18);
    z-index: 50;
    min-width: 150px;
    padding: 0.375rem 0;
    animation: ddFadeIn 0.15s ease;
}
.card-dropdown-menu.show { display: block; }

@keyframes ddFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.card-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    color: var(--color-ink);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.card-dropdown-item:hover { background: var(--color-surface); }
.card-dropdown-item.danger { color: var(--color-err); }
.card-dropdown-item.danger:hover { background: var(--color-err-bg); }

.dark .card-dropdown-menu {
    background: var(--color-surface-2);
    border-color: var(--color-border-strong);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}
.dark .card-dropdown-item:hover { background: var(--color-neutral-bg); }
.dark .card-dropdown-item.danger:hover { background: var(--color-err-bg); }

/* Botón trigger del dropdown (3 puntos) */
.card-dropdown-trigger {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.card-dropdown-trigger:hover {
    background: var(--color-surface);
    color: var(--color-ink);
    border-color: var(--color-border-strong);
}
.dark .card-dropdown-trigger {
    border-color: var(--color-border-strong);
}
.dark .card-dropdown-trigger:hover {
    background: var(--color-neutral-bg);
    color: var(--color-ink);
}

/* Dropdown hacia arriba cuando no cabe abajo */
.card-dropdown-menu.dropup {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 4px;
}

/* ── Floating Action Button (FAB) ─────────────────────────────────────── */
.fab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 40;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(52, 152, 219, 0.45);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.55);
}
.fab:active {
    transform: scale(0.96);
}
.fab i, .fab svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* Ajustar para bottom-nav en móvil */
@media (max-width: 768px) {
    .fab {
        bottom: 5rem;
        right: 1.25rem;
    }
}

.dark .fab {
    box-shadow: 0 4px 14px rgba(251, 129, 55, 0.4);
}
.dark .fab:hover {
    box-shadow: 0 6px 20px rgba(251, 129, 55, 0.55);
}

/* ── Page: full-height card container ──────────────────────────────────── */
.page-cards {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.page-cards > .bg-surface {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.page-cards > .bg-surface > .p-5 {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.page-cards > .bg-surface > .p-5 > .flex.flex-col {
    flex: 1;
}