/* =========================================================
   DUBAI POS — IDENTIDAD VISUAL GLOBAL DEFINITIVA
   Cargar SIEMPRE al final.
   Paleta: naranja + calipso + azul vivo.
   ========================================================= */

:root{
    --bg:#e8f7f7;
    --surface:#ffffff;
    --surface-2:#f7fbfc;
    --surface-3:#edf7f8;

    --text:#14213d;
    --text-soft:#53657d;
    --text-faint:#8290a3;

    --border:#d5e8ea;
    --border-strong:#bfdadc;

    --accent:#ff8a00;
    --accent-hover:#ef7900;
    --accent-soft:#fff1df;

    --blue:#246bfd;
    --blue-soft:#eaf1ff;

    --calypso:#00aeb8;
    --calypso-2:#35d3d0;
    --calypso-soft:#e5fbfb;

    --green:#18a66f;
    --green-soft:#e5f8ef;

    --yellow:#d99800;
    --yellow-soft:#fff5d9;

    --red:#e5484d;
    --red-soft:#fdebed;

    --purple:#7457e8;
    --purple-soft:#f0ecff;

    --shadow:0 8px 24px rgba(0,174,184,.08);
}

/* Fondo general */
html,
body{
    background:var(--bg)!important;
    color:var(--text);
}

/* Encabezado */
.topbar{
    background:#fff!important;
    border-bottom:1px solid var(--border)!important;
    box-shadow:0 2px 12px rgba(20,33,61,.04);
}

