/*
    Tema visual inspirado en SAP Fiori (Quartz Light) sobre Bootstrap 5.
    No reemplaza Bootstrap: sólo restylea los componentes ya usados en las páginas
    (navbar -> shell-bar, card-panel -> tarjeta Fiori, botones, tabs, tablas, alerts).
    Paleta y tipografía realineadas al sistema de diseño "Retail Precision"
    (D:\Downloads\DESIGN.md) el 2026-09-29 — ver Content/venta-pos.css para la versión
    completa del sistema aplicada a POS/Admin/Login.
*/
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/inter-700.woff2') format('woff2'); }

:root {
    --sap-shell: #2E3132;
    --sap-brand: #0058BE;
    --sap-brand-hover: #004395;
    --sap-bg: #F8F9FA;
    --sap-card-bg: #FFFFFF;
    --sap-border: #E5E7EB;
    --sap-text: #191C1D;
    --sap-text-secondary: #424754;
    --sap-success: #107e3e;
    --sap-error: #BA1A1A;
    --sap-warning: #924700;
}

body {
    font-family: 'Inter', "Segoe UI", Arial, sans-serif;
    background: var(--sap-bg);
    color: var(--sap-text);
}

/* ---- Barra superior (shell bar) ---- */
.shell-bar {
    background: var(--sap-shell) !important;
    border-bottom: 3px solid var(--sap-brand);
    padding: 0.6rem 1rem;
}

.shell-bar .navbar-brand,
.shell-bar .h1 {
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
}

.shell-bar .text-light {
    color: #d3d7d9 !important;
}

.shell-bar .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.5);
}

.shell-bar .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
}

/* ---- Tarjetas ---- */
.card-panel,
.sapCard,
.config-card {
    background: var(--sap-card-bg) !important;
    border: 1px solid var(--sap-border) !important;
    border-radius: 8px;
    box-shadow: none;
}

/* ---- Botones ---- */
.btn {
    border-radius: 12px;
    font-weight: 600;
}

.btn-primary {
    background-color: var(--sap-brand);
    border-color: var(--sap-brand);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--sap-brand-hover) !important;
    border-color: var(--sap-brand-hover) !important;
}

.btn-outline-secondary {
    color: var(--sap-brand);
    border-color: var(--sap-border);
}

.btn-outline-secondary:hover {
    background-color: var(--sap-brand);
    border-color: var(--sap-brand);
    color: #fff;
}

.btn-success {
    background-color: var(--sap-success);
    border-color: var(--sap-success);
}

.btn-outline-danger {
    color: var(--sap-error);
    border-color: var(--sap-error);
}

.btn-outline-danger:hover {
    background-color: var(--sap-error);
    border-color: var(--sap-error);
}

/* ---- Tabs (estilo IconTabBar) ---- */
.nav-tabs {
    border-bottom: 1px solid var(--sap-border);
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    color: var(--sap-text-secondary);
    font-weight: 500;
    padding: 0.65rem 1rem;
}

.nav-tabs .nav-link:hover {
    border-color: transparent;
    color: var(--sap-brand);
}

.nav-tabs .nav-link.active {
    background: transparent;
    border-bottom-color: var(--sap-brand);
    color: var(--sap-brand);
    font-weight: 600;
}

/* ---- Tablas ---- */
.table thead th {
    border-bottom: 2px solid var(--sap-border);
    color: var(--sap-text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
}

.table td,
.table th {
    border-color: var(--sap-border);
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background-color: #f2f7fc;
}

/* En pantallas angostas estas tablas (Terminales, Gift Cards, Conflictos, Instalaciones...) no
   tienen wrapper .table-responsive en el markup, así que sin esto la página entera se ensancha
   en vez de la tabla scrollear sola. */
@media (max-width: 700px) {
    table.table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ---- Alerts (colores semánticos Fiori) ---- */
.alert-success {
    background-color: #f1fdf6;
    border-color: var(--sap-success);
    color: var(--sap-success);
}

.alert-danger {
    background-color: #FFDAD6;
    border-color: var(--sap-error);
    color: #93000A;
}

.alert-warning {
    background-color: #FFDCC6;
    border-color: var(--sap-warning);
    color: #311400;
}

/* ---- Formularios ---- */
.form-label {
    color: var(--sap-text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--sap-brand);
    box-shadow: 0 0 0 0.2rem rgba(0, 88, 190, 0.15);
}