/* =========================================================================
   gauchito-brand.css — Tema EL GAUCHITO (NS 23/09)
   -------------------------------------------------------------------------
   Alinea el PDV al estilo de mayoristaelgauchito.com. Se carga DESPUÉS de
   site.css y gauchito.css: re-mapea las variables --pl-* (que ya gobiernan
   toda la app) a la paleta de marca y ajusta los componentes que el brief
   detalla (topbar, sidebar, badges, alertas, botones).
   Tokens: azul #185593 · azul oscuro #12457A · naranja #F0741A ·
           verde #1EBB5E · fondo #EEF2F7 · texto #222 · Rubik · radio 10px.
   ========================================================================= */

/* ---------- Paleta de marca (tema claro) ---------- */
:root,
[data-bs-theme="light"] {
    --eg-blue:        #185593;
    --eg-blue-dark:   #12457A;
    --eg-orange:      #F0741A;
    --eg-green:       #1EBB5E;
    --eg-bg:          #EEF2F7;
    --eg-text:        #222222;
    --eg-radius:      10px;

    --pl-bg:              var(--eg-bg);
    --pl-bg-alt:          #ffffff;
    --pl-surface:         #ffffff;
    --pl-surface-2:       #f4f7fb;
    --pl-border:          #dfe6ee;
    --pl-text:            var(--eg-text);
    --pl-text-muted:      #5b6b7c;

    --pl-primary:         var(--eg-blue);
    --pl-primary-600:     var(--eg-blue-dark);
    --pl-primary-rgb:     24, 85, 147;
    --pl-accent:          var(--eg-orange);
    --pl-accent-rgb:      240, 116, 26;
    --pl-success:         var(--eg-green);

    --pl-sidebar-bg:      var(--eg-blue-dark);
    --pl-sidebar-bg-2:    #0e3a66;
    --pl-sidebar-text:    #d9e5f2;
    --pl-sidebar-text-muted: #8fa9c4;
    --pl-sidebar-active-bg: rgba(255,255,255,.10);
    --pl-sidebar-active-bar: var(--eg-orange);

    --pl-topbar-bg:       #ffffff;
    --pl-topbar-border:   #dfe6ee;

    --pl-card-shadow:     0 1px 2px rgba(18,69,122,.06), 0 2px 10px rgba(18,69,122,.05);
    --pl-card-shadow-lg:  0 10px 36px rgba(18,69,122,.12);

    --pl-glass-bg:        rgba(255,255,255,.85);
    --pl-glass-border:    rgba(223,230,238,.95);

    /* Bootstrap: radio de marca y primario azul */
    --bs-border-radius:    var(--eg-radius);
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 12px;
    --bs-primary:          var(--eg-blue);
    --bs-primary-rgb:      24, 85, 147;
    --bs-link-color:       var(--eg-blue);
    --bs-link-hover-color: var(--eg-blue-dark);
}

/* ---------- Paleta de marca (tema oscuro) ---------- */
[data-bs-theme="dark"] {
    --pl-bg:              #0e1726;
    --pl-bg-alt:          #122036;
    --pl-surface:         #14243c;
    --pl-surface-2:       #1a2c47;
    --pl-border:          #24395a;
    --pl-text:            #e8eef6;
    --pl-text-muted:      #93a7bd;

    --pl-primary:         #5b9bd9;
    --pl-primary-600:     #3d7fc1;
    --pl-primary-rgb:     91, 155, 217;
    --pl-accent:          #F0741A;
    --pl-accent-rgb:      240, 116, 26;
    --pl-success:         #2fce74;

    --pl-sidebar-bg:      #0b1a2d;
    --pl-sidebar-bg-2:    #0e2138;
    --pl-sidebar-text:    #cfdcea;
    --pl-sidebar-text-muted: #7e94ac;
    --pl-sidebar-active-bg: rgba(255,255,255,.08);
    --pl-sidebar-active-bar: #F0741A;

    --pl-topbar-bg:       #101d31;
    --pl-topbar-border:   #24395a;

    --bs-border-radius:    10px;
    --bs-link-color:       #7ab2e4;
    --bs-link-hover-color: #9cc6ee;
}

