/* ============================================================
   GESBOD — Design system nuevo (Tailwind CDN + Alpine.js)
   Reemplaza AdminLTE 2 / Bootstrap 3 / MsNova.css.
   Tokens de color/tipografía definidos una sola vez aquí.
   ============================================================ */

:root {
    --gb-bg: #f8fafc;
    --gb-surface: #ffffff;
    --gb-border: #e2e8f0;
    --gb-text: #0f172a;
    --gb-text-muted: #64748b;
    --gb-primary: #2563eb;
    --gb-primary-dark: #1d4ed8;
    --gb-primary-light: #eff6ff;
    --gb-success: #16a34a;
    --gb-success-light: #f0fdf4;
    --gb-warning: #d97706;
    --gb-warning-light: #fffbeb;
    --gb-danger: #dc2626;
    --gb-danger-light: #fef2f2;
    --gb-info: #0891b2;
    --gb-info-dark: #0e7490;
    --gb-sidebar-bg: #0f172a;
    --gb-sidebar-text: #cbd5e1;
    --gb-sidebar-active: #1e293b;
    --gb-radius: 10px;
}

html, body {
    background: var(--gb-bg);
    color: var(--gb-text);
    font-family: "Inter", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

table { cursor: default; }

/* ---------- Layout shell ---------- */
.gb-app {
    display: flex;
    min-height: 100vh;
}

.gb-sidebar {
    background: var(--gb-sidebar-bg);
    color: var(--gb-sidebar-text);
    width: 260px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.gb-sidebar a { color: var(--gb-sidebar-text); }
.gb-sidebar a:hover { color: #ffffff; }

.gb-sidebar .gb-nav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.9rem;
    border-radius: 8px;
    font-size: 0.875rem;
}

.gb-sidebar .gb-nav-link:hover { background: var(--gb-sidebar-active); }
.gb-sidebar .gb-nav-link.is-active { background: var(--gb-primary); color: #ffffff; }

.gb-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.gb-topbar {
    background: var(--gb-surface);
    border-bottom: 1px solid var(--gb-border);
}

.gb-content {
    padding: 1.25rem;
    flex: 1;
}

/* ---------- Cards / panels ---------- */
.gb-card {
    background: var(--gb-surface);
    border: 1px solid var(--gb-border);
    border-radius: var(--gb-radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* ---------- Buttons ---------- */
.gb-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.gb-btn-primary { background: var(--gb-primary); color: #fff; }
.gb-btn-primary:hover { background: var(--gb-primary-dark); }

.gb-btn-secondary { background: #fff; color: var(--gb-text); border-color: var(--gb-border); }
.gb-btn-secondary:hover { background: #f1f5f9; }

.gb-btn-danger { background: var(--gb-danger); color: #fff; border-color: var(--gb-danger); }
.gb-btn-danger:hover { background: #b91c1c; }

.gb-btn-success { background: var(--gb-success); color: #fff; border-color: var(--gb-success); }
.gb-btn-success:hover { background: #15803d; }

.gb-btn-icon { padding: 0.45rem; }

/* Botones de acción por fila (editar/restaurar): coloreados como en el
   diseño anterior, identificados por su `title` o su clase de acción
   (misma clase que ya usa el JS para el binding del evento), sin
   necesidad de tocar cada vista una por una. */
a.gb-btn[title="Editar"] { background: var(--gb-primary); color: #fff; border-color: var(--gb-primary); }
a.gb-btn[title="Editar"]:hover { background: var(--gb-primary-dark); }
.gb-btn.restore { background: var(--gb-success); color: #fff; border-color: var(--gb-success); }
.gb-btn.restore:hover { background: #15803d; }

/* "Volver atrás" (flecha), "Actualizar" (refresh) y "Agregar nuevo"
   (+): mismos colores que tenía el sistema anterior (azul, celeste y
   verde respectivamente), detectados por title/clase de acción o por
   el ícono que contienen — sin tocar cada vista. */
a.gb-btn[title="Volver atrás"] { background: var(--gb-primary); color: #fff; border-color: var(--gb-primary); }
a.gb-btn[title="Volver atrás"]:hover { background: var(--gb-primary-dark); }

.gb-btn.refresh { background: var(--gb-info); color: #fff; border-color: var(--gb-info); }
.gb-btn.refresh:hover { background: var(--gb-info-dark); }

.gb-btn-primary:has(> i.fa-plus) { background: var(--gb-success); border-color: var(--gb-success); }
.gb-btn-primary:has(> i.fa-plus):hover { background: #15803d; }

a.gb-btn[title="Ver Detalle"] { background: var(--gb-primary); color: #fff; border-color: var(--gb-primary); }
a.gb-btn[title="Ver Detalle"]:hover { background: var(--gb-primary-dark); }
a.gb-btn[title="Generar Cotización"] { background: var(--gb-success); color: #fff; border-color: var(--gb-success); }
a.gb-btn[title="Generar Cotización"]:hover { background: #15803d; }

/* Resto de botones de acción por fila/ficha que aún quedaban en blanco,
   con el mismo color que tenían en el sistema anterior. */
.gb-btn.kardex { background: var(--gb-warning); color: #fff; border-color: var(--gb-warning); }
.gb-btn.kardex:hover { background: #b45309; }
.gb-btn.stock { background: var(--gb-success); color: #fff; border-color: var(--gb-success); }
.gb-btn.stock:hover { background: #15803d; }
.gb-btn.checkout { background: var(--gb-warning); color: #fff; border-color: var(--gb-warning); }
.gb-btn.checkout:hover { background: #b45309; }
a.gb-btn[title="Descargar"],
a.gb-btn[title="Editar Contrato"],
a.gb-btn[title="Ver"] { background: var(--gb-primary); color: #fff; border-color: var(--gb-primary); }
a.gb-btn[title="Descargar"]:hover,
a.gb-btn[title="Editar Contrato"]:hover,
a.gb-btn[title="Ver"]:hover { background: var(--gb-primary-dark); }
a.gb-btn[title="Descargar Contrato"] { background: var(--gb-info); color: #fff; border-color: var(--gb-info); }
a.gb-btn[title="Descargar Contrato"]:hover { background: var(--gb-info-dark); }

/* Tooltip liviano basado en el atributo title (sin JS ni librería) */
.gb-btn[title] { position: relative; }
.gb-btn[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background: #0f172a;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.2;
    padding: 0.3rem 0.55rem;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    z-index: 60;
    pointer-events: none;
}
.gb-btn[title]:hover::before {
    content: "";
    position: absolute;
    bottom: 122%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #0f172a;
    z-index: 60;
    pointer-events: none;
}

/* ---------- Forms ---------- */
.gb-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--gb-text-muted); margin-bottom: 0.25rem; }
.gb-input, .gb-select, .gb-textarea {
    width: 100%;
    border: 1px solid var(--gb-border);
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    font-size: 0.875rem;
    background: #fff;
    color: var(--gb-text);
}
.gb-input:focus, .gb-select:focus, .gb-textarea:focus {
    outline: none;
    border-color: var(--gb-primary);
    box-shadow: 0 0 0 3px var(--gb-primary-light);
}
.gb-field-error { color: var(--gb-danger); font-size: 0.75rem; margin-top: 0.2rem; }

/* ---------- Table ---------- */
.gb-table-wrap { overflow-x: auto; }
table.gb-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
table.gb-table thead th {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gb-text-muted);
    border-bottom: 1px solid var(--gb-border);
    padding: 0.6rem 0.75rem;
    background: #f8fafc;
}
table.gb-table tbody td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--gb-border);
}
table.gb-table tbody tr:hover { background: #f8fafc; }

/* DataTables: solo re-skin de wrapper/paginación, sin tocar su motor */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--gb-border);
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
}
/* Fila superior: botones (Agregar/Exportar/Column visibility) a la
   izquierda, buscador a la derecha. clear:both en la tabla evita que
   se monte encima de los flotantes si el buscador queda más alto. */
.dataTables_wrapper .dt-buttons { float: left; }
.dataTables_wrapper .dataTables_filter {
    float: right;
    margin-bottom: 0.75rem;
}
.dataTables_wrapper .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--gb-text-muted);
    margin: 0;
}
.dataTables_wrapper table.dataTable { clear: both; }

/* Fila inferior: "Mostrando registros..." a la izquierda, paginador a
   la derecha, alineados en la misma línea. */
.dataTables_wrapper .dataTables_info {
    float: left;
    color: var(--gb-text-muted);
    font-size: 0.8rem;
    height: 2rem;
    display: flex;
    align-items: center;
    margin-top: 0.75rem;
}
.dataTables_wrapper .dataTables_paginate {
    float: right;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.75rem;
}
.dataTables_wrapper::after {
    content: "";
    display: table;
    clear: both;
}
@media (max-width: 640px) {
    .dataTables_wrapper .dt-buttons,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        width: 100%;
    }
    .dataTables_wrapper .dataTables_filter { margin-top: 0.5rem; }
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.6rem !important;
    border-radius: 6px !important;
    border: 1px solid var(--gb-border) !important;
    background: #fff !important;
    color: var(--gb-text) !important;
    font-size: 0.82rem;
    text-decoration: none !important;
    cursor: pointer;
    margin: 0 !important;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
    background: #f1f5f9 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--gb-primary) !important;
    color: #fff !important;
    border-color: var(--gb-primary) !important;
    font-weight: 600;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: var(--gb-text-muted) !important;
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}
.dataTables_wrapper .dataTables_paginate .ellipsis {
    border: none !important;
    background: transparent !important;
    min-width: auto;
    padding: 0 0.15rem !important;
    color: var(--gb-text-muted) !important;
}
.dt-buttons .dt-button {
    border-radius: 8px !important;
    border: 1px solid var(--gb-border) !important;
    background: #fff !important;
    font-size: 0.8rem !important;
    padding: 0.4rem 0.7rem !important;
}

/* Indicador "Procesando..." (DataTables server-side): sin CSS propio
   no queda posicionado ni estilizado, se ve como una línea de texto
   suelta. Lo convertimos en un overlay centrado con spinner sobre la
   tabla, sin tocar el texto/idioma que ya configura cada vista. */
.dataTables_wrapper { position: relative; }
.dataTables_wrapper .dataTables_processing {
    position: absolute;
    inset: 0;
    z-index: 20;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(1px);
    border-radius: var(--gb-radius);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gb-text-muted);
}
.dataTables_wrapper .dataTables_processing::before {
    content: "";
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border: 3px solid var(--gb-border);
    border-top-color: var(--gb-primary);
    border-radius: 50%;
    animation: gb-spin 0.7s linear infinite;
}
@keyframes gb-spin {
    to { transform: rotate(360deg); }
}

/* Select2: re-skin minimo */
.select2-container .select2-selection--single {
    height: 38px !important;
    border-radius: 8px !important;
    border: 1px solid var(--gb-border) !important;
    display: flex;
    align-items: center;
}

/* ---------- Badges / estado ---------- */
.gb-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 999px; }
.gb-badge-success { background: var(--gb-success-light); color: var(--gb-success); }
.gb-badge-warning { background: var(--gb-warning-light); color: var(--gb-warning); }
.gb-badge-danger { background: var(--gb-danger-light); color: var(--gb-danger); }
.gb-badge-muted { background: #f1f5f9; color: var(--gb-text-muted); }

/* ---------- Toggle de estado (reemplaza bootstrap-toggle) ---------- */
.gb-toggle { position: relative; display: inline-block; width: 40px; height: 22px; }
.gb-toggle input { opacity: 0; width: 0; height: 0; }
.gb-toggle .gb-toggle-track {
    position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px; cursor: pointer; transition: background-color 0.15s ease;
}
.gb-toggle .gb-toggle-track::before {
    content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.15s ease;
}
.gb-toggle input:checked + .gb-toggle-track { background: var(--gb-success); }
.gb-toggle input:checked + .gb-toggle-track::before { transform: translateX(18px); }

/* ---------- Toasts (reemplaza mdtoast/alertify) ---------- */
.gb-toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; }
.gb-toast {
    min-width: 260px; max-width: 360px; background: #0f172a; color: #fff; border-radius: 10px;
    padding: 0.75rem 1rem; font-size: 0.85rem; box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    display: flex; align-items: flex-start; gap: 0.5rem;
}
.gb-toast-success { border-left: 4px solid var(--gb-success); }
.gb-toast-error { border-left: 4px solid var(--gb-danger); }
.gb-toast-info { border-left: 4px solid var(--gb-primary); }

/* ---------- Modal / confirm ---------- */
/* position:relative es obligatorio aquí: Select2 usa `dropdownParent` para
   anclar su lista dentro del modal (en vez de <body>), y para eso necesita
   que este contenedor tenga un contexto de posicionamiento — si no, el
   dropdown absolute se escapa fuera del modal. */
.gb-modal-root { position: relative; z-index: 9998; }
.gb-modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.5); z-index: 9998; }
.gb-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.gb-modal-box { position: relative; background: #fff; border-radius: var(--gb-radius); max-width: 480px; width: 100%; box-shadow: 0 20px 40px rgba(0,0,0,0.2); }

/* El dropdown de Select2 anclado dentro del modal debe quedar por encima
   de todo el contenido del modal. */
.gb-modal-root .select2-container { z-index: 10000; }

@media (max-width: 900px) {
    .gb-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 40;
        transform: translateX(-100%);
    }
    .gb-sidebar.gb-sidebar-open { transform: translateX(0); }
    .gb-content { padding: 0.85rem; }
}

/* ---------- Modo POS (pantalla completa, sidebar colapsable) ----------
   Activado desde una vista puntual con Gesbod.enablePosMode() (ver
   view/venta/add_venta.php) — no afecta a ninguna otra pantalla. */
.gb-sidebar { transition: transform 0.2s ease, width 0.2s ease, opacity 0.15s ease, min-width 0.2s ease; }
/* En móvil (<=900px) el modo POS se comporta como cualquier página
   normal: scroll de página completa, sin panes internos — el recorte a
   100vh/overflow:hidden solo tiene sentido con suficiente ancho para el
   layout de dos columnas (carrito + panel de pago). */
@media (min-width: 901px) {
    .gb-sidebar.gb-sidebar-collapsed {
        width: 0;
        min-width: 0;
        opacity: 0;
        overflow: hidden;
        border-width: 0;
        pointer-events: none;
    }
    .gb-app.gb-pos-mode { height: 100vh; min-height: 0; }
    .gb-pos-mode .gb-main { overflow: hidden; }
    .gb-pos-mode .gb-content {
        padding: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
}
.gb-pos-mode #gb-sidebar-toggle { display: inline-flex !important; }