.brand-mark{
    background:linear-gradient(145deg,#ffa21a,var(--accent))!important;
    box-shadow:0 5px 15px rgba(255,138,0,.28)!important;
}

/* Navegación */
.main-nav a{
    color:var(--text-soft)!important;
    border-radius:8px;
}

.main-nav a:hover{
    background:var(--calypso-soft)!important;
    color:var(--calypso)!important;
}

.main-nav a.active{
    background:linear-gradient(
        135deg,
        color-mix(in srgb,var(--calypso) 15%,#fff),
        color-mix(in srgb,var(--accent) 10%,#fff)
    )!important;
    color:var(--blue)!important;
    font-weight:800;
}

/* Fondos de contenido */
main,
.page-shell,
.dashboard-page,
.module-page{
    background:transparent!important;
}

/* Títulos */
.eyebrow,
.panel-kicker{
    color:var(--accent)!important;
}

.module-head h1,
.dashboard-head h1,
h1,h2,h3{
    color:var(--text);
}

/* Tarjetas y paneles */
.kpi-card,
.panel,
.mini-kpi,
.form-section,
.product-table-panel,
.quote-table-panel,
.category-table-panel,
.quote-total-box,
.quote-rule-card,
.cigarette-summary,
.toolbar-panel{
    background:var(--surface)!important;
    border-color:var(--border)!important;
    box-shadow:var(--shadow)!important;
}

/* KPI con línea viva */
.kpi-card,
.mini-kpi{
    position:relative;
    overflow:hidden;
}

.kpi-card::before,
.mini-kpi::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:2px;
    background:linear-gradient(90deg,var(--calypso),var(--blue),var(--accent));
    opacity:.7;
}

.kpi-clickable:hover,
.mini-kpi:hover{
    border-color:color-mix(in srgb,var(--calypso) 45%,var(--border))!important;
    box-shadow:0 10px 28px rgba(0,174,184,.13)!important;
}

/* Botones */
.btn-primary{
    background:linear-gradient(135deg,#ff9c12,var(--accent))!important;
    border-color:var(--accent)!important;
    color:#fff!important;
    box-shadow:0 4px 12px rgba(255,138,0,.22)!important;
}

.btn-primary:hover{
    background:linear-gradient(135deg,#ffad35,var(--accent-hover))!important;
}

.btn-soft{
    background:#fff!important;
    border-color:var(--border)!important;
    color:var(--text-soft)!important;
}

.btn-soft:hover{
    background:var(--calypso-soft)!important;
    border-color:color-mix(in srgb,var(--calypso) 38%,var(--border))!important;
    color:var(--calypso)!important;
}

/* Campos */
input,
select,
textarea{
    background:#fff!important;
    color:var(--text)!important;
    border-color:var(--border)!important;
}

input:hover,
select:hover,
textarea:hover{
    border-color:color-mix(in srgb,var(--calypso) 35%,var(--border))!important;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--calypso)!important;
    outline:2px solid color-mix(in srgb,var(--calypso) 18%,transparent)!important;
}

/* Tablas */
.product-table thead th,
.quote-table thead th,
.category-table thead th,
.compact-table th,
.detail-table th{
    background:linear-gradient(
        180deg,
        color-mix(in srgb,var(--calypso) 8%,#fff),
        #f8fcfd
    )!important;
    color:var(--text-soft)!important;
}

.product-table tbody tr:hover,
.quote-table tbody tr:hover,
.category-table tbody tr:hover{
    background:color-mix(in srgb,var(--calypso-soft) 75%,transparent)!important;
}

/* Categorías */
.category-table-panel{
    border-top:2px solid var(--calypso)!important;
}

.category-kpis .mini-kpi:nth-child(1)::before{
    background:linear-gradient(90deg,var(--calypso),var(--blue));
}

.category-kpis .mini-kpi:nth-child(2)::before{
    background:linear-gradient(90deg,var(--green),var(--calypso));
}

.category-kpis .mini-kpi:nth-child(3)::before{
    background:linear-gradient(90deg,var(--yellow),var(--accent));
}

/* Gráficos */
.bar-fill{
    background:linear-gradient(
        to top,
        var(--calypso),
        var(--calypso-2)
    )!important;
    box-shadow:0 5px 14px rgba(0,174,184,.18)!important;
}

/* Cigarros */
.cigarette-summary{
    border-left:3px solid var(--red)!important;
    background:linear-gradient(
        135deg,
        #fff,
        color-mix(in srgb,var(--red-soft) 24%,#fff)
    )!important;
}

/* Badges */
.badge.good{
    background:var(--green-soft)!important;
    color:var(--green)!important;
}

.badge.warning{
    background:var(--yellow-soft)!important;
    color:var(--yellow)!important;
}

.badge.danger{
    background:var(--red-soft)!important;
    color:var(--red)!important;
}

.badge.info{
    background:var(--blue-soft)!important;
    color:var(--blue)!important;
}

.badge.neutral{
    background:var(--surface-3)!important;
    color:var(--text-soft)!important;
}

/* Cotizaciones */
.quote-search-results{
    border-color:var(--border)!important;
    background:var(--surface-2)!important;
}

.quote-search-result:hover{
    background:linear-gradient(
        90deg,
        var(--calypso-soft),
        color-mix(in srgb,var(--accent-soft) 35%,#fff)
    )!important;
}

.quote-result-add{
    background:var(--calypso-soft)!important;
    color:var(--calypso)!important;
}

.quote-search-result:hover .quote-result-add{
    background:var(--calypso)!important;
    color:#fff!important;
}

.quote-total-box{
    border-top:3px solid var(--accent)!important;
}

.quote-rule-card{
    border-left:3px solid var(--calypso)!important;
    background:linear-gradient(
        135deg,
        #fff,
        color-mix(in srgb,var(--calypso-soft) 60%,#fff)
    )!important;
}

/* Acciones */
.table-action.edit{
    color:var(--blue)!important;
}
.table-action.restore{
    color:var(--green)!important;
}
.table-action.delete{
    color:var(--red)!important;
}
.table-action.duplicate{
    color:var(--purple)!important;
}

/* Login */
.login-page{
    background:
        radial-gradient(circle at 12% 18%,rgba(0,174,184,.17),transparent 31%),
        radial-gradient(circle at 88% 78%,rgba(255,138,0,.14),transparent 32%),
        var(--bg)!important;
}

.login-info{
    background:linear-gradient(
        145deg,
        color-mix(in srgb,var(--calypso-soft) 82%,#fff),
        color-mix(in srgb,var(--accent-soft) 42%,#fff)
    )!important;
}

/* Modo oscuro: mantiene color, no queda gris plano */
html[data-theme="dark"]{
    --bg:#0f1724;
    --surface:#182338;
    --surface-2:#1d2b42;
    --surface-3:#263650;

    --text:#f2f7ff;
    --text-soft:#bcc9dc;
    --text-faint:#8798b0;

    --border:#2d415b;
    --border-strong:#3d5675;

    --accent:#ff9d2e;
    --accent-hover:#ffad4c;
    --accent-soft:#3a2b1c;

    --blue:#6592ff;
    --blue-soft:#20365b;

    --calypso:#24c2ca;
    --calypso-2:#4fdddd;
    --calypso-soft:#173d43;

    --green:#4acb90;
    --green-soft:#193d2f;

    --yellow:#f1bd50;
    --yellow-soft:#3c341e;

    --red:#ff7075;
    --red-soft:#422629;

    --purple:#a28eff;
    --purple-soft:#312d51;

    --shadow:0 8px 26px rgba(0,0,0,.26);
}

html[data-theme="dark"] .topbar{
    background:var(--surface)!important;
}

html[data-theme="dark"] .btn-soft,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
    background:var(--surface-2)!important;
}

html[data-theme="dark"] .product-table thead th,
html[data-theme="dark"] .quote-table thead th,
html[data-theme="dark"] .category-table thead th,
html[data-theme="dark"] .compact-table th,
html[data-theme="dark"] .detail-table th{
    background:color-mix(in srgb,var(--calypso-soft) 55%,var(--surface-2))!important;
}

/* Transiciones */
body,
.topbar,
.panel,
.kpi-card,
.mini-kpi,
.form-section,
input,
select,
textarea,
button,
a{
    transition:
        background-color .16s ease,
        border-color .16s ease,
        color .16s ease,
        box-shadow .16s ease;
}


/* v0.24.1 — checkbox de Productos: el estado checked debe ser visible */
.check-option input[type="checkbox"]{
    appearance:none!important;
    -webkit-appearance:none!important;
    width:18px!important;
    min-width:18px!important;
    height:18px!important;
    min-height:18px!important;
    padding:0!important;
    background:var(--surface-2)!important;
    border:1px solid var(--border-strong)!important;
    border-radius:5px!important;
    cursor:pointer!important;
}

.check-option input[type="checkbox"]:checked{
    background:linear-gradient(135deg,var(--calypso),var(--blue))!important;
    border-color:var(--blue)!important;
}

.check-option input[type="checkbox"]:checked::before{
    transform:rotate(-45deg) scale(1)!important;
}

.check-option:hover input[type="checkbox"]{
    border-color:var(--calypso)!important;
}