/* ---------- Tipografía ---------- */
body {
    font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
h1, h2, h3, h4, h5, .modal-title, .card-header {
    font-family: 'Rubik', system-ui, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Botones de marca: bold, mayúsculas, radio 10px. btn-link queda afuera
   ("Hola, usuario" no va en mayúsculas). */
.btn:not(.btn-link) {
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    border-radius: var(--eg-radius, 10px);
}
.btn-primary {
    --bs-btn-bg: #185593;            --bs-btn-border-color: #185593;
    --bs-btn-hover-bg: #12457A;      --bs-btn-hover-border-color: #12457A;
    --bs-btn-active-bg: #12457A;     --bs-btn-active-border-color: #0e3a66;
    --bs-btn-disabled-bg: #7d9cbd;   --bs-btn-disabled-border-color: #7d9cbd;
}
.btn-success {
    --bs-btn-bg: #1EBB5E;            --bs-btn-border-color: #1EBB5E;
    --bs-btn-hover-bg: #179a4d;      --bs-btn-hover-border-color: #179a4d;
    --bs-btn-active-bg: #148a45;     --bs-btn-active-border-color: #128040;
}
.btn-outline-primary {
    --bs-btn-color: #185593;         --bs-btn-border-color: #185593;
    --bs-btn-hover-bg: #185593;      --bs-btn-hover-border-color: #185593;
}

/* ---------- Topbar: botonera unificada (tb-*) ---------------------------
   Tres piezas: .tb-btn (acción), .tb-pill (estado), .tb-user (usuario).
   Color SOLO por semántica: -primary azul (acción principal), -danger rojo
   (salir / offline), -warn ámbar (pendientes), -ok verde (producción). */
.topbar {
    height: 56px;
    min-height: 56px;
    background: var(--pl-topbar-bg);
    border-bottom: 1px solid var(--pl-topbar-border) !important;
    gap: .75rem;
    overflow: visible;
}
.tb-group   { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.tb-cluster { display: inline-flex; align-items: center; gap: .25rem; }

/* Botón de acción */
.tb-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 32px;
    padding: 0 .7rem;
    border-radius: 8px;
    border: 1px solid var(--pl-border);
    background: var(--pl-surface);
    color: var(--pl-text-muted);
    font: 600 .8rem/1 'Rubik', system-ui, sans-serif;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.tb-btn:hover  { background: var(--pl-surface-2); color: var(--pl-text); border-color: #c9d3df; }
.tb-btn:disabled { opacity: .5; cursor: not-allowed; }
.tb-btn .bi    { font-size: .95rem; line-height: 1; }
.tb-btn-icon   { width: 32px; padding: 0; justify-content: center; }
.tb-btn-primary { background: var(--eg-blue, #185593); border-color: var(--eg-blue, #185593); color: #fff; }
.tb-btn-primary:hover { background: var(--eg-blue-dark, #12457A); border-color: var(--eg-blue-dark, #12457A); color: #fff; }
.tb-btn-danger  { color: #b02a37; border-color: #f0c6c9; background: var(--pl-surface); }
.tb-btn-danger:hover { background: #fff1f0; border-color: #e6a2a8; color: #8a2622; }
.tb-btn-danger.tb-btn-on { background: #dc3545; border-color: #dc3545; color: #fff; }
.tb-btn-danger.tb-btn-on:hover { background: #b02a37; border-color: #b02a37; color: #fff; }
.tb-btn-warn    { color: #8a6d1a; border-color: #f0dfa8; background: #fff8e1; }
.tb-btn-warn:hover { background: #fff1c4; color: #6b5412; }

/* Pill de estado */
.tb-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 28px;
    padding: 0 .65rem;
    border-radius: 999px;
    border: 1px solid var(--pl-border);
    background: var(--pl-surface-2);
    color: var(--pl-text-muted);
    font: 600 .76rem/1 'Rubik', system-ui, sans-serif;
    letter-spacing: .01em;
    white-space: nowrap;
    text-decoration: none;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tb-pill .bi { font-size: .85rem; line-height: 1; flex: 0 0 auto; }
.tb-pill-btn { cursor: pointer; }
.tb-pill-btn:hover { border-color: #c9d3df; color: var(--pl-text); filter: brightness(.98); }
.tb-pill-ok     { background: #e6f6ec; border-color: #bfe8cf; color: #147a44; }
/* NS 30/09 — semáforo fiscal del cliente (Shared/ClienteFiscalAviso.razor) */
.pos-fiscal { display: flex; align-items: center; gap: .75rem; padding: .6rem .9rem; border-radius: 10px; font-size: .92rem; text-align: left; line-height: 1.3; }
.pos-fiscal > i:first-child { font-size: 1.5rem; flex: 0 0 auto; }
.pos-fiscal-txt { flex: 1; min-width: 0; }
.pos-fiscal-que { font-weight: 600; margin-top: .15rem; }
.pos-fiscal-nombre { font-size: .9em; border-top: 1px dashed rgba(0,0,0,.15); padding-top: .3rem; }
.pos-fiscal-error .pos-fiscal-nombre { border-top-color: rgba(255,255,255,.35); }
.pos-fiscal .btn { white-space: nowrap; font-weight: 700; flex: 0 0 auto; }
.pos-fiscal-error { background: #dc3545; color: #fff; box-shadow: 0 6px 18px rgba(220,53,69,.35); }
.pos-fiscal-aviso { background: #fff3cd; color: #664d03; border: 1px solid #ffe69c; }
.pos-fiscal-ok { background: #e6f6ec; color: #147a44; border: 1px solid #bfe8cf; }
.pos-fiscal-sin_dato { background: #f1f3f5; color: #6c757d; border: 1px solid #dee2e6; }
.pos-fiscal-compacto { padding: .35rem .7rem; font-size: .85rem; }
.pos-fiscal-compacto > i:first-child { font-size: 1.15rem; }
/* NS 30/09 — id de la tabla client del ERP al lado del nombre del cliente (Shared/ClienteId.razor) */
.cli-id { font-size: .74em; color: #6c757d; background: rgba(0,0,0,.06); border-radius: 4px; padding: 0 .3em; margin-left: .35em; font-weight: 500; white-space: nowrap; }
[data-bs-theme="dark"] .cli-id { color: #adb5bd; background: rgba(255,255,255,.1); }
/* NS 30/09 (v2.96) — etiqueta FRESCOS #pedido (Shared/FrescosBadge.razor): comprobantes emitidos desde Pedidos frescos */
.badge-frescos { background: #2e7d32; color: #fff; font-weight: 600; letter-spacing: .02em; vertical-align: middle; white-space: nowrap; }
.tb-pill-warn   { background: #fff6dd; border-color: #f0dfa8; color: #8a6d1a; }
.tb-pill-danger { background: #fff1f0; border-color: #f5c2c0; color: #b02a37; }

/* El estado fiscal usa la misma métrica de pill */
.topbar .estado-fiscal-badge {
    height: 28px;
    padding: 0 .65rem;
    font-size: .76rem;
    letter-spacing: .01em;
    font-family: 'Rubik', system-ui, sans-serif;
}

/* Usuario: texto plano, sin caja */
.tb-user {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 32px;
    padding: 0 .4rem;
    border: 0;
    background: transparent;
    color: var(--pl-text);
    font: 500 .85rem/1 'Rubik', system-ui, sans-serif;
    cursor: pointer;
    white-space: nowrap;
}
.tb-user .bi { font-size: 1.15rem; color: var(--eg-blue, #185593); }
.tb-user:hover { color: var(--eg-blue, #185593); }

/* Popup de entorno */
.tb-env-popup { position: fixed; top: 60px; left: 16px; z-index: 2000; min-width: 280px; }
.tb-env-popup .card-header { background: var(--pl-surface-2); }
.tb-env-close { font-size: .6rem; }

/* Dark */
[data-bs-theme="dark"] .tb-btn:hover { border-color: #35507a; }
[data-bs-theme="dark"] .tb-btn-danger { color: #f1a6ad; border-color: rgba(220,53,69,.35); }
[data-bs-theme="dark"] .tb-btn-danger:hover { background: rgba(220,53,69,.14); color: #f7c2c6; }
[data-bs-theme="dark"] .tb-btn-warn { background: rgba(255,193,7,.12); border-color: rgba(255,193,7,.3); color: #e8c458; }
[data-bs-theme="dark"] .tb-pill-ok     { background: rgba(30,187,94,.16); border-color: rgba(30,187,94,.35); color: #58d68d; }
[data-bs-theme="dark"] .tb-pill-warn   { background: rgba(255,193,7,.14); border-color: rgba(255,193,7,.3); color: #e8c458; }
[data-bs-theme="dark"] .tb-pill-danger { background: rgba(220,53,69,.14); border-color: rgba(220,53,69,.35); color: #f1a6ad; }

/* ---------- Sidebar: azul marca, barra activa naranja -------------------- */
.sidebar {
    background: linear-gradient(180deg, var(--eg-blue, #185593) 0%, var(--pl-sidebar-bg, #12457A) 30%, var(--pl-sidebar-bg-2, #0e3a66) 100%);
}
.sidebar .nav-section-title {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    font-size: .72rem;
    color: rgba(255,255,255,.55) !important;   /* pisa el text-muted de Bootstrap */
}
.sidebar .nav-link.active::before {
    background: var(--eg-orange, #F0741A);
    box-shadow: 0 0 10px rgba(240,116,26,.55);
}
.sidebar .nav-link.active .nav-icon { text-shadow: 0 0 8px rgba(240,116,26,.45); }
.sidebar .nav-link.active { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.sidebar::after { background: linear-gradient(180deg, transparent, rgba(240,116,26,.35), transparent); }

/* ---------- Alertas compactas ------------------------------------------- */
.alert-danger {
    background: #fff1f0;
    border: 1px solid #f5c2c0;
    color: #8a2622;
    border-radius: 10px;
}
[data-bs-theme="dark"] .alert-danger {
    background: rgba(220,53,69,.12);
    border-color: rgba(220,53,69,.35);
    color: #f1a6ad;
}
.pos-side .alert {
    font-size: .8rem;
    padding: .5rem .7rem;
}
.pos-side .alert .btn,
.alert-danger .btn {
    height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 .6rem;
    font-size: .78rem;
}

/* ---------- POS: acentos de marca ---------------------------------------- */
.pos-scanner:focus-within { border-color: var(--eg-blue); box-shadow: 0 0 0 3px rgba(24,85,147,.15); }
.pos-sug-active { background: rgba(24,85,147,.08); }
.pos-sug-item:hover { background: rgba(240,116,26,.07); }

/* ---------- Cards / tablas ----------------------------------------------- */
.card { border-radius: 10px; border-color: var(--pl-border); }
.table thead th { text-transform: uppercase; letter-spacing: .04em; font-size: .74rem; color: var(--pl-text-muted); }