:root {
        /* WAGON Identity 2026 */
        --parch: #f5efe6;
        --parch2: #ede4d7;
        --parch3: #d9ccba;
        --leather: #1a1410;
        --leather2: #2c2219;
        --leather-dark: #1f1914;
        --gold: #c8622a;
        --gold-lt: #e07a45;
        --gold-bg: rgba(200, 98, 42, 0.1);
        --gold-ln: rgba(200, 98, 42, 0.3);
        --char: #1a1410;
        --char2: rgba(26, 20, 16, 0.82);
        --char3: rgba(26, 20, 16, 0.70);
        --red: #b53a2a;
        --green: #2d7a4f;
        --amber: #a0620a;
        --blue: #2a5a8c;
        --grad-ember: linear-gradient(135deg, var(--gold) 0%, var(--gold-lt) 50%, #C85A20 100%);
        --grad-dark: linear-gradient(160deg, var(--char) 0%, var(--leather2) 60%, var(--char) 100%);
        --shadow-warm: 0 4px 24px rgba(200, 98, 42, 0.18);
        --shadow-deep: 0 8px 32px rgba(26, 20, 16, 0.24);
        --sidebar: 232px;
        --topbar: 54px;
        --r: 8px;
        --r2: 14px;
        --sans: "Inter", system-ui, sans-serif;
        --serif: 'Fraunces', Georgia, serif;
        --mono: "IBM Plex Mono", monospace;
        /* ── Chrome (Sidebar + Topbar comparten la misma fuente) ── */
        --chrome-bg: #0e0b08;
        --chrome-dark: #3d3028;
        --topbar-bg: #0e0b08;

        /* ── Cards / Paneles contenedores ── */
        --card-bg:           var(--parch);
        --card-bg-alt:       var(--parch2);
        --card-border:       1px solid rgba(200, 98, 42, 0.16);
        --card-border-thin:  1px solid rgba(200, 98, 42, 0.10);
        --card-radius:       var(--r2);
        --card-shadow:       0 2px 12px rgba(26, 20, 16, 0.07), 0 0 0 1px rgba(200, 98, 42, 0.05);
        --card-shadow-hover: 0 8px 32px rgba(26, 20, 16, 0.13), 0 0 0 1px rgba(200, 98, 42, 0.18);

        /* ── Texto sobre superficies oscuras ── */
        --text-on-dark: #f0e6d6;

        /* ── Fondo de página (body + .page) ── */

        /* ── Superficies (aliases semánticos) ── */
        --surface-0: var(--parch);
        --surface-1: var(--parch2);
        --surface-2: var(--parch3);

        /* ── Escala de texto ── */
        --t1: #1a1410;
        --t2: rgba(26, 20, 16, 0.72);
        --t3: rgba(26, 20, 16, 0.52);
        --t4: rgba(26, 20, 16, 0.34);
        --text-meta: rgba(26, 20, 16, 0.72);

        /* ── Líneas / separadores ── */
        --line-soft:   rgba(110, 83, 56, 0.18);
        --line-mid:    rgba(110, 83, 56, 0.28);
        --line-strong: rgba(110, 83, 56, 0.38);

        /* ── Ember (alias de --gold) ── */
        --ember:       var(--gold);
        --ember-lt:    var(--gold-lt);
        --ember-bg:    var(--gold-bg);
        --ember-ln:    var(--gold-ln);

        /* ── Inputs ── */
        --input-bg:           rgba(255, 255, 255, 0.66);
        --input-border:       rgba(200, 98, 42, 0.16);
        --input-border-focus: var(--gold);
        --input-radius:       10px;
        --input-h:            42px;
        --input-shadow:       inset 0 1px 0 rgba(255,255,255,0.70),
                              0 2px 8px rgba(26,20,16,0.03);

        /* ── Motion ── */
        --motion-fast:   0.14s;
        --motion-med:    0.22s;
        --motion-slow:   0.38s;
        --ease-ui:       cubic-bezier(0.22, 0.61, 0.36, 1);
        --ease-spring:   cubic-bezier(0.16, 1, 0.30, 1);
        --ease-out:      cubic-bezier(0.0, 0, 0.2, 1);

      --lp-maroon: #6b1a28;
      }
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html,
      body {
        height: 100%;
        overflow: hidden;
      }
      body {
        background: var(--page);
        color: var(--char);
        font-family: var(--sans);
        font-size: 13px;
        line-height: 1.5;
      }
      ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }
      ::-webkit-scrollbar-track {
        background: transparent;
      }
      ::-webkit-scrollbar-thumb {
        background: rgba(200, 98, 42, 0.18);
        border-radius: 999px;
        border: 2px solid var(--page);
      }
      ::-webkit-scrollbar-thumb:hover {
        background: rgba(200, 98, 42, 0.38);
      }
      ::placeholder {
        color: var(--char3);
      }
      .lf input::placeholder {
        color: rgba(240, 230, 214, 0.28);
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      .mono {
        font-family: var(--mono);
        font-weight: 400;
      }

      

      @keyframes lpFadeUp {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      @keyframes lpCardIn {
        from { opacity: 0; transform: translateY(22px) scale(0.98); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
      }
      @keyframes loginLoadSweep {
        0% { left: -35%; }
        100% { left: 100%; }
      }
      @keyframes loginLoadDot {
        0%, 100% { opacity: .45; transform: translateY(0) scale(.9); }
        50%       { opacity: 1;  transform: translateY(-1px) scale(1.08); }
      }

      
      #login-screen {
        position: fixed;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        z-index: 9999;
        overflow-y: auto;
        background: #FAF8F5;
        background-image:
          radial-gradient(ellipse 70% 50% at 50% 0%, rgba(198,96,42,0.07) 0%, transparent 70%);
        background-size: auto;
      }

      
      .lp-topbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 32px;
        flex-shrink: 0;
      }
      .lp-topbar-l, .lp-topbar-r {
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.26em;
        text-transform: uppercase;
        color: rgba(26, 20, 16, 0.32);
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .lp-topbar-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(198, 96, 42, 0.55);
        display: inline-block;
        flex-shrink: 0;
      }

      
      .lp-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px 24px 32px;
      }

      
      .lp-identity {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 26px;
        animation: lpFadeUp 0.55s cubic-bezier(0.16,1,0.3,1) 0.1s both;
      }
      .lp-logo-badge {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--gold);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--serif);
        font-weight: 700;
        font-size: 12px;
        color: #ffffff;
        letter-spacing: -0.01em;
        flex-shrink: 0;
      }
      .lp-identity-text { line-height: 1.3; }
      .lp-brand-pre {
        font-family: var(--mono);
        font-size: 8.5px;
        letter-spacing: 0.20em;
        text-transform: uppercase;
        color: rgba(26, 20, 16, 0.38);
        margin-bottom: 2px;
      }
      .lp-brand-loc {
        font-family: var(--sans);
        font-size: 13.5px;
        color: rgba(26, 20, 16, 0.70);
        font-weight: 500;
      }

      
      .lp-headline {
        font-family: var(--serif);
        font-size: 24px;
        font-weight: 700;
        color: #1a1410;
        letter-spacing: -0.035em;
        line-height: 1;
        margin: 0 0 12px;
        text-align: center;
        animation: lpFadeUp 0.62s cubic-bezier(0.16,1,0.3,1) 0.2s both;
      }
      .lp-headline em {
        font-style: italic;
        font-weight: 400;
      }
      .lp-subhead {
        font-size: 13px;
        color: rgba(26, 20, 16, 0.44);
        text-align: center;
        margin: 0 0 32px;
        font-weight: 400;
        animation: lpFadeUp 0.55s cubic-bezier(0.16,1,0.3,1) 0.28s both;
      }

      
      .lp-card {
        background: #ffffff;
        border: 1px solid rgba(26, 20, 16, 0.08);
        border-radius: 22px;
        padding: 32px 36px 28px;
        width: 100%;
        max-width: 420px;
        box-shadow: 0 4px 32px rgba(26, 20, 16, 0.07);
        animation: lpCardIn 0.65s cubic-bezier(0.16,1,0.3,1) 0.36s both;
      }

      
      .lp-card .lf { margin-bottom: 18px; }
      .lp-card .lf label {
        display: block;
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: rgba(26, 20, 16, 0.40);
        font-weight: 600;
        margin-bottom: 8px;
      }
      .lp-field-wrap {
        display: flex;
        align-items: center;
        gap: 10px;
        background: #FAF8F5;
        border: 1px solid rgba(26, 20, 16, 0.10);
        border-radius: 12px;
        padding: 0 14px;
        height: 52px;
        transition: border-color 0.18s, background 0.18s;
      }
      .lp-field-wrap:focus-within {
        border-color: rgba(198, 96, 42, 0.45);
        background: #ffffff;
      }
      .lp-fi {
        color: rgba(26, 20, 16, 0.30);
        flex-shrink: 0;
      }
      .lp-field-wrap select,
      .lp-field-wrap input[type="password"] {
        flex: 1;
        min-width: 0;
        border: none;
        background: transparent;
        outline: none;
        font-family: var(--sans);
        font-size: 14px;
        font-weight: 500;
        color: #1a1410;
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
      }
      .lp-field-wrap select:focus,
      .lp-field-wrap select:focus-visible,
      .lp-field-wrap input:focus,
      .lp-field-wrap input:focus-visible {
        outline: none;
        box-shadow: none;
      }
      .lp-field-wrap select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0 center;
        padding-right: 20px;
      }
      .lp-field-wrap select option { background: #ffffff; color: #1a1410; }
      .lp-field-wrap input::placeholder { color: rgba(26, 20, 16, 0.25); font-weight: 400; }

      
      .lp-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgba(198, 96, 42, 0.12);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        color: var(--gold);
        flex-shrink: 0;
        font-family: var(--sans);
        user-select: none;
      }

      
      .lp-eye-btn {
        background: transparent;
        border: none;
        cursor: pointer;
        color: rgba(26, 20, 16, 0.28);
        padding: 0;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        transition: color 0.15s;
      }
      .lp-eye-btn:hover { color: rgba(26, 20, 16, 0.60); }

      
      .btn-login {
        width: 100%;
        margin-top: 24px;
        padding: 16px 14px;
        background: var(--gold);
        color: #ffffff;
        border: none;
        font-family: var(--sans);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.01em;
        cursor: pointer;
        border-radius: 12px;
        position: relative;
        overflow: hidden;
        transition: background 0.20s ease, box-shadow 0.20s ease, transform 0.12s ease;
        box-shadow: 0 2px 14px rgba(198, 96, 42, 0.32);
      }
      .btn-login:hover {
        background: #b3561f;
        box-shadow: 0 4px 22px rgba(198, 96, 42, 0.42);
        transform: translateY(-1px);
      }
      .btn-login:active { transform: translateY(0); box-shadow: none; }
      .btn-login.loading {
        pointer-events: none;
        cursor: wait;
        background: #a04e1c;
        box-shadow: none;
        transform: none;
      }

      
      .btn-login .login-load-wrap { display: inline-flex; align-items: center; gap: 10px; }
      .btn-login .login-load-thread { position: relative; width: 34px; height: 1px; border-radius: 999px; background: rgba(255,255,255,0.22); overflow: hidden; }
      .btn-login .login-load-thread::after { content: ""; position: absolute; top: 0; left: -35%; width: 35%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.90), rgba(255,255,255,0)); animation: loginLoadSweep 1.08s cubic-bezier(.65,.05,.36,1) infinite; }
      .btn-login .login-load-dots { display: inline-flex; gap: 4px; align-items: center; }
      .btn-login .login-load-dots i { width: 4px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.80); transform-origin: center; animation: loginLoadDot 1.2s ease-in-out infinite; }
      .btn-login .login-load-dots i:nth-child(2) { animation-delay: .15s; }
      .btn-login .login-load-dots i:nth-child(3) { animation-delay: .30s; }
      .btn-login .login-load-text { font-size: 12px; letter-spacing: 0.04em; font-family: var(--sans); }

      
      .login-err {
        margin-top: 14px;
        color: rgba(185, 50, 50, 0.92);
        font-size: 12px;
        font-family: var(--sans);
        text-align: center;
        padding: 10px 14px;
        background: rgba(185, 50, 50, 0.07);
        border-radius: 8px;
      }

      
      .lp-forgot {
        text-align: center;
        margin-top: 16px;
      }
      .lp-forgot a {
        font-size: 12px;
        color: rgba(26, 20, 16, 0.40);
        text-decoration: none;
        transition: color 0.15s;
      }
      .lp-forgot a:hover { color: rgba(26, 20, 16, 0.70); }

      
      .lp-footer {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        padding: 20px 24px 28px;
      }
      .lp-footer-wagon {
        display: block;
        height: 22px;
        width: auto;
        opacity: 1;
      }
      .lp-footer-links {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 11px;
        color: rgba(26, 20, 16, 0.75);
      }
      .lp-footer-links a {
        color: rgba(26, 20, 16, 0.75);
        text-decoration: none;
        transition: color 0.15s;
      }
      .lp-footer-links a:hover { color: #1a1410; }
      .lp-footer-sep { opacity: 0.6; }
      .lp-footer-copy {
        font-family: var(--mono);
        font-size: 8.5px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(26, 20, 16, 0.60);
      }

      
      @media (max-width: 600px) {
        .lp-topbar { padding: 16px 20px; }
        .lp-headline { font-size: 40px; }
        .lp-card { padding: 24px 20px 20px; border-radius: 18px; }
      }

      
      .lp-brand { display: none; }

      
      #app {
        display: none;
        height: 100vh;
        overflow: hidden;
      }
      #sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: var(--sidebar);
        display: flex;
        flex-direction: column;
        z-index: 200;
      }
      .sb-nav {
        flex: 1;
        padding: 8px 0;
        overflow-y: auto;
      }
      .ni {
        cursor: pointer;
        user-select: none;
        position: relative;
      }
      
      .ni.active {
        border-left: 2px solid rgba(200, 98, 42, 0.85);
      }

      
      .sb-venc-dot {
        display: none;
        margin-left: auto;
        width: 8px; height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
        position: relative;
      }
      .sb-venc-dot.visible { display: block; }
      .sb-venc-dot.critico { background: #e05252; }
      .sb-venc-dot.atencion { background: #d97c2a; }
      
      .sb-venc-dot::before, .sb-venc-dot::after {
        content: "";
        position: absolute;
        inset: 0; border-radius: 50%;
      }
      .sb-venc-dot.critico::before  { background: #e05252; animation: venc-sonar 1.6s ease-out infinite; }
      .sb-venc-dot.critico::after   { background: #e05252; animation: venc-sonar 1.6s ease-out infinite .55s; }
      .sb-venc-dot.atencion::before { background: #d97c2a; animation: venc-sonar 2s ease-out infinite; }
      .sb-venc-dot.atencion::after  { background: #d97c2a; animation: venc-sonar 2s ease-out infinite .7s; }

      @keyframes venc-sonar {
        0%   { transform: scale(1);   opacity: .7; }
        100% { transform: scale(3.2); opacity: 0;  }
      }

      
      .ph-venc-dot.visible  { display: inline-block; }
      .ph-venc-dot.critico  { background: #e05252; }
      .ph-venc-dot.atencion { background: #d97c2a; }
      .ph-venc-dot.critico::before  { content:""; position:absolute; inset:0; border-radius:50%; background:#e05252; animation: venc-sonar 1.6s ease-out infinite; }
      .ph-venc-dot.critico::after   { content:""; position:absolute; inset:0; border-radius:50%; background:#e05252; animation: venc-sonar 1.6s ease-out infinite .55s; }
      .ph-venc-dot.atencion::before { content:""; position:absolute; inset:0; border-radius:50%; background:#d97c2a; animation: venc-sonar 2s ease-out infinite; }
      .ph-venc-dot.atencion::after  { content:""; position:absolute; inset:0; border-radius:50%; background:#d97c2a; animation: venc-sonar 2s ease-out infinite .7s; }
      .sb-foot {
        display: flex;
        flex-direction: column;
      }

      .wagon-sig {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .wagon-logo {
        height: auto;
        width: auto;
        object-fit: contain;
      }

      
      #main {
        height: 100vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .topbar {
        flex-shrink: 0;
        display: flex;
        align-items: center;
      }
      

      
      .nav-chrome-switch,
      #nav-chrome-toggle {
        display: none !important;
      }
      .nav-chrome-switch {
        display: none;
        align-items: center;
        cursor: pointer;
        flex-shrink: 0;
      }
      
      #nav-chrome-switch-input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
      }
      .nav-chrome-switch-track {
        position: relative;
        display: inline-flex;
        align-items: center;
        width: 30px;
        height: 17px;
        border-radius: 20px;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(200,98,42,0.22);
        transition: background 0.2s, border-color 0.2s;
      }
      .nav-chrome-switch-thumb {
        position: absolute;
        left: 2px;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: rgba(200,98,42,0.55);
        transition: left 0.2s, background 0.2s;
      }
      
      #nav-chrome-switch-input:checked ~ .nav-chrome-switch-track {
        background: rgba(200,98,42,0.18);
        border-color: rgba(200,98,42,0.50);
      }
      #nav-chrome-switch-input:checked ~ .nav-chrome-switch-track .nav-chrome-switch-thumb {
        left: calc(100% - 13px);
        background: rgba(200,98,42,0.90);
      }

      .rt-pill {
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--green);
        animation: blink 2.4s infinite;
      }
      .dot.off {
        background: var(--amber);
        animation: none;
      }
      @keyframes blink {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.25;
        }
      }

      
      #pages {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        background: var(--page);
      }
      .page {
        display: none !important;
        padding: 100px 200px 80px !important;
        background: var(--page);
      }
      .page.active {
        display: block !important;
        animation: page-enter 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
      }
      .page.leaving {
        display: block !important;
        animation: page-leave 0.15s ease forwards;
        pointer-events: none;
      }
      @keyframes page-enter {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: none; }
      }
      @keyframes page-leave {
        from { opacity: 1; transform: translateY(0); }
        to   { opacity: 0; transform: translateY(-5px); }
      }

      

      .stat-label {
        font-size: 8.5px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(26, 20, 16, 0.48);
        font-weight: 600;
        font-family: var(--mono);
        margin-bottom: 10px;
      }
      .stat-num {
        font-family: var(--mono);
        font-size: 30px;
        font-weight: 700;
        color: var(--char);
        line-height: 1;
      }

      
      .ph {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 24px;
        gap: 12px;
        flex-wrap: wrap;
        padding-bottom: 18px;
        border-bottom: 1px solid rgba(200, 98, 42, 0.12);
      }
      .ph-title {
        font-family: var(--serif);
        font-size: 26px;
        font-weight: 700;
        color: var(--char);
        letter-spacing: -0.02em;
        line-height: 1.1;
        position: relative;
        padding-left: 14px;
      }
      .ph-title::before {
        content: "";
        position: absolute;
        left: 0;
        top: 4px;
        bottom: 4px;
        width: 3px;
        background: linear-gradient(180deg, var(--gold) 0%, var(--gold-lt) 100%);
        border-radius: 99px;
      }
      .ph-sub {
        font-size: 10.5px;
        color: var(--char3);
        margin-top: 4px;
        font-family: var(--mono);
        padding-left: 14px;
        letter-spacing: 0.02em;
      }
      

      

      
      .btn-prime {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 11px 22px;
        background: #1a1410;
        color: rgba(240, 228, 204, 0.88);
        border: none;
        border-left: 2px solid rgba(200, 98, 42, 0.50);
        font-family: var(--mono);
        font-size: 8.5px;
        font-weight: 400;
        letter-spacing: 0.32em;
        text-transform: uppercase;
        cursor: pointer;
        border-radius: 4px;
        white-space: nowrap;
        position: relative;
        overflow: hidden;
        transition:
          background   0.22s ease,
          border-color 0.22s ease,
          box-shadow   0.22s ease;
      }
      .btn-prime::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          90deg,
          transparent 0%,
          rgba(200,98,42,0.16) 40%,
          rgba(200,98,42,0.08) 60%,
          transparent 100%
        );
        transform: translateX(-160%);
        transition: transform 0.55s cubic-bezier(0.16,1,0.3,1);
        pointer-events: none;
      }
      .btn-prime:hover {
        background: #120e0b;
        border-left-color: rgba(200, 98, 42, 0.88);
        box-shadow: 0 6px 22px rgba(26, 20, 16, 0.16);
      }
      .btn-prime:hover::before { transform: translateX(160%); }
      .btn-prime:active {
        background: #0c0a07;
        box-shadow: none;
      }
      .btn-prime svg { flex-shrink: 0; }

      .btn-ghost {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 10px 18px;
        background: transparent;
        color: rgba(26, 20, 16, 0.58);
        border: 1px solid rgba(26, 20, 16, 0.16);
        font-family: var(--mono);
        font-size: 8.5px;
        font-weight: 400;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        cursor: pointer;
        border-radius: 4px;
        white-space: nowrap;
        transition:
          color        0.18s ease,
          border-color 0.18s ease,
          background   0.18s ease;
      }
      .btn-ghost:hover {
        border-color: rgba(200, 98, 42, 0.48);
        background: rgba(200, 98, 42, 0.04);
        color: rgba(26, 20, 16, 0.88);
      }
      .btn-ghost:active { background: rgba(200, 98, 42, 0.08); }
      .btn-ghost svg { flex-shrink: 0; }

      .btn-icon {
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--surface-0);
        border: 1px solid var(--line-strong);
        color: var(--t3);
        cursor: pointer;
        border-radius: var(--r);
        flex-shrink: 0;
        transition:
          color        var(--motion-fast) var(--ease-ui),
          border-color var(--motion-fast) var(--ease-ui),
          background   var(--motion-fast) var(--ease-ui),
          transform    var(--motion-fast) var(--ease-ui);
      }
      .btn-icon:hover {
        border-color: rgba(200, 98, 42, 0.45);
        color: var(--gold);
        background: var(--ember-bg);
        transform: scale(1.08);
      }
      .btn-icon:active { transform: scale(0.90); }
      .btn-icon svg { width: 13px; height: 13px; }

      

      
      
      

      

      
      .fg input,
      .fg select {
        color-scheme: light;
      }
      .fg textarea {
        color-scheme: light;
      }
      :where(input, select, textarea):focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--ember-bg);
        border-color: var(--gold);
      }

      
      .table-wrap {
        border: var(--card-border);
        border-radius: var(--card-radius);
        overflow: hidden;
        background: var(--card-bg);
        box-shadow: var(--card-shadow);
        /* Fina línea ember en el top para anclar el header oscuro */
        border-top: 2px solid rgba(200, 98, 42, 0.30);
      }
      table {
        width: 100%;
        border-collapse: collapse;
      }
      th {
        font-family: var(--mono);
      }
      td {
        padding: 11px 14px;
        border-bottom: 1px solid rgba(200, 98, 42, 0.07);
        color: var(--char2);
        vertical-align: middle;
      }
      tr:last-child td {
        border-bottom: none;
      }
      tr:hover td {
        background: rgba(200, 98, 42, 0.03);
      }
      .empty {
        text-align: center;
        padding: 44px;
        color: var(--char2);
        font-size: 12px;
      }

      
      .tag {
        display: inline-block;
        padding: 2px 8px;
        font-size: 9px;
        letter-spacing: 0.08em;
        font-weight: 600;
        text-transform: uppercase;
        border-radius: 3px;
        font-family: var(--mono);
      }
      .tag-ok {
        background: rgba(45, 122, 79, 0.1);
        color: var(--green);
        border: 1px solid rgba(45, 122, 79, 0.2);
      }
      .tag-lo {
        background: rgba(160, 98, 10, 0.1);
        color: var(--amber);
        border: 1px solid rgba(160, 98, 10, 0.22);
      }
      .tag-go {
        background: var(--gold-bg);
        color: var(--gold);
        border: 1px solid var(--gold-ln);
      }
      .tag-dim {
        background: var(--parch2);
        color: var(--char3);
        border: 1px solid var(--parch3);
      }
      .tag-l1 {
        background: rgba(42, 90, 140, 0.1);
        color: var(--blue);
        border: 1px solid rgba(42, 90, 140, 0.22);
      }
      .tag-l2 {
        background: rgba(120, 60, 140, 0.1);
        color: #7a3c8c;
        border: 1px solid rgba(120, 60, 140, 0.22);
      }

      
      .ph-sub,
      .kpi-sub {
        color: var(--text-meta);
      }
      #page-movimientos .mov-inspector,
      .camada-card {
        background: var(--card-bg-alt);
        border-color: var(--parch3);
      }
      #page-movimientos .mov-list {
        border-color: var(--line-strong);
      }
      #page-movimientos .mov-filter.on {
        border-color: rgba(200, 98, 42, 0.46);
      }
      .camada-head {
        border-bottom-color: var(--line-strong);
      }
      .camada-prod-name {
        letter-spacing: 0.01em;
      }
      .camada-lote-row {
        border-bottom-color: var(--line-soft);
      }

      
      .bar-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .bar {
        width: 50px;
        height: 3px;
        background: var(--parch3);
        border-radius: 2px;
        overflow: hidden;
      }
      .bar-fill {
        height: 100%;
        border-radius: 2px;
      }
      .stars {
        color: var(--gold);
        font-size: 13px;
        letter-spacing: 1px;
      }
            #page-stock .ph {
        margin-bottom: 14px;
      }
      #page-stock th:first-child,
      #page-stock td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
      }
      #page-stock th:nth-child(3),
      #page-stock td:nth-child(3) { width: 90px; text-align: center; }
      #page-stock th:nth-child(4),
      #page-stock td:nth-child(4) { width: 122px; }
      #page-stock th:nth-child(5),
      #page-stock td:nth-child(5) { width: 132px; }
      #page-stock th:nth-child(7),
      #page-stock td:nth-child(7) { width: 150px; }
      #page-stock th:nth-child(9),
      #page-stock td:nth-child(9) { width: 108px; }
      .stock-prod {
        display: block;
      }
      .stock-prod-main {
        display: flex;
        align-items: flex-start;
        gap: 8px;
      }
      .stock-expand-spacer {
        width: 20px;
        min-width: 20px;
        display: inline-block;
      }
      .stock-prod-name {
        display: block;
        font-family: var(--sans);
        font-size: 14px;
        line-height: 1.2;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--char);
        margin-bottom: 5px;
      }
      .stock-prod-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .stock-mini-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 3px 9px;
        border-radius: 999px;
        background: var(--card-bg-alt);
        border: var(--card-border-thin);
        font-family: var(--mono);
        font-size: 9px;
        color: var(--text-meta);
      }
      .stock-notes {
        margin-top: 8px;
        font-size: 10px;
        color: var(--char2);
        border-left: 2px solid var(--gold-ln);
        padding: 5px 8px;
        background: rgba(245, 239, 230, 0.62);
        border-radius: 0 var(--r) var(--r) 0;
      }
      .stock-qty {
        font-family: var(--mono);
        font-size: 15px;
        font-weight: 700;
        line-height: 1.1;
        color: var(--char);
      }
      .stock-qty-sub {
        font-size: 10px;
        color: var(--char3);
        margin-top: 4px;
      }
      .stock-price {
        font-family: var(--mono);
        font-size: 15px;
        color: var(--char);
      }
      .stock-price-sub {
        font-size: 10px;
        color: var(--char3);
        margin-top: 4px;
      }
      .stock-next {
        font-family: var(--mono);
        font-size: 12px;
        font-weight: 600;
      }
      .stock-next-empty {
        color: var(--char3);
        font-size: 10px;
      }
      .stock-next-sub {
        font-size: 10px;
        color: var(--char3);
        margin-top: 4px;
      }
      .stock-level {
        display: flex;
        flex-direction: column;
        gap: 7px;
        min-width: 110px;
      }
      .stock-level-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }
      .stock-level-value {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--char3);
      }
      .stock-level .bar {
        width: 100%;
        height: 6px;
        border-radius: 999px;
        background: rgba(26, 20, 16, 0.08);
      }
      .stock-level .bar-fill {
        border-radius: 999px;
      }
      .stock-updated {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--char2);
      }
      .stock-actions {
        display: flex;
        gap: 4px;
        justify-content: flex-end;
      }
      #page-stock th {
        padding-top: 13px;
        padding-bottom: 13px;
      }
      #page-stock td {
        padding-top: 15px;
        padding-bottom: 15px;
      }
      #page-stock tbody tr:not(.stock-lotes-row) {
        border-bottom-color: var(--line-soft);
      }
      #page-stock .stock-mini-pill {
        border-color: var(--line-strong);
      }
      #page-stock .stock-qty-sub,
      #page-stock .stock-price-sub,
      #page-stock .stock-next-sub,
      #page-stock .stock-updated,
      #page-stock .stock-level-value {
        color: var(--text-meta);
      }
      #page-stock th:nth-child(6),
      #page-stock td:nth-child(6),
      #page-stock th:nth-child(8),
      #page-stock td:nth-child(8) {
        display: none;
      }
      @media (max-width: 640px) {
        #page-stock .table-wrap {
          max-height: none;
        }
        #page-stock th:first-child,
        #page-stock td:first-child {
          position: static;
        }
        .stock-prod-name {
          font-size: 15px;
        }
        #page-stock .stock-prod-name {
          font-size: 15px;
          line-height: 1.2;
        }
        #page-stock .stock-qty {
          font-size: 12px;
        }
        #page-stock .stock-price {
          font-size: 15px;
        }
      }
      

      
      #page-stock .stock-shell {
        gap: 18px;
      }

      
      #page-stock .stock-hero {
        box-shadow: none;
      }

      
      #page-stock table thead {
        background: #f0e8db;
      }
      #page-stock th {
        font-family: var(--mono);
        font-size: 8.5px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        font-weight: 500;
        padding: 14px 14px;
        border-bottom: 1px solid rgba(200, 98, 42, 0.18);
        white-space: nowrap;
      }
      #page-stock th:first-child {
        z-index: 4;
        background: #f0e8db;
      }

      
      #page-stock td {
        padding: 18px 14px;
        vertical-align: top;
        border-bottom: 1px solid rgba(26, 20, 16, 0.06);
        background: #ffffff;
      }
      #page-stock td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: #ffffff;
      }
      #page-stock tbody tr:not(.stock-lotes-row):hover td {
        background: rgba(245, 239, 230, 0.70);
      }
      #page-stock tbody tr:hover td:first-child {
        background: rgba(245, 239, 230, 0.70);
      }
      #page-stock tbody tr:not(.stock-lotes-row) {
        border-bottom: none;
        transition: background var(--motion-fast) var(--ease-ui);
      }

      
      #page-stock .stock-prod-main {
        gap: 10px;
        align-items: flex-start;
      }
      #page-stock .stock-prod-name {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -0.015em;
        line-height: 1.25;
        color: var(--t1);
        margin-bottom: 6px;
      }
      #page-stock .stock-prod-meta {
        gap: 6px;
      }
      #page-stock .stock-mini-pill {
        font-family: var(--mono);
        font-size: 8.5px;
        padding: 3px 8px;
        border-radius: 3px;
        background: var(--surface-1);
        border: 1px solid var(--line-soft);
        color: var(--t3);
        letter-spacing: 0.06em;
      }
      #page-stock .stock-notes {
        margin-top: 8px;
        font-size: 10px;
        line-height: 1.50;
        color: var(--t3);
        border-left: 2px solid rgba(200, 98, 42, 0.30);
        padding: 4px 9px;
        background: rgba(200, 98, 42, 0.04);
        border-radius: 0 4px 4px 0;
      }
      #page-stock .tag {
        border-radius: 3px;
        padding: 3px 7px;
        font-size: 8.5px;
        letter-spacing: 0.10em;
      }
      #page-stock .tag-cr {
        background: rgba(181, 58, 42, 0.08);
        color: var(--red);
        border: 1px solid rgba(181, 58, 42, 0.20);
      }

      
      #page-stock .stock-qty {
        font-family: var(--mono);
        font-size: 15px;
        font-weight: 600;
        font-style: normal;
        letter-spacing: -0.01em;
        line-height: 1;
        color: var(--t1);
      }
      #page-stock .stock-qty-sub {
        font-family: var(--mono);
        font-size: 9px;
        color: var(--t4);
        margin-top: 5px;
        letter-spacing: 0.06em;
      }
      #page-stock .stock-price {
        font-family: var(--mono);
        font-size: 14px;
        font-weight: 600;
        color: var(--t1);
        letter-spacing: -0.01em;
      }
      #page-stock .stock-price-sub {
        font-family: var(--mono);
        font-size: 9px;
        color: var(--t4);
        margin-top: 5px;
      }
      #page-stock .stock-next {
        font-family: var(--mono);
        font-size: 12px;
        font-weight: 600;
        color: var(--t2);
        letter-spacing: -0.01em;
      }
      #page-stock .stock-next-empty {
        color: var(--t4);
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 400;
        letter-spacing: 0.04em;
      }
      #page-stock .stock-next-sub {
        font-family: var(--mono);
        font-size: 9px;
        color: var(--t4);
        margin-top: 5px;
      }
      #page-stock .stock-updated {
        font-family: var(--mono);
        font-size: 10.5px;
        color: var(--t3);
        letter-spacing: 0.02em;
      }

      
      #page-stock .stock-level {
        gap: 6px;
        min-width: 100px;
      }
      #page-stock .stock-level-top {
        gap: 6px;
      }
      #page-stock .stock-level-value {
        font-family: var(--mono);
        font-size: 9.5px;
        color: var(--t3);
        font-weight: 500;
      }
      #page-stock .stock-level .bar {
        width: 100%;
        height: 5px;
        border-radius: 2px;
        background: rgba(26, 20, 16, 0.08);
        overflow: hidden;
      }
      #page-stock .stock-level .bar-fill {
        height: 100%;
        border-radius: 2px;
        transition: width var(--motion-med) var(--ease-out);
      }

      
      #page-stock .stock-actions {
        gap: 5px;
        justify-content: flex-end;
      }
      #page-stock .stock-actions .btn-icon {
        width: 28px;
        height: 28px;
        border-radius: 5px;
        background: transparent;
        border-color: rgba(26, 20, 16, 0.10);
        color: var(--t3);
      }
      #page-stock .stock-actions .btn-icon:hover {
        background: var(--ember-bg);
        border-color: var(--ember-ln);
        color: var(--gold);
        transform: scale(1.08);
      }

      
      #page-stock.stock-compact td {
        padding-top: 12px;
        padding-bottom: 12px;
      }
      #page-stock.stock-compact .stock-notes { display: none; }
      #page-stock.stock-compact .stock-mini-pill:nth-child(n+2) { display: none; }
      #page-stock.stock-compact .stock-prod-name { font-size: 13px; }
      #page-stock.stock-compact .stock-qty { font-size: 14px; }

      

      

      
      #page-stock > .ph {
        display: none;
      }

      
      #page-stock > .stock-shell {
        display: grid !important;
        grid-template-columns: 220px 1fr !important;
        grid-template-rows: 1fr !important;
        gap: 0 20px !important;
        padding: 20px 24px 28px !important;
        box-sizing: border-box !important;
        height: calc(100vh - 56px) !important;
        overflow: clip !important;
        min-height: 0 !important;
      }

      
      #page-stock .stock-hero {
        grid-column: 1;
        grid-row: 1;
        background: linear-gradient(175deg,
          #0e0b08 0%,
          #1a1410 38%,
          #1d1711 68%,
          #160f0b 100%
        );
        border: 1px solid rgba(200,98,42,0.10);
        border-radius: 8px;
        padding: 0;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }

      
      #page-stock .stock-hero::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 1px;
        background: linear-gradient(
          to bottom,
          transparent 0%,
          rgba(200,98,42,0.32) 18%,
          rgba(200,98,42,0.32) 82%,
          transparent 100%
        );
        pointer-events: none;
        z-index: 1;
      }

      
      #page-stock .stock-hero::before {
        content: 'Stock';
        display: block;
        font-family: var(--serif);
        font-size: 20px;
        font-weight: 300;
        font-style: italic;
        color: rgba(240,230,214,0.80);
        letter-spacing: -0.025em;
        padding: 26px 22px 22px;
        border-bottom: 1px solid rgba(200,98,42,0.10);
        flex-shrink: 0;
      }

      
      #page-stock .stock-stat {
        background: transparent;
        border: none !important;
        border-bottom: 1px solid rgba(200,98,42,0.09) !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-top: none !important;
        padding: 20px 22px !important;
        box-shadow: none;
        transform: none !important;
        transition: background var(--motion-fast) var(--ease-ui) !important;
        cursor: pointer;
        position: relative;
      }
      #page-stock .stock-stat::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 2px;
        background: transparent;
        transition: background var(--motion-fast) var(--ease-ui);
      }
      #page-stock .stock-stat:hover {
        background: rgba(200,98,42,0.07);
        transform: none !important;
        box-shadow: none;
        border-top-color: transparent;
      }
      #page-stock .stock-stat:hover::before {
        background: rgba(200,98,42,0.72);
      }

      
      #page-stock .stock-stat-num {
        font-family: var(--serif);
        font-size: 38px;
        font-weight: 700;
        font-style: italic;
        letter-spacing: -0.05em;
        line-height: 1;
        color: rgba(240,230,214,0.88);
        margin-bottom: 7px;
      }

      
      #page-stock .table-wrap {
        flex: 1 !important;
        min-height: 0 !important;
        max-height: none !important;
        background: #ffffff;
        border: 1px solid rgba(26,20,16,0.10) !important;
        border-top: none !important;
        border-radius: 0 0 8px 8px !important;
        box-shadow: 0 4px 24px rgba(26,20,16,0.06);
        overflow: auto !important;
      }

      
      #page-stock.stock-compact th:nth-child(8),
      #page-stock.stock-compact td:nth-child(8) {
        display: none !important;
      }

      
      #page-stock.stock-compact th:nth-child(4),
      #page-stock.stock-compact td:nth-child(4) { width: 110px; }
      #page-stock.stock-compact th:nth-child(5),
      #page-stock.stock-compact td:nth-child(5) { width: 120px; }
      #page-stock.stock-compact th:nth-child(6),
      #page-stock.stock-compact td:nth-child(6) { width: 100px; }
      #page-stock.stock-compact th:nth-child(7),
      #page-stock.stock-compact td:nth-child(7) { width: 148px; }
      #page-stock.stock-compact th:nth-child(9),
      #page-stock.stock-compact td:nth-child(9) { width: 100px; }

      
      @media (max-width: 1100px) {
        #page-stock > .stock-shell {
          grid-template-columns: 190px 1fr !important;
          gap: 0 16px !important;
          padding: 16px 18px 22px !important;
        }
        #page-stock .stock-stat-num { font-size: 30px; }
        #page-stock .stock-hero::before { padding: 20px 18px 16px; font-size: 12px; }
        #page-stock .stock-stat { padding: 16px 18px !important; }
      }
      @media (max-width: 820px) {
        #page-stock > .stock-shell {
          grid-template-columns: 1fr !important;
          grid-template-rows: auto 1fr !important;
          height: auto !important;
          overflow: visible !important;
          padding: 14px 16px 20px !important;
          gap: 16px 0 !important;
        }
        #page-stock .stock-hero {
          grid-column: 1 !important;
          grid-row: 1 !important;
          flex-direction: row;
          overflow-x: auto;
          min-height: unset;
        }
        #page-stock .table-wrap {
          max-height: 60vh !important;
        }
        #page-stock .stock-hero::before { display: none; }
        #page-stock .stock-hero::after { display: none; }
        #page-stock .stock-stat { border-right: 1px solid rgba(200,98,42,0.09) !important; border-bottom: none !important; min-width: 140px; }
      }

      

      

      
      .mov-filter {
        color: var(--char3);
        font-size: 10px;
        text-transform: uppercase;
        cursor: pointer;
        font-family: var(--sans);
        transition: all 0.15s;
      }
      .mov-hl {
        background: rgba(200,98,42,.15);
        color: var(--gold);
        border-radius: 2px;
        padding: 0 2px;
        font-weight: 700;
      }
      .mov-filter {
        padding: 8px 14px;
        background: rgba(255, 255, 255, 0.68);
        border: 1px solid rgba(217, 204, 186, 0.96);
        letter-spacing: 0.14em;
        border-radius: 999px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
      }
      .mov-filter:hover,
      .mov-filter.on {
        border-color: rgba(26, 20, 16, 0.16);
        color: var(--char);
        background: rgba(26, 20, 16, 0.07);
      }
      

      
      #page-movimientos .mov-layout {
        grid-template-columns: minmax(0, 1fr) 390px;
        align-items: start;
      }
      #page-movimientos .mov-search-clr {
        color: rgba(26, 20, 16, 0.35);
        font-family: var(--mono);
        font-size: 11px;
        box-shadow: none;
      }
      #page-movimientos .mov-search-clr:hover {
        background: transparent;
        color: rgba(200, 98, 42, 0.70);
        border: none;
      }
      #page-movimientos .mov-filter {
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        color: rgba(26, 20, 16, 0.56);
        text-transform: uppercase;
        cursor: pointer;
        font-family: var(--mono);
        font-weight: 500;
        transition: color 0.14s, border-color 0.14s;
        margin-bottom: -1px;
        box-shadow: none;
      }
      #page-movimientos .mov-filter:hover {
        color: rgba(26, 20, 16, 0.78);
        background: transparent;
        border-bottom-color: rgba(26, 20, 16, 0.22);
      }
      #page-movimientos .mov-filter.on {
        color: rgba(200, 98, 42, 1);
        background: transparent;
        border-bottom: 2px solid rgba(200, 98, 42, 0.80);
        font-weight: 700;
      }

      
      #page-movimientos .mov-list {
        background: var(--parch);
        border: 1px solid rgba(26, 20, 16, 0.10);
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 2px 16px rgba(26, 20, 16, 0.05);
      }
      #page-movimientos .mov-list::before,
      #page-movimientos .mov-list::after {
        display: none;
      }

      

      
      #page-movimientos .mov-hl {
        background: rgba(200, 98, 42, 0.14);
        border-radius: 2px;
        padding: 0 1px;
        color: inherit;
        opacity: 1
      }

      
      #page-movimientos .mov-inspector {
        min-height: 300px;
      }
      .mov-ins-empty {
        font-family: var(--mono);
        font-size: 8.5px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(26, 20, 16, 0.24);
        padding: 36px 0;
        text-align: center;
        line-height: 1.8;
      }

      
      @media (max-width: 960px) {
        #page-movimientos .mov-layout {
          grid-template-columns: 1fr;
        }
        #page-movimientos .mov-inspector { display: none; }
      }
      .mov-mobile-detail { display: none; }
      @media (max-width: 640px) {
        #page-movimientos .mov-layout {
          grid-template-columns: 1fr;
        }
        .mov-mobile-detail {
          display: block;
          padding: 0 12px 12px 52px;
          background: rgba(255, 255, 255, 0.34);
          border-top: 1px solid rgba(186, 166, 142, 0.3);
        }
        .mov-mobile-det-item {
          display: grid;
          grid-template-columns: 1fr auto auto;
          gap: 9px;
          align-items: baseline;
          padding: 8px 0;
          border-bottom: 1px solid rgba(214, 199, 179, 0.52);
        }
        .mov-mobile-det-item:last-child { border-bottom: none; }
        .mov-mobile-det-name {
          font-size: 12px;
          font-weight: 700;
          color: var(--char);
          line-height: 1.3;
        }
        .mov-mobile-det-qty {
          font-family: var(--mono);
          font-size: 10px;
          color: var(--char3);
          white-space: nowrap;
        }
        .mov-mobile-det-price {
          font-family: var(--mono);
          font-size: 11px;
          font-weight: 700;
          color: var(--char);
          white-space: nowrap;
        }
        .mov-mobile-actions {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
          margin-top: 10px;
          padding-top: 10px;
          border-top: 1px solid rgba(214, 199, 179, 0.52);
        }
        .mov-mobile-btn {
          padding: 6px 10px;
          border-radius: 9px;
          border: 1px solid rgba(186, 166, 142, 0.6);
          background: rgba(255, 255, 255, 0.58);
          color: var(--char);
          font-size: 10px;
          font-weight: 700;
          letter-spacing: .03em;
          cursor: pointer;
        }
        .mov-mobile-btn.edit {
          border-color: rgba(42, 90, 140, 0.34);
          color: var(--blue);
        }
        .mov-mobile-btn.del {
          border-color: rgba(181, 58, 42, 0.36);
          color: var(--red);
        }
      }

      

      
      #page-movimientos > .ph {
        padding: 0 0 18px;
        margin-bottom: 18px;
        background: none;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid var(--line-soft);
      }
      #page-movimientos .ph-title {
        font-family: var(--serif);
        font-size: 24px;
        font-weight: 300;
        font-style: italic;
        color: var(--t1);
        letter-spacing: -0.02em;
        line-height: 1.1;
      }
      #page-movimientos .ph-sub {
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--t3);
        margin-top: 5px;
      }
      #page-movimientos .mov-search-clr {
        border: none !important;
        border-radius: 0 !important;
        padding: 0 10px !important;
        background: transparent;
        align-self: stretch !important;
        display: flex !important;
        align-items: center !important;
      }
      #page-movimientos .mov-filter {
        padding: 5px 9px !important;
        font-size: 9px;
        border-radius: 6px !important;
        letter-spacing: 0.10em;
        height: 28px !important;
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
      }

      
      
      #page-movimientos {
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
      }
      #page-movimientos #mov-results { flex-shrink: 0; }
      #page-movimientos #mov-ver-mas-wrap {
        flex-shrink: 0 !important;
        margin-top: 10px;
        margin-bottom: 14px;
      }

      #page-movimientos .mov-layout {
        flex: 1 !important;
        min-height: 0 !important;
        display: block !important;
        gap: 0 !important;
        position: relative !important;
        overflow: hidden !important;  /* clips inspector off-screen & during slide */
      }

      
      #page-movimientos .mov-list {
        transition: margin-right var(--motion-slow) var(--ease-spring) !important;
        height: 100% !important;
        max-height: none !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
      }

      
      #page-movimientos:has(.mov-inspector .mov-ins-kicker) .mov-list {
        margin-right: 416px !important;
      }

      
      #page-movimientos .mov-inspector {
        position: absolute !important;
        top: 0 !important;
        right: -420px !important;
        width: 400px !important;
        height: 100% !important;        /* mismo alto que mov-layout */
        max-height: none !important;
        overflow: hidden !important;
        z-index: 4 !important;
        border-radius: 0 !important;
        border: none !important;
        border-left: 1px solid rgba(26,20,16,0.10) !important;
        box-shadow: -12px 0 48px rgba(26,20,16,0.10);
        background: #faf7f2;
        padding: 0 !important;
        transition: right var(--motion-slow) var(--ease-spring) !important;
        display: flex !important;
        flex-direction: column !important;
      }

      
      #page-movimientos .mov-inspector:has(.mov-ins-kicker) {
        right: 0 !important;
      }

      

      
      #page-movimientos .mov-ins-empty {
        font-family: var(--mono);
        font-size: 9.5px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--t4);
        padding: 40px 22px;
        text-align: center;
        line-height: 1.7;
      }

      
      @media (max-width: 1100px) {
        #page-movimientos:has(.mov-inspector .mov-ins-kicker) .mov-list {
          margin-right: 340px;
        }
        #page-movimientos .mov-inspector {
          width: 320px !important;
          right: -330px !important;
        }
      }
      @media (max-width: 900px) {
        #page-movimientos:has(.mov-inspector .mov-ins-kicker) .mov-list {
          margin-right: 0;
        }
        #page-movimientos .mov-inspector:has(.mov-ins-kicker) {
          right: 0 !important;
        }
      }
      @media (max-width: 640px) {
        #page-movimientos .mov-inspector { display: none !important; }
        #page-movimientos:has(.mov-inspector .mov-ins-kicker) .mov-list {
          margin-right: 0 !important;
        }
      }

      

      
      .rev-card {
        border: var(--card-border);
        border-radius: var(--card-radius);
        padding: 18px;
        margin-bottom: 10px;
        background: var(--card-bg);
        transition: box-shadow 0.15s;
        box-shadow: 0 1px 4px rgba(44, 36, 24, 0.04);
      }
      .rev-card:hover {
        box-shadow: var(--card-shadow-hover);
      }
      .rev-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 10px;
      }
      .rev-meta h4 {
        font-family: var(--serif);
        font-size: 15px;
        font-weight: 500;
        color: var(--char);
      }
      .rev-meta p {
        font-size: 10px;
        color: var(--char23);
        margin-top: 2px;
        font-family: var(--mono);
      }
      .rev-text {
        font-size: 13px;
        color: var(--char2);
        line-height: 1.7;
        font-style: italic;
      }

      

      
      #page-chat {
        display: none;
        padding: 0 !important;
      }
      #page-chat.active {
        display: flex;
        flex-direction: column;
        height: 100%;
      }
      .chat-topbar {
        padding: 16px 28px;
        border-bottom: 1.5px solid var(--parch3);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        background: var(--parch2);
      }
      .chat-topbar h2 {
        font-family: var(--sans);
        font-size: 15px;
        font-weight: 600;
        color: var(--char);
        letter-spacing: -.01em;
      }
      .chat-topbar p {
        font-size: 11px;
        color: var(--char2);
        font-family: var(--sans);
        font-weight: 400;
        margin-top: 2px;
      }
      .chat-body {
        flex: 1;
        overflow-y: auto;
        padding: 20px 28px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        background: var(--parch);
      }
      .chat-msg {
        max-width: 62%;
        display: flex;
        flex-direction: column;
        gap: 3px;
      }
      .chat-msg.mine {
        align-self: flex-end;
        align-items: flex-end;
      }
      .chat-msg.other {
        align-self: flex-start;
        align-items: flex-start;
      }
      .chat-bubble {
        padding: 10px 14px;
        border-radius: 12px;
        font-size: 13px;
        font-family: var(--sans);
        font-weight: 400;
        line-height: 1.55;
        word-break: break-word;
      }
      .chat-msg.mine .chat-bubble {
        background: var(--gold);
        color: #fff;
        border-radius: 12px 12px 3px 12px;
      }
      .chat-msg.other .chat-bubble {
        background: var(--parch2);
        border: 1.5px solid var(--parch3);
        color: var(--char);
        border-radius: 12px 12px 12px 3px;
      }
      .chat-meta {
        font-family: var(--sans);
        font-size: 10px;
        color: var(--char3);
        font-weight: 400;
      }
      .chat-sender {
        font-size: 11px;
        font-weight: 500;
        color: var(--char2);
        margin-bottom: 3px;
        font-family: var(--sans);
        letter-spacing: 0;
        text-transform: none;
      }
      .chat-sep {
        text-align: center;
        font-family: var(--sans);
        font-size: 11px;
        font-weight: 500;
        color: var(--char3);
        padding: 8px 0;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .chat-sep::before, .chat-sep::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--parch3);
      }
      .chat-footer {
        padding: 14px 28px;
        border-top: 1.5px solid var(--parch3);
        display: flex;
        gap: 8px;
        align-items: flex-end;
        flex-shrink: 0;
        background: var(--parch2);
      }
      .chat-input {
        flex: 1;
        background: var(--parch);
        border: 1.5px solid var(--parch3);
        color: var(--char);
        padding: 10px 14px;
        font-family: var(--sans);
        font-size: 13px;
        font-weight: 400;
        line-height: 1.5;
        outline: none;
        border-radius: 20px;
        resize: none;
        transition: border-color 0.15s, box-shadow 0.15s;
        max-height: 100px;
      }
      .chat-input:focus {
        border-color: var(--gold);
        box-shadow: 0 0 0 3px var(--gold-bg);
      }
      .chat-send {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, var(--gold), #e8924a);
        border: none;
        border-radius: var(--r);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s;
        box-shadow: 0 3px 10px rgba(200, 98, 42, 0.3);
      }
      .chat-send:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 14px rgba(200, 98, 42, 0.4);
      }
      .chat-send svg {
        width: 16px;
        height: 16px;
        stroke: var(--parch);
      }

      
      #chat-typing{display:none;align-self:flex-start;align-items:center;gap:7px;padding:2px 0 6px}
      #chat-typing.visible{display:flex}
      @keyframes td-bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
      
      .chat-read{font-size:11px;margin-left:3px}
      .chat-read.seen{color:var(--gold)}
      .chat-read.sent{color:var(--char3)}
      
      #chat-pinned-bar{display:none;padding:7px 20px;background:var(--gold-bg);border-bottom:1.5px solid var(--gold-ln);align-items:center;gap:10px;cursor:pointer;flex-shrink:0}
      #chat-pinned-bar.visible{display:flex}
      .cpb-icon{font-size:13px;flex-shrink:0}
      .cpb-label{font-size:10px;font-weight:600;color:var(--gold);font-family:var(--sans);text-transform:uppercase;letter-spacing:.06em;flex-shrink:0}
      .cpb-text{flex:1;font-size:12px;color:var(--char2);font-family:var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      
      .chat-msg-actions{display:flex;gap:3px;align-items:center;opacity:0;transition:opacity .15s;margin-top:3px}
      .chat-msg:hover .chat-msg-actions{opacity:1}
      .chat-act-btn{background:var(--parch2);border:1px solid var(--parch3);border-radius:6px;padding:2px 7px;font-size:11px;cursor:pointer;color:var(--char2);font-family:var(--sans);transition:background .12s,color .12s}
      .chat-act-btn:hover{background:var(--gold-bg);color:var(--gold);border-color:var(--gold-ln)}
      
      #chat-reply-preview{display:none;padding:8px 14px 6px;background:var(--parch2);border-top:1.5px solid var(--parch3);align-items:center;gap:8px}
      #chat-reply-preview.visible{display:flex}
      .crp-bar{width:3px;min-height:28px;align-self:stretch;background:var(--gold);border-radius:2px;flex-shrink:0}
      .crp-body{flex:1;min-width:0}
      .crp-autor{font-size:11px;font-weight:600;color:var(--gold);font-family:var(--sans);margin-bottom:1px}
      .crp-texto{font-size:11px;color:var(--char2);font-family:var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      .crp-close{background:none;border:none;cursor:pointer;font-size:18px;color:var(--char3);padding:0 4px;transition:color .15s;flex-shrink:0}
      .crp-close:hover{color:var(--char)}
      
      .chat-quote{border-left:3px solid rgba(200,98,42,.4);border-radius:3px;padding:4px 8px;margin-bottom:6px;font-size:11px;font-family:var(--sans);background:rgba(200,98,42,.06)}
      .chat-msg.mine .chat-quote{background:rgba(255,255,255,.15);border-left-color:rgba(255,255,255,.5)}
      .chat-quote-autor{font-weight:600;color:var(--gold);margin-bottom:1px}
      .chat-msg.mine .chat-quote-autor{color:rgba(255,255,255,.9)}
      .chat-quote-texto{color:var(--char2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      .chat-msg.mine .chat-quote-texto{color:rgba(255,255,255,.75)}
      
      .chat-prod-card{background:var(--parch);border:1.5px solid var(--parch3);border-radius:var(--r);padding:10px 12px;margin-top:4px;min-width:180px}
      .chat-msg.mine .chat-prod-card{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)}
      .cpc-tag{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--char3);font-family:var(--sans);margin-bottom:4px}
      .chat-msg.mine .cpc-tag{color:rgba(255,255,255,.6)}
      .cpc-nombre{font-size:13px;font-weight:600;color:var(--char);font-family:var(--sans);margin-bottom:3px}
      .chat-msg.mine .cpc-nombre{color:#fff}
      .cpc-info{font-size:11px;color:var(--char2);font-family:var(--mono)}
      .chat-msg.mine .cpc-info{color:rgba(255,255,255,.7)}
      
      #chat-prod-picker{position:absolute;bottom:100%;left:0;right:0;z-index:200;background:var(--parch);border:1.5px solid var(--parch3);border-radius:var(--r2) var(--r2) 0 0;box-shadow:0 -8px 24px rgba(26,20,16,.12);max-height:240px;overflow-y:auto;display:none}
      #chat-prod-picker.visible{display:block}
      #chat-prod-picker-search{width:100%;padding:10px 14px;border:none;border-bottom:1px solid var(--parch3);background:var(--parch2);color:var(--char);font-family:var(--sans);font-size:12px;outline:none}
      .cpp-item{padding:9px 14px;border-bottom:1px solid var(--parch3);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;transition:background .1s}
      .cpp-item:hover{background:var(--parch2)}
      .cpp-item:last-child{border-bottom:none}
      .cpp-nombre{font-size:12px;font-weight:500;color:var(--char);font-family:var(--sans)}
      .cpp-meta{font-size:11px;color:var(--char3);font-family:var(--mono)}

      
      #modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(35, 29, 26, 0.52);
        backdrop-filter: blur(2px);
        z-index: 9000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
      }
      #modal-overlay.open {
        display: flex;
        animation: overlay-in 0.15s ease both;
      }
      #modal-overlay.closing {
        display: flex !important;
        animation: overlay-out 0.18s ease forwards;
        pointer-events: none;
      }
      @keyframes overlay-in  { from { opacity: 0; } to { opacity: 1; } }
      @keyframes overlay-out { from { opacity: 1; } to { opacity: 0; } }
      #modal-overlay.open .modal-entering {
        animation: modal-in 0.26s cubic-bezier(0.16, 1, 0.3, 1) both;
      }
      #modal-overlay.closing .modal {
        animation: modal-out 0.16s ease forwards;
      }
      @keyframes modal-in  { from { opacity: 0; transform: scale(0.95) translateY(14px); } to { opacity: 1; transform: scale(1) translateY(0); } }
      @keyframes modal-out { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.96) translateY(8px); } }
      #modal-overlay.stock-fullscreen {
        padding: clamp(12px, 2.2vw, 24px);
      }
      .modal {
        position: relative;
        background: #fff;
        border: 1px solid #E5E0DC;
        width: 560px;
        max-width: 100%;
        max-height: min(88vh, 920px);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        border-radius: 20px;
        animation: pop 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
        box-shadow:
          0 20px 60px rgba(35, 29, 26, 0.16),
          0 4px 16px rgba(35, 29, 26, 0.08);
        min-height: 0;
      }
      #m-stock {
        width: min(980px, 100%);
        max-width: 980px;
        max-height: min(92vh, 980px);
      }
      .modal-head {
        padding: 24px 28px 20px;
        border-bottom: 1px solid #E5E0DC;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 2;
      }
      .modal-head::after {
        display: none;
      }
      .modal-head h3 {
        font-family: var(--serif);
        font-size: 22px;
        font-weight: 600;
        color: #231D1A;
        text-align: left;
        letter-spacing: -0.01em;
      }
      .modal-close {
        position: static;
        transform: none;
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1.5px solid #E5E0DC;
        color: #766960;
        cursor: pointer;
        font-size: 12px;
        line-height: 1;
        border-radius: 50%;
        transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
      }
      .modal-close:hover {
        color: #231D1A;
        background: #F2F0ED;
        border-color: #C6602A;
        transform: rotate(90deg);
      }
      .modal-body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 24px 28px 20px;
        background: #FAF8F5;
        scrollbar-width: thin;
        scrollbar-color: #E5E0DC transparent;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
      }
      .modal-body::-webkit-scrollbar {
        width: 6px;
      }
      .modal-body::-webkit-scrollbar-track {
        background: transparent;
      }
      .modal-body::-webkit-scrollbar-thumb {
        background: rgba(128, 103, 79, 0.45);
        border-radius: 999px;
      }
      .modal-body::-webkit-scrollbar-thumb:hover {
        background: rgba(128, 103, 79, 0.62);
      }
      .modal-foot {
        padding: 16px 28px 20px;
        border-top: 1px solid #E5E0DC;
        display: flex;
        gap: 9px;
        justify-content: flex-end;
        position: sticky;
        bottom: 0;
        background: #fff;
        z-index: 2;
      }
      .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
      }
      .fg {
        margin-bottom: 14px;
      }
      .fg label {
        display: block;
        font-size: 11px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #766960;
        font-weight: 500;
        font-family: var(--sans);
        margin-bottom: 6px;
      }
      .fg input,
      .fg select,
      .qty-row select,
      .modal-body select:not([size]),
      .modal-body input:not([type="hidden"]),
      .modal-body textarea {
        color-scheme: light;
      }
      .fg input,
      .fg select,
      .fg textarea {
        width: 100%;
        color: var(--char);
        font-family: var(--sans);
        font-size: 13px;
        outline: none;
        transition:
          border-color 0.15s,
          box-shadow 0.15s,
          background 0.15s;
      }
      .fg input,
      .fg select {
        min-height: 44px;
        background: #fff;
        border: 1.5px solid #E5E0DC;
        padding: 10px 12px;
        border-radius: 10px;
        box-shadow: none;
      }
      .fg textarea {
        background: #fff;
        border: 1.5px solid #E5E0DC;
        padding: 11px 12px;
        border-radius: 10px;
        box-shadow: none;
        resize: vertical;
        min-height: 118px;
      }

      .fg input:focus,
      .fg select:focus,
      .fg textarea:focus {
        border-color: #C6602A;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(198, 96, 42, 0.12);
      }
      .fg select option {
        background: var(--parch);
      }
      .fg select option:checked {
        background: var(--gold);
        color: #fff;
      }
      .fg .hint {
        font-size: 10px;
        color: var(--char2);
        margin-top: 6px;
        font-family: var(--mono);
        line-height: 1.45;
      }
      .modal-body select[size] {
        width: 100%;
        border: 1px solid rgba(200, 98, 42, 0.16) !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, 0.62) !important;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.7),
          0 6px 14px rgba(26, 20, 16, 0.03);
        padding: 8px !important;
      }
      .modal-body select[size]:focus {
        border-color: rgba(200, 98, 42, 0.42) !important;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.82),
          0 0 0 3px var(--gold-bg) !important;
      }
      .modal-body select[size] option {
        padding: 8px 10px;
        border-radius: 9px;
        margin: 2px 0;
      }
      .modal-body select[size] option:checked {
        background: rgba(200, 98, 42, 0.16) linear-gradient(0deg, rgba(200, 98, 42, 0.16), rgba(200, 98, 42, 0.16));
        color: var(--char);
      }
      .star-row {
        display: flex;
        gap: 5px;
      }
      .star-row span {
        font-size: 26px;
        cursor: pointer;
        color: var(--parch3);
        transition: color 0.1s;
        line-height: 1;
      }
      .star-row span.on {
        color: var(--gold);
      }
      .star-row span:hover {
        color: var(--gold-lt);
      }
      .qty-row {
        display: flex;
        gap: 8px;
      }
      .qty-row input {
        flex: 1;
      }
      .qty-row select {
        width: 112px;
        flex-shrink: 0;
      }

      
      .modal-foot .btn-prime {
        background: #C6602A;
        color: #fff;
        border: none;
        border-radius: 10px;
        padding: 11px 22px;
        font-family: var(--sans);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        cursor: pointer;
        transition: background 0.15s, box-shadow 0.15s;
      }
      .modal-foot .btn-prime::before { display: none; }
      .modal-foot .btn-prime:hover {
        background: #b35525;
        box-shadow: 0 4px 14px rgba(198, 96, 42, 0.32);
        border-left: none;
      }
      .modal-foot .btn-ghost {
        background: transparent;
        color: #766960;
        border: 1.5px solid #E5E0DC;
        border-radius: 10px;
        padding: 10px 18px;
        font-family: var(--sans);
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        cursor: pointer;
        transition: color 0.15s, border-color 0.15s, background 0.15s;
      }
      .modal-foot .btn-ghost:hover {
        border-color: #C6602A;
        color: #231D1A;
        background: rgba(198, 96, 42, 0.04);
      }

      
      #toast-c {
        position: fixed;
        bottom: 24px;
        right: 24px;
        z-index: 99999;
        display: flex;
        flex-direction: column;
        gap: 8px;
        pointer-events: none;
      }
      .tk {
        pointer-events: auto;
        display: flex;
        align-items: flex-start;
        gap: 10px;
        min-width: 240px;
        max-width: 340px;
        padding: 12px 14px 12px 12px;
        background: #FFFCF9;
        border: 1px solid rgba(26,20,16,0.09);
        border-radius: 11px;
        box-shadow: 0 4px 20px rgba(26,20,16,0.11), 0 1px 4px rgba(26,20,16,0.07);
        animation: toast-in 0.22s cubic-bezier(0.16,1,0.3,1) both;
        overflow: hidden;
        transition: max-height 0.22s ease, opacity 0.22s ease, padding 0.22s ease, margin 0.22s ease;
      }
      .tk-icon {
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        border-radius: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(26,20,16,0.05);
        color: rgba(26,20,16,0.45);
      }
      .tk.ok  .tk-icon { background: rgba(34,136,72,0.10); color: #1a7a3f; }
      .tk.er  .tk-icon { background: rgba(181,58,42,0.10); color: #b53a2a; }
      .tk.inf .tk-icon { background: rgba(198,96,42,0.10); color: var(--gold); }
      .tk-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 2px; }
      .tk-label {
        font-family: var(--mono);
        font-size: 7.5px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        font-weight: 700;
        color: rgba(26,20,16,0.35);
        line-height: 1;
        margin-bottom: 2px;
      }
      .tk.ok  .tk-label { color: #1a7a3f; }
      .tk.er  .tk-label { color: #b53a2a; }
      .tk.inf .tk-label { color: var(--gold); }
      .tk-msg {
        font-family: var(--sans);
        font-size: 13px;
        font-weight: 500;
        color: #231D1A;
        line-height: 1.35;
        letter-spacing: -0.01em;
      }
      .tk.removing {
        animation: toast-out 0.22s ease forwards;
        pointer-events: none;
      }
      @keyframes toast-in  {
        from { transform: translateX(14px) scale(0.97); opacity: 0; }
        to   { transform: translateX(0)    scale(1);    opacity: 1; }
      }
      @keyframes toast-out {
        from { transform: translateX(0);   opacity: 1; }
        to   { transform: translateX(16px); opacity: 0; }
      }

      
      .stagger-item {
        animation: stagger-in 0.26s cubic-bezier(0.16, 1, 0.3, 1) both;
      }
      @keyframes stagger-in {
        from { opacity: 0; transform: translateY(7px); }
        to   { opacity: 1; transform: translateY(0); }
      }

      

      
      .pedido-header-box {
        background: var(--card-bg-alt);
        border: var(--card-border);
        border-radius: var(--card-radius);
        padding: 16px 20px;
        margin-bottom: 20px;
        display: flex;
        gap: 24px;
        align-items: center;
        flex-wrap: wrap;
      }
      .pedido-info-item {
        display: flex;
        flex-direction: column;
        gap: 3px;
      }
      .pedido-info-label {
        font-size: 9px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--char3);
        font-weight: 500;
      }
      .pedido-info-val {
        font-family: var(--mono);
        font-size: 13px;
        color: var(--char);
        font-weight: 500;
      }
      .pedido-whatsapp-box {
        background: rgba(45, 122, 79, 0.06);
        border: 1.5px solid rgba(45, 122, 79, 0.2);
        border-radius: var(--r2);
        padding: 14px 16px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
      }
      .pedido-wa-label {
        font-size: 9px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--green);
        font-weight: 600;
        margin-bottom: 4px;
      }
      .pedido-wa-input {
        background: var(--parch);
        border: 1.5px solid rgba(45, 122, 79, 0.25);
        color: var(--char);
        padding: 8px 10px;
        font-family: var(--mono);
        font-size: 12px;
        outline: none;
        border-radius: var(--r);
        transition: border-color 0.15s;
        width: 220px;
      }
      .pedido-wa-input:focus {
        border-color: rgba(45, 122, 79, 0.5);
      }
      .pedido-wa-sub {
        font-size: 10px;
        color: var(--char2);
        margin-top: 3px;
      }
      .pedido-table-wrap {
        border: var(--card-border);
        border-radius: var(--card-radius);
        overflow: hidden;
        background: var(--card-bg);
        margin-bottom: 20px;
      }
      .pedido-table-wrap th {
        background: var(--parch2);
      }
      .pedido-qty-input {
        width: 80px;
        background: var(--parch2);
        border: 1.5px solid var(--parch3);
        color: var(--char);
        padding: 6px 8px;
        font-family: var(--mono);
        font-size: 12px;
        outline: none;
        border-radius: var(--r);
        text-align: right;
      }
      .pedido-qty-input:focus {
        border-color: var(--gold);
      }
      .pedido-notice {
        background: rgba(200, 98, 42, 0.08);
        border: 1.5px solid rgba(200, 98, 42, 0.28);
        border-radius: var(--r2);
        padding: 12px 16px;
        font-size: 12px;
        color: var(--char2);
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .pedido-notice svg {
        flex-shrink: 0;
      }

      
      .chat-badge {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        background: var(--red);
        color: #fff;
        font-size: 10px;
        font-family: var(--mono);
        font-weight: 700;
        padding: 2px 7px;
        border-radius: 10px;
        display: none;
        animation: badge-pulse 1.4s ease infinite;
        box-shadow: 0 0 0 0 rgba(181, 58, 42, 0.6);
      }
      @keyframes badge-pulse {
        0% {
          box-shadow: 0 0 0 0 rgba(181, 58, 42, 0.7);
        }
        60% {
          box-shadow: 0 0 0 7px rgba(181, 58, 42, 0);
        }
        100% {
          box-shadow: 0 0 0 0 rgba(181, 58, 42, 0);
        }
      }
      .ni#nav-chat.has-notif {
        background: rgba(181, 58, 42, 0.1);
        box-shadow: inset 0 0 0 1.5px rgba(181, 58, 42, 0.5) !important;
        color: var(--text-on-dark) !important;
        animation: nav-shake 0.4s ease 0.2s;
      }
      @keyframes nav-shake {
        0%,
        100% {
          transform: translateX(0);
        }
        25% {
          transform: translateX(-3px);
        }
        75% {
          transform: translateX(3px);
        }
      }

      
      @keyframes chat-toast-in {
        from {
          transform: translateX(20px) translateY(10px);
          opacity: 0;
        }
        to {
          transform: none;
          opacity: 1;
        }
      }

      
      .sound-toggle {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        background: var(--parch);
        border: 1.5px solid var(--parch3);
        border-radius: 20px;
        cursor: pointer;
        font-size: 10px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--char3);
        font-family: var(--sans);
        transition: all 0.15s;
        user-select: none;
      }
      .sound-toggle:hover {
        border-color: var(--gold-ln);
        color: var(--char);
      }
      .sound-toggle.active {
        border-color: var(--gold-ln);
        color: var(--gold);
        background: var(--gold-bg);
      }
      .sound-toggle svg {
        width: 13px;
        height: 13px;
      }

      

      
      .anuncio-card {
        border: var(--card-border);
        border-radius: var(--card-radius);
        padding: 0;
        margin-bottom: 12px;
        background: var(--card-bg);
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(44, 36, 24, 0.05);
        transition: box-shadow 0.15s;
      }
      .anuncio-card:hover {
        box-shadow: 0 3px 14px rgba(44, 36, 24, 0.09);
      }
      .anuncio-head {
        padding: 12px 16px;
        background: var(--parch2);
        border-bottom: 1.5px solid var(--parch3);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }
      .anuncio-head-left {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
      }
      .anuncio-prioridad {
        font-size: 15px;
        line-height: 1;
      }
      .anuncio-titulo {
        font-family: var(--serif);
        font-size: 15px;
        font-weight: 500;
        color: var(--char);
      }
      .anuncio-body {
        padding: 14px 16px;
      }
      .anuncio-texto {
        font-size: 13px;
        color: var(--char2);
        line-height: 1.7;
      }
      .anuncio-meta {
        font-size: 10px;
        color: var(--char2);
        font-family: var(--mono);
        margin-top: 10px;
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
      }
      .anuncio-card.pinned {
        border-left: 3px solid var(--gold);
      }
      .anuncio-card.urgente {
        border-left: 3px solid var(--red);
      }
      .anuncios-empty {
        text-align: center;
        padding: 60px;
        color: var(--char3);
        font-size: 13px;
      }
      .pin-toggle {
        font-size: 14px;
        cursor: pointer;
        opacity: 0.5;
        transition: opacity 0.15s;
      }
      .pin-toggle:hover,
      .pin-toggle.on {
        opacity: 1;
        filter: drop-shadow(0 1px 3px rgba(200, 98, 42, 0.4));
      }

      .kpi-sub {
        font-size: 10px;
        color: var(--char2);
        margin-top: 3px;
        font-family: var(--mono);
      }

      
      
      #urgente-banner {
        position: fixed;
        top: 0;
        left: var(--sidebar);
        right: 0;
        z-index: 1000;
        display: none;
        flex-direction: column;
        overflow: hidden;
        pointer-events: none;
        box-shadow: 0 4px 24px rgba(158, 26, 10, 0.35);
      }
      .urgente-item {
        display: flex;
        align-items: center;
        gap: 14px;
        background: linear-gradient(90deg, #5a0a04 0%, #8a1a08 30%, #b02010 100%);
        color: #fff;
        padding: 0 20px;
        height: 0;
        overflow: hidden;
        pointer-events: all;
        border-bottom: 2px solid rgba(255,80,50,.4);
        transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
        opacity: 0;
        position: relative;
      }
      .urgente-item.visible {
        height: 58px;
        opacity: 1;
        animation: urgente-shake-in .4s cubic-bezier(.36,.07,.19,.97) both;
      }
      .urgente-item.closing {
        height: 0 !important;
        opacity: 0;
      }
      @keyframes urgente-shake-in {
        0%  { transform: translateX(-4px); }
        20% { transform: translateX(4px); }
        40% { transform: translateX(-3px); }
        60% { transform: translateX(3px); }
        80% { transform: translateX(-1px); }
        100%{ transform: translateX(0); }
      }

      
      .urgente-item::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 60%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.06),
          transparent
        );
        animation: urgente-shimmer 3s ease infinite;
        pointer-events: none;
      }
      @keyframes urgente-shimmer {
        0% {
          left: -60%;
        }
        100% {
          left: 160%;
        }
      }
      @keyframes urgente-pulse {
        0%,
        100% {
          opacity: 1;
          transform: scale(1);
        }
        50% {
          opacity: 0.6;
          transform: scale(0.85);
        }
      }

      .urgente-dot {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: #ff4422;
        flex-shrink: 0;
        animation: urgente-pulse .7s ease infinite;
        box-shadow: 0 0 0 0 rgba(255,68,34,.8);
      }
      @keyframes urgente-pulse {
        0%   { box-shadow: 0 0 0 0 rgba(255,68,34,.9); transform: scale(1); }
        50%  { box-shadow: 0 0 0 8px rgba(255,68,34,0); transform: scale(1.2); }
        100% { box-shadow: 0 0 0 0 rgba(255,68,34,0); transform: scale(1); }
      }
      .urgente-label {
        font-size: 9px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        font-weight: 700;
        opacity: 0.7;
        flex-shrink: 0;
        font-family: var(--mono);
      }
      .urgente-sep {
        width: 1px;
        height: 16px;
        background: rgba(255, 255, 255, 0.2);
        flex-shrink: 0;
      }
      .urgente-body {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .urgente-titulo {
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: var(--serif);
        text-shadow: 0 1px 4px rgba(0,0,0,.3);
      }
      .urgente-texto {
        font-size: 11px;
        opacity: 0.7;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
      }
      .urgente-actions {
        display: flex;
        gap: 8px;
        flex-shrink: 0;
        align-items: center;
      }
      .urgente-btn-done {
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.3);
        padding: 5px 14px;
        border-radius: 20px;
        font-family: var(--sans);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
      }
      .urgente-btn-done:hover {
        background: rgba(255, 255, 255, 0.28);
        border-color: rgba(255, 255, 255, 0.5);
        transform: scale(1.02);
      }
      .urgente-btn-close {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
        cursor: pointer;
        line-height: 1;
        transition: all 0.2s;
        flex-shrink: 0;
      }
      .urgente-btn-close:hover {
        background: rgba(255, 255, 255, 0.25);
        color: #fff;
        transform: scale(1.1);
      }

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

      
      
      .venc-chip {
        appearance: none;
        border: 1px solid var(--parch3);
        background: transparent;
        color: var(--char2);
        border-radius: 999px;
        padding: 5px 12px;
        font-family: var(--sans);
        font-size: 11.5px;
        cursor: pointer;
        transition: all 0.15s ease;
        white-space: nowrap;
      }
      .venc-chip:hover {
        border-color: var(--gold-ln);
        color: var(--char);
      }
      .venc-chip.active {
        background: var(--char);
        border-color: var(--char);
        color: #efe7d8;
        box-shadow: 0 4px 12px rgba(26, 20, 16, 0.12);
      }
      

      
      .venc-row {
        display: grid;
        grid-template-columns: 52px 1fr 140px 110px 56px;
        gap: 14px;
        align-items: center;
        padding: 10px 16px;
        border-bottom: 1px solid var(--parch3);
        transition: background .12s;
      }
      .venc-row:last-child { border-bottom: none; }
      .venc-row:hover { background: rgba(26,20,16,.02); }

      

      

      
      #venc-asistente:empty { display: none; }
      .va-card {
        display: grid;
        grid-template-columns: 44px 1fr;
        grid-template-rows: auto auto;
        gap: 0 14px;
        border-radius: var(--r2);
        border: 1.5px solid transparent;
        padding: 16px 18px;
        position: relative;
        overflow: hidden;
      }
      .va-card::before {
        content: "";
        position: absolute; left: 0; top: 0; bottom: 0;
        width: 4px; border-radius: 4px 0 0 4px;
      }
      .va-card.ok      { background: rgba(45,122,79,.06);  border-color: rgba(45,122,79,.18);  }
      .va-card.atencion{ background: rgba(200,98,42,.07);  border-color: rgba(200,98,42,.22);  }
      .va-card.critico { background: rgba(181,58,42,.07);  border-color: rgba(181,58,42,.22);  }
      .va-card.ok::before       { background: var(--green); }
      .va-card.atencion::before { background: var(--amber); }
      .va-card.critico::before  { background: var(--red);   }

      .va-icon {
        grid-row: 1 / 3;
        width: 40px; height: 40px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0; align-self: center;
      }
      .va-icon.ok       { background: rgba(45,122,79,.12);  color: var(--green); }
      .va-icon.atencion { background: rgba(200,98,42,.12);  color: var(--amber); }
      .va-icon.critico  { background: rgba(181,58,42,.12);  color: var(--red);   }

      .va-body { display: flex; flex-direction: column; gap: 4px; }
      .va-titulo {
        font-size: 13px; font-weight: 700;
        color: var(--char); font-family: var(--sans); line-height: 1.3;
      }
      .va-cuerpo {
        font-size: 12px; color: var(--char2);
        font-family: var(--sans); line-height: 1.5;
      }
      .va-prods {
        display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px;
      }
      .va-prod-pill {
        font-size: 10px; font-weight: 600; font-family: var(--mono);
        padding: 2px 8px; border-radius: 999px; border: 1px solid transparent;
      }
      .va-prod-pill.critico { background: rgba(181,58,42,.1); border-color: rgba(181,58,42,.28); color: var(--red); }
      .va-prod-pill.atencion{ background: rgba(200,98,42,.1); border-color: rgba(200,98,42,.28); color: var(--amber); }

      .va-foot {
        grid-column: 2;
        display: flex; align-items: center; justify-content: space-between;
        gap: 10px; margin-top: 10px; flex-wrap: wrap;
      }
      .va-ts {
        font-size: 10px; color: var(--char3);
        font-family: var(--mono);
      }
      .va-btn-ok {
        font-size: 11px; font-weight: 600; font-family: var(--sans);
        padding: 5px 14px; border-radius: 999px; border: 1.5px solid;
        cursor: pointer; transition: background .12s, color .12s;
        background: transparent;
      }
      .va-card.ok       .va-btn-ok { border-color: rgba(45,122,79,.4);  color: var(--green); }
      .va-card.atencion .va-btn-ok { border-color: rgba(200,98,42,.4); color: var(--amber); }
      .va-card.critico  .va-btn-ok { border-color: rgba(181,58,42,.4); color: var(--red);   }
      .va-card.ok       .va-btn-ok:hover { background: rgba(45,122,79,.1);  }
      .va-card.atencion .va-btn-ok:hover { background: rgba(200,98,42,.1); }
      .va-card.critico  .va-btn-ok:hover { background: rgba(181,58,42,.1); }

      
      .venc-descartar-overlay {
        position: fixed; inset: 0; z-index: 99990;
        background: rgba(245,239,230,.10);
        backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        display: flex; align-items: center; justify-content: center;
        padding: 20px;
      }
      .venc-descartar-box {
        background: var(--parch); border-radius: 16px; padding: 24px 20px;
        width: 320px; max-width: 92vw; box-shadow: 0 8px 32px rgba(26,20,16,.22);
        display: flex; flex-direction: column; gap: 12px;
      }
      .venc-descartar-title { font-size: 15px; font-weight: 700; color: var(--char); font-family: var(--sans); }
      .venc-descartar-prod {
        font-size: 12px; color: var(--char3); font-family: var(--mono);
        background: rgba(26,20,16,.04); border-radius: 8px; padding: 7px 10px;
      }
      .venc-descartar-opts { display: flex; flex-direction: column; gap: 6px; }
      .venc-descartar-btn {
        display: flex; align-items: center; gap: 10px; padding: 11px 14px;
        border-radius: 10px; border: 1.5px solid transparent;
        background: rgba(26,20,16,.04); font-size: 13px; font-weight: 500;
        font-family: var(--sans); color: var(--char); cursor: pointer;
        transition: background .12s, border-color .12s; text-align: left;
      }
      .venc-descartar-btn.critico:hover { background: rgba(181,58,42,.08); border-color: rgba(181,58,42,.3); color: var(--red); }
      .venc-descartar-btn.ok:hover      { background: rgba(45,122,79,.08);  border-color: rgba(45,122,79,.3);  color: var(--green); }
      .venc-descartar-btn.error:hover   { background: rgba(26,20,16,.08);   border-color: rgba(26,20,16,.2);   color: var(--char2); }
      .venc-descartar-cancel {
        background: none; border: none; color: var(--char3); font-size: 12px;
        cursor: pointer; padding: 4px 0; font-family: var(--sans);
        align-self: center; text-decoration: underline;
      }
      .venc-descartar-cancel:hover { color: var(--char); }

      
      @media (max-width: 960px) {
        .venc-row { grid-template-columns: 48px 1fr 110px auto auto; gap: 10px; }
      }
      @media (max-width: 640px) {
        .venc-row { grid-template-columns: 44px 1fr auto auto; }
      }

      

      
      #menu-toggle {
        width: 38px;
        height: 38px;
        background: none;
        border: 1.5px solid var(--parch3);
        border-radius: var(--r);
        color: var(--char);
        cursor: pointer;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        flex-shrink: 0;
        transition:
          border-color 0.15s,
          background 0.15s;
      }
      #menu-toggle:hover {
        border-color: var(--gold);
        background: var(--gold-bg);
      }
      #menu-toggle span {
        display: block;
        width: 16px;
        height: 1.5px;
        background: var(--char);
        border-radius: 2px;
        transition: all 0.25s ease;
      }
      #menu-toggle.open span:nth-child(1) {
        transform: translateY(6.5px) rotate(45deg);
      }
      #menu-toggle.open span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
      }
      #menu-toggle.open span:nth-child(3) {
        transform: translateY(-6.5px) rotate(-45deg);
      }

      
      #sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(26, 20, 16, 0.6);
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        z-index: 190;
      }

      
      @media (max-width: 960px) {
        #menu-toggle {
          display: flex;
        }

        #sidebar {
          position: fixed;
          left: -270px;
          top: 0;
          bottom: 0;
          z-index: 200;
          width: 260px !important;
          transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          box-shadow: none;
        }
        #sidebar.open {
          left: 0;
          box-shadow: 4px 0 32px rgba(26, 20, 16, 0.35);
        }
        #sidebar-backdrop.open {
          display: block;
        }

        #main {
          margin-left: 0 !important;
        }

        #urgente-banner {
          left: 0;
        }

        .topbar {
          padding: 0 14px;
          gap: 10px;
        }
        .topbar-right {
          gap: 8px;
        }

        .page {
          padding: 36px 18px 80px !important;
        }

        /* Page header */
        .ph {
          flex-wrap: wrap;
          gap: 10px;
        }

        /* Stats row: 2 columnas */

        /* KPI row: 2 columnas */
        .kpi-row {
          grid-template-columns: repeat(2, 1fr) !important;
        }

        /* Charts: una columna */
        .chart-card.span2 {
          grid-column: span 1;
        }

        /* Dual stock */

        /* Forms */
        .form-row {
          grid-template-columns: 1fr;
        }

        /* Tables: scroll horizontal */
        .table-wrap {
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
        }
        .table-wrap table {
          min-width: 560px;
        }

        /* Pedido table */
        .pedido-table-wrap {
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
        }
        .pedido-table-wrap table {
          min-width: 560px;
        }

        /* Modal */
        .modal {
          width: 94vw;
          max-width: 94vw;
        }

        /* Transfer */

        /* Chat */
        .chat-topbar {
          padding: 12px 16px;
          flex-wrap: wrap;
          gap: 8px;
        }
        .chat-body {
          padding: 16px;
        }
        .chat-footer {
          padding: 10px 16px;
        }
        .chat-msg {
          max-width: 80%;
        }

        /* Stats period buttons */
        .ph > div:last-child {
          flex-wrap: wrap;
        }

        /* ── DASHBOARD RESPONSIVE ── */

        /* Header */

        /* KPIs: 2 columnas */

        /* Acciones rápidas: 2×2 */

        /* Body grid: 1 columna */

        /* Tools grid: 1 columna */

        /* Panel heads: comprimir */

        /* Tabla stock crítico */

        /* Sesión / ventas del día */

        /* Notas y tareas */
      }

      

      
      @media (max-width: 600px) {
        /* Nota + Tareas: apilar en mobile */
        #page-dashboard > div[style*="grid-template-columns:1fr 1fr"] {
          grid-template-columns: 1fr !important;
        }
        .topbar {
          padding: 0 10px;
          gap: 8px;
        }
        /* Mobile: en la topbar solo se ve logo WAGON/Engine + dropdown del menú.
           Todas las acciones de la derecha (Venta rápida, local, usuario, chrome switch,
           rt-pill, logout) quedan accesibles desde el dropdown de secciones.
           !important necesario porque .topbar-right { display:flex } está declarado
           sin media query más adelante en el archivo (línea ~11806) y gana por orden. */
        .topbar-right {
          display: none !important;
        }
        /* Menú de secciones alineado a la derecha (topbar-right oculto en mobile) */
        .tb-nav-center {
          justify-content: flex-end !important;
        }

        .page {
          padding: 32px 12px 72px !important;
        }

        /* Page header full width */
        .ph {
          flex-direction: column;
          align-items: flex-start;
        }
        .ph .btn-prime,
        .ph .btn-ghost {
          width: 100%;
          justify-content: center;
        }

        /* Stats: 2 columnas compactas */

        /* KPI */
        .kpi-row {
          grid-template-columns: repeat(2, 1fr) !important;
        }

        /* Tables */
        .table-wrap table {
          min-width: 480px;
        }

        /* Modal: slide desde abajo */
        #modal-overlay {
        position: fixed;
        inset: 0;
        background:
          radial-gradient(120% 120% at 50% 50%, rgba(200, 98, 42, 0.08) 0%, rgba(200, 98, 42, 0) 58%),
          linear-gradient(180deg, rgba(24, 18, 14, 0.56), rgba(24, 18, 14, 0.48));
        z-index: 9000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
        .modal {
          width: 100vw;
          max-width: 100vw;
          height: auto;
          min-height: min(92dvh, 920px);
          max-height: min(92dvh, 92vh);
          border-radius: 24px 24px 0 0;
          animation: slide-up 0.25s cubic-bezier(0.4, 0, 0.2, 1);
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
        }
        .modal-head {
          padding: 22px 18px 16px;
        }
        .modal-head h3 {
        font-family: var(--sans);
        font-size: 20px;
        font-weight: 500;
        letter-spacing: 0.01em;
        color: var(--char);
        text-align: center;
      }
        .modal-body {
          padding: 18px;
          overflow: visible;
          min-height: auto;
          flex: 0 0 auto;
        }
        .modal-foot {
          padding: 12px 18px 16px;
        }
        @keyframes slide-up {
          from {
            transform: translateY(100%);
            opacity: 0.5;
          }
          to {
            transform: none;
            opacity: 1;
          }
        }

        /* Forms */
        .form-row {
          grid-template-columns: 1fr;
        }
        .qty-row {
          flex-wrap: wrap;
        }
        .qty-row select {
          width: 100%;
        }

        /* Mov filters: scroll horizontal */
        .mov-filter {
          flex-shrink: 0;
        }

        /* Chat */
        .chat-topbar {
          padding: 10px 12px;
        }
        .chat-topbar h2 {
          font-size: 15px;
        }
        .chat-topbar > div:last-child {
          flex-wrap: wrap;
          gap: 6px;
        }
        .chat-body {
          padding: 12px;
        }
        .chat-footer {
          padding: 8px 12px;
        }
        .chat-msg {
          max-width: 88%;
        }
        /* Ocultar tags de locales en chat topbar */
        .chat-topbar .tag {
          display: none;
        }

        /* WA box dashboard */

        /* Pedido */
        .pedido-header-box {
          grid-template-columns: 1fr 1fr;
          gap: 12px;
        }
        .pedido-whatsapp-box {
          flex-direction: column;
          align-items: stretch;
        }
        .pedido-whatsapp-box > div:last-child {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
        }
        .pedido-whatsapp-box .btn-ghost,
        .pedido-whatsapp-box .btn-prime {
          flex: 1;
          justify-content: center;
          font-size: 10px;
        }
        .pedido-wa-input {
          width: 100%;
        }

        /* Transfer */

        /* Urgente banner */
        .urgente-titulo {
          font-size: 11.5px;
        }
        .urgente-label {
          display: none;
        }
        .urgente-sep {
          display: none;
        }

        /* Vencimientos */

        /* Precios */

        /* Login mobile — manejado por breakpoints en la sección login */

        /* Mov row más compacto */

        /* Rev card */
        .rev-head {
          flex-direction: column;
          gap: 8px;
        }
        .rev-head > div:last-child {
          align-self: flex-start;
        }

        /* ph-actions en mobile: full width */
      }

      
      .vr-modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 9000;
        background: rgba(35, 29, 26, 0.52);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
      }
      .vr-modal-shell {
        width: min(1120px, 96vw);
        height: min(90vh, 740px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: 20px;
        border: 1px solid rgba(26, 20, 16, 0.10);
        background: #ffffff;
        box-shadow: 0 20px 60px rgba(26, 20, 16, 0.18);
      }
      .vr-modal-head {
        padding: 16px 22px;
        border-bottom: 1px solid rgba(26, 20, 16, 0.08);
        background: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
      }
      .vr-modal-title {
        font-family: var(--serif);
        font-size: 22px;
        font-weight: 600;
        color: var(--char);
        letter-spacing: -0.01em;
        line-height: 1.1;
      }
      .vr-modal-sub {
        font-size: 10px;
        color: var(--char3);
        margin-top: 4px;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        font-weight: 600;
        font-family: var(--mono);
      }
      .vr-modal-close {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        border: 1px solid rgba(26, 20, 16, 0.10);
        background: #FAF8F5;
        color: var(--char2);
        font-size: 18px;
        cursor: pointer;
        transition: background 0.15s, border-color 0.15s;
      }
      .vr-modal-close:hover {
        background: rgba(26, 20, 16, 0.06);
        border-color: rgba(26, 20, 16, 0.16);
      }
      .vr-layout {
        display: flex;
        flex: 1;
        min-height: 0;
        overflow: hidden;
      }
      .vr-left {
        flex: 0 0 min(46%, 500px);
        min-width: 320px;
        display: flex;
        flex-direction: column;
        border-right: 1px solid rgba(26, 20, 16, 0.08);
        background: #FAF8F5;
      }
      .vr-right {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: #ffffff;
      }
      .vr-search-block {
        padding: 12px 16px;
        border-bottom: 1px solid rgba(26, 20, 16, 0.08);
        background: #ffffff;
      }
      .vr-search-input {
        width: 100%;
        box-sizing: border-box;
        background: #FAF8F5;
        border: 1px solid rgba(26, 20, 16, 0.12);
        border-radius: 12px;
        color: var(--char);
        padding: 10px 14px;
        font-size: 13px;
        font-family: var(--sans);
        outline: none;
        transition: border-color 0.15s;
      }
      .vr-search-input:focus {
        border-color: rgba(198, 96, 42, 0.50);
        background: #fff;
      }
      .vr-scan-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
      }
      .vr-scan-indicator {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        border: 1px solid rgba(26, 20, 16, 0.10);
        background: #FAF8F5;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        flex-shrink: 0;
      }
      .vr-scan-hint {
        font-size: 10px;
        color: var(--char3);
        font-family: var(--mono);
        letter-spacing: 0.03em;
      }
      .vr-products-wrap {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 12px 16px;
      }
      .vr-prod-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 8px;
        padding: 2px;
        margin-bottom: 0;
      }
      .vr-prod-card {
        background: var(--card-bg);
        border: var(--card-border-thin);
        border-radius: var(--card-radius);
        padding: 12px 14px;
        cursor: pointer;
        transition: border-color 0.15s, background 0.15s;
        user-select: none;
      }
      .vr-prod-card:hover {
        border-color: rgba(200, 98, 42, 0.45);
        background: rgba(200, 98, 42, 0.06);
      }
      .vr-prod-card.agotado {
        opacity: 0.4;
        pointer-events: none;
      }
      .vr-prod-name {
        font-size: 14px;
        font-weight: 700;
        color: var(--char);
        margin-bottom: 4px;
        letter-spacing: -0.01em;
      }
      .vr-prod-precio {
        font-size: 13px;
        color: var(--gold);
        font-weight: 700;
      }
      .vr-prod-stock {
        font-size: 11px;
        color: var(--char2);
        margin-top: 2px;
      }

      .vr-cart-wrap {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 14px 16px 10px;
      }
      .vr-cart-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
      }
      .vr-cart-title {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--char);
      }
      .vr-items-count {
        font-size: 12px;
        color: var(--gold);
        font-weight: 700;
      }
      .vr-carrito {
        border: 1px solid rgba(26, 20, 16, 0.08);
        border-radius: 14px;
        overflow: hidden;
        margin-bottom: 0;
        background: #ffffff;
      }
      .vr-carrito-empty {
        padding: 24px;
        text-align: center;
        font-size: 12px;
        color: var(--char3);
      }
      .vr-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto auto;
        gap: 10px;
        align-items: center;
        padding: 10px 12px;
        border-bottom: 1px solid rgba(26, 20, 16, 0.07);
        transition: background 0.12s;
      }
      .vr-item:last-child {
        border-bottom: none;
      }
      .vr-item:hover {
        background: rgba(200, 98, 42, 0.05);
      }
      .vr-item-name {
        font-size: 14px;
        font-weight: 700;
        color: var(--char);
        letter-spacing: -0.01em;
      }
      .vr-item-tag {
        font-size: 11px;
        color: var(--char2);
        margin-top: 3px;
        font-weight: 500;
      }
      .vr-qty-wrap {
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .vr-qty-input {
        width: 70px;
        background: #FAF8F5;
        border: 1px solid rgba(26, 20, 16, 0.12);
        color: var(--char);
        padding: 5px 7px;
        font-size: 13px;
        font-weight: 600;
        outline: none;
        border-radius: 10px;
        text-align: right;
        transition: border-color 0.15s;
      }
      .vr-qty-input:focus {
        border-color: rgba(198, 96, 42, 0.50);
        background: #fff;
      }
      .vr-qty-unit {
        font-size: 12px;
        color: var(--char2);
        font-weight: 500;
      }
      .vr-uds-input {
        width: 48px !important;
      }
      .vr-qty-sep {
        font-size: 11px;
        color: var(--parch3);
        font-weight: 400;
        user-select: none;
      }
      .vr-item-subtotal {
        font-family: var(--mono);
        font-size: 15px;
        font-weight: 700;
        color: var(--char);
        white-space: nowrap;
        min-width: 76px;
        text-align: right;
        letter-spacing: -0.02em;
      }
      .vr-item-del {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid transparent;
        color: var(--char3);
        cursor: pointer;
        font-size: 15px;
        border-radius: 999px;
        transition: color 0.15s, border-color 0.15s, background 0.15s;
        flex-shrink: 0;
      }
      .vr-item-del:hover {
        color: var(--red);
        border-color: rgba(181, 58, 42, 0.3);
        background: rgba(181, 58, 42, 0.08);
      }

      .vr-total-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 16px;
        background: var(--gold);
        border-top: none;
        border-bottom: none;
      }
      .vr-total-label {
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.80);
        font-weight: 700;
        font-family: var(--mono);
        margin-bottom: 4px;
      }
      .vr-total-num {
        font-family: var(--mono);
        font-size: 36px;
        font-weight: 500;
        color: #fff;
        letter-spacing: -0.03em;
        line-height: 1;
        display: inline-block;
      }
      @keyframes vrPriceBump {
        0%   { transform: translateY(6px); opacity: 0.4; }
        100% { transform: translateY(0);   opacity: 1; }
      }
      .vr-price-bump {
        animation: vrPriceBump .22s cubic-bezier(.25,.46,.45,.94);
      }
      .vr-total-pts {
        font-family: var(--mono);
        font-size: 11px;
        color: rgba(255, 255, 255, 0.72);
        margin-top: 6px;
        font-weight: 500;
      }
      .vr-panel {
        padding: 12px 16px;
        border-top: 1px solid rgba(26, 20, 16, 0.07);
        background: #ffffff;
        flex-shrink: 0;
      }
      .vr-panel-title {
        font-size: 10px;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        color: var(--char3);
        font-weight: 600;
        font-family: var(--mono);
        margin-bottom: 9px;
      }
      .vr-panel-sub {
        font-weight: 400;
        opacity: 0.7;
        font-family: var(--sans);
        letter-spacing: 0;
        text-transform: none;
        font-size: 10px;
      }
      .vr-cli-select {
        width: 100%;
        background: #FAF8F5;
        border: 1px solid rgba(26, 20, 16, 0.12);
        color: var(--char);
        font-family: var(--sans);
        font-size: 12px;
        padding: 6px 8px;
        outline: none;
        border-radius: 10px;
        transition: border-color 0.15s;
      }
      .vr-cli-select:focus {
        border-color: rgba(198, 96, 42, 0.50);
      }
      .vr-inline {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        align-items: center;
      }
      .vr-saldo-line {
        margin-top: 7px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 11px;
        color: var(--char2);
        font-family: var(--mono);
      }
      .vr-saldo-line strong {
        color: var(--green);
        font-size: 12px;
        letter-spacing: -0.01em;
      }
      .vr-caja-toggle {
        margin-top: 7px;
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 11px;
        color: var(--char2);
        user-select: none;
      }
      .vr-caja-toggle input {
        accent-color: var(--green);
      }
      .vr-caja-help {
        font-size: 10px;
        color: var(--char3);
        font-family: var(--mono);
      }
      .vr-money-wrap {
        display: flex;
        align-items: center;
        flex: 1;
        min-width: 0;
        border: 1px solid rgba(26, 20, 16, 0.11);
        border-radius: 999px;
        background: #FAF8F5;
        padding: 0 14px 0 12px;
        transition: border-color 0.15s, background 0.15s;
        overflow: hidden;
      }
      .vr-money-wrap:focus-within {
        border-color: rgba(198, 96, 42, 0.50);
        background: #fff;
      }
      .vr-money-symbol {
        font-size: 12px;
        color: var(--char3);
        font-family: var(--mono);
        margin-right: 4px;
        flex-shrink: 0;
      }
      .vr-money-input {
        flex: 1;
        min-width: 0;
        width: 100%;
        background: transparent;
        border: none;
        color: var(--char);
        padding: 7px 0;
        font-family: var(--mono);
        font-size: 12px;
        outline: none;
        text-align: left;
      }
      .vr-actions {
        padding: 12px 16px;
        border-top: 1px solid rgba(26, 20, 16, 0.08);
        display: flex;
        gap: 8px;
        flex-shrink: 0;
        background: #ffffff;
      }
      .vr-actions .btn-prime {
        background: var(--gold);
        border: 1px solid var(--gold);
        border-left: 1px solid var(--gold);
        border-radius: 999px;
        box-shadow: 0 2px 10px rgba(198, 96, 42, 0.30);
        color: #ffffff;
        letter-spacing: 0.18em;
      }
      .vr-actions .btn-prime::before { display: none; }
      .vr-actions .btn-prime:hover {
        filter: brightness(1.08);
        background: var(--gold);
        border-color: var(--gold);
        border-left-color: var(--gold);
        box-shadow: 0 4px 16px rgba(198, 96, 42, 0.38);
      }
      .vr-actions .btn-prime:disabled {
        opacity: 0.45;
        filter: none;
        box-shadow: none;
      }
      .vr-actions .btn-ghost {
        background: #ffffff;
        border: 1px solid rgba(26, 20, 16, 0.12);
        border-radius: 999px;
        box-shadow: none;
        color: var(--char2);
      }
      .vr-actions .btn-ghost:hover {
        background: #FAF8F5;
        border-color: rgba(26, 20, 16, 0.20);
        color: var(--char);
      }

      @media (max-width: 960px) {
        .vr-modal-shell {
          width: 100%;
          height: min(94vh, 860px);
        }
        .vr-layout {
          flex-direction: column;
        }
        .vr-left {
          flex: 0 0 auto;
          width: 100%;
          min-width: 0;
          border-right: none;
          border-bottom: 1px solid rgba(26, 20, 16, 0.08);
        }
        .vr-products-wrap {
          max-height: 240px;
        }
      }
      @media (max-width: 640px) {
        .vr-modal-shell {
          width: 100vw;
          height: 100vh;
          border-radius: 0;
          border: none;
        }
        .vr-modal-head {
          padding: 12px 14px;
        }
        .vr-modal-title {
          font-size: 19px;
        }
        .vr-layout {
          min-height: 0;
        }
        .vr-search-block,
        .vr-products-wrap,
        .vr-cart-wrap,
        .vr-panel,
        .vr-actions {
          padding-left: 12px;
          padding-right: 12px;
        }
        .vr-products-wrap {
          max-height: 200px;
          padding-top: 10px;
          padding-bottom: 10px;
        }
        .vr-prod-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 7px;
        }
        .vr-prod-card {
          padding: 10px 11px;
        }
        .vr-prod-name {
          font-size: 13px;
        }
        .vr-total-row {
          padding: 12px;
        }
        .vr-total-num {
          font-size: 30px;
        }
        .vr-item {
          grid-template-columns: minmax(0, 1fr) auto;
          gap: 8px;
          align-items: start;
        }
        .vr-qty-wrap {
          grid-column: 1;
        }
        .vr-item-subtotal,
        .vr-item-del {
          grid-row: 1;
        }
        .vr-item-subtotal {
          grid-column: 2;
          font-size: 14px;
          min-width: 58px;
        }
        .vr-item-del {
          grid-column: 2;
          margin-top: 22px;
          justify-self: end;
        }
      }

      
      #btn-venta-rapida-float {
        position: fixed;
        bottom: 24px;
        right: 24px;
        z-index: 500;
        width: 56px;
        height: 56px;
        background: linear-gradient(135deg, var(--gold), #e8924a);
        border: none;
        border-radius: 50%;
        display: none;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 6px 24px rgba(200, 98, 42, 0.45);
        transition: all 0.2s;
        color: #fff;
      }
      #btn-venta-rapida-float:hover {
        transform: scale(1.08);
        box-shadow: 0 8px 30px rgba(200, 98, 42, 0.55);
      }
      #btn-venta-rapida-float svg {
        width: 24px;
        height: 24px;
      }


      
      .update-banner {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99999;
        background: linear-gradient(
          135deg,
          #1a2a1a 0%,
          #1a3320 50%,
          #1a2a1a 100%
        );
        border-bottom: 2px solid var(--green);
        padding: 0;
        animation: updateSlideDown 0.35s ease-out;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
      }
      @keyframes updateSlideDown {
        from {
          transform: translateY(-100%);
          opacity: 0;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }
      .update-banner-inner {
        max-width: 900px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 20px;
      }
      .update-icon {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(45, 122, 79, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #5be88e;
      }
      .update-text {
        flex: 1;
        min-width: 0;
      }
      .update-text span {
        color: #d0f0d8;
        font-family: var(--sans);
        font-size: 13px;
        font-weight: 500;
      }
      .update-progress-bar {
        margin-top: 6px;
        height: 6px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 3px;
        overflow: hidden;
      }
      .update-progress-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--green), #5be88e);
        border-radius: 3px;
        transition: width 0.3s ease;
      }
      .update-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
      }
      .update-btn-primary {
        background: var(--green);
        color: #fff;
        border: none;
        padding: 7px 18px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
        font-family: var(--sans);
        cursor: pointer;
        transition: all 0.15s;
      }
      .update-btn-primary:hover {
        background: #38975f;
        transform: scale(1.03);
      }
      .update-btn-install {
        background: linear-gradient(135deg, var(--gold), #e8924a);
        color: #fff;
        border: none;
        padding: 7px 18px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
        font-family: var(--sans);
        cursor: pointer;
        animation: updatePulse 2s infinite;
        transition: all 0.15s;
      }
      .update-btn-install:hover {
        transform: scale(1.05);
      }
      @keyframes updatePulse {
        0%,
        100% {
          box-shadow: 0 0 0 0 rgba(200, 98, 42, 0.4);
        }
        50% {
          box-shadow: 0 0 0 8px rgba(200, 98, 42, 0);
        }
      }
      .update-btn-close {
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.4);
        font-size: 15px;
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 4px;
        transition: all 0.15s;
      }
      .update-btn-close:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
      }
      
      .update-banner ~ #app .topbar,
      .update-banner ~ #app #sidebar {
        transition: top 0.35s ease;
      }
    
      


      
      #urgente-flash {
        position: fixed;
        bottom: 0; left: var(--sidebar); right: 0;
        height: 0;
        z-index: 9790;
        pointer-events: none;
        background: linear-gradient(90deg, #8a0a04, #cc1a0a, #8a0a04);
        background-size: 200% 100%;
        opacity: 0;
        transition: height .35s ease, opacity .35s ease;
      }
      
      @media (max-width: 960px) {
        #urgente-flash { left: 0; }
      }
      #urgente-flash.visible {
        height: 4px;
        opacity: 1;
        animation: urgente-bar-pulse 2s ease infinite,
                   urgente-bar-slide 3s linear infinite;
      }
      @keyframes urgente-bar-pulse {
        0%, 100% { opacity: 1; }
        50%      { opacity: .5; }
      }
      @keyframes urgente-bar-slide {
        0%   { background-position: 0% 0%; }
        100% { background-position: 200% 0%; }
      }

      
      
      #changelog-overlay {
        position: fixed; inset: 0;
        background: rgba(10,8,7,.64);
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        z-index: 9600;
        display: none; align-items: center; justify-content: center;
        padding: 20px;
      }
      #changelog-overlay.open { display: flex; }

      #changelog-modal {
        background: var(--parch);
        border: 1.5px solid var(--parch3);
        border-radius: var(--r2);
        width: 480px; max-width: 100%;
        max-height: 80vh;
        overflow: hidden;
        display: flex; flex-direction: column;
        box-shadow: 0 24px 64px rgba(26,20,16,.35);
        animation: pop .2s ease;
      }
      .changelog-head {
        padding: 22px 24px 18px;
        border-bottom: 1.5px solid var(--parch3);
        background: linear-gradient(135deg, var(--leather) 0%, var(--leather2) 100%);
        position: relative; overflow: hidden;
      }
      .changelog-head::after {
        content: '';
        position: absolute; top: 0; right: 0;
        width: 160px; height: 100%;
        background: radial-gradient(ellipse at right, rgba(200,98,42,.2) 0%, transparent 65%);
      }
      .changelog-version {
        font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
        text-transform: uppercase; color: var(--gold); font-weight: 600;
        margin-bottom: 6px;
      }
      .changelog-title {
        font-family: var(--serif); font-size: 22px; font-weight: 500;
        color: var(--text-on-dark); line-height: 1.2;
      }
      .changelog-date {
        font-family: var(--mono); font-size: 10px;
        color: rgba(246,239,226,.4); margin-top: 4px;
      }
      .changelog-body {
        padding: 20px 24px; overflow-y: auto; flex: 1;
      }
      .changelog-item {
        display: flex; gap: 12px; align-items: flex-start;
        padding: 9px 0; border-bottom: 1px solid var(--parch3);
      }
      .changelog-item:last-child { border-bottom: none; }
      .changelog-icon {
        font-size: 15px; flex-shrink: 0; margin-top: 1px;
      }
      .changelog-item-text {
        font-size: 13px; color: var(--char2); line-height: 1.5;
      }
      .changelog-item-text b { color: var(--char); font-weight: 500; }
      .changelog-foot {
        padding: 14px 24px;
        border-top: 1.5px solid var(--parch3);
        display: flex; justify-content: flex-end; gap: 8px;
        background: var(--parch2);
      }

      
      
      .stock-expand-btn {
        width: 20px; height: 20px;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--parch2); border: 1.5px solid var(--parch3);
        border-radius: 999px; cursor: pointer; color: var(--char3);
        padding: 0;
        transition: transform .2s, border-color .15s, color .15s, background .15s;
        line-height: 1; flex-shrink: 0;
      }
      .stock-expand-btn:hover {
        border-color: var(--gold-ln);
        color: var(--gold);
      }
      .stock-expand-btn.open { transform: rotate(90deg); color: var(--gold); border-color: var(--gold-ln); }

      .stock-prod-name-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
      .stock-warn-badge {
        display: inline-flex; align-items: center; gap: 4px;
        font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em;
        color: var(--amber); background: rgba(200,98,42,.10);
        border: 1px solid rgba(200,98,42,.30);
        border-radius: 999px; padding: 2px 7px;
        white-space: nowrap; flex-shrink: 0;
      }
      .stock-lotes-row { display: none; }
      .stock-lotes-row.open { display: table-row; }
      .stock-lotes-cell {
        padding: 8px 14px 10px 38px !important;
        background: rgba(237, 228, 215, 0.48);
        border-bottom: 1px solid var(--parch3);
      }
      .lote-sub-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 0;
        border-bottom: 1px solid rgba(217, 204, 186, 0.74);
        font-size: 10px;
      }
      .lote-sub-row:last-child { border-bottom: none; }
      .lote-sub-icon { color: var(--char2); font-size: 10px; width: 12px; }
      .lote-sub-fecha {
        font-family: var(--mono); font-size: 9px;
        padding: 2px 8px; border-radius: 999px;
        border: 1px solid;
      }
      .lote-sub-dias { font-size: 9px; color: var(--char2); }
      .lote-sub-fifo {
        font-size: 8px; font-weight: 600; letter-spacing: .08em;
        color: var(--gold); font-family: var(--mono);
        background: rgba(200,98,42,.12); border: 1px solid rgba(200,98,42,.3);
        border-radius: 999px; padding: 2px 6px;
      }
      .lote-sub-qty {
        font-size: 10px; font-weight: 600; font-family: var(--mono);
        padding: 2px 7px; border-radius: 999px; border: 1px solid transparent;
        white-space: nowrap;
      }
      .lote-sub-qty-unknown { color: var(--char3); border-color: var(--parch3); }
      .lote-sub-recon {
        display: flex; align-items: center; gap: 5px;
        font-size: 10px; font-weight: 500; font-family: var(--mono);
        padding: 6px 12px; margin-top: 2px;
        border-top: 1px solid; opacity: 0.8;
      }

      
      .camada-card {
        background: var(--card-bg);
        border: var(--card-border);
        border-radius: var(--card-radius);
        overflow: hidden;
      }
      .camada-head {
        display: flex; align-items: center; gap: 12px;
        padding: 12px 16px;
        background: var(--parch2);
        border-bottom: 1.5px solid var(--parch3);
      }
      .camada-prod-name {
        font-family: var(--serif); font-size: 15px; font-weight: 500;
        color: var(--char); flex: 1;
      }
      .camada-prod-meta {
        font-size: 10px; color: var(--char2); font-family: var(--mono);
        display: flex; gap: 10px; align-items: center;
      }
      .camada-lotes {
        padding: 4px 0;
      }
      .camada-lote-row {
        display: flex; align-items: center; gap: 12px;
        padding: 9px 16px;
        border-bottom: 1px solid var(--parch3);
        transition: background .1s;
      }
      .camada-lote-row:last-child { border-bottom: none; }
      .camada-lote-row:hover { background: var(--parch2); }
      .camada-fifo-badge {
        font-size: 9px; font-weight: 700; letter-spacing: .1em;
        color: var(--gold); background: rgba(200,98,42,.12);
        border: 1px solid rgba(200,98,42,.3);
        border-radius: 6px; padding: 2px 6px; flex-shrink: 0;
        font-family: var(--mono);
      }
      .camada-fecha {
        font-family: var(--mono); font-size: 12px; font-weight: 500;
        min-width: 80px;
      }
      .camada-dias-badge {
        font-size: 10px; font-weight: 600; font-family: var(--mono);
        padding: 2px 9px; border-radius: 10px; border: 1px solid;
      }
      .camada-lote-ref {
        font-size: 10px; color: var(--char2); font-family: var(--mono);
        flex: 1;
      }
      .camada-semaforo {
        width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
      }

      
      
      @keyframes ct-in {
        0%   { transform: translateX(110%); opacity: 0; }
        60%  { transform: translateX(-6px); opacity: 1; }
        80%  { transform: translateX(3px); }
        100% { transform: translateX(0); }
      }
      @keyframes ct-pulse-btn {
        0%, 100% { box-shadow: 0 4px 16px rgba(200,98,42,.4); }
        50%       { box-shadow: 0 4px 28px rgba(200,98,42,.9), 0 0 0 8px rgba(200,98,42,.18); }
      }
      .chat-toast {
        position: fixed;
        bottom: 88px;
        right: 24px;
        z-index: 8900;
        width: 316px;
        background: var(--parch);
        border-radius: var(--r2);
        box-shadow: 0 8px 32px rgba(26,20,16,.18), 0 2px 8px rgba(26,20,16,.08), 0 0 0 1.5px var(--parch3);
        animation: ct-in 0.4s cubic-bezier(.34,1.56,.64,1) forwards;
        cursor: pointer;
        border-left: 4px solid var(--gold);
        overflow: hidden;
      }
      .chat-toast:hover { box-shadow: 0 10px 36px rgba(26,20,16,.22), 0 0 0 1.5px var(--gold-ln); }
      .chat-toast-bar {
        display: none; /* reemplazada por border-left */
      }
      .chat-toast-inner {
        padding: 14px 14px 12px 12px;
        display: flex;
        gap: 10px;
        align-items: flex-start;
      }
      .chat-toast-icon {
        width: 36px; height: 36px;
        background: var(--gold-bg);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 15px;
        flex-shrink: 0;
        margin-top: 1px;
        border: 1.5px solid var(--gold-ln);
      }
      .chat-toast-body { flex: 1; min-width: 0; }
      .chat-toast-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 3px;
      }
      .chat-toast-from {
        font-size: 11px;
        letter-spacing: 0.04em;
        color: var(--gold);
        font-weight: 600;
        font-family: var(--sans);
      }
      .chat-toast-time {
        font-size: 10px;
        color: var(--char3);
        font-family: var(--mono);
      }
      .chat-toast-autor {
        font-size: 11px;
        color: var(--char2);
        font-family: var(--sans);
        font-weight: 400;
        margin-bottom: 5px;
      }
      .chat-toast-msg {
        font-size: 13px;
        color: var(--char);
        font-family: var(--sans);
        font-weight: 400;
        line-height: 1.5;
        word-break: break-word;
      }
      .chat-toast-footer {
        padding: 8px 14px 8px 12px;
        border-top: 1px solid var(--parch3);
        background: var(--parch2);
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .chat-toast-cta {
        font-size: 11px;
        font-weight: 600;
        color: var(--gold);
        font-family: var(--sans);
      }
      .chat-toast-close {
        font-size: 18px;
        color: var(--char3);
        cursor: pointer;
        line-height: 1;
        padding: 2px 4px;
        transition: color .15s;
        font-family: var(--sans);
      }
      .chat-toast-close:hover { color: var(--char); }

      
      
      #alerta-venc-overlay {
        position: fixed;
        top: max(0px, env(safe-area-inset-top, 0px));
        right: 0;
        bottom: max(0px, env(safe-area-inset-bottom, 0px));
        left: 0;
        background: rgba(245, 239, 230, 0.12);
        backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
        z-index: 9500;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 22px;
      }
      #alerta-venc-overlay.open {
        display: flex;
      }
      #alerta-venc-panel {
        background: var(--parch);
        border-radius: 20px;
        border: 1px solid rgba(205, 188, 165, 0.95);
        box-shadow: 0 24px 52px rgba(14, 10, 8, 0.34);
        width: min(620px, 100%);
        max-height: min(84vh, 780px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        animation: av-panel-in 0.22s ease-out;
      }
      #alerta-venc-overlay.open #alerta-venc-panel {
        animation: av-panel-in 0.22s ease-out;
      }
      @keyframes av-panel-in {
        from {
          opacity: 0;
          transform: translateY(8px) scale(0.985);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }
      .av-head {
        padding: 18px 20px 14px;
        border-bottom: 1px solid rgba(205, 188, 165, 0.9);
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 12px;
        align-items: start;
        background: #f2eadd;
      }
      .av-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        background: rgba(200, 98, 42, 0.12);
        border: 1px solid rgba(200, 98, 42, 0.26);
        flex-shrink: 0;
      }
      .av-title {
        font-size: 15px;
        font-weight: 600;
        font-family: var(--serif);
        color: var(--char);
        line-height: 1.1;
      }
      .av-sub {
        font-size: 11px;
        color: var(--char2);
        margin-top: 4px;
      }
      .av-kpis {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .av-kpi {
        font-size: 10px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        border-radius: 999px;
        padding: 4px 9px;
        border: 1px solid rgba(26, 20, 16, 0.14);
        color: var(--char2);
        background: rgba(255, 255, 255, 0.62);
      }
      .av-kpi.crit {
        border-color: rgba(181, 58, 42, 0.34);
        color: #8a1a0f;
        background: rgba(181, 58, 42, 0.1);
      }
      .av-kpi.warn {
        border-color: rgba(160, 98, 10, 0.34);
        color: #7f4c00;
        background: rgba(160, 98, 10, 0.1);
      }
      .av-body {
        overflow-y: auto;
        padding: 10px 20px 12px;
        flex: 1;
      }
      .av-item {
        display: grid;
        grid-template-columns: 10px 1fr auto;
        gap: 10px;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid rgba(217, 204, 186, 0.82);
      }
      .av-item:last-child {
        border-bottom: none;
      }
      .av-semaforo {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .av-main {
        min-width: 0;
      }
      .av-nombre {
        font-size: 13px;
        font-weight: 600;
        color: var(--char);
        line-height: 1.18;
      }
      .av-meta {
        display: block;
        margin-top: 3px;
        font-size: 10.5px;
        color: var(--char2);
      }
      .av-badge {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 5px 9px;
        border-radius: 999px;
        white-space: nowrap;
        border: 1px solid;
      }
      .av-item.critico .av-nombre {
        color: #5a0a04;
      }
      .av-item.proximo .av-nombre {
        color: #6f4310;
      }
      .av-foot {
        padding: 13px 20px;
        border-top: 1px solid rgba(205, 188, 165, 0.88);
        display: flex;
        gap: 8px;
        justify-content: flex-end;
        background: #f2eadd;
      }
      @media (max-width: 640px) {
        #alerta-venc-overlay {
          padding-left: 12px;
          padding-right: 12px;
          padding-top: max(12px, env(safe-area-inset-top, 0px));
          padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
          align-items: flex-end;
        }
        #alerta-venc-panel {
          width: 100%;
          max-height: calc(100vh - max(12px, env(safe-area-inset-top, 0px)) - max(12px, env(safe-area-inset-bottom, 0px)));
          border-radius: 18px 18px 0 0;
        }
        .av-head,
        .av-body,
        .av-foot {
          padding-left: 14px;
          padding-right: 14px;
        }
        .av-item {
          grid-template-columns: 10px 1fr;
          gap: 10px;
          align-items: start;
        }
        .av-badge {
          margin-top: 6px;
          justify-self: start;
        }
      }

      

      
      .ni[data-tip] { position: relative; }

      
      .ni[data-tip]::after {
        content: attr(data-tip);
        position: fixed;
        left: 192px;
        background: var(--char);
        color: var(--text-on-dark);
        font-size: 11.5px;
        font-family: var(--sans);
        font-weight: 400;
        line-height: 1.5;
        padding: 9px 13px;
        border-radius: 10px;
        white-space: normal;
        width: 200px;
        pointer-events: none;
        opacity: 0;
        transform: translateX(-6px);
        transition: opacity 0.18s ease, transform 0.18s ease;
        z-index: 99999;
        box-shadow: 0 6px 24px rgba(20,12,8,.22);
      }

      
      .ni[data-tip]::before {
        content: "";
        position: fixed;
        left: 185px;
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-right: 7px solid var(--char);
        pointer-events: none;
        opacity: 0;
        transform: translateX(-6px);
        transition: opacity 0.18s ease, transform 0.18s ease;
        z-index: 99999;
      }

      .ni[data-tip]:hover::after,
      .ni[data-tip]:hover::before {
        opacity: 1;
        transform: translateX(0);
        transition-delay: 0.4s;
      }
      
      .ticket-card {
        background: #fdfaf5;
        border: 1px dashed #c8b89a;
        border-radius: 4px;
        font-family: var(--mono);
        font-size: 11px;
        overflow: hidden;
        box-shadow: 0 8px 40px rgba(20,12,8,.22);
      }
      .ticket-card::before,
      .ticket-card::after {
        content: "";
        display: block;
        height: 8px;
        background: repeating-linear-gradient(90deg, transparent 0, transparent 10px, #c8b89a 10px, #c8b89a 12px);
        opacity: .5;
      }
      .ticket-head {
        text-align: center;
        padding: 18px 22px 14px;
        border-bottom: 1px dashed #c8b89a;
      }
      .ticket-brand {
        font-family: var(--serif);
        font-size: 15px;
        font-weight: 600;
        color: var(--char);
        letter-spacing: .05em;
      }
      .ticket-local {
        font-size: 9px;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: var(--char3);
        margin-top: 5px;
      }
      .ticket-num {
        font-size: 9px;
        color: var(--char2);
        margin-top: 10px;
      }
      .ticket-body { padding: 18px 22px 16px; }
      .ticket-items { border-bottom: 1px dashed #c8b89a; padding-bottom: 14px; margin-bottom: 14px; }
      .ticket-item { display:flex; justify-content:space-between; gap:10px; padding:8px 0; line-height:1.4; border-bottom:1px solid rgba(200,184,154,.25); }
      .ticket-item:last-child { border-bottom:none; }
      .ticket-item-name  { flex:1; color:var(--char); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
      .ticket-item-qty   { color:var(--char3); white-space:nowrap; font-size:10px; align-self:center; }
      .ticket-item-price { white-space:nowrap; color:var(--char); font-weight:700; font-size:12px; }
      .ticket-total {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        font-size: 14px;
        font-weight: 700;
        color: var(--char);
        padding: 12px 0 6px;
        border-top: 1.5px solid #c8b89a;
        margin-top: 2px;
      }
      .ticket-total span:first-child { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--char3); font-weight:500; align-self:center; }
      .ticket-meta {
        display: flex;
        flex-direction: column;
        gap: 6px;
        font-size: 10px;
        padding: 12px 0 4px;
        border-top: 1px dashed #c8b89a;
        margin-top: 10px;
      }
      .ticket-meta-row { display:flex; justify-content:space-between; align-items:center; }
      .ticket-meta-label { font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--char3); }
      .ticket-meta-value { color:var(--char); font-weight:500; text-align:right; }

      

      
      @keyframes blink-sep { 0%,100%{opacity:.28} 50%{opacity:.06} }
      .dash-status-dot.open   { background: rgba(45,122,79,.10);  color: var(--green); border: 1px solid rgba(45,122,79,.25); }
      .dash-status-dot.closed { background: rgba(181,58,42,.09);  color: var(--red);   border: 1px solid rgba(181,58,42,.22); }
      .dash-status-dot.break  { background: rgba(160,98,10,.09);  color: var(--amber); border: 1px solid rgba(160,98,10,.22); }
      .dash-status-dot.rest   { background: rgba(42,90,140,.09);  color: var(--blue);  border: 1px solid rgba(42,90,140,.22); }
      .dash-status-dot.open::before { animation: pulse-green 2s ease-in-out infinite; }
      @keyframes pulse-green {
        0%,100% { opacity:1; transform:scale(1); }
        50%      { opacity:.35; transform:scale(1.5); }
      }

      

      

      

      

      

      
      .dash-panel {
        background: var(--card-bg);
        border: var(--card-border-thin);
        border-radius: var(--card-radius);
        overflow: hidden;
        box-shadow: var(--card-shadow);
      }

      
      .dash-panel-empty {
        padding: 32px 18px;
        text-align: center;
        font-size: 12px;
        color: var(--char3);
      }

      
      .dash-timeline { padding: 4px 0; }
      .dash-tl-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 10px 18px;
        border-bottom: 1px solid rgba(217,204,186,.5);
        transition: background .1s;
      }
      .dash-tl-item:last-child { border-bottom: none; }
      .dash-tl-item:hover { background: #faf8f5; }
      .dash-tl-icon {
        width: 30px; height: 30px;
        border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        font-size: 13px;
        flex-shrink: 0;
        margin-top: 1px;
      }
      .dash-tl-icon.venta                { background: rgba(45,122,79,.08); }
      .dash-tl-icon.ingreso              { background: rgba(42,90,140,.08); }
      .dash-tl-icon.merma                { background: rgba(181,58,42,.07); }
      .dash-tl-icon.ajuste               { background: rgba(160,98,10,.07); }
      .dash-tl-icon.transferencia_salida  { background: rgba(200,98,42,.07); }
      .dash-tl-icon.transferencia_entrada { background: rgba(45,122,79,.07); }
      .dash-tl-body { flex: 1; min-width: 0; }
      .dash-tl-prod {
        font-size: 12px;
        font-weight: 500;
        color: var(--char);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .dash-tl-meta { font-size: 10px; color: var(--char3); margin-top: 1px; }
      .dash-tl-right { text-align: right; flex-shrink: 0; }
      .dash-tl-delta {
        font-family: var(--mono);
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
      }
      .dash-tl-delta.pos { color: var(--green); }
      .dash-tl-delta.neg { color: var(--red); }
      .dash-tl-hora {
        font-size: 9px;
        color: var(--char3);
        font-family: var(--mono);
        margin-top: 3px;
      }

      

      

      
      .nota-item {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 9px 14px;
        border-bottom: 1px solid rgba(217,204,186,.5);
        transition: background .1s;
      }
      .nota-item:last-child { border-bottom: none; }
      .nota-item:hover { background: #faf8f5; }
      .nota-body { flex: 1; min-width: 0; }
      .nota-texto {
        font-size: 12px;
        color: var(--char);
        line-height: 1.45;
        word-break: break-word;
      }
      .nota-meta {
        font-size: 9px;
        color: var(--char3);
        font-family: var(--mono);
        margin-top: 2px;
      }
      .nota-del {
        background: none;
        border: none;
        color: var(--char3);
        cursor: pointer;
        padding: 2px 3px;
        border-radius: 4px;
        opacity: .35;
        transition: opacity .12s, color .12s;
        flex-shrink: 0;
      }
      .nota-del:hover { opacity: 1; color: var(--red); }
      
      #page-dashboard .dash-time {
        font-family: var(--serif);
        line-height: 1;
      }
      
      #page-dashboard .dash-local-name {
        font-family: var(--mono);
        font-size: 8.5px;
        text-transform: uppercase;
      }

      
      #page-dashboard .dash-body-grid {
        margin-bottom: 20px;
      }
      #page-dashboard .dash-panel {
        overflow: hidden;
      }
      #page-dashboard .dash-panel-empty {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.06em;
        padding: 32px 18px;
        text-align: center;
      }

      
      #page-dashboard .dash-tl-item {
        padding: 11px 18px;
        border-bottom: 1px solid rgba(26,20,16,0.05);
        transition: background var(--motion-fast) var(--ease-ui);
      }
      #page-dashboard .dash-tl-item:last-child { border-bottom: none; }
      #page-dashboard .dash-tl-icon {
        width: 28px;
        height: 28px;
        border-radius: 6px;
      }
      #page-dashboard .dash-tl-prod {
        font-size: 12px;
        font-weight: 500;
      }
      #page-dashboard .dash-tl-meta {
        font-family: var(--mono);
        font-size: 9.5px;
        margin-top: 2px;
        letter-spacing: 0.03em;
      }
      #page-dashboard .dash-tl-delta {
        font-family: var(--serif);
        font-size: 14px;
        font-weight: 700;
        font-style: italic;
        letter-spacing: -0.02em;
      }
      #page-dashboard .dash-tl-delta.pos { color: var(--green); }
      #page-dashboard .dash-tl-delta.neg { color: var(--red); }
      #page-dashboard .dash-tl-hora {
        font-family: var(--mono);
        font-size: 9px;
        margin-top: 3px;
        letter-spacing: 0.04em;
      }
      #page-dashboard .nota-item {
        border-bottom: 1px solid rgba(26,20,16,0.05);
        padding: 9px 14px;
      }
      #page-dashboard .nota-texto {
        font-size: 12px;
        line-height: 1.45;
      }
      #page-dashboard .nota-meta {
        font-family: var(--mono);
        font-size: 9px;
        margin-top: 2px;
      }
      #page-dashboard .nota-del { opacity: 0.45; }
      #page-dashboard .nota-del:hover { opacity: 1; }

      
      @media (max-width: 960px) {
        /* Header: colapsa acciones secundarias, reduce tiempo */

        /* KPI grid: ventas ancho completo + venc/ticket en 2 cols */

        /* Body: 1 columna */
        #page-dashboard .dash-body-grid {
          gap: 12px;
        }
      }

      @media (max-width: 600px) {
        

        

        
        #page-dashboard .dash-body-grid {
          grid-template-columns: 1fr !important;
        }
      }

      
      .vr-desc-row {
        display: flex;
        gap: 8px;
        align-items: center;
      }
      .vr-desc-seg {
        display: flex;
        gap: 6px;
        align-items: center;
        flex-shrink: 0;
      }
      .vr-desc-btn {
        flex-shrink: 0;
        background: #FAF8F5;
        border: 1px solid rgba(26, 20, 16, 0.11);
        border-radius: 999px;
        padding: 7px 14px;
        font-family: var(--sans);
        font-size: 12px;
        font-weight: 500;
        color: var(--char2);
        cursor: pointer;
        transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
        white-space: nowrap;
      }
      .vr-desc-btn:hover {
        border-color: rgba(198, 96, 42, 0.30);
        color: var(--char);
        background: rgba(198, 96, 42, 0.05);
      }
      .vr-desc-btn.active {
        background: var(--gold);
        border-color: var(--gold);
        color: #ffffff;
        font-weight: 700;
        box-shadow: 0 2px 8px rgba(198, 96, 42, 0.28);
      }

      
      .vr-pago-grid {
        display: flex;
        gap: 7px;
      }
      .vr-pago-btn {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 10px 12px;
        background: #FAF8F5;
        border: 1.5px solid rgba(26, 20, 16, 0.10);
        border-radius: 999px;
        font-family: var(--sans);
        font-size: 12px;
        font-weight: 500;
        color: var(--char2);
        cursor: pointer;
        transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
        white-space: nowrap;
      }
      .vr-pago-btn svg {
        opacity: .50;
        flex-shrink: 0;
        transition: opacity .15s;
      }
      .vr-pago-btn:hover {
        border-color: rgba(198, 96, 42, 0.30);
        background: rgba(198, 96, 42, 0.05);
        color: var(--char);
      }
      .vr-pago-btn:hover svg { opacity: .8; }
      .vr-pago-btn.active[data-medio="efectivo"] {
        background: rgba(34, 110, 65, 0.08);
        border-color: rgba(34, 110, 65, 0.45);
        color: #1a6636;
        font-weight: 700;
        box-shadow: 0 1px 6px rgba(34, 110, 65, 0.15);
      }
      .vr-pago-btn.active[data-medio="efectivo"] svg { opacity: 1; stroke: #1a6636; }
      .vr-pago-btn.active[data-medio="debito"] {
        background: rgba(30, 80, 152, 0.08);
        border-color: rgba(30, 80, 152, 0.45);
        color: #1e4e96;
        font-weight: 700;
        box-shadow: 0 1px 6px rgba(30, 80, 152, 0.15);
      }
      .vr-pago-btn.active[data-medio="debito"] svg { opacity: 1; stroke: #1e4e96; }
      .vr-pago-btn.active[data-medio="transferencia"] {
        background: rgba(140, 80, 10, 0.08);
        border-color: rgba(140, 80, 10, 0.45);
        color: #8c500a;
        font-weight: 700;
        box-shadow: 0 1px 6px rgba(140, 80, 10, 0.15);
      }
      .vr-pago-btn.active[data-medio="transferencia"] svg { opacity: 1; stroke: #8c500a; }

      
      .cc-eg-actions { display: flex; gap: 3px; flex-shrink: 0; }
      .cc-eg-edit, .cc-eg-del {
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 5px;
        cursor: pointer;
        padding: 0;
        color: var(--char3);
        transition: background .12s, border-color .12s, color .12s;
      }
      .cc-eg-edit:hover {
        background: rgba(42,90,140,.08);
        border-color: rgba(42,90,140,.22);
        color: #2a5a8c;
      }
      .cc-eg-del:hover {
        background: rgba(181,58,42,.08);
        border-color: rgba(181,58,42,.22);
        color: var(--red);
      }

      
      .cc-edit-egreso-box {
        background: #fff8f2;
        border-radius: 14px;
        padding: 24px;
        width: 320px;
        box-shadow: 0 8px 40px rgba(0,0,0,.2);
      }
      .cc-edit-egreso-title {
        font-size: 14px;
        font-weight: 700;
        color: var(--char);
        margin-bottom: 4px;
      }
      .cc-edit-egreso-desc {
        font-size: 11px;
        color: var(--char3);
        margin-bottom: 12px;
      }
      .cc-edit-egreso-lbl {
        font-size: 10px;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--char3);
        margin: 10px 0 4px;
      }
      .cc-edit-egreso-input {
        width: 100%;
        background: #fbf7f0;
        border: 1px solid rgba(214,199,179,0.9);
        border-radius: 8px;
        padding: 9px 12px;
        font-size: 13px;
        font-family: var(--sans);
        color: var(--char);
        outline: none;
        box-sizing: border-box;
      }
      .cc-edit-egreso-input:focus { border-color: rgba(200,98,42,0.45); }
      .cc-edit-egreso-btns {
        display: flex;
        gap: 8px;
        margin-top: 18px;
      }

      

      
      .cc-pago-filtro-btn {
        padding: 3px 9px;
        font-family: var(--sans);
        font-size: 10px;
        font-weight: 500;
        border: 1.5px solid var(--parch3);
        border-radius: 20px;
        background: var(--parch);
        color: var(--char3);
        cursor: pointer;
        transition: background .15s, color .15s, border-color .15s;
      }
      .cc-pago-filtro-btn.on {
        background: var(--leather);
        color: var(--text-on-dark);
        border-color: var(--leather);
      }

      

      

      
      .cc-top-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 0;
        border-bottom: 1px solid var(--parch3);
      }
      .cc-top-item:last-child { border-bottom: none; }
      .cc-top-rank {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--char3);
        width: 16px;
        text-align: center;
        flex-shrink: 0;
      }
      .cc-top-rank.gold { color: var(--gold); font-weight: 700; }
      .cc-top-name { flex: 1; font-size: 12px; font-weight: 500; color: var(--char); }
      .cc-top-bar-wrap {
        width: 80px;
        height: 4px;
        background: var(--parch3);
        border-radius: 2px;
        overflow: hidden;
      }
      .cc-top-bar-fill { height: 100%; border-radius: 2px; background: var(--gold); }
      .cc-top-monto {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--char2);
        text-align: right;
        min-width: 80px;
      }

      
      .cc-arqueo-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid var(--parch3);
        font-size: 13px;
      }
      .cc-arqueo-row:last-child { border-bottom: none; }
      .cc-arqueo-label { color: var(--char2); }
      .cc-arqueo-val { font-family: var(--mono); font-weight: 500; color: var(--char); }
      .cc-arqueo-input {
        width: 140px;
        background: var(--parch2);
        border: 1.5px solid var(--parch3);
        border-radius: var(--r);
        padding: 7px 10px;
        font-family: var(--mono);
        font-size: 13px;
        color: var(--char);
        outline: none;
        text-align: right;
        transition: border-color .15s;
      }
      .cc-arqueo-input:focus { border-color: var(--gold); }
      .cc-dif-neutral  { color: var(--char3); }

      
      .cc-egreso-item {
        padding: 5px 0;
        border-bottom: none;
        align-items: flex-start;
        gap: 6px;
      }
      .cc-egreso-label {
        display: flex;
        align-items: baseline;
        gap: 6px;
        font-size: 11.5px;
        color: var(--char2);
        flex: 1;
        min-width: 0;
      }
      .cc-egreso-tag {
        font-size: 8.5px;
        font-weight: 700;
        letter-spacing: .10em;
        text-transform: uppercase;
        color: var(--red);
        background: rgba(181,58,42,.08);
        border: 1px solid rgba(181,58,42,.22);
        border-radius: 4px;
        padding: 1px 5px;
        white-space: nowrap;
        flex-shrink: 0;
      }
      .cc-retiro-tag {
        color: var(--amber);
        background: rgba(160,98,10,.08);
        border-color: rgba(160,98,10,.22);
      }
      .cc-egreso-val {
        font-size: 12px;
        color: var(--red);
        flex-shrink: 0;
      }

      
      .cc-retiro-row {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 10px;
      }
      .cc-retiro-btns {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
      }
      .cc-retiro-toggle-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        background: transparent;
        border: 1.5px dashed var(--parch3);
        border-radius: var(--r2);
        color: var(--char3);
        font-size: 11.5px;
        font-weight: 600;
        padding: 9px 14px;
        cursor: pointer;
        transition: border-color .14s, color .14s, background .14s;
        letter-spacing: .02em;
      }
      .cc-retiro-toggle-btn:hover {
        border-color: var(--amber);
        color: var(--amber);
        background: rgba(160,98,10,.05);
      }

      
      .cc-nota-input {
        width: 100%;
        background: var(--parch2);
        border: 1.5px solid var(--parch3);
        border-radius: var(--r);
        padding: 10px 12px;
        font-family: var(--sans);
        font-size: 12px;
        color: var(--char);
        outline: none;
        resize: vertical;
        min-height: 70px;
        line-height: 1.5;
        transition: border-color .15s;
        box-sizing: border-box;
      }
      .cc-nota-input:focus { border-color: var(--gold); }

      
      .cc-btn-cerrar {
        width: 100%;
        background: var(--grad-dark);
        color: var(--text-on-dark);
        border: none;
        border-radius: var(--r2);
        padding: 15px 20px;
        font-family: var(--serif);
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: box-shadow .15s, transform .15s;
        letter-spacing: .02em;
        position: relative;
        overflow: hidden;
        box-shadow: var(--shadow-deep);
      }
      .cc-btn-cerrar::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 2px;
        background: var(--grad-ember);
      }
      .cc-btn-cerrar:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 40px rgba(26,20,16,.30);
      }

      
      .cc-obs-editor { padding:10px 14px 12px; border-bottom:1px solid var(--parch3); background:var(--parch2); }
      .cc-obs-editor textarea { width:100%; box-sizing:border-box; border:1.5px solid var(--parch3); border-radius:8px; padding:8px 10px; font-family:var(--sans); font-size:11px; color:var(--char); background:var(--parch); resize:vertical; min-height:60px; outline:none; transition:border-color .15s; }
      .cc-obs-editor textarea:focus { border-color:var(--leather); }
      .cc-obs-actions { display:flex; gap:6px; margin-top:7px; justify-content:flex-end; }
      .cc-obs-save { padding:4px 14px; font-family:var(--sans); font-size:11px; font-weight:600; background:var(--leather); color: var(--text-on-dark); border:none; border-radius:20px; cursor:pointer; transition:opacity .15s; }
      .cc-obs-save:hover { opacity:.85; }
      .cc-obs-cancel { padding:4px 12px; font-family:var(--sans); font-size:11px; background:none; color:var(--char3); border:1.5px solid var(--parch3); border-radius:20px; cursor:pointer; transition:border-color .15s; }
      .cc-obs-cancel:hover { border-color:var(--char3); }

      
      .cc-comp-delta {
        font-size: 10px;
        font-family: var(--mono);
        padding: 2px 6px;
        border-radius: 6px;
        font-weight: 600;
      }
      .cc-comp-delta.up   { background: rgba(45,122,79,.1);  color: var(--green); }
      .cc-comp-delta.down { background: rgba(181,58,42,.1);  color: var(--red); }
      .cc-comp-delta.flat { background: var(--parch2); color: var(--char3); }

      

      

      
      @media (max-width: 600px) {
        .cc-top-bar-wrap { display: none; }
        .cc-top-monto { min-width: 60px; font-size: 10px; }
        .cc-top-name { font-size: 11px; }
        .cc-arqueo-row { font-size: 12px; }
        .cc-arqueo-input { width: 110px; font-size: 12px; padding: 6px 8px; }
        .cc-btn-cerrar { font-size: 14px; padding: 13px 16px; }
        .cc-comp-delta { font-size: 9px; padding: 2px 5px; }
        .cc-nota-input { min-height: 60px; font-size: 11px; }
        .cc-pago-filtro-btn { font-size: 10px; padding: 3px 8px; }
      }

      
      @media (max-width: 600px) { /* mantener 2 cols */
        .cc-tl-hora { font-size: 7px; }
        .cc-obs-editor textarea { font-size: 12px; }
      }

      
      .cc-tl-col {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        height: 100%;
        justify-content: flex-end;
      }
      .cc-tl-bar {
        width: 100%;
        border-radius: 3px 3px 0 0;
        min-height: 3px;
        transition: height .4s cubic-bezier(.4,0,.2,1);
        position: relative;
      }
      .cc-tl-bar.activa { box-shadow: 0 0 0 2px var(--gold-ln); }
      .cc-tl-monto {
        font-family: var(--mono);
        font-size: 8px;
        color: var(--char3);
        white-space: nowrap;
        display: none;
      }
      .cc-tl-col:hover .cc-tl-monto { display: block; }
      .cc-tl-hora {
        font-family: var(--mono);
        font-size: 8px;
        color: var(--char3);
        margin-top: 4px;
        letter-spacing: -.02em;
      }
      .cc-tl-hora.activa { color: var(--gold); font-weight: 600; }
      #page-cierre .cc-pago-filtro-btn {
        border-color: var(--line-strong);
      }
      #page-cierre .cc-top-item {
        border-bottom-color: var(--line-soft);
      }
      #page-cierre .cc-arqueo-row {
        border-bottom-color: var(--line-soft);
      }
      #page-cierre .cc-arqueo-input,
      #page-cierre .cc-nota-input {
        border-color: var(--line-strong);
      }
      #page-cierre .cc-btn-preview {
        border-color: var(--line-strong);
      }
      @keyframes ccBtnSpin { to { transform: rotate(360deg); } }

      
      .cc-close-fx {
        position: fixed;
        inset: 0;
        z-index: 9998;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: rgba(26, 20, 16, 0.38);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        opacity: 0;
        transition: opacity .22s ease;
        pointer-events: none;
      }
      .cc-close-fx.show {
        display: flex;
        opacity: 1;
        pointer-events: auto;
      }
      .cc-close-fx-card {
        width: min(400px, calc(100vw - 32px));
        background: #FFFCF9;
        border: 1px solid rgba(26,20,16,0.09);
        border-radius: 20px;
        box-shadow: 0 32px 80px rgba(26,20,16,.20), 0 4px 16px rgba(26,20,16,.10);
        overflow: hidden;
        transform: translateY(14px) scale(.97);
        opacity: 0;
        animation: ccFxCardIn .38s cubic-bezier(.16,1,.3,1) forwards;
      }
      @keyframes ccFxCardIn {
        to { transform: translateY(0) scale(1); opacity: 1; }
      }
      
      .cc-close-fx-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 20px 20px 0;
      }
      .cc-close-fx-eyebrow {
        font-family: var(--mono);
        font-size: 8.5px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(26,20,16,0.38);
        font-weight: 700;
        margin-bottom: 4px;
      }
      .cc-close-fx-title {
        font-family: var(--serif);
        font-size: 22px;
        font-weight: 400;
        color: #1A1410;
        line-height: 1.1;
      }
      .cc-close-fx-x {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 1.5px solid rgba(26,20,16,0.12);
        background: rgba(26,20,16,0.04);
        color: rgba(26,20,16,0.45);
        font-size: 17px;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: background .14s, color .14s;
        margin-left: 10px;
        margin-top: 2px;
      }
      .cc-close-fx-x:hover { background: rgba(26,20,16,0.09); color: #1A1410; }
      .cc-close-fx-divider {
        height: 1px;
        background: rgba(26,20,16,0.08);
        margin: 16px 0 0;
      }
      
      .cc-close-fx-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 28px 24px 20px;
        gap: 10px;
      }
      .cc-close-fx-seal {
        width: 62px;
        height: 62px;
        border-radius: 50%;
        position: relative;
        display: grid;
        place-items: center;
        background: rgba(34, 136, 72, 0.08);
        border: 2px solid rgba(34,136,72,0.30);
      }
      .cc-close-fx-seal::before {
        content: "";
        position: absolute;
        inset: -5px;
        border-radius: 50%;
        border: 1.5px solid rgba(34,136,72,0.18);
        animation: ccFxPulse 1.6s ease-out infinite;
      }
      @keyframes ccFxPulse {
        0%   { transform: scale(.94); opacity: .9; }
        70%  { transform: scale(1.10); opacity: .0; }
        100% { transform: scale(1.10); opacity: .0; }
      }
      .cc-close-fx-check {
        width: 26px;
        height: 26px;
      }
      .cc-close-fx-check path {
        stroke: #1a7a3f;
        stroke-width: 2.4;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 30;
        stroke-dashoffset: 30;
        animation: ccFxCheck .45s .15s cubic-bezier(.16,1,.3,1) forwards;
      }
      @keyframes ccFxCheck { to { stroke-dashoffset: 0; } }
      .cc-close-fx-success-title {
        font-family: var(--serif);
        font-size: 20px;
        font-weight: 400;
        color: #1A1410;
        text-align: center;
        line-height: 1.2;
      }
      .cc-close-fx-sub {
        font-family: var(--sans);
        font-size: 13px;
        color: rgba(26,20,16,0.50);
        text-align: center;
        line-height: 1.4;
      }
      
      .cc-close-fx-kpis {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 0 20px 20px;
      }
      .cc-close-fx-kpi {
        border-radius: 10px;
        background: rgba(26,20,16,0.035);
        border: 1px solid rgba(26,20,16,0.07);
        padding: 10px 10px 8px;
      }
      .cc-close-fx-kpi-v {
        font-family: var(--mono);
        font-size: 13px;
        font-weight: 700;
        color: #1A1410;
        line-height: 1.1;
      }
      .cc-close-fx-kpi-l {
        margin-top: 4px;
        font-family: var(--mono);
        font-size: 8px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: rgba(26,20,16,0.40);
      }
      #page-cierre .cc-hero {
        background:
          radial-gradient(ellipse 120% 90% at 100% 0%, rgba(200,98,42,0.22) 0%, transparent 55%),
          radial-gradient(ellipse 80% 70% at 0% 100%, rgba(200,98,42,0.10) 0%, transparent 55%),
          linear-gradient(158deg, #1c1510 0%, #271d15 55%, #160f0b 100%);
        border: 1px solid rgba(200, 98, 42, 0.24);
        border-radius: 10px;
        box-shadow:
          0 16px 40px rgba(26, 20, 16, 0.28),
          inset 0 1px 0 rgba(255, 255, 255, 0.06);
        padding: 28px 28px 24px;
        position: relative;
        overflow: hidden;
      }
      
      #page-cierre .cc-hero::after {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 1px;
        background: linear-gradient(
          90deg, transparent 0%,
          rgba(232, 146, 74, 0.70) 35%,
          rgba(232, 146, 74, 0.90) 55%,
          rgba(232, 146, 74, 0.70) 75%,
          transparent 100%
        );
        pointer-events: none;
      }

      
      #page-cierre .cc-pago-filtro-btn {
        font-family: var(--mono);
        font-size: 8.5px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        background: rgba(26, 20, 16, 0.04);
        border: 1px solid rgba(26, 20, 16, 0.10);
        color: var(--t3);
        border-radius: 4px;
        padding: 5px 10px;
        cursor: pointer;
        transition:
          background var(--motion-fast) var(--ease-ui),
          border-color var(--motion-fast) var(--ease-ui),
          color var(--motion-fast) var(--ease-ui);
      }
      #page-cierre .cc-pago-filtro-btn.on {
        background: var(--ember-bg);
        border-color: var(--ember-ln);
        color: var(--gold);
      }

      
      #page-cierre .cc-top-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 0;
        border-bottom: 1px solid rgba(26, 20, 16, 0.06);
      }
      #page-cierre .cc-top-name {
        font-size: 12.5px;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--t1);
        flex: 1;
      }

      
      #page-cierre .cc-arqueo-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid rgba(26, 20, 16, 0.06);
      }
      #page-cierre .cc-arqueo-label {
        font-size: 12px;
        color: var(--t2);
        flex: 1;
      }
      #page-cierre .cc-arqueo-val {
        font-family: var(--mono);
        font-size: 13px;
        font-weight: 600;
        color: var(--t1);
        letter-spacing: -0.01em;
      }
      #page-cierre .cc-arqueo-input,
      #page-cierre .cc-nota-input {
        background: rgba(255, 255, 255, 0.80);
        border: 1px solid rgba(26, 20, 16, 0.12);
        border-radius: 6px;
        padding: 8px 11px;
        font-family: var(--mono);
        font-size: 13px;
        color: var(--t1);
        transition:
          border-color var(--motion-fast) var(--ease-ui),
          box-shadow   var(--motion-fast) var(--ease-ui);
      }
      #page-cierre .cc-arqueo-input:focus,
      #page-cierre .cc-nota-input:focus {
        border-color: var(--gold);
        box-shadow: 0 0 0 3px var(--ember-bg);
        outline: none;
      }

      
      #page-cierre .cc-btn-cerrar {
        width: 100%;
        background: var(--gold);
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 15px 20px;
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        cursor: pointer;
        box-shadow:
          0 8px 24px rgba(200, 98, 42, 0.30),
          inset 0 1px 0 rgba(255, 255, 255, 0.16);
        transition:
          background    var(--motion-fast) var(--ease-ui),
          box-shadow    var(--motion-fast) var(--ease-ui),
          transform     var(--motion-fast) var(--ease-ui);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
      }
      #page-cierre .cc-btn-cerrar::before { display: none; }
      #page-cierre .cc-btn-cerrar:hover {
        background: #b05422;
        box-shadow:
          0 12px 30px rgba(200, 98, 42, 0.38),
          inset 0 1px 0 rgba(255, 255, 255, 0.18);
        transform: translateY(-1px);
      }
      #page-cierre .cc-btn-cerrar:active {
        transform: translateY(0) scale(0.98);
        box-shadow: 0 4px 12px rgba(200, 98, 42, 0.22);
      }
      #page-cierre .cc-btn-cerrar.is-closing {
        pointer-events: none;
        opacity: 0.85;
      }

      
      #page-cierre .cc-btn-preview {
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        background: rgba(26, 20, 16, 0.04);
        border: 1px solid rgba(26, 20, 16, 0.12);
        color: var(--t3);
        border-radius: 6px;
        padding: 8px 14px;
        cursor: pointer;
        transition:
          background var(--motion-fast) var(--ease-ui),
          border-color var(--motion-fast) var(--ease-ui),
          color var(--motion-fast) var(--ease-ui);
      }
      #page-cierre .cc-btn-preview:hover {
        border-color: rgba(200, 98, 42, 0.30);
        color: var(--t1);
        background: rgba(200, 98, 42, 0.05);
      }

      
      .sb-collapsible-head {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        user-select: none;
      }
      .sb-collapsible-head svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .8; }
      .sb-collapsible-head .sb-chevron {
        margin-left: auto;
        width: 10px;
        height: 10px;
        opacity: .4;
        transition: transform 0.2s ease;
        flex-shrink: 0;
      }
      .sb-collapsible-head.open .sb-chevron { transform: rotate(180deg); opacity: .7; }
      .sb-collapsible-head.open {
        color: var(--text-on-dark);
        background: rgba(255, 255, 255, 0.04);
      }
      .sb-collapsible-head.intro-opening {
        animation: sbInvHeadBloom .62s cubic-bezier(.2,.9,.25,1);
      }
      
      .sb-collapsible-body {
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.22s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .sb-collapsible-body.open { max-height: 200px; }
      .sb-collapsible-body.intro-opening .ni {
        opacity: 0;
        transform: translateY(-4px) scale(.985);
        animation: sbInvItemReveal .42s cubic-bezier(.2,.9,.25,1) forwards;
      }
      .sb-collapsible-body.intro-opening .ni:nth-child(1) { animation-delay: .08s; }
      .sb-collapsible-body.intro-opening .ni:nth-child(2) { animation-delay: .13s; }
      .sb-collapsible-body.intro-opening .ni:nth-child(3) { animation-delay: .18s; }
      .sb-collapsible-body.intro-opening .ni:nth-child(4) { animation-delay: .23s; }
      .sb-collapsible-body.intro-opening .ni:nth-child(5) { animation-delay: .28s; }
      @keyframes sbInvHeadBloom {
        0% {
          transform: translateY(2px) scale(.992);
          background: rgba(200, 98, 42, 0.0);
          box-shadow: 0 0 0 0 rgba(200,98,42,0);
        }
        55% {
          transform: translateY(0) scale(1);
          background: rgba(200, 98, 42, 0.09);
          box-shadow: 0 0 0 5px rgba(200,98,42,.08);
        }
        100% {
          transform: translateY(0) scale(1);
          background: rgba(255, 255, 255, 0.04);
          box-shadow: 0 0 0 0 rgba(200,98,42,0);
        }
      }
      @keyframes sbInvItemReveal {
        0% { opacity: 0; transform: translateY(-4px) scale(.985); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
      }
      

      

      
      #sidebar {
        background: #0e0b08;
        box-shadow: 2px 0 24px rgba(0, 0, 0, 0.32);
      }
      #sidebar::after { display: none; }

      
      .sb-logo {
        padding: 26px 22px 22px;
        border-bottom: 1px solid rgba(200, 98, 42, 0.12);
        position: relative;
      }
      .sb-logo .brand {
        font-family: var(--serif);
        font-size: 21px;
        font-weight: 300;
        font-style: italic;
        color: #f2e8d8;
        letter-spacing: -0.025em;
        line-height: 1.2;
        display: block;
      }
      .sb-logo .sub {
        font-family: var(--mono);
        font-size: 7.5px;
        letter-spacing: 0.36em;
        text-transform: uppercase;
        color: rgba(200, 98, 42, 0.65);
        font-weight: 400;
        display: block;
        margin-top: 7px;
      }

      
      .sb-local {
        padding: 8px 22px;
        font-size: 9px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(240, 230, 214, 0.24);
        border-bottom: 1px solid rgba(200, 98, 42, 0.08);
        font-family: var(--mono);
        display: flex;
        align-items: center;
        gap: 7px;
      }
      .sb-local::before {
        content: '';
        display: inline-block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(200, 98, 42, 0.55);
        flex-shrink: 0;
      }
      .sb-local strong {
        color: rgba(200, 98, 42, 0.72);
        font-weight: 500;
      }

      

      
      .ni {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 1px 10px;
        padding: 8px 13px;
        color: rgba(240, 230, 214, 0.52);
        font-size: 12px;
        border-radius: 6px;
        border-left: 2px solid transparent;
        transition:
          background var(--motion-fast) var(--ease-ui),
          color     var(--motion-fast) var(--ease-ui),
          border-color var(--motion-fast) var(--ease-ui);
      }
      .ni svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        opacity: 0.55;
        transition: opacity var(--motion-fast) var(--ease-ui);
      }
      .ni:hover {
        color: rgba(240, 230, 214, 0.86);
        background: rgba(255, 255, 255, 0.05);
      }
      .ni:hover svg { opacity: 0.80; }

      .ni.active {
        color: #f2e8d8;
        background: rgba(200, 98, 42, 0.13);
        border-left-color: rgba(200, 98, 42, 0.90);
        padding-left: 11px;
      }
      .ni.active svg {
        opacity: 1;
        color: rgba(200, 98, 42, 0.85);
      }

      
      .sb-collapsible-head {
        margin: 1px 8px;
        padding: 8px 13px;
        border-radius: 6px;
        color: rgba(246, 239, 226, 0.60);
        font-size: 12px;
        border-left: 2px solid transparent;
        transition:
          background var(--motion-fast) var(--ease-ui),
          color     var(--motion-fast) var(--ease-ui);
      }
      .sb-collapsible-head:hover {
        color: rgba(246, 239, 226, 0.88);
        background: rgba(255, 255, 255, 0.05);
      }
      .sb-collapsible-head.child-active {
        color: rgba(246, 239, 226, 0.90);
        border-left-color: rgba(200, 98, 42, 0.55);
        background: rgba(200, 98, 42, 0.06);
      }
      .sb-collapsible-body .ni {
        padding-left: 36px;
        font-size: 11.5px;
        color: rgba(240, 230, 214, 0.44);
        border-radius: 5px;
      }
      .sb-collapsible-body .ni:hover {
        color: rgba(240, 230, 214, 0.80);
        margin: 1px 10px;
      }
      .sb-collapsible-body .ni.active {
        color: #f2e8d8;
        border-left-color: rgba(200, 98, 42, 0.90);
      }

      
      .sb-foot {
        padding: 16px 20px 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        gap: 12px;
      }
      .wagon-label {
        font-family: var(--mono);
        font-size: 7.5px;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: rgba(246, 239, 226, 0.16);
        margin-bottom: 5px;
        display: block;
      }
      .wagon-logo {
        max-width: 100px;
        opacity: 0.70;
        transition: opacity var(--motion-med) var(--ease-ui);
        filter: none;
      }
      .wagon-logo:hover { opacity: 1; }
      .btn-out {
        width: 100%;
        padding: 8px 12px;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: rgba(246, 239, 226, 0.34);
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        cursor: pointer;
        border-radius: 5px;
        transition:
          border-color var(--motion-fast) var(--ease-ui),
          color        var(--motion-fast) var(--ease-ui),
          background   var(--motion-fast) var(--ease-ui);
      }
      .btn-out:hover {
        border-color: rgba(200, 98, 42, 0.35);
        color: rgba(200, 98, 42, 0.80);
        background: rgba(200, 98, 42, 0.05);
      }

      
      .topbar::after { display: none; }
      .rt-pill {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(200, 98, 42, 0.16);
        border-radius: 20px;
        padding: 4px 11px;
        font-family: var(--mono);
        font-size: 9.5px;
        color: rgba(240, 230, 214, 0.45);
        letter-spacing: 0.04em;
      }
      .demo-pill {
        font-family: var(--mono);
        font-size: 8.5px;
        letter-spacing: 0.12em;
        color: var(--gold);
        border: 1px solid rgba(200, 98, 42, 0.28);
        background: rgba(200, 98, 42, 0.07);
        padding: 3px 9px;
        border-radius: 4px;
      }

      
      .sb-vr-btn {
        display: flex;
        align-items: center;
        gap: 9px;
        margin: 8px 12px 4px;
        padding: 9px 14px;
        background: var(--gold);
        color: #fff;
        border-radius: 9px;
        cursor: pointer;
        font-size: 12.5px;
        font-weight: 600;
        font-family: var(--sans);
        letter-spacing: .01em;
        transition: background .15s, box-shadow .15s;
        border: none;
        width: calc(100% - 24px);
        box-shadow: 0 2px 8px rgba(200,98,42,.25);
        user-select: none;
      }
      .sb-vr-btn:hover {
        background: var(--gold-lt);
        box-shadow: 0 3px 12px rgba(200,98,42,.35);
      }
      .sb-vr-btn svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .95; }

      
      th {
        text-align: left;
        padding: 9px 14px;
        font-size: 8.5px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--char3);
        font-weight: 600;
        background: var(--parch2);
        border-bottom: 1.5px solid var(--parch3);
        white-space: nowrap;
      }
      table td {
        padding: 10px 14px;
        vertical-align: middle;
        border-bottom: 1px solid rgba(217,204,186,.5);
        font-size: 12.5px;
        color: var(--char);
      }
      tbody tr:last-child td { border-bottom: none; }
      tbody tr { transition: background .1s; }
      tbody tr:hover td { background: var(--parch2); }
      td strong, td .row-primary {
        font-weight: 600;
        color: var(--char);
        font-size: 13px;
      }
      td .row-secondary {
        display: block;
        font-size: 10px;
        color: var(--char3);
        font-family: var(--mono);
        margin-top: 1px;
        letter-spacing: .02em;
      }
      td.mono { font-family: var(--mono); }

      
      
      .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 48px 24px;
        text-align: center;
        gap: 10px;
      }
      .empty-state-icon {
        font-size: 32px;
        opacity: .5;
        line-height: 1;
        margin-bottom: 2px;
      }
      .empty-state-title {
        font-size: 13px;
        font-weight: 600;
        color: var(--char2);
        font-family: var(--serif);
      }
      .empty-state-sub {
        font-size: 11px;
        color: var(--char3);
        line-height: 1.5;
        max-width: 220px;
      }
  
      
      #chat-float {
        position: fixed;
        bottom: 24px;
        right: 24px;
        z-index: 8800;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
        pointer-events: none;
      }
      #chat-float-panel {
        width: 336px;
        max-height: 440px;
        background: var(--parch);
        border: 1.5px solid var(--parch3);
        border-radius: var(--r2);
        box-shadow: 0 12px 40px rgba(26,20,16,.18), 0 2px 8px rgba(26,20,16,.1);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        pointer-events: all;
        transform-origin: bottom right;
        transition: opacity .2s, transform .2s;
      }
      #chat-float-panel.hidden {
        opacity: 0;
        transform: scale(.95) translateY(8px);
        pointer-events: none;
      }
      .cf-head {
        padding: 11px 14px;
        background: var(--leather);
        color: var(--text-on-dark);
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        cursor: default;
      }
      .cf-head-title {
        flex: 1;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: .01em;
        line-height: 1.15;
        font-family: var(--serif);
      }
      .cf-head-tags {
        display: flex;
        gap: 5px;
        font-size: 10px;
        font-family: var(--mono);
        opacity: .84;
      }
      .cf-pres {
        display: inline-flex;
        align-items: center;
        border: 1px solid rgba(255,255,255,.24);
        border-radius: 999px;
        padding: 2px 7px;
        line-height: 1;
      }
      .cf-pres.on {
        border-color: rgba(232,146,74,.5);
        color: #ffd9bb;
        background: rgba(232,146,74,.15);
      }
      .cf-pres.dim {
        opacity: .8;
      }
      .cf-head-close {
        background: none;
        border: none;
        color: var(--text-on-dark);
        opacity: .7;
        cursor: pointer;
        font-size: 15px;
        line-height: 1;
        padding: 0 2px;
        transition: opacity .15s;
      }
      .cf-head-close:hover { opacity: 1; }
      #cf-pinned-bar {
        display: none;
        align-items: center;
        gap: 7px;
        background: rgba(200,98,42,.1);
        border-bottom: 1px solid var(--parch3);
        padding: 6px 10px;
        cursor: pointer;
      }
      #cf-pinned-bar.visible {
        display: flex;
      }
      .cf-pin-ico {
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: .08em;
        color: var(--gold);
        border: 1px solid rgba(200,98,42,.35);
        border-radius: 999px;
        padding: 2px 6px;
        background: rgba(200,98,42,.12);
      }
      .cf-pin-txt {
        min-width: 0;
        flex: 1;
        font-size: 12px;
        color: var(--char2);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .cf-body {
        flex: 1;
        overflow-y: auto;
        padding: 14px 14px 12px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        background: var(--parch);
        min-height: 160px;
      }
      .cf-msg {
        max-width: 84%;
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .cf-msg.mine  { align-self: flex-end;   align-items: flex-end; }
      .cf-msg.other { align-self: flex-start; align-items: flex-start; }
      .cf-bubble {
        padding: 9px 12px;
        border-radius: 12px;
        font-size: 13px;
        font-family: var(--sans);
        font-weight: 500;
        line-height: 1.45;
        word-break: break-word;
      }
      .cf-msg.mine  .cf-bubble { background: var(--gold); color: #fff; border-radius: 12px 12px 3px 12px; }
      .cf-msg.other .cf-bubble { background: var(--parch2); border: 1.5px solid var(--parch3); color: var(--char); border-radius: 12px 12px 12px 3px; }
      .cf-meta   { font-size: 11px; color: #85705e; font-family: var(--sans); font-weight: 500; line-height: 1.2; }
      .cf-read { font-size: 10px; margin-left: 4px; }
      .cf-read.sent { color: var(--char3); }
      .cf-read.seen { color: var(--gold); }
      .cf-sender { font-size: 12px; color: #5f4d3e; font-family: var(--sans); font-weight: 700; margin-bottom: 1px; letter-spacing: 0; text-transform: none; line-height: 1.2; }
      .cf-sep    { text-align: center; font-size: 10px; color: #95816f; font-family: var(--mono); padding: 2px 0; }
      .cf-msg-actions { margin-top: 2px; display: flex; justify-content: flex-end; gap: 5px; }
      .cf-msg-actions.other { justify-content: flex-start; }
      .cf-msg-actions.mine { justify-content: flex-end; }
      .cf-act-btn {
        background: #efe5d8;
        border: 1px solid #d8c6b2;
        border-radius: 7px;
        width: 30px;
        height: 24px;
        padding: 0;
        font-size: 10px;
        color: #6a5644;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all .16s ease;
      }
      .cf-act-btn:hover {
        background: #e7dac9;
        border-color: #cdb59e;
        color: #4f3f31;
      }
      .cf-act-ico {
        width: 12px;
        height: 12px;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .cf-msg-actions.mine .cf-act-btn {
        background: rgba(200,98,42,.14);
        border-color: rgba(200,98,42,.38);
        color: #9e4e24;
      }
      .cf-msg-actions.mine .cf-act-btn:hover {
        background: rgba(200,98,42,.22);
        border-color: rgba(200,98,42,.48);
        color: #7d3d1b;
      }
      .cf-quote { border-left: 2px solid var(--gold); background: rgba(200,98,42,.08); border-radius: 6px; padding: 5px 7px; margin-bottom: 6px; }
      .cf-quote-autor { font-size: 9px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
      .cf-quote-texto { font-size: 10px; color: var(--char2); margin-top: 2px; }
      .cf-prod-card { border: 1px solid rgba(200,98,42,.35); background: rgba(200,98,42,.08); border-radius: 8px; padding: 7px 8px; }
      .cf-prod-tag { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); font-weight: 700; }
      .cf-prod-name { margin-top: 3px; font-size: 12px; font-weight: 700; color: var(--char); }
      .cf-prod-info { margin-top: 2px; font-size: 10px; color: var(--char2); }
      .cf-footer {
        padding: 0;
        border-top: 1.5px solid var(--parch3);
        display: flex;
        flex-direction: column;
        gap: 0;
        align-items: stretch;
        flex-shrink: 0;
        background: var(--parch2);
        position: relative;
      }
      .cf-footer-row { display:flex; gap:6px; align-items:flex-end; padding:10px 12px; }
      #cf-reply-preview { display:none; align-items:center; gap:7px; padding:7px 10px 6px; border-bottom:1px solid var(--parch3); background: var(--parch); }
      #cf-reply-preview.visible { display:flex; }
      .cf-rp-bar { width:3px; border-radius:2px; align-self:stretch; background: var(--gold); }
      .cf-rp-body { flex:1; min-width:0; }
      .cf-rp-autor { font-size:9px; letter-spacing:.06em; text-transform:uppercase; color: var(--gold); font-weight:700; }
      .cf-rp-texto { margin-top:2px; font-size:10px; color: var(--char2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      .cf-rp-close { border:none; background:none; color:var(--char3); font-size:16px; line-height:1; padding:0 3px; }
      #cf-prod-picker { position:absolute; left:0; right:0; bottom:100%; z-index:20; background:var(--parch); border:1.5px solid var(--parch3); border-radius:var(--r2) var(--r2) 0 0; box-shadow:0 -10px 26px rgba(26,20,16,.16); display:none; max-height:220px; overflow-y:auto; }
      #cf-prod-picker.visible { display:block; }
      #cf-prod-picker-search { width:100%; border:none; border-bottom:1px solid var(--parch3); background:var(--parch2); color:var(--char); padding:9px 10px; font-size:11px; outline:none; }
      .cf-pick-item { padding:9px 10px; border-bottom:1px solid var(--parch3); display:flex; justify-content:space-between; gap:8px; cursor:pointer; }
      .cf-pick-item:hover { background: rgba(200,98,42,.09); }
      .cf-pick-name { font-size:11px; color:var(--char); font-weight:600; }
      .cf-pick-meta { font-size:10px; color:var(--char3); }
      .cf-add-prod { width:34px; height:34px; border-radius:var(--r); border:1.5px solid var(--parch3); background:var(--parch); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
      .cf-input {
        flex: 1;
        background: var(--parch);
        border: 1.5px solid var(--parch3);
        color: var(--char);
        padding: 7px 10px;
        font-family: var(--sans);
        font-size: 13px;
        outline: none;
        border-radius: var(--r);
        resize: none;
        max-height: 80px;
        transition: border-color .15s;
      }
      .cf-input:focus { border-color: var(--gold); }
      .cf-send {
        width: 34px;
        height: 34px;
        background: linear-gradient(135deg, var(--gold), #e8924a);
        border: none;
        border-radius: var(--r);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: opacity .15s;
      }
      .cf-send:hover { opacity: .88; }
      .cf-send svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 2.5; }

      
      #chat-float-btn {
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, var(--gold), #e8924a);
        border: none;
        border-radius: 50%;
        box-shadow: 0 4px 16px rgba(200,98,42,.4);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: all;
        transition: transform .15s, box-shadow .15s;
        position: relative;
      }
      #chat-float-btn:hover { transform: scale(1.07); box-shadow: 0 6px 20px rgba(200,98,42,.5); }
      #chat-float-btn svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 2; fill: none; }
      #cf-badge {
        position: absolute;
        top: -3px;
        right: -3px;
        background: var(--red);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        font-family: var(--mono);
        min-width: 18px;
        height: 18px;
        border-radius: 9px;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        border: 2px solid var(--parch);
      }
      #cf-badge.visible { display: flex; }

      
      @media (max-width: 600px) {
        #chat-float { bottom: 16px; right: 16px; }
        #chat-float-panel { width: calc(100vw - 32px); }
      }

      

      

      
      .costo-table-card {
        background: var(--card-bg);
        border: var(--card-border);
        border-radius: var(--card-radius);
        overflow: hidden;
      }
      .costo-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
      }
      .costo-table th {
        padding: 9px 16px;
        text-align: left;
        font-size: 9px;
        font-weight: 600;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--char3);
        font-family: var(--mono);
        border-bottom: 1.5px solid var(--parch3);
        white-space: nowrap;
      }
      .costo-table td {
        padding: 11px 16px;
        border-bottom: 1px solid var(--parch2);
        color: var(--char2);
        vertical-align: middle;
      }
      .costo-table tr:last-child td { border-bottom: none; }
      .costo-table tr:hover td { background: var(--parch2); }
      .costo-cat-pill {
        display: inline-block;
        font-size: 10px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 20px;
        font-family: var(--mono);
        border: 1px solid;
      }
      .costo-monto {
        font-family: var(--mono);
        font-weight: 600;
        color: var(--char);
        white-space: nowrap;
      }
      .costo-edit,
      .costo-del {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--char3);
        font-size: 14px;
        padding: 4px 6px;
        border-radius: 4px;
        line-height: 1;
        transition: all .12s;
        vertical-align: middle;
      }
      .costo-edit { color: var(--char3); }
      .costo-edit:hover { color: var(--blue); background: rgba(42,90,140,.09); }
      .costo-del:hover  { color: var(--red);  background: rgba(181,58,42,.08); }
      .costo-empty {
        text-align: center;
        padding: 36px 20px;
        color: var(--char3);
        font-size: 13px;
      }
      
      .costo-cat-leg-item {
        display: flex; align-items: center; gap: 8px; font-size: 12px;
      }
      .costo-cat-leg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
      .costo-cat-leg-name { flex: 1; color: var(--char2); }
      .costo-cat-leg-pct { font-family: var(--mono); font-size: 10px; color: var(--char3); }
      .costo-cat-leg-amt { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--char); }
      .costo-rank-item {
        display: flex; align-items: center; gap: 10px;
        padding: 9px 0; border-bottom: 1px solid var(--parch2);
        font-size: 12px;
      }
      .costo-rank-item:last-child { border-bottom: none; }
      .costo-rank-num {
        width: 18px; height: 18px; border-radius: 50%;
        background: var(--parch2); border: 1px solid var(--parch3);
        font-size: 9px; font-family: var(--mono); font-weight: 700;
        color: var(--char3); display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
      }
      .costo-rank-info { flex: 1; min-width: 0; }
      .costo-rank-desc {
        color: var(--char2); font-weight: 500;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      .costo-rank-meta { font-size: 10px; color: var(--char3); margin-top: 1px; }
      .costo-rank-monto { font-family: var(--mono); font-weight: 600; font-size: 12px; color: var(--char); flex-shrink: 0; }
      @media (max-width: 640px) {
        
        .costo-cat-leg-amt { font-size: 10px; }
        .costo-table th:nth-child(4),
        .costo-table td:nth-child(4),
        .costo-table th:nth-child(5),
        .costo-table td:nth-child(5) { display: none; }
        .costo-rank-item { padding: 7px 0; }
        .costo-rank-monto { font-size: 11px; }
      }

      
      .costo-alert-item { padding:10px 12px; border:1px solid rgba(26,20,16,.08); border-radius:8px; background:var(--parch); }
      .costo-alert-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; }
      .costo-alert-cat { font-size:11px; font-weight:600; color:var(--char2); }
      .costo-alert-pct { font-size:10px; font-weight:700; font-family:var(--mono); }
      .costo-alert-pct.ok     { color:var(--green); }
      .costo-alert-pct.warn   { color:var(--amber); }
      .costo-alert-pct.danger { color:var(--red); }
      .costo-alert-bar-wrap { height:5px; background:rgba(26,20,16,.1); border-radius:3px; margin-bottom:5px; overflow:hidden; }
      .costo-alert-bar-fill { height:100%; border-radius:3px; transition:width .4s; }
      .costo-alert-amounts { display:flex; justify-content:space-between; font-size:9px; font-family:var(--mono); color:var(--char3); }
      .costo-alert-lim-row { display:flex; align-items:center; gap:4px; margin-top:6px; padding-top:5px; border-top:1px solid rgba(26,20,16,.07); }
      .costo-alert-lim-row label { font-size:9px; color:var(--char3); white-space:nowrap; }
      .costo-alert-lim-inp { font-size:10px; font-family:var(--mono); border:1px solid rgba(26,20,16,.15); border-radius:5px; padding:2px 5px; width:68px; background:var(--parch); color:var(--char); outline:none; }
      .costo-alert-lim-btn { font-size:9px; padding:2px 7px; border-radius:5px; background:var(--char); color: var(--text-on-dark); border:none; cursor:pointer; flex-shrink:0; }

      
      .costo-prov-item { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid rgba(26,20,16,.07); }
      .costo-prov-item:last-child { border-bottom:none; }
      .costo-prov-rank { font-size:11px; font-weight:700; color:var(--char3); width:16px; text-align:center; flex-shrink:0; }
      .costo-prov-info { flex:1; min-width:0; }
      .costo-prov-name { font-size:11px; font-weight:600; color:var(--char); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .costo-prov-meta { font-size:9px; color:var(--char3); margin-top:1px; }
      .costo-prov-bar-wrap { width:60px; height:4px; background:rgba(26,20,16,.1); border-radius:2px; flex-shrink:0; overflow:hidden; }
      .costo-prov-bar-fill { height:100%; background:rgba(200,98,42,.7); border-radius:2px; }
      .costo-prov-monto { font-size:11px; font-weight:700; font-family:var(--mono); color:var(--char); flex-shrink:0; min-width:65px; text-align:right; }

      
      .costo-dup { background:none; border:none; cursor:pointer; color:var(--char3); padding:2px 4px; border-radius:4px; font-size:12px; transition:all .12s; vertical-align:middle; }
      .costo-dup:hover { color:var(--blue); background:rgba(42,90,140,.1); }
      .costo-quick-btn { font-size:11px; padding:4px 10px; border-radius:6px; border:1px solid rgba(42,90,140,.25); background:var(--parch); color:var(--char2); cursor:pointer; transition:all .12s; display:flex; align-items:center; gap:4px; }
      .costo-quick-btn:hover { background:var(--char); color: var(--text-on-dark); border-color:var(--char); }

      
      .costo-cal-header-row { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; }
      .costo-cal-hdr { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--char3); text-align:center; padding:2px 0; }
      .costo-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
      .costo-cal-day { min-height:40px; border-radius:5px; padding:3px 4px; background:var(--parch); border:1px solid rgba(26,20,16,.06); cursor:pointer; transition:all .12s; }
      .costo-cal-day:hover { border-color:rgba(26,20,16,.2); }
      .costo-cal-day.has-data { background:rgba(200,98,42,.07); border-color:rgba(200,98,42,.2); }
      .costo-cal-day.today { border-color:var(--gold) !important; }
      .costo-cal-day.selected { background:rgba(26,20,16,.07) !important; border-color:var(--char) !important; }
      .costo-cal-day.empty { background:transparent; border-color:transparent; cursor:default; pointer-events:none; }
      .costo-cal-num { font-size:9px; color:var(--char3); font-weight:500; }
      .costo-cal-day.today .costo-cal-num { color:var(--gold); font-weight:700; }
      .costo-cal-amt { font-size:9px; font-family:var(--mono); font-weight:600; color:rgba(200,98,42,.85); margin-top:2px; line-height:1.2; word-break:break-all; }

      @media (max-width:640px) {
        .costo-prov-bar-wrap { display:none; }
        .costo-cal-day { min-height:32px; }
        .costo-cal-amt { font-size:8px; }
      }

      
      
      .costo-comp-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(26,20,16,.07); }
      .costo-comp-row:last-child { border-bottom:none; }
      .costo-comp-label { font-size:11px; color:var(--char3); flex:1; }
      .costo-comp-vals { display:flex; align-items:center; gap:10px; }
      .costo-comp-prev { font-size:11px; color:var(--char3); font-family:var(--mono); min-width:70px; text-align:right; }
      .costo-comp-curr { font-size:12px; font-weight:600; color:var(--char); font-family:var(--mono); min-width:80px; text-align:right; }
      .costo-delta { font-size:10px; font-weight:700; padding:2px 6px; border-radius:5px; font-family:var(--mono); min-width:40px; text-align:center; }
      .costo-delta-neu  { background:rgba(26,20,16,.07);   color:var(--char3); }
      .costo-comp-month-labels { display:flex; justify-content:flex-end; gap:10px; padding-bottom:6px; margin-bottom:2px; border-bottom:1px solid rgba(26,20,16,.1); }
      .costo-comp-month-lbl { font-size:9px; text-transform:uppercase; letter-spacing:.05em; color:var(--char3); }
      .costo-comp-month-lbl span { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:3px; vertical-align:middle; }

      
      .costo-proj-stat { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
      .costo-proj-stat-label { font-size:11px; color:var(--char3); }
      .costo-proj-stat-val { font-size:13px; font-weight:700; font-family:var(--mono); color:var(--char); }
      .costo-proj-bar-wrap { height:8px; background:rgba(26,20,16,.1); border-radius:4px; margin:4px 0 8px; overflow:hidden; }
      .costo-proj-bar-fill { height:100%; border-radius:4px; transition:width .5s ease; }
      .costo-proj-alert { font-size:11px; padding:7px 10px; border-radius:7px; margin-top:6px; line-height:1.45; }
      .costo-proj-alert.ok     { background:rgba(45,122,79,.1);  color:var(--green); }
      .costo-proj-alert.warn   { background:rgba(160,98,10,.1);  color:var(--amber); }
      .costo-proj-alert.danger { background:rgba(181,58,42,.1);  color:var(--red); }
      .costo-proj-budget-row { display:flex; align-items:center; gap:8px; margin-top:12px; padding-top:10px; border-top:1px solid rgba(26,20,16,.08); }
      .costo-proj-budget-row label { font-size:10px; color:var(--char3); white-space:nowrap; }
      .costo-proj-budget-inp { font-size:11px; font-family:var(--mono); border:1px solid rgba(26,20,16,.15); border-radius:6px; padding:4px 8px; width:100px; background:var(--parch); color:var(--char); outline:none; }
      .costo-proj-budget-btn { font-size:10px; padding:4px 9px; border-radius:6px; background:var(--char); color: var(--text-on-dark); border:none; cursor:pointer; white-space:nowrap; }
      .costo-proj-budget-btn:hover { opacity:.85; }

      
      .costo-suc-table { width:100%; border-collapse:collapse; font-size:12px; }
      .costo-suc-table th { font-size:9px; font-weight:700; color:var(--char3); text-transform:uppercase; letter-spacing:.06em; padding:5px 10px; border-bottom:1px solid rgba(26,20,16,.12); text-align:right; }
      .costo-suc-table th:first-child { text-align:left; }
      .costo-suc-table td { padding:8px 10px; border-bottom:1px solid rgba(26,20,16,.06); font-family:var(--mono); font-size:11px; text-align:right; color:var(--char); }
      .costo-suc-table td:first-child { font-family:inherit; font-size:11px; font-weight:500; color:var(--char2); text-align:left; }
      .costo-suc-table tr:last-child td { border-bottom:none; font-weight:700; background:rgba(26,20,16,.025); }
      .costo-suc-tag { display:inline-block; padding:2px 7px; border-radius:4px; font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
      .costo-suc-tag.l1 { background:rgba(42,90,140,.12); color:rgba(42,90,140,.9); }
      .costo-suc-tag.l2 { background:rgba(200,98,42,.12); color:rgba(200,98,42,.9); }

      
      .costo-rec-badge { display:inline-flex; align-items:center; gap:3px; font-size:9px; font-weight:600; color:var(--blue); background:rgba(42,90,140,.1); border-radius:4px; padding:1px 5px; margin-left:4px; vertical-align:middle; }
      .costo-rec-check-row { display:flex; align-items:center; gap:8px; padding:8px 0 2px; }
      .costo-rec-check-row input[type=checkbox] { width:15px; height:15px; cursor:pointer; accent-color:var(--char); }
      .costo-rec-check-row label { font-size:12px; color:var(--char2); cursor:pointer; }
      #page-costos .costo-period-range {
        font-family: var(--mono);
        font-size: 9px;
        color: var(--t4);
        margin-left: auto;
        letter-spacing: 0.06em;
      }
      #page-costos .costo-cat-leg-name {
        font-size: 12px;
        color: var(--t2);
      }
      #page-costos .costo-cat-leg-pct {
        font-family: var(--mono);
        font-size: 9.5px;
        color: var(--t4);
      }
      #page-costos .costo-cat-leg-amt {
        font-family: var(--serif);
        font-size: 13px;
        font-weight: 700;
        font-style: italic;
        letter-spacing: -0.02em;
        color: var(--t1);
      }

      
      #page-costos .costo-rank-item {
        padding: 10px 0;
        border-bottom: 1px solid rgba(26,20,16,0.05);
      }
      #page-costos .costo-rank-num {
        width: 18px; height: 18px;
        border-radius: 50%;
        background: rgba(26,20,16,0.05);
        border: 1px solid rgba(26,20,16,0.10);
        font-family: var(--mono);
        font-size: 8.5px;
        font-weight: 700;
        color: var(--t4);
      }
      #page-costos .costo-rank-desc {
        font-size: 12px;
        font-weight: 500;
        color: var(--t1);
      }
      #page-costos .costo-rank-meta {
        font-family: var(--mono);
        font-size: 9px;
        color: var(--t4);
        margin-top: 2px;
      }
      #page-costos .costo-rank-monto {
        font-family: var(--serif);
        font-size: 14px;
        font-weight: 700;
        font-style: italic;
        letter-spacing: -0.02em;
        color: var(--t1);
      }

      
      #page-costos .costo-table-card {
        background: #ffffff;
        border: 1px solid rgba(26,20,16,0.08);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(26,20,16,0.04);
      }
      #page-costos .costo-table th {
        font-family: var(--mono);
        font-size: 8px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--t4);
        font-weight: 500;
        padding: 11px 16px;
        border-bottom: 1px solid rgba(26,20,16,0.07);
        background: #faf7f2;
        white-space: nowrap;
      }
      #page-costos .costo-table td {
        padding: 12px 16px;
        border-bottom: 1px solid rgba(26,20,16,0.05);
        color: var(--t2);
        vertical-align: middle;
      }
      #page-costos .costo-table tr:last-child td { border-bottom: none; }
      #page-costos .costo-table tr:hover td {
        background: rgba(245,239,230,0.60);
      }
      #page-costos .costo-monto {
        font-family: var(--serif);
        font-size: 15px;
        font-weight: 700;
        font-style: italic;
        letter-spacing: -0.02em;
        color: var(--t1);
      }
      #page-costos .costo-cat-pill {
        font-family: var(--mono);
        font-size: 8.5px;
        letter-spacing: 0.10em;
        padding: 3px 8px;
        border-radius: 3px;
      }
      #page-costos .costo-edit,
      #page-costos .costo-del,
      #page-costos .costo-dup {
        border-radius: 4px;
        padding: 3px 6px;
        font-size: 13px;
        transition:
          color      var(--motion-fast) var(--ease-ui),
          background var(--motion-fast) var(--ease-ui);
      }
      #page-costos .costo-empty {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--t4);
        letter-spacing: 0.08em;
        padding: 40px 20px;
      }

      
      #page-costos .costo-alert-grid {
        gap: 10px;
      }
      #page-costos .costo-alert-item {
        background: #ffffff;
        border: 1px solid rgba(26,20,16,0.08);
        border-radius: 8px;
        padding: 13px 14px;
        box-shadow: 0 1px 6px rgba(26,20,16,0.03);
        transition: box-shadow var(--motion-fast) var(--ease-ui);
      }
      #page-costos .costo-alert-item:hover {
        box-shadow: 0 4px 16px rgba(26,20,16,0.08);
      }
      #page-costos .costo-alert-cat {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--t3);
      }
      #page-costos .costo-alert-pct {
        font-family: var(--serif);
        font-size: 15px;
        font-weight: 700;
        font-style: italic;
        letter-spacing: -0.02em;
      }
      #page-costos .costo-alert-bar-wrap {
        height: 4px;
        background: rgba(26,20,16,0.08);
        border-radius: 2px;
      }
      #page-costos .costo-alert-bar-fill { border-radius: 2px; }
      #page-costos .costo-alert-amounts {
        font-family: var(--mono);
        font-size: 8.5px;
        color: var(--t4);
        letter-spacing: 0.04em;
      }
      #page-costos .costo-alert-lim-inp {
        font-family: var(--mono);
        font-size: 10px;
        border: 1px solid rgba(26,20,16,0.12);
        border-radius: 4px;
        background: rgba(245,239,230,0.60);
        color: var(--t1);
        padding: 3px 6px;
      }
      #page-costos .costo-alert-lim-inp:focus {
        border-color: var(--gold);
        outline: none;
      }
      #page-costos .costo-alert-lim-btn {
        font-family: var(--mono);
        font-size: 8.5px;
        letter-spacing: 0.10em;
        background: #1a1410;
        color: rgba(240,230,214,0.88);
        border: none;
        border-radius: 4px;
        padding: 3px 9px;
        cursor: pointer;
      }

      
      #page-costos .costo-prov-item {
        padding: 9px 0;
        border-bottom: 1px solid rgba(26,20,16,0.05);
      }
      #page-costos .costo-prov-rank {
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        color: var(--t4);
      }
      #page-costos .costo-prov-name {
        font-size: 12px;
        font-weight: 600;
        color: var(--t1);
        letter-spacing: -0.01em;
      }
      #page-costos .costo-prov-meta {
        font-family: var(--mono);
        font-size: 9px;
        color: var(--t4);
        margin-top: 2px;
      }
      #page-costos .costo-prov-bar-fill {
        background: rgba(200,98,42,0.55);
        border-radius: 2px;
      }
      #page-costos .costo-prov-monto {
        font-family: var(--serif);
        font-size: 13px;
        font-weight: 700;
        font-style: italic;
        letter-spacing: -0.02em;
        color: var(--t1);
      }

      
      #page-costos .costo-comp-label {
        font-size: 12px;
        color: var(--t2);
      }
      #page-costos .costo-comp-prev {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--t4);
      }
      #page-costos .costo-comp-curr {
        font-family: var(--serif);
        font-size: 14px;
        font-weight: 700;
        font-style: italic;
        letter-spacing: -0.02em;
        color: var(--t1);
      }
      #page-costos .costo-delta {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        border-radius: 3px;
        padding: 2px 6px;
        letter-spacing: 0.04em;
      }

      
      #page-costos .costo-proj-stat-label {
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.10em;
        color: var(--t3);
        text-transform: uppercase;
      }
      #page-costos .costo-proj-stat-val {
        font-family: var(--serif);
        font-size: 15px;
        font-weight: 700;
        font-style: italic;
        letter-spacing: -0.02em;
        color: var(--t1);
      }
      #page-costos .costo-proj-bar-wrap {
        height: 6px;
        background: rgba(26,20,16,0.08);
        border-radius: 2px;
      }
      #page-costos .costo-proj-bar-fill { border-radius: 2px; }
      #page-costos .costo-proj-budget-inp {
        font-family: var(--mono);
        font-size: 11px;
        border: 1px solid rgba(26,20,16,0.12);
        border-radius: 5px;
        background: rgba(245,239,230,0.60);
        color: var(--t1);
        padding: 5px 9px;
      }
      #page-costos .costo-proj-budget-btn {
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.12em;
        background: #1a1410;
        color: rgba(240,230,214,0.88);
        border-radius: 5px;
        padding: 5px 10px;
      }

      
      #page-costos .costo-cal-hdr {
        font-family: var(--mono);
        font-size: 8px;
        letter-spacing: 0.14em;
        color: var(--t4);
        text-transform: uppercase;
      }
      #page-costos .costo-cal-day {
        background: rgba(255,255,255,0.70);
        border: 1px solid rgba(26,20,16,0.06);
        border-radius: 5px;
        min-height: 42px;
        transition:
          border-color var(--motion-fast) var(--ease-ui),
          background   var(--motion-fast) var(--ease-ui);
      }
      #page-costos .costo-cal-day:hover {
        border-color: rgba(26,20,16,0.18);
        background: #ffffff;
      }
      #page-costos .costo-cal-day.has-data {
        background: rgba(200,98,42,0.06);
        border-color: rgba(200,98,42,0.18);
      }
      #page-costos .costo-cal-day.today {
        border-color: var(--gold) !important;
      }
      #page-costos .costo-cal-num {
        font-family: var(--mono);
        font-size: 9px;
        color: var(--t4);
        font-weight: 500;
      }
      #page-costos .costo-cal-day.today .costo-cal-num {
        color: var(--gold);
        font-weight: 700;
      }
      #page-costos .costo-cal-amt {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 600;
        color: rgba(200,98,42,0.80);
        margin-top: 2px;
      }

      
      #page-costos .costo-quick-section {
        background: rgba(42,90,140,0.04);
        border: 1px dashed rgba(42,90,140,0.20);
        border-radius: 6px;
        padding: 10px 14px;
        margin-bottom: 10px;
      }
      #page-costos .costo-quick-btn {
        font-family: var(--mono);
        font-size: 9.5px;
        letter-spacing: 0.06em;
        border: 1px solid rgba(26,20,16,0.10);
        background: #ffffff;
        color: var(--t2);
        border-radius: 4px;
        padding: 5px 10px;
        transition:
          background var(--motion-fast) var(--ease-ui),
          color      var(--motion-fast) var(--ease-ui);
      }
      #page-costos .costo-quick-btn:hover {
        background: #1a1410;
        color: rgba(240,230,214,0.88);
        border-color: #1a1410;
      }

      

      #page-dashboard .dash-time {
        font-style: normal;
        letter-spacing: -0.02em;
      }
      
      #page-dashboard #ds-venc-cell.venc-alert-critical {
        --venc-edge: rgba(181, 58, 42, 0.55);
        box-shadow: inset 0 0 0 1px var(--venc-edge);
      }
      #page-dashboard #ds-venc-cell.venc-alert-warn {
        --venc-edge: rgba(200, 98, 42, 0.46);
        box-shadow: inset 0 0 0 1px var(--venc-edge);
      }
      #page-dashboard #ds-venc-cell.venc-alert-ok {
        --venc-edge: rgba(45, 122, 79, 0.36);
        box-shadow: inset 0 0 0 1px var(--venc-edge);
      }
      #page-dashboard #ds-sparkline {
        opacity: 0.42;
      }

      
      #page-dashboard .dash-body-grid {
        display: grid;
        grid-template-columns: 1.2fr 1fr 0.85fr;
        grid-template-areas: "sesion stock tools";
        align-items: start;
      }
      #page-dashboard .dash-body-grid > .dash-panel:nth-child(1) { grid-area: stock; }
      #page-dashboard .dash-body-grid > .dash-panel:nth-child(2) { grid-area: sesion; }
      #page-dashboard .dash-panel {
        border-radius: 12px;
      }
      #page-dashboard .nota-texto{
        font-weight: 500;
      }

      @media (max-width: 1100px) {
        #page-dashboard .dash-body-grid {
          grid-template-columns: 1fr 1fr;
          grid-template-areas:
            "sesion stock"
            "tools tools";
        }
      }
      @media (max-width: 960px) {
        #page-dashboard .dash-time {
          font-size: 34px;
        }
        #page-dashboard .dash-body-grid {
          grid-template-columns: 1fr;
          grid-template-areas:
            "sesion"
            "stock"
            "tools";
        }
      }
      @media (max-width: 600px) {
        #page-dashboard .dash-time {
          font-size: 28px;
        }
        #page-dashboard .dash-status-dot {
          font-size: 9px;
          padding: 3px 7px;
        }
        #page-dashboard #ds-sparkline {
          display: none;
        }
        #page-dashboard #ds-medios {
          gap: 4px !important;
          margin-top: 7px;
        }
        #page-dashboard .dash-body-grid {
          gap: 8px;
        }
        #page-dashboard .dash-panel {
          border-radius: 10px;
        }
        #page-dashboard .nota-item{
          padding-left: 10px;
          padding-right: 10px;
        }
      }
      #page-dashboard .dash-time {
        font-weight: 420;
      }
      #page-dashboard .dash-body-grid {
        gap: 12px;
      }
      #page-dashboard .dash-panel {
        border-color: var(--line-strong);
      }
      #page-dashboard .dash-tl-item,
      #page-dashboard .nota-item{
        border-bottom-color: var(--line-soft);
      }
      #page-dashboard .dash-tl-item:hover,
      #page-dashboard .nota-item:hover{
        background: rgba(200, 98, 42, 0.06);
      }
      #page-dashboard .dash-tl-meta,
      #page-dashboard .dash-tl-hora,
      #page-dashboard .nota-meta {
        color: var(--text-meta);
      }
      @media (max-width: 960px) {
        #page-dashboard .dash-body-grid {
          gap: 10px;
        }
      }

      

      #page-carga { padding-bottom: 40px; }

      
      #page-carga .ph {
        padding: 0 0 20px 0;
        margin-bottom: 22px;
        background: none;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid var(--line-soft);
      }
      #page-carga .ph-title {
        font-family: var(--serif);
        font-size: 26px;
        font-weight: 300;
        font-style: italic;
        color: var(--t1);
        letter-spacing: -0.02em;
        line-height: 1.1;
      }
      #page-carga .ph-sub {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--t3);
        margin-top: 5px;
      }

      
      #page-carga > div:has(#carga-local) {
        background: #ffffff;
        border: 1px solid var(--line-soft);
        border-radius: 10px;
        padding: 14px 16px !important;
        margin-bottom: 14px;
        box-shadow: 0 1px 6px rgba(26,20,16,0.04);
      }
      
      #page-carga > div:has(#carga-local) > div > div:first-child {
        font-family: var(--mono) !important;
        font-size: 8.5px !important;
        letter-spacing: 0.16em !important;
        text-transform: uppercase !important;
        color: var(--t3) !important;
        margin-bottom: 5px !important;
      }
      
      #page-carga label {
        font-family: var(--mono) !important;
        font-size: 9px !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
        color: var(--t2) !important;
      }

      
      #page-carga select,
      #page-carga input[type="text"],
      #page-carga input[type="date"],
      #page-carga input[type="number"] {
        background: #faf8f5 !important;
        border: 1px solid rgba(26,20,16,0.16) !important;
        border-radius: 8px !important;
        color: #1a1410 !important;
        font-family: var(--sans) !important;
        font-size: 13px !important;
        height: 36px !important;
        min-height: unset !important;
        padding: 0 10px !important;
        box-shadow: none !important;
        outline: none !important;
        transition: border-color 0.15s, box-shadow 0.15s;
      }
      #page-carga select:focus,
      #page-carga input[type="text"]:focus,
      #page-carga input[type="date"]:focus,
      #page-carga input[type="number"]:focus {
        border-color: rgba(200,98,42,0.60) !important;
        box-shadow: 0 0 0 3px rgba(200,98,42,0.10) !important;
      }
      #page-carga input[type="checkbox"] {
        min-height: unset !important;
        width: 15px !important;
        height: 15px !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        accent-color: var(--ember);
      }

      
      #page-carga > div:has(#carga-base-global) {
        background: #1a1410 !important;
        border: 1px solid rgba(200,98,42,0.20) !important;
        border-top: 2px solid rgba(200,98,42,0.72) !important;
        border-radius: 10px !important;
        padding: 16px 20px !important;
        margin-bottom: 18px !important;
        position: relative;
        overflow: hidden;
      }
      #page-carga > div:has(#carga-base-global)::before {
        content: '';
        position: absolute;
        top: -24px;
        right: -24px;
        width: 110px;
        height: 110px;
        background: radial-gradient(circle, rgba(200,98,42,0.16) 0%, transparent 68%);
        pointer-events: none;
      }
      
      #page-carga > div:has(#carga-base-global) > div:first-child {
        font-family: var(--mono) !important;
        font-size: 8.5px !important;
        font-weight: 600 !important;
        letter-spacing: 0.22em !important;
        text-transform: uppercase !important;
        color: rgba(200,98,42,0.90) !important;
        margin-bottom: 5px !important;
      }
      
      #page-carga > div:has(#carga-base-global) > div:nth-child(2) {
        font-family: var(--sans) !important;
        font-size: 11px !important;
        color: rgba(240,230,214,0.48) !important;
        margin-bottom: 14px !important;
        letter-spacing: 0.01em !important;
      }
      
      #page-carga > div:has(#carga-base-global) select,
      #page-carga > div:has(#carga-base-global) input[type="date"] {
        background: rgba(255,255,255,0.07) !important;
        border: 1px solid rgba(200,98,42,0.22) !important;
        border-radius: 8px !important;
        color: rgba(240,230,214,0.88) !important;
        min-height: 36px !important;
        font-size: 12px !important;
        box-shadow: none !important;
      }
      #page-carga > div:has(#carga-base-global) select:focus,
      #page-carga > div:has(#carga-base-global) input[type="date"]:focus {
        border-color: rgba(200,98,42,0.72) !important;
        box-shadow: 0 0 0 3px rgba(200,98,42,0.12) !important;
      }
      
      #page-carga > div:has(#carga-base-global) > div:last-child > div > div:first-child {
        font-family: var(--mono) !important;
        font-size: 8.5px !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
        color: rgba(240,230,214,0.38) !important;
        margin-bottom: 4px !important;
      }

      
      #page-carga #carga-tabla-wrap {
        border: 1px solid var(--line-soft) !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        overflow: auto !important;
        box-shadow: 0 2px 12px rgba(26,20,16,0.05) !important;
      }
      #page-carga #carga-tabla-content {
        background: #ffffff;
      }
      #page-carga #carga-tabla-content table {
        background: #ffffff !important;
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 13px !important;
      }

      
      #page-carga #carga-tabla-content thead tr {
        border-bottom: 1.5px solid rgba(200,98,42,0.30) !important;
      }
      
      #page-carga #carga-tabla-content th {
        background: #1a1410 !important;
        font-family: var(--mono) !important;
        font-size: 8.5px !important;
        letter-spacing: 0.16em !important;
        text-transform: uppercase !important;
        color: rgba(240,230,214,0.56) !important;
        font-weight: 500 !important;
        padding: 11px 14px !important;
        white-space: nowrap !important;
        border-bottom: none !important;
      }

      
      #page-carga #carga-tabla-content tr {
        border-bottom: 1px solid var(--line-soft) !important;
      }
      #page-carga #carga-tabla-content tbody tr:last-child {
        border-bottom: none !important;
      }
      
      #page-carga #carga-tabla-content td {
        padding: 12px 14px !important;
        background: #ffffff !important;
        vertical-align: middle !important;
        transition: background var(--motion-fast) var(--ease-ui);
        color: var(--t1) !important;
      }
      #page-carga #carga-tabla-content tbody tr:hover td {
        background: rgba(200,98,42,0.04) !important;
      }

      
      #page-carga #carga-tabla-content td > div[style*="font-weight:500"],
      #page-carga #carga-tabla-content td > div[style*="font-weight: 500"] {
        font-family: var(--serif) !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        font-style: italic !important;
        color: var(--t1) !important;
        letter-spacing: -0.01em !important;
        line-height: 1.2 !important;
      }
      
      #page-carga #carga-tabla-content td > div[style*="font-size:10px"],
      #page-carga #carga-tabla-content td > div[style*="font-size: 10px"] {
        font-family: var(--mono) !important;
        font-size: 9px !important;
        letter-spacing: 0.10em !important;
        text-transform: uppercase !important;
        color: var(--t3) !important;
        margin-top: 2px !important;
      }
      
      #page-carga #carga-tabla-content td:nth-child(2) {
        font-family: var(--mono) !important;
        font-size: 13px !important;
        color: var(--t2) !important;
        white-space: nowrap !important;
      }

      
      #page-carga #carga-tabla-content input[type="number"],
      #page-carga #carga-tabla-content input[type="date"],
      #page-carga #carga-tabla-content input:not([type="checkbox"]),
      #page-carga #carga-tabla-content select {
        background: #faf8f5 !important;
        border: 1px solid rgba(26,20,16,0.16) !important;
        border-radius: 8px !important;
        color: #1a1410 !important;
        font-family: var(--mono) !important;
        font-size: 12px !important;
        height: 32px !important;
        min-height: unset !important;
        padding: 0 8px !important;
        box-shadow: none !important;
        outline: none !important;
        transition: border-color 0.15s, box-shadow 0.15s;
      }
      #page-carga #carga-tabla-content input[type="number"]:focus,
      #page-carga #carga-tabla-content input[type="date"]:focus,
      #page-carga #carga-tabla-content input:not([type="checkbox"]):focus,
      #page-carga #carga-tabla-content select:focus {
        border-color: rgba(200,98,42,0.60) !important;
        box-shadow: 0 0 0 3px rgba(200,98,42,0.10) !important;
      }

      
      #page-carga #carga-tabla-content [id^="carga-preview-"] {
        font-family: var(--mono) !important;
        font-size: 10px !important;
        color: #3a7d44 !important;
        letter-spacing: 0.06em;
        margin-top: 4px !important;
      }
      
      #page-carga #carga-tabla-content span {
        font-family: var(--mono) !important;
        font-size: 9px !important;
        letter-spacing: 0.10em !important;
        text-transform: uppercase !important;
        color: var(--t3) !important;
      }

      
      #page-carga #carga-resumen {
        margin-top: 14px;
        padding: 13px 18px !important;
        background: #ffffff !important;
        border: 1px solid var(--line-soft) !important;
        border-radius: 10px !important;
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.06em;
        color: var(--t2) !important;
        box-shadow: 0 2px 8px rgba(26,20,16,0.04);
        display: flex;
        align-items: center;
        gap: 8px;
      }
      #page-carga #carga-resumen strong {
        font-family: var(--serif);
        font-size: 15px;
        font-weight: 700;
        font-style: italic;
        color: var(--t1);
        letter-spacing: -0.02em;
      }

      
      #page-carga .empty {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--t4);
        padding: 52px 24px;
        text-align: center;
      }

      
      @media (max-width: 640px) {
        #page-carga .ph { padding: 0 0 16px 0; }
        #page-carga #carga-tabla-wrap { border-radius: 8px; }
        #page-carga #carga-tabla-content table { min-width: 920px; }
        #page-carga > div:has(#carga-local) { padding: 12px !important; border-radius: 8px; }
        #page-carga > div:has(#carga-base-global) { padding: 13px 14px !important; border-radius: 8px !important; }
      }

                              
      #page-clientes .ph {
        margin-bottom: 12px;
        padding: 14px 16px;
        border-radius: var(--r2);
        border: 1.5px solid var(--parch3);
      }
      #page-clientes .ph-title {
        color: var(--char);
        letter-spacing: 0.01em;
      }
      #page-clientes .ph-sub {
        letter-spacing: 0.1em;
      }
      #page-clientes .row-primary {
        color: var(--char);
      }
      #page-clientes .row-secondary {
        color: var(--char3);
      }
      #page-clientes .btn-icon {
        border: 1.5px solid var(--parch3);
        background: var(--parch2);
        box-shadow: none;
      }
      #page-clientes .btn-icon:hover {
        border-color: var(--gold-ln);
        background: rgba(200, 98, 42, 0.08);
      }
      @media (prefers-reduced-motion: reduce) {
        #page-clientes .btn-icon {
          transition: none;
        }
      }
      @media (max-width: 640px) {
        #page-clientes .ph {
          padding: 11px 11px;
          border-radius: var(--r);
        }
      }

      
      #page-clientes .ph{
        border-color: var(--line-strong);
      }
      #page-clientes .ph {
        background: var(--surface-1);
      }
      #page-clientes .ph-sub {
        color: var(--text-meta);
      }
      #page-clientes .cli-client-name {
        font-size: 15px;
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--char);
      }
      #page-clientes .cli-client-meta {
        margin-top: 4px;
        font-size: 11px;
        line-height: 1.38;
        color: var(--text-meta);
      }
      #page-clientes .cli-contact-stack {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      #page-clientes .cli-whatsapp,
      #page-clientes .cli-email {
        font-size: 12px;
        color: var(--char);
      }
      #page-clientes .cli-contact-muted {
        font-size: 11px;
        color: var(--text-meta);
      }
      #page-clientes .cli-activity-main {
        font-size: 13px;
        font-weight: 620;
        color: var(--char);
      }
      #page-clientes .cli-activity-sub {
        margin-top: 3px;
        font-size: 11px;
        color: var(--text-meta);
      }
      #page-clientes .cli-points,
      #page-clientes .cli-caja {
        font-family: var(--mono);
        font-size: 14px;
        font-weight: 700;
        color: var(--char);
        letter-spacing: -0.015em;
      }
      #page-clientes .cli-points-sub,
      #page-clientes .cli-caja-sub {
        margin-top: 3px;
        font-size: 10px;
        color: var(--text-meta);
      }
      #page-clientes .cli-gestion,
      #page-clientes .cli-actions {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        align-items: center;
      }
      #page-clientes .cli-gestion .btn-ghost {
        font-size: 10px;
        padding: 5px 10px !important;
      }
      #page-clientes .cli-actions .btn-icon {
        width: 29px;
        height: 29px;
      }
      @media (max-width: 640px) {
        #page-clientes .cli-client-name {
          font-size: 14px;
        }
      }

      
      .fid-kpi {
        background: #f3ecdf;
        border: 1px solid rgba(205, 188, 165, 0.84);
        border-radius: 12px;
        padding: 10px 12px;
      }
      .fid-kpi-label {
        font-size: 9px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--char3);
        margin-bottom: 3px;
      }
      .fid-kpi-val {
        font-family: var(--mono);
        font-size: 20px;
        color: var(--char);
      }
      .fid-card {
        background: #f7f1e7;
        border: 1px solid rgba(205, 188, 165, 0.86);
        border-radius: 12px;
        overflow: hidden;
      }
      .fid-card-head {
        padding: 10px 12px;
        border-bottom: 1px solid rgba(205, 188, 165, 0.75);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }
      .fid-card-title {
        font-size: 10px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--char2);
        font-weight: 700;
      }
      .fid-card-body {
        padding: 9px 10px;
      }
      .fid-item {
        border-bottom: 1px solid rgba(205, 188, 165, 0.62);
        padding: 8px 0;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
        align-items: center;
      }
      .fid-item:last-child { border-bottom: none; }
      .fid-item-title {
        color: var(--char);
        font-size: 12px;
        font-weight: 600;
      }
      .fid-item-sub {
        color: var(--char3);
        font-size: 10px;
        font-family: var(--mono);
        margin-top: 2px;
      }
      .fid-item-actions {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
        justify-content: flex-end;
      }
      .fid-chart-row {
        display: grid;
        grid-template-columns: 90px 1fr 62px;
        gap: 8px;
        align-items: center;
        margin-bottom: 7px;
      }
      .fid-chart-row:last-child { margin-bottom: 0; }
      .fid-chart-lbl {
        font-size: 10px;
        color: var(--char2);
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }
      .fid-chart-track {
        position: relative;
        height: 10px;
        border-radius: 999px;
        overflow: hidden;
        border: 1px solid rgba(205, 188, 165, 0.72);
        background: #efe7d8;
      }
      .fid-chart-fill {
        height: 100%;
        border-radius: 999px;
        min-width: 2px;
        transition: width .28s ease;
      }
      .fid-chart-fill.p1 { background: linear-gradient(90deg, #8f7a62, #b19a7f); }
      .fid-chart-fill.p2 { background: linear-gradient(90deg, #b38b43, #d6ab55); }
      .fid-chart-fill.p3 { background: linear-gradient(90deg, #b07a36, #d2a25f); }
      .fid-chart-fill.ok { background: linear-gradient(90deg, #617f54, #7f9f69); }
      .fid-chart-fill.warn { background: linear-gradient(90deg, #9f6842, #bc875a); }
      .fid-chart-fill.dim { background: linear-gradient(90deg, #8f8473, #aaa08f); }
      .fid-chart-val {
        text-align: right;
        color: var(--char3);
        font-size: 10px;
        font-family: var(--mono);
      }
      .fid-progress-item {
        border: 1px solid rgba(205, 188, 165, 0.64);
        border-radius: 10px;
        padding: 8px;
        background: #fcf8f2;
      }
      .fid-progress-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
      }
      .fid-progress-name {
        font-size: 12px;
        color: var(--char);
        font-weight: 600;
      }
      .fid-progress-meta {
        font-size: 10px;
        color: var(--char3);
        font-family: var(--mono);
      }
      .fid-progress-track {
        margin-top: 6px;
        position: relative;
        height: 9px;
        border-radius: 999px;
        border: 1px solid rgba(205, 188, 165, 0.72);
        background: #eee6d8;
        overflow: hidden;
      }
      .fid-progress-fill {
        height: 100%;
        border-radius: 999px;
        background: linear-gradient(90deg, #ad844e, #cfab75);
        min-width: 2px;
        transition: width .26s ease;
      }
      .fid-progress-foot {
        margin-top: 6px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
      }
      .fid-progress-next {
        font-size: 10px;
        color: var(--char2);
      }
      .fid-progress-next b { color: var(--char); }
      .fid-cat-row {
        display: grid;
        grid-template-columns: 26px 112px 1fr 116px 30px;
        gap: 8px;
        align-items: center;
        margin-bottom: 7px;
        padding: 7px;
        border: 1px solid rgba(205, 188, 165, 0.74);
        border-radius: 10px;
        background: #fbf6ee;
      }
      .fid-cat-row:last-child { margin-bottom: 0; }
      .fid-cat-row input[type="text"],
      .fid-cat-row input[type="number"] {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid rgba(205, 188, 165, 0.8);
        background: #fff;
        border-radius: 8px;
        padding: 7px 8px;
        font-size: 11px;
        color: var(--char);
      }
      .fid-cat-row select {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid rgba(205, 188, 165, 0.8);
        background: #fff;
        border-radius: 8px;
        padding: 7px 8px;
        font-size: 11px;
        color: var(--char);
      }
      .fid-cat-head {
        display: grid;
        grid-template-columns: 26px 112px 1fr 116px 30px;
        gap: 8px;
        margin-bottom: 8px;
        padding: 0 7px;
      }
      .fid-cat-h {
        font-size: 9px;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--char3);
      }
      .fid-cat-row input[type="checkbox"] {
        width: 15px;
        height: 15px;
        margin: 0 auto;
      }
      .fid-next-chip {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 10px;
        border: 1px solid rgba(205, 188, 165, 0.75);
        background: #f3ecdf;
        color: var(--char2);
        border-radius: 999px;
        padding: 3px 7px;
      }
      .fid-mini-track {
        width: 120px;
        max-width: 100%;
        height: 7px;
        border-radius: 999px;
        border: 1px solid rgba(205, 188, 165, 0.72);
        background: #eee6d8;
        overflow: hidden;
      }
      .fid-mini-fill {
        height: 100%;
        background: linear-gradient(90deg, #ad844e, #cfab75);
        min-width: 2px;
      }
      .fid-rank-actions {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
      }
      #page-fidelizacion, #page-fidelizacion * {
        box-shadow: none !important;
        text-shadow: none !important;
      }
      .fidx-hero {
        border: 1px solid rgba(205, 188, 165, 0.9);
        border-radius: 16px;
        background:
          linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0)),
          repeating-linear-gradient(-45deg, rgba(197,165,124,.08) 0 8px, rgba(197,165,124,.02) 8px 16px),
          #f4ecdf;
        padding: 14px;
        display: grid;
        gap: 12px;
      }
      .fidx-hero-top {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 12px;
        align-items: start;
      }
      .fidx-mast-title {
        font-family: var(--serif);
        color: var(--char);
        font-size: 24px;
        line-height: 1;
      }
      .fidx-mast-sub {
        margin-top: 6px;
        color: var(--char3);
        font-size: 10px;
        font-family: var(--mono);
        letter-spacing: .04em;
      }
      .fidx-mast-flow {
        display: grid;
        gap: 6px;
        min-width: 210px;
      }
      .fidx-flow-chip {
        border: 1px solid rgba(205, 188, 165, 0.86);
        border-radius: 8px;
        padding: 6px 9px;
        font-size: 10px;
        color: var(--char2);
        background: rgba(255, 250, 242, 0.78);
        text-align: center;
        letter-spacing: .05em;
      }
      .fidx-kpi {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
      }
      .fidx-kpi .fid-kpi {
        border: 1px solid rgba(205, 188, 165, 0.86);
        border-radius: 10px;
        background: #fbf6ee;
      }
      .fidx-stage {
        display: grid;
        grid-template-columns: 1.05fr 1.35fr;
        gap: 12px;
      }
      .fidx-ops {
        display: grid;
        gap: 12px;
      }
      .fidx-panel {
        background: #f8f2e8;
        border: 1px solid rgba(205, 188, 165, 0.86);
        border-radius: 14px;
        overflow: hidden;
      }
      .fidx-head {
        padding: 11px 12px;
        border-bottom: 1px solid rgba(205, 188, 165, 0.76);
      }
      .fidx-title {
        font-size: 10px;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--char2);
        font-weight: 700;
      }
      .fidx-sub {
        margin-top: 3px;
        font-size: 10px;
        color: var(--char3);
        font-family: var(--mono);
      }
      .fidx-body { padding: 10px; }
      .fidx-search {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid rgba(205, 188, 165, 0.84);
        background: #fff;
        border-radius: 9px;
        padding: 10px 11px;
        font-size: 12px;
        color: var(--char);
      }
      .fidx-radar {
        margin-top: 8px;
        display: grid;
        gap: 7px;
        max-height: 420px;
        overflow-y: auto;
        padding-right: 2px;
      }
      .fidx-row {
        border: 1px solid rgba(205, 188, 165, 0.74);
        border-radius: 10px;
        background: #fff;
        padding: 9px;
        cursor: pointer;
        transition: background .16s ease, border-color .16s ease;
      }
      .fidx-row:hover { background: #fcf7ef; }
      .fidx-row.on {
        border-color: rgba(171, 132, 78, 0.75);
        background: #f5ecdf;
      }
      .fidx-row-name {
        font-size: 12px;
        color: var(--char);
        font-weight: 600;
      }
      .fidx-row-meta {
        margin-top: 3px;
        font-size: 10px;
        color: var(--char3);
        font-family: var(--mono);
      }
      .fidx-line {
        margin-top: 6px;
        height: 8px;
        border-radius: 999px;
        overflow: hidden;
        border: 1px solid rgba(205, 188, 165, 0.72);
        background: #eee6d8;
      }
      .fidx-line > span {
        display: block;
        height: 100%;
        min-width: 2px;
        background: linear-gradient(90deg, #ad844e, #cfab75);
      }
      .fidx-panel-focus .fidx-body {
        min-height: 100%;
      }
      .fidx-focus-name {
        font-size: 22px;
        color: var(--char);
        font-family: var(--serif);
        line-height: 1;
      }
      .fidx-tags {
        margin-top: 8px;
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
      }
      .fidx-tag {
        border: 1px solid rgba(205, 188, 165, 0.78);
        background: #f3ecdf;
        border-radius: 999px;
        padding: 3px 8px;
        font-size: 10px;
        color: var(--char2);
      }
      .fidx-journey {
        margin-top: 11px;
        display: grid;
        gap: 8px;
      }
      .fidx-step {
        border: 1px solid rgba(205, 188, 165, 0.68);
        border-radius: 10px;
        background: #fff;
        padding: 8px;
      }
      .fidx-step b {
        color: var(--char);
        font-size: 11px;
      }
      .fidx-step div {
        color: var(--char3);
        font-size: 10px;
        font-family: var(--mono);
        margin-top: 2px;
      }
      .fidx-actions {
        margin-top: 12px;
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
      }
      .fidx-lab .fid-card-head {
        border-bottom: 1px solid rgba(205, 188, 165, 0.74);
      }
      .fidx-lab .fid-card-body {
        background: #f9f3e9;
      }
      @media (max-width: 1100px) {
        .fidx-kpi { grid-template-columns: 1fr 1fr; }
        .fidx-stage { grid-template-columns: 1fr; }
      }
      @media (max-width: 720px) {
        .fidx-hero-top { grid-template-columns: 1fr; }
        .fidx-kpi { grid-template-columns: 1fr; }
        .fidx-mast-flow { min-width: 0; grid-template-columns: 1fr; }
        .fid-cat-head, .fid-cat-row {
          grid-template-columns: 24px 88px 1fr 74px 30px;
        }
      }
    



      
      #sidebar {
        border-right: 0;
      }
      #pages {
        border-top-left-radius: 16px;
      }
      @media (max-width: 1100px) {
        #pages {
          border-top-left-radius: 0;
        }
      }



    
    #page-dashboard.dashboard-core {
      --db-surface-0: var(--parch);
      --db-surface-1: var(--parch2);
      --db-line-soft: rgba(205, 188, 165, 0.56);
      --db-line-strong: rgba(205, 188, 165, 0.92);
      --db-text-meta: rgba(26, 20, 16, 0.68);
      --db-gap: 12px;
      background: linear-gradient(180deg, var(--parch) 0%, var(--parch2) 100%);
    }
    #page-dashboard.dashboard-core .dash-panel,
    #page-dashboard.dashboard-core #ds-venc-cell {
      background: var(--db-surface-0);
      border: 1px solid var(--db-line-strong);
      box-shadow: none;
    }
    #page-dashboard.dashboard-core .dash-panel { border-radius: 12px; }
    #page-dashboard.dashboard-core .dash-tl-meta,
    #page-dashboard.dashboard-core .dash-tl-hora,
    #page-dashboard.dashboard-core .nota-meta { color: var(--db-text-meta); }
    #page-dashboard.dashboard-core .dash-body-grid {
      display: grid;
      grid-template-columns: 1.2fr 1fr 0.85fr;
      grid-template-areas: "sesion stock tools";
      gap: var(--db-gap);
      align-items: start;
    }
    #page-dashboard.dashboard-core .dash-body-grid > .dash-panel:nth-child(1) { grid-area: stock; }
    #page-dashboard.dashboard-core .dash-body-grid > .dash-panel:nth-child(2) { grid-area: sesion; }
    #page-dashboard.dashboard-core .dash-tl-item,
    #page-dashboard.dashboard-core .nota-item{ border-bottom-color: var(--db-line-soft); }
    #page-dashboard.dashboard-core .dash-tl-item:hover,
    #page-dashboard.dashboard-core .nota-item:hover{ background: rgba(200, 98, 42, 0.06); }
    @media (max-width: 1100px) {
      #page-dashboard.dashboard-core .dash-body-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
          "sesion stock"
          "tools tools";
      }
    }
    @media (max-width: 960px) {
      #page-dashboard.dashboard-core .dash-time { font-size: 34px; }
      #page-dashboard.dashboard-core .dash-body-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
          "sesion"
          "stock"
          "tools";
        gap: 10px;
      }
    }
    @media (max-width: 600px) {
      #page-dashboard.dashboard-core .dash-panel { border-radius: 10px; }
    }
  



    
    .section-core .ph {
      margin-bottom: 12px;
    }
    #page-movimientos.section-core .mov-list {
      background: var(--parch);
      border: var(--card-border);
      border-radius: var(--r2);
      box-shadow: none;
      padding: 0;
      overflow: hidden;
    }
    #page-movimientos.section-core .mov-inspector {
      background: var(--parch);
      border: var(--card-border);
      border-radius: var(--r2);
      box-shadow: none;
    }
    #page-movimientos.section-core .mov-filter,
    #page-movimientos.section-core .mov-mobile-btn,
    #page-movimientos.section-core .mov-search-clr {
      background: var(--parch2);
      border: var(--card-border-thin);
      color: var(--char2);
      box-shadow: none;
      font-weight: 650;
      font-size: 11.5px;
      letter-spacing: .09em;
      text-transform: uppercase;
    }
    #page-movimientos.section-core .mov-filter.on{
      background: var(--leather-dark);
      border-color: var(--leather-dark);
      color: var(--text-on-dark);
      font-weight: 700;
    }
    #page-movimientos.section-core .mov-search-clr:hover {
      color: var(--char);
      border-color: rgba(200, 98, 42, 0.42);
      background: rgba(200, 98, 42, 0.08);
    }
    #page-movimientos.section-core > .ph {
      display: flex;
    }
  



    
    body #page-cierre.section-core {
      background: var(--page);
    }

    
    #page-cierre.section-core .cc-hero {
      background: linear-gradient(162deg, #1e1712 0%, #2a2018 62%, #18120e 100%);
      border: 1px solid rgba(200, 98, 42, 0.28);
      box-shadow: 0 14px 34px rgba(26, 20, 16, 0.22);
      position: relative;
      overflow: hidden;
    }
    #page-cierre.section-core .cc-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(120% 100% at 100% 0%, rgba(200,98,42,.22) 0%, transparent 58%),
        radial-gradient(90% 80% at 0% 100%, rgba(200,98,42,.12) 0%, transparent 55%);
    }
    #page-cierre.section-core .cc-hero::after {
      content: "";
      position: absolute;
      left: 0; right: 0; top: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(232,146,74,.65), transparent);
      pointer-events: none;
    }
    #page-cierre.section-core #cc-total-dia,
    #page-cierre.section-core #cc-ticket-prom,
    #page-cierre.section-core #cc-desc-dia,
    #page-cierre.section-core #cc-clientes-dia,
    #page-cierre.section-core #cc-total-ambos {
      color: var(--text-on-dark);
      position: relative;
      z-index: 1;
      text-shadow: 0 1px 0 rgba(0,0,0,.18);
    }
    #page-cierre.section-core .cc-obs-save {
      background: var(--leather-dark);
      color: var(--text-on-dark);
      border-color: var(--leather-dark);
    }


    

    .topbar-right {
      margin-left: auto;
    }

    @media (max-width: 960px) {
      .topbar {
        justify-content: space-between !important;
      }

      #menu-toggle {
        margin-right: 10px;
      }

      .topbar-right {
        margin-left: auto;
      }
    }

    @media (max-width: 600px) {
      #menu-toggle {
        margin-right: 8px;
      }
    }
  



    
    @media (hover: none), (pointer: coarse) {
      .ni[data-tip]::before,
      .ni[data-tip]::after {
        content: none !important;
        display: none !important;
      }
    }

    :root {
      --ios-chrome-bg: var(--page);
    }

    html,
    body {
      background-color: var(--ios-chrome-bg);
    }

    @supports (padding: max(0px)) {
      @media (max-width: 960px) {
        body {
          padding-top: env(safe-area-inset-top, 0px);
          padding-bottom: env(safe-area-inset-bottom, 0px);
          background-color: var(--ios-chrome-bg);
        }

        .topbar {
          padding-top: max(0px, env(safe-area-inset-top, 0px));
          height: calc(var(--topbar) + max(0px, env(safe-area-inset-top, 0px)));
        }

        #app,
        #main {
          background-color: var(--page);
        }
      }
    }
  


    
  


    
    #page-stock .table-wrap {
      position: relative;
      overflow: auto;
    }

    #page-stock table thead,
    #page-stock table thead tr {
      position: sticky;
      top: 0;
      z-index: 18;
    }

    #page-stock th {
      position: sticky;
      top: 0;
      z-index: 20;
      background: #f0e8db;
      color: rgba(26, 20, 16, 0.52);
      backdrop-filter: blur(3px);
    }

    #page-stock .table-wrap.stock-scrolled th {
      box-shadow: inset 0 -1px 0 rgba(196, 164, 126, 0.28), 0 8px 14px -12px rgba(28, 20, 14, 0.34);
    }
#page-dashboard .dash-venc-empty {
  margin-top: 10px;
  font-size: 11px;
  color: var(--char3);
}


#page-dashboard .dash-venc-table {
  border: 1px solid rgba(200, 98, 42, 0.18);
  border-radius: 11px;
  overflow: hidden;
}
#page-dashboard .dash-venc-head,
#page-dashboard .dash-venc-row {
  display: grid;
  grid-template-columns: 1.5fr .76fr .44fr;
  gap: 8px;
  align-items: center;
}
#page-dashboard .dash-venc-head {
  padding: 9px 11px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(200, 98, 42, 0.15);
}
#page-dashboard .dash-venc-row {
  padding: 8px 11px;
  border-bottom: 1px solid rgba(200, 98, 42, 0.12);
}
#page-dashboard .dash-venc-row:last-child { border-bottom: none; }
#page-dashboard .dash-venc-col { font-size: 12px; }
#page-dashboard .dash-venc-prod {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#page-dashboard .dash-venc-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 3px 8px;
}
#page-dashboard .dash-venc-days {
  font-family: var(--mono);
  font-weight: 700;
  text-align: right;
}
#page-dashboard .dash-venc-more {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10px;
}
#page-dashboard .nota-list { max-height: 360px; }


@media (max-width: 720px) {
  #page-dashboard .dash-venc-head,
  #page-dashboard .dash-venc-row {
    grid-template-columns: 1.2fr .8fr .45fr;
  }
}
@media (max-width: 900px) {
  #page-dashboard {
    padding: 12px;
  }
}
@media (max-width: 760px) {
  #page-dashboard .dash-venc-head {
    display: none;
  }
  #page-dashboard .dash-venc-row {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 8px 10px;
  }
  #page-dashboard .dash-venc-days {
    text-align: left;
  }
}


#page-dashboard .dash-time {
  transform-origin: left center;
}
#page-dashboard #dth.clock-digit-flip,
#page-dashboard #dtm.clock-digit-flip {
  display: inline-block;
  animation: dashClockDigitFlip .46s cubic-bezier(.16,.84,.28,1);
  will-change: transform, opacity, filter;
}
@keyframes dashClockDigitFlip {
  0% { opacity: .2; transform: translateY(7px) rotateX(-62deg); filter: blur(1px); }
  54% { opacity: .95; transform: translateY(-1px) rotateX(12deg); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) rotateX(0deg); filter: blur(0); }
}
@keyframes dashClockColon {
  0%, 46% { opacity: 1; }
  47%, 100% { opacity: .2; }
}
@keyframes dashTypeCursorBlink {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: .15; }
}
@media (prefers-reduced-motion: reduce) {
  #page-dashboard #dth.clock-digit-flip,
  #page-dashboard #dtm.clock-digit-flip{
    animation: none !important;
  }
}

#page-dashboard .dash-local-name {
  display: inline-block;
  font-weight: 600;
}


#dash-venc-hover-card {
  position: absolute;
  z-index: 12000;
  width: min(360px, 84vw);
  max-height: 340px;
  overflow: auto;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(.985);
  transition: opacity .16s ease, transform .16s ease;
  border: 1px solid rgba(200, 98, 42, 0.34);
  border-radius: 12px;
  padding: 10px 10px 8px;
}
#dash-venc-hover-card.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
#dash-venc-hover-card .dash-vh-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
#dash-venc-hover-card .dash-vh-date {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--char);
  font-weight: 600;
}
#dash-venc-hover-card .dash-vh-total {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--char2);
  font-weight: 700;
}
#dash-venc-hover-card .dash-vh-list {
  border: 1px solid rgba(200, 98, 42, 0.2);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.62);
  overflow: hidden;
}
#dash-venc-hover-card .dash-vh-row {
  display: grid;
  grid-template-columns: 1.4fr .7fr .35fr;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(200, 98, 42, 0.14);
}
#dash-venc-hover-card .dash-vh-row:last-child {
  border-bottom: none;
}
#dash-venc-hover-card .dash-vh-prod {
  font-size: 12px;
  color: var(--char);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#dash-venc-hover-card .dash-vh-state {
  justify-self: start;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
}
#dash-venc-hover-card .dash-vh-days {
  justify-self: end;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
}
#dash-venc-hover-card .dash-vh-empty {
  font-size: 11px;
  color: var(--char3);
  padding: 10px 8px;
}
#dash-venc-hover-card .dash-vh-more {
  margin-top: 6px;
  font-size: 10px;
  font-family: var(--mono);
  color: var(--char3);
}
#page-dashboard {
  min-height: calc(100vh - var(--topbar));
  padding-bottom: 36px;
}
#page-dashboard .dash-time {
  color: #1a1410;
  font-size: 58px;
}
#page-dashboard .dash-local-name {
  color: rgba(200,98,42,0.55);
  letter-spacing: .20em;
}


#page-dashboard .dash-panel {
  background: #ffffff;
  border: 1px solid rgba(26,20,16,0.08) !important;
  border-top: 2px solid rgba(200,98,42,0.20) !important;
  box-shadow: 0 1px 4px rgba(26,20,16,0.04);
}
#page-dashboard .dash-panel-empty { color: rgba(26,20,16,0.28); }


#page-dashboard .dash-tl-item       { border-bottom-color: rgba(26,20,16,0.07); }
#page-dashboard .dash-tl-item:hover { background: rgba(200,98,42,0.03); }
#page-dashboard .dash-tl-prod { color: #1a1410; }
#page-dashboard .dash-tl-meta { color: rgba(26,20,16,0.36); }
#page-dashboard .dash-tl-hora { color: rgba(26,20,16,0.28); }
#page-dashboard .dash-venc-table {
  border-color: rgba(26,20,16,0.10);
  background: #ffffff;
}
#page-dashboard .dash-venc-head {
  background: rgba(245,241,235,0.70);
  border-bottom-color: rgba(26,20,16,0.08);
  color: rgba(26,20,16,0.44);
}
#page-dashboard .dash-venc-row { border-bottom-color: rgba(26,20,16,0.07); }
#page-dashboard .dash-venc-col   { color: rgba(26,20,16,0.56); }
#page-dashboard .dash-venc-prod  { color: #1a1410; }
#page-dashboard .dash-venc-more  { color: rgba(26,20,16,0.36); }
#page-dashboard .nota-item       { border-bottom-color: rgba(26,20,16,0.07); }
#page-dashboard .nota-item:hover { background: rgba(200,98,42,0.03); }
#page-dashboard .nota-texto { color: #1a1410; }
#page-dashboard .nota-meta  { color: rgba(26,20,16,0.32); }
#page-dashboard .nota-del   { color: rgba(26,20,16,0.26); }
#page-dashboard .nota-del:hover { color: var(--red); }


#dash-venc-hover-card {
  background: linear-gradient(180deg, #fffaf4 0%, #f5ece0 100%) !important;
  border-color: rgba(200,98,42,0.28) !important;
  box-shadow: 0 20px 48px rgba(26,20,16,0.22) !important;
}


body #page-costos.section-core {
  --cos-gap: 18px;
  --cos-pad-x: 24px;
  --cos-content-pad-y: 14px;
}
body #page-costos.section-core .costo-table-card,
body #page-costos.section-core #costo-quick-section,
body #page-costos.section-core .costo-quick-section {
  background: var(--parch);
  border: var(--card-border);
  border-radius: var(--r2);
  box-shadow: none;
  margin-bottom: var(--cos-gap);
}
body #page-costos.section-core .costo-table-card,
body #page-costos.section-core #costo-quick-section,
body #page-costos.section-core .costo-quick-section {
  padding-left: var(--cos-pad-x);
  padding-right: var(--cos-pad-x);
}
body #page-costos.section-core .costo-alert-grid {
  gap: var(--cos-gap);
}
body #page-costos.section-core .costo-table-card {
  padding-top: 0;
  padding-bottom: 22px;
}
body #page-costos.section-core .costo-quick-section,
body #page-costos.section-core #costo-quick-section {
  padding-top: 14px;
  padding-bottom: 14px;
}


body #page-costos.section-core .costo-table {
  border-collapse: collapse;
  border-spacing: 0;
  margin-top: 0;
}
body #page-costos.section-core .costo-table thead th {
  border-bottom: 1.5px solid var(--parch3);
  padding: 0 16px 10px 16px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--char3);
}
body #page-costos.section-core .costo-table tbody td {
  background: transparent;
  border-top: none;
  border-bottom: 1px solid var(--parch3);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}
body #page-costos.section-core .costo-table tbody td:first-child {
  border-left: 0;
  border-radius: 0;
}
body #page-costos.section-core .costo-table tbody td:last-child {
  border-right: 0;
  border-radius: 0;
}
body #page-costos.section-core .costo-table tbody tr:last-child td {
  border-bottom: none;
}
body #page-costos.section-core .costo-table tbody tr:hover td {
  background: var(--parch2);
}


body #page-costos.section-core .costo-rank-item {
  border-radius: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--parch3);
  padding: 13px 0;
}
body #page-costos.section-core .costo-rank-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}


body #page-costos.section-core .costo-alert-item {
  border-radius: var(--r2);
  background: var(--parch2);
  border: 1.5px solid var(--parch3);
  padding: 14px 16px;
}


body #page-costos.section-core .costo-comp-row {
  padding-top: 11px;
  padding-bottom: 11px;
  border-bottom-color: var(--parch3);
}
body #page-costos.section-core .costo-prov-item {
  padding-top: 11px;
  padding-bottom: 11px;
  border-bottom-color: var(--parch3);
}
body #page-costos.section-core .costo-alert-lim-inp,
body #page-costos.section-core .costo-proj-budget-inp,
body #page-costos.section-core .costo-quick-btn {
  background: var(--parch2);
  border: var(--card-border-thin);
  color: var(--char2);
}
body #page-costos.section-core .costo-proj-budget-btn,
body #page-costos.section-core .costo-alert-lim-btn {
  background: var(--leather-dark);
  border-color: var(--leather-dark);
  color: var(--text-on-dark);
}
body #page-costos.section-core .costo-monto,
body #page-costos.section-core .costo-rank-monto,
body #page-costos.section-core .costo-table td,
body #page-costos.section-core .costo-table th,
body #page-costos.section-core .costo-period-range,
body #page-costos.section-core .costo-comp-prev,
body #page-costos.section-core .costo-comp-curr,
body #page-costos.section-core .costo-prov-monto,
body #page-costos.section-core .costo-cat-leg-pct,
body #page-costos.section-core .costo-cat-leg-amt {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  body #page-costos.section-core {
    --cos-gap: 14px;
    --cos-pad-x: 18px;
    --cos-content-pad-y: 12px;
  }
  body #page-costos.section-core .costo-table-card,
  body #page-costos.section-core #costo-quick-section,
  body #page-costos.section-core .costo-quick-section {
    padding-left: var(--cos-pad-x);
    padding-right: var(--cos-pad-x);
  }
}
body #page-costos.section-core .costo-table tbody td {
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: 13px;
  color: var(--char2);
}
body #page-costos.section-core .costo-table thead th {
  padding-top: 4px;
  padding-bottom: 12px;
  font-size: 9px;
  letter-spacing: .12em;
}
body #page-costos.section-core .costo-monto {
  font-size: 14px;
  font-weight: 700;
  color: var(--char);
}
body #page-costos.section-core .costo-cat-pill {
  padding: 3px 10px;
  font-size: 10.5px;
}


body #page-costos.section-core .costo-rank-num {
  width: 22px;
  height: 22px;
  font-size: 10px;
  flex-shrink: 0;
}
body #page-costos.section-core .costo-rank-desc {
  font-size: 13px;
  font-weight: 600;
  color: var(--char);
  margin-bottom: 2px;
}
body #page-costos.section-core .costo-rank-meta {
  font-size: 11px;
  color: var(--char3);
  margin-top: 3px;
}
body #page-costos.section-core .costo-rank-monto {
  font-size: 14px;
  font-weight: 700;
  color: var(--char);
}


body #page-costos.section-core .costo-cat-leg-item {
  font-size: 12.5px;
  gap: 10px;
  padding: 3px 0;
}
body #page-costos.section-core .costo-cat-leg-name {
  font-size: 12.5px;
  color: var(--char2);
}
body #page-costos.section-core .costo-cat-leg-pct {
  font-size: 11px;
  color: var(--char3);
}
body #page-costos.section-core .costo-cat-leg-amt {
  font-size: 12px;
  font-weight: 700;
  color: var(--char);
}


body #page-costos.section-core .costo-comp-label {
  font-size: 12.5px;
  color: var(--char2);
  font-weight: 500;
}
body #page-costos.section-core .costo-comp-prev {
  font-size: 12px;
  color: var(--char3);
}
body #page-costos.section-core .costo-comp-curr {
  font-size: 13px;
  font-weight: 700;
  color: var(--char);
}
body #page-costos.section-core .costo-delta {
  font-size: 11px;
}


body #page-costos.section-core .costo-prov-name {
  font-size: 12.5px;
  font-weight: 600;
}
body #page-costos.section-core .costo-prov-meta {
  font-size: 10.5px;
  margin-top: 2px;
}
body #page-costos.section-core .costo-prov-monto {
  font-size: 13px;
  font-weight: 700;
}




.tn-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px 20px;
  margin: 20px 24px 0;
  background: #1A1410;
  border: 1px solid rgba(200,98,42,.20);
  border-radius: 16px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.tn-header::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(200,98,42,.10) 0%, transparent 70%);
  pointer-events: none;
}
.tn-header-left { display: flex; flex-direction: column; gap: 2px; }
.tn-header-eyebrow {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(200,98,42,.75);
}
.tn-header-title {
  font-family: var(--serif, "Fraunces", serif);
  font-size: 22px;
  font-weight: 700;
  color: #F5EFE6;
  letter-spacing: -.01em;
  line-height: 1.1;
}


.tn-local-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.tn-local-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(245,239,230,.45);
  white-space: nowrap;
}

.tn-toggle-group {
  display: flex;
  background: var(--parch);
  border: 1.5px solid var(--parch3);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.07);
}
.tn-toggle-btn {
  padding: 7px 14px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--char2);
  background: none;
  border: none;
  cursor: pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
  letter-spacing: .01em;
}
.tn-toggle-btn + .tn-toggle-btn { border-left: 1.5px solid var(--parch3); }
.tn-toggle-btn:hover { background: var(--parch2); color: var(--char); }
.tn-toggle-btn.active {
  background: #1A1410;
  color: #F5EFE6;
  font-weight: 600;
}


.tn-header .tn-toggle-group {
  background: rgba(245,239,230,.07);
  border-color: rgba(200,98,42,.25);
  box-shadow: none;
}
.tn-header .tn-toggle-btn {
  color: rgba(245,239,230,.55);
}
.tn-header .tn-toggle-btn + .tn-toggle-btn { border-left-color: rgba(200,98,42,.20); }
.tn-header .tn-toggle-btn:hover { background: rgba(245,239,230,.08); color: rgba(245,239,230,.80); }
.tn-header .tn-toggle-btn.active {
  background: rgba(200,98,42,.22);
  color: #F5EFE6;
}


.tn-tabs {
  display: flex;
  gap: 6px;
  padding: 14px 24px 12px;
  background: var(--parch);
  border-bottom: 1.5px solid var(--parch3);
  margin-bottom: 0;
  flex-shrink: 0;
}
.tn-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--char2);
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: color .14s, background .14s, border-color .14s;
  white-space: nowrap;
}
.tn-tab:hover { color: var(--char); background: var(--parch2); }
.tn-tab.active {
  color: #1A1410;
  background: rgba(200,98,42,.13);
  border-color: rgba(200,98,42,.35);
  font-weight: 600;
}
.tn-tab svg { opacity: .6; }
.tn-tab.active svg { opacity: 1; }


.tn-panel { display: none; padding-top: 4px; }
.tn-panel.active { display: block; }


.tn-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px 12px;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}


.tn-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--char3);
  font-size: 13px;
  font-family: var(--sans);
}


.tn-rank-summary {
  display: flex;
  gap: 12px;
  padding: 20px 24px 16px;
  flex-wrap: wrap;
}
.tn-rank-sum-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: #1A1410;
  border: 1px solid rgba(200,98,42,.20);
  border-radius: 12px;
  min-width: 120px;
  flex: 1;
  position: relative;
  overflow: hidden;
}
.tn-rank-sum-card::before {
  content: "";
  position: absolute;
  top: -20px; right: -20px;
  width: 80px; height: 80px;
  background: radial-gradient(circle, rgba(200,98,42,.10) 0%, transparent 70%);
  pointer-events: none;
}
.tn-rank-sum-val {
  font-size: 22px;
  font-family: var(--serif, "Fraunces", serif);
  font-weight: 700;
  color: #F5EFE6;
  line-height: 1;
}
.tn-rank-sum-lbl {
  font-size: 9.5px;
  font-family: var(--sans);
  color: rgba(245,239,230,.45);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.tn-rank-table-wrap {
  margin: 0 24px 24px;
  border: 1.5px solid var(--parch3);
  border-radius: 12px;
  overflow: hidden;
  overflow-x: auto;
  background: var(--parch);
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.tn-rank-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 12.5px;
}
.tn-rank-th {
  padding: 12px 16px;
  background: #1A1410;
  color: rgba(245,239,230,.55);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: left;
  border-bottom: none;
  white-space: nowrap;
}
.tn-rank-th-r { text-align: right; }
.tn-rank-th-share { text-align: left; min-width: 140px; }
.tn-rank-tr { border-bottom: 1px solid rgba(26,20,16,.07); transition: background .1s; }
.tn-rank-tr:last-child { border-bottom: none; }
.tn-rank-tr:hover { background: rgba(200,98,42,.05); }
.tn-rank-tr td { padding: 13px 16px; vertical-align: middle; }
.tn-rank-pos { width: 36px; }
.tn-rank-pos-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 10.5px;
  font-family: var(--mono);
  font-weight: 700;
  background: var(--parch2);
  color: var(--char3);
  border: 1px solid var(--parch3);
}
.tn-rank-nombre {
  font-weight: 500;
  color: var(--char);
  white-space: nowrap;
}
.tn-rank-num {
  font-family: var(--mono);
  color: var(--char2);
  white-space: nowrap;
}
.tn-rank-td-r { text-align: right; }
.tn-rank-dim { color: var(--char3) !important; }
.tn-rank-share-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}
.tn-rank-share-track {
  flex: 1;
  height: 4px;
  background: var(--parch2);
  border-radius: 99px;
  overflow: hidden;
}
.tn-rank-share-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--char3);
  transition: width .4s cubic-bezier(.16,1,.3,1);
  min-width: 2px;
}
.tn-rank-share-pct {
  font-size: 10.5px;
  font-family: var(--mono);
  color: var(--char2);
  white-space: nowrap;
  min-width: 34px;
  text-align: right;
}


.tn-medio-cards {
  display: flex;
  gap: 12px;
  padding: 20px 24px 16px;
  flex-wrap: wrap;
}
.tn-medio-card {
  flex: 1;
  min-width: 130px;
  background: #1A1410;
  border: 1px solid rgba(200,98,42,.18);
  border-radius: 12px;
  padding: 18px 16px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.tn-medio-card::before {
  content: "";
  position: absolute;
  top: -18px; right: -18px;
  width: 70px; height: 70px;
  background: radial-gradient(circle, rgba(200,98,42,.09) 0%, transparent 70%);
  pointer-events: none;
}
.tn-medio-card:hover { border-color: rgba(200,98,42,.45); box-shadow: 0 2px 16px rgba(200,98,42,.14); }
.tn-medio-icon { font-size: 22px; margin-bottom: 8px; }
.tn-medio-name { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(245,239,230,.45); margin-bottom: 10px; }
.tn-medio-monto { font-size: 18px; font-weight: 700; font-family: var(--serif, "Fraunces", serif); color: #F5EFE6; margin-bottom: 4px; line-height: 1; }
.tn-ops-header {
  padding: 0 24px 10px;
  border-bottom: 1.5px solid var(--parch3);
  margin: 0 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tn-ops-title { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--char2); }
.tn-ops-list { padding: 0 24px 24px; max-height: 420px; overflow-y: auto; }
.tn-op-row {
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--parch3);
  font-size: 12px;
  font-family: var(--sans);
}
.tn-op-row:last-child { border-bottom: none; }
.tn-op-medio { color: var(--char2); font-size: 11px; white-space: nowrap; }
.tn-op-total { font-family: var(--mono); font-weight: 600; color: var(--char); white-space: nowrap; text-align: right; }


.tn-proy-table-wrap { border: 1.5px solid var(--parch3); border-radius: 12px; overflow: hidden; overflow-x: auto; background: var(--parch); box-shadow: 0 1px 6px rgba(0,0,0,.05); }
.tn-proy-table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 12.5px; }
.tn-proy-table thead th {
  padding: 12px 16px;
  background: #1A1410;
  color: rgba(245,239,230,.55);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: left;
  border-bottom: none;
  white-space: nowrap;
}
.tn-proy-table tbody tr { border-bottom: 1px solid rgba(26,20,16,.07); transition: background .1s; }
.tn-proy-table tbody tr:last-child { border-bottom: none; }
.tn-proy-table tbody tr:hover { background: rgba(200,98,42,.05); }
.tn-proy-footer { border-top: 2px solid var(--parch3) !important; background: var(--parch2); }
.tn-proy-footer td { font-weight: 600; color: var(--char); }
.tn-proy-table td { padding: 11px 14px; vertical-align: middle; }
.tn-proy-nombre { font-weight: 500; color: var(--char); }
.tn-proy-num { font-family: var(--mono); color: var(--char2); white-space: nowrap; }
.tn-proy-pedir { font-family: var(--mono); font-weight: 600; color: var(--char); white-space: nowrap; }
.tn-estado-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.tn-copy-wrap { display: flex; justify-content: flex-end; padding: 14px 24px 24px; }
.tn-copy-btn { display: flex; align-items: center; gap: 7px; font-size: 12px; }


.tn-pedido-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 24px 16px;
  padding: 16px 20px;
  background: #1A1410;
  border: 1px solid rgba(200,98,42,.22);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.tn-pedido-banner::before {
  content: "";
  position: absolute;
  bottom: -20px; left: -20px;
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(200,98,42,.08) 0%, transparent 70%);
  pointer-events: none;
}
.tn-pedido-banner-fechas {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.tn-pedido-banner-bloque {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tn-pedido-banner-lbl {
  font-size: 9.5px;
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(245,239,230,.4);
}
.tn-pedido-banner-val {
  font-size: 15px;
  font-family: var(--serif, "Fraunces", serif);
  font-weight: 700;
  color: #F5EFE6;
  line-height: 1.1;
}
.tn-pedido-banner-sep {
  font-size: 18px;
  color: rgba(245,239,230,.2);
  font-weight: 200;
}
.tn-pedido-banner-countdown {
  font-size: 12px;
  font-family: var(--sans);
  color: rgba(245,239,230,.5);
  padding: 2px 0 2px 16px;
  border-left: 2px solid rgba(200,98,42,.30);
}
.tn-pedido-banner-countdown strong {
  color: #F5EFE6;
  font-weight: 700;
}


.tn-trend-up {
  font-size: 10px;
  font-weight: 600;
  color: var(--green);
  background: rgba(45,122,79,.1);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 2px;
}
.tn-trend-dn {
  font-size: 10px;
  font-weight: 600;
  color: var(--char3);
  background: var(--parch2);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 2px;
}


.tn-proy-kg {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--char3);
  font-weight: 400;
}


.tn-info-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 5px 11px;
  font-size: 11px;
  font-family: var(--sans);
  font-weight: 500;
  color: var(--char2);
  background: transparent;
  border: 1px solid var(--parch3);
  border-radius: var(--r);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.tn-info-btn:hover { background: var(--parch2); color: var(--char); }


.tn-info-overlay.tn-info-visible { opacity: 1; }
.tn-info-modal {
  background: var(--parch);
  border: 1.5px solid var(--parch3);
  border-radius: var(--r2);
  width: min(520px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  transform: translateY(10px);
  transition: transform .18s ease;
}
.tn-info-overlay.tn-info-visible .tn-info-modal { transform: translateY(0); }
.tn-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--parch3);
  flex-shrink: 0;
}
.tn-info-title {
  font-size: 13px;
  font-family: var(--sans);
  font-weight: 600;
  color: var(--char);
}
.tn-info-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--char3);
  cursor: pointer;
  transition: background .1s;
}
.tn-info-close:hover { background: var(--parch2); color: var(--char); }
.tn-info-body {
  padding: 8px 0 16px;
  overflow-y: auto;
}
.tn-info-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--parch3);
}
.tn-info-item:last-child { border-bottom: none; }
.tn-info-item-t {
  font-size: 11px;
  font-family: var(--sans);
  font-weight: 700;
  color: var(--char);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.tn-info-item-d {
  font-size: 12.5px;
  font-family: var(--sans);
  color: var(--char2);
  line-height: 1.55;
}

.tn-exp-wrap {
  position: relative;
}
.tn-exp-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  font-size: 11px;
  font-family: var(--sans);
  font-weight: 500;
  color: var(--char);
  background: var(--parch);
  border: 1.5px solid var(--parch3);
  border-radius: var(--r);
  cursor: pointer;
  transition: background .12s;
}
.tn-exp-btn:hover { background: var(--parch2); }
.tn-exp-dd {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 110px;
  background: var(--parch);
  border: 1.5px solid var(--parch3);
  border-radius: var(--r);
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
  z-index: 500;
  overflow: hidden;
}
.tn-exp-dd.tn-exp-open { display: block; }
.tn-exp-dd-item {
  display: block;
  width: 100%;
  padding: 9px 14px;
  text-align: left;
  font-size: 12px;
  font-family: var(--sans);
  font-weight: 500;
  color: var(--char);
  background: none;
  border: none;
  cursor: pointer;
  transition: background .1s;
}
.tn-exp-dd-item + .tn-exp-dd-item { border-top: 1px solid var(--parch3); }
.tn-exp-dd-item:hover { background: var(--parch2); }



.pry-status-wrap {
  padding: 20px 24px 0;
}
.pry-status-card {
  display: flex;
  align-items: stretch;
  background: #1A1410;
  border: 1px solid rgba(200,98,42,.20);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.10);
}


.pry-status-card-left {
  padding: 24px 28px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-right: 1px solid rgba(200,98,42,.15);
  flex-shrink: 0;
}
.pry-status-eyebrow {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(200,98,42,.65);
}
.pry-status-card-title {
  font-family: var(--serif, "Fraunces", serif);
  font-size: 12px;
  font-weight: 700;
  color: #F5EFE6;
  line-height: 1.1;
}
.pry-status-donut-wrap {
  position: relative;
  width: 180px;
  height: 180px;
  margin-top: 8px;
}
.pry-status-donut-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
.pry-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.pry-donut-big {
  font-family: var(--serif, "Fraunces", serif);
  font-size: 36px;
  font-weight: 700;
  color: #F5EFE6;
  line-height: 1;
}
.pry-donut-sub {
  font-family: var(--sans);
  font-size: 10px;
  color: rgba(245,239,230,.40);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 3px;
}


.pry-status-legend {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  flex: 1;
}
.pry-leg-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pry-leg-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pry-leg-text {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.pry-leg-label {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(245,239,230,.80);
}
.pry-leg-count {
  font-family: var(--serif, "Fraunces", serif);
  font-size: 14px;
  font-weight: 700;
  color: #F5EFE6;
}
.pry-leg-sub {
  font-family: var(--sans);
  font-size: 10.5px;
  color: rgba(245,239,230,.30);
}


.tn-proy-table-wrap { margin: 16px 24px 24px; }


@media (max-width: 700px) {
  .pry-status-card { flex-direction: column; }
  .pry-status-card-left { border-right: none; border-bottom: 1px solid rgba(200,98,42,.15); padding-bottom: 20px; }
  .pry-status-donut-wrap { width: 150px; height: 150px; }
  .pry-status-legend { padding: 18px 24px; gap: 12px; }
}
@media (max-width: 680px) {
  .tn-header { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 20px 16px; margin: 14px 14px 0; }
  .tn-tabs { padding: 10px 16px 8px; gap: 4px; overflow-x: auto; }
  .tn-tab { padding: 6px 13px; font-size: 11px; }
  .tn-rank-summary, .tn-medio-cards { padding: 14px 16px 12px; }
  .tn-rank-table-wrap, .tn-proy-table-wrap { margin: 0 16px 20px; }
  .tn-pedido-banner { margin-left: 16px; margin-right: 16px; }
}
@keyframes tr-item-in {
  from { opacity:0; transform: translateY(8px) scale(.99); }
  to   { opacity:1; transform: none; }
}
@keyframes tr-complete {
  0%   { transform: none; }
  30%  { transform: scale(1.02); }
  60%  { transform: scale(.98); opacity: 1; }
  100% { transform: scale(.96); opacity: 0; max-height: 0; padding: 0; margin: 0; border-width: 0; }
}
@keyframes tr-new-pop {
  0%   { transform: translateY(-10px) scale(1.01); opacity:0; box-shadow: 0 0 0 4px rgba(200,98,42,.18); }
  60%  { transform: translateY(2px) scale(1); opacity:1; }
  100% { transform: none; box-shadow: none; }
}
@keyframes tr-remove {
  to { opacity:0; transform: translateX(20px) scale(.97); max-height:0; padding:0; margin:0; border-width:0; }
}



#page-costos { padding-bottom: 40px; }













.dcs-period-btn {
  padding: 3px 9px;
  border-radius: 5px;
  border: none;
  background: none;
  font-size: 11px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  color: rgba(245,239,230,0.35);
  cursor: pointer;
  transition: all .15s;
}
.dcs-period-btn:hover { color: rgba(245,239,230,0.7); }
.dcs-period-btn.active {
  background: #C8622A;
  color: #F5EFE6;
  box-shadow: 0 2px 8px rgba(200,98,42,0.4);
}




.dcs-legend {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}
.dcs-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
}
.dcs-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.dcs-legend-name {
  flex: 1;
  font-size: 11px;
  font-weight: 500;
  color: rgba(245,239,230,0.55);
}
.dcs-legend-pct {
  font-size: 11px;
  font-weight: 700;
  color: rgba(245,239,230,0.8);
}
.dcs-legend-empty {
  font-size: 11px;
  color: rgba(245,239,230,0.25);
  text-align: center;
  padding: 12px 0;
}







#page-clientes.active {
  display: flex;
  flex-direction: column;
  padding: 0;
  height: calc(100vh - var(--topbar));
  overflow: hidden;
}

.cli-layout {
  display: grid;
  grid-template-columns: 520px 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}


.cli-master {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(26,20,16,.12);
  background: #faf7f2;
  overflow: hidden;
}

.cli-master-head {
  padding: 16px 14px 14px;
  border-bottom: 1px solid rgba(26,20,16,.1);
  background: #f3ede2;
  flex-shrink: 0;
}

.cli-master-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(26,20,16,.1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
}

.cli-mkpi {
  padding: 8px 6px;
  text-align: center;
  border-right: 1px solid rgba(26,20,16,.1);
}
.cli-mkpi:last-of-type { border-right: none; }

.cli-mkpi-val {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: #1a1410;
  letter-spacing: -0.02em;
}

.cli-mkpi-lbl {
  display: block;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(26,20,16,.45);
  margin-top: 2px;
}

.cli-master-bar {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cli-master-bar input {
  flex: 1;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(26,20,16,.18);
  border-radius: 4px;
  background: #faf7f2;
  font-family: var(--sans);
  font-size: 12px;
  color: #1a1410;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cli-master-bar input:focus {
  border-color: rgba(200,98,42,.5);
  box-shadow: 0 0 0 3px rgba(200,98,42,.08);
}

.cli-btn-new {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 10px !important;
  padding: 0 12px !important;
  height: 36px;
}

.cli-master-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.cli-list-empty {
  padding: 32px 14px;
  text-align: center;
  font-size: 12px;
  color: rgba(26,20,16,.4);
}


.cli-detail {
  background: #f5ede0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.cli-detail-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(26,20,16,.35);
}
.cli-detail-empty-icon { opacity: .6; }
.cli-detail-empty-text {
  font-size: 13px;
  letter-spacing: 0.06em;
  font-family: var(--mono);
}





.cam-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
.cam-header-left { display:flex; flex-direction:column; gap:2px; }
.cam-eyebrow { font-size:10px; font-weight:700; letter-spacing:0.12em; color:#766960; text-transform:uppercase; font-family:var(--mono); }
.cam-title { font-family:var(--serif); font-size:36px; font-weight:700; color:#231D1A; line-height:1.05; margin:0; }
.cam-subtitle { font-size:12px; color:#766960; margin:0; margin-top:2px; }


.cam-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.cam-kpi {
  background: #fff;
  border: 1.5px solid #E5E0DC;
  border-radius: 14px;
  padding: 18px 20px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.cam-kpi--total { cursor: default; }
.cam-kpi:not(.cam-kpi--total):hover { border-color: #C6602A; box-shadow: 0 2px 10px rgba(198,96,42,.08); }
.cam-kpi.is-active { border-color: #C6602A; background: rgba(198,96,42,.03); }

.cam-kpi-top { display:flex; align-items:center; gap:7px; margin-bottom:8px; }
.cam-kpi-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.cam-kpi-dot--critico { background:#b53a2a; }
.cam-kpi-dot--proximo { background:#a0620a; }
.cam-kpi-dot--ok      { background:#2d7a4f; }
.cam-kpi-dot--total   { background:#766960; }

.cam-kpi-lbl {
  font-size:9px; font-weight:700; letter-spacing:.1em;
  color:#766960; text-transform:uppercase; font-family:var(--mono);
}
.cam-kpi-val {
  display:block;
  font-family:var(--serif);
  font-size:40px; font-weight:700; line-height:1; margin-bottom:4px;
}
.cam-kpi-sub { font-size:11px; color:#766960; }

.cam-kpi--critico .cam-kpi-val { color:#b53a2a; }
.cam-kpi--proximo .cam-kpi-val { color:#a0620a; }
.cam-kpi--ok      .cam-kpi-val { color:#2d7a4f; }
.cam-kpi--total   .cam-kpi-val { color:#231D1A; }


.cam-filter-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.cam-search-wrap {
  display:flex; align-items:center; gap:8px;
  background:#fff; border:1.5px solid #E5E0DC; border-radius:10px;
  padding:0 12px; height:40px; width:260px;
  transition: border-color .15s;
}
.cam-search-wrap:focus-within { border-color:#C6602A; box-shadow:0 0 0 3px rgba(198,96,42,.10); }
.cam-search-wrap svg { color:#766960; flex-shrink:0; }
.cam-search-input {
  border:none; background:transparent; flex:1;
  font-size:13px; color:#231D1A; outline:none; font-family:var(--sans);
}
.cam-search-input::placeholder { color:#766960; }

.cam-filter-input,
.cam-filter-select {
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid #E5E0DC;
  border-radius: 10px;
  background: #fff;
  color: #231D1A;
  font-family: var(--sans);
  font-size: 13px;
  outline: none;
  transition: border-color .15s;
}
.cam-filter-input:focus,
.cam-filter-select:focus {
  border-color: #C6602A;
  box-shadow: 0 0 0 3px rgba(198,96,42,.10);
}
.cam-filter-date { width:140px; }


#camadas-list { display:flex; flex-direction:column; gap:12px; }


.cam-card {
  background: #fff;
  border: 1.5px solid #E5E0DC;
  border-left-width: 4px;
  border-radius: 14px;
  overflow: hidden;
}

.cam-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: #FAF8F5;
  border-bottom: 1px solid #E5E0DC;
}
.cam-head-name {
  font-family: var(--sans); font-size:14px; font-weight:600;
  color:#231D1A; flex:1;
}
.cam-head-meta {
  display:flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:12px; color:#766960;
}
.cam-head-meta strong { color:#231D1A; font-weight:600; }


.cam-lotes { padding:2px 0; }
.cam-lote-row {
  display: grid;
  grid-template-columns: 8px 44px 100px auto auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid #F2F0ED;
  transition: background .1s;
}
.cam-lote-row:last-child { border-bottom: none; }
.cam-lote-row:hover { background: #FAF8F5; }
.cam-lote-row.is-vencido { opacity: .5; }

.cam-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

.cam-fifo {
  font-size:9px; font-weight:700; letter-spacing:.06em;
  color:#C6602A; background:rgba(198,96,42,.10);
  border:1px solid rgba(198,96,42,.25); border-radius:6px;
  padding:2px 6px; font-family:var(--mono); white-space:nowrap; text-align:center;
}

.cam-fecha { font-family:var(--mono); font-size:12px; font-weight:500; white-space:nowrap; }

.cam-badge {
  font-size:10px; font-weight:600; font-family:var(--sans);
  padding:3px 10px; border-radius:20px; border:1px solid; white-space:nowrap;
}

.cam-qty { font-family:var(--mono); font-size:12px; font-weight:600; color:#231D1A; white-space:nowrap; }
.cam-ref { font-family:var(--sans); font-size:12px; color:#766960; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.cam-actions { display:flex; gap:4px; flex-shrink:0; opacity:0; transition:opacity .15s; }
.cam-lote-row:hover .cam-actions { opacity:1; }




#page-vencimientos .ph-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
#page-vencimientos .venc-chip {
  height: 28px;
  padding: 0 11px;
  border-radius: 4px;
  border: 1px solid rgba(26,20,16,.15);
  background: transparent;
  color: rgba(26,20,16,.65);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
  white-space: nowrap;
}
#page-vencimientos .venc-chip:hover {
  background: rgba(200,98,42,.07);
  border-color: rgba(200,98,42,.3);
  color: #1a1410;
}
#page-vencimientos .venc-chip.active {
  background: #1a1410;
  border-color: #1a1410;
  color: rgba(240,228,204,.9);
}


#page-vencimientos #venc-asistente:empty { display: none; }
#page-vencimientos .va-card {
  border-radius: 4px;
}


#page-vencimientos .venc-row {
  display: grid;
  grid-template-columns: 52px 1fr 150px 110px 56px;
  gap: 14px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(26,20,16,.06);
  transition: background .1s ease;
}
#page-vencimientos .venc-row:last-child { border-bottom: none; }
#page-vencimientos .venc-row:hover { background: rgba(200,98,42,.04); }




.pr-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
.pr-header-left { display:flex; flex-direction:column; gap:2px; }
.pr-eyebrow { font-size:10px; font-weight:700; letter-spacing:0.12em; color:#766960; text-transform:uppercase; font-family:var(--mono); }
.pr-title { font-family:var(--serif); font-size:36px; font-weight:700; color:#231D1A; line-height:1.05; margin:0; }
.pr-subtitle { font-size:12px; color:#766960; margin:0; margin-top:2px; }


.pr-save-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: #C6602A; color: #fff;
  border: none; border-radius: 22px;
  padding: 11px 20px; font-size: 13px; font-weight: 600;
  font-family: var(--sans); cursor: pointer;
  position: relative; overflow: hidden;
  transition: background .2s, box-shadow .2s;
}
.pr-save-btn:hover { background: #b35525; box-shadow: 0 4px 14px rgba(198,96,42,.32); }


.pr-filter-bar { display:flex; gap:8px; align-items:center; margin-bottom:20px; }
.pr-search-wrap {
  display:flex; align-items:center; gap:8px;
  background:#fff; border:1.5px solid #E5E0DC; border-radius:10px;
  padding:0 12px; height:40px; width:280px;
  transition:border-color .15s;
}
.pr-search-wrap:focus-within { border-color:#C6602A; box-shadow:0 0 0 3px rgba(198,96,42,.10); }
.pr-search-wrap svg { color:#766960; flex-shrink:0; }
.pr-search-input {
  border:none; background:transparent; flex:1;
  font-size:13px; color:#231D1A; outline:none; font-family:var(--sans);
}
.pr-search-input::placeholder { color:#766960; }
.pr-filter-select {
  height:40px; padding:0 12px;
  border:1.5px solid #E5E0DC; border-radius:10px;
  background:#fff; color:#231D1A;
  font-family:var(--sans); font-size:13px; outline:none; cursor:pointer;
  transition:border-color .15s;
}
.pr-filter-select:focus { border-color:#C6602A; box-shadow:0 0 0 3px rgba(198,96,42,.10); }


.pr-group { margin-bottom:20px; }
.pr-group-head {
  display:flex; align-items:center; gap:8px;
  padding:0 0 10px 0; margin-bottom:0;
  border-bottom:1.5px solid #E5E0DC;
}
.pr-group-title {
  font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; color:#766960;
}
.pr-group-count {
  font-family:var(--mono); font-size:10px; color:#C6602A;
  background:rgba(198,96,42,.1); border-radius:20px;
  padding:1px 7px; font-weight:600;
}


.pr-rows-wrap {
  border: 1.5px solid #E5E0DC;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}


.pr-row {
  border-bottom: 1px solid #F2F0ED;
  background: #fff;
}
.pr-row:last-child { border-bottom: none; }

.pr-row-head {
  display:grid; grid-template-columns:1fr auto auto auto;
  gap:16px; align-items:center;
  padding:12px 16px; cursor:pointer;
  transition:background .1s;
}
.pr-row-head:hover { background:#FAF8F5; }
.pr-row.is-open .pr-row-head { background:#FAF8F5; }

.pr-row-nombre {
  font-family:var(--sans); font-size:13px; font-weight:600;
  color:#231D1A; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pr-row-precio { font-family:var(--mono); font-size:15px; font-weight:700; color:#C6602A; white-space:nowrap; }
.pr-row-sin-precio { font-family:var(--mono); font-size:12px; color:#766960; }
.pr-row-meta { font-family:var(--sans); font-size:11px; color:#766960; white-space:nowrap; text-align:right; }
.pr-row-toggle {
  font-family:var(--sans); font-size:11px; color:#766960;
  white-space:nowrap; display:flex; align-items:center; gap:5px;
  transition:color .12s;
}
.pr-row-head:hover .pr-row-toggle { color:#C6602A; }
.pr-row-chevron { display:inline-block; transition:transform .2s; }
.pr-row.is-open .pr-row-chevron { transform:rotate(180deg); }


.pr-hist { display:none; border-top:1px solid #F2F0ED; background:#FAF8F5; }
.pr-row.is-open .pr-hist { display:block; }

.pr-hist-empty { padding:14px 16px; font-size:12px; color:#766960; font-family:var(--sans); }
.pr-hist-row {
  display:grid; grid-template-columns:130px 1fr 130px;
  gap:12px; align-items:center;
  padding:10px 16px; border-bottom:1px solid #F2F0ED;
}
.pr-hist-row:last-child { border-bottom:none; }
.pr-hist-precio { font-family:var(--mono); font-size:13px; font-weight:700; color:#C6602A; }
.pr-hist-motivo { font-size:12px; color:#231D1A; font-family:var(--sans); }
.pr-hist-fecha { font-family:var(--mono); font-size:11px; color:#766960; text-align:right; }


.pr-save-btn .pr-btn-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: opacity .22s ease, transform .30s cubic-bezier(.4,0,.2,1);
  will-change: transform, opacity;
}
.pr-save-btn .pr-btn-success {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(210,240,220,.92);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .28s ease .08s, transform .34s cubic-bezier(.16,1,.3,1) .08s;
  pointer-events: none;
  will-change: transform, opacity;
}
.pr-save-btn .pr-btn-check {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.pr-btn-check-circle {
  transition: stroke-dashoffset .5s cubic-bezier(.16,1,.3,1);
}
.pr-btn-check-mark {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  transition: stroke-dashoffset 0s;
}


.pr-save-btn.is-saving {
  transform: scale(.97);
  transition: transform .08s ease;
}


.pr-save-btn.is-success {
  background: #2d7a4f;
  box-shadow: 0 4px 20px rgba(45,122,79,.35);
  transform: scale(1);
  transition: background .30s cubic-bezier(.16,1,.3,1), box-shadow .38s cubic-bezier(.16,1,.3,1), transform .18s ease;
}
.pr-save-btn.is-success .pr-btn-label { opacity:0; transform:translateY(-9px); }
.pr-save-btn.is-success .pr-btn-success { opacity:1; transform:translateY(0); }
.pr-save-btn.is-success .pr-btn-check-mark {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .38s cubic-bezier(.16,1,.3,1) .20s;
}


.pr-save-btn.is-returning {
  transition: background .50s ease, box-shadow .50s ease;
}
.pr-save-btn.is-returning .pr-btn-label {
  opacity:1; transform:translateY(0);
  transition: opacity .32s ease .12s, transform .38s cubic-bezier(.16,1,.3,1) .12s;
}
.pr-save-btn.is-returning .pr-btn-success {
  opacity:0; transform:translateY(12px);
  transition: opacity .18s ease, transform .26s cubic-bezier(.4,0,.6,1);
}


.pr-precio-input {
  font-family: var(--mono); font-size:15px; font-weight:700;
  color:#C6602A; background:transparent;
  border:1.5px solid transparent; border-radius:8px;
  padding:4px 8px; width:120px; text-align:right;
  outline:none; transition:border-color .15s, background .15s;
  -moz-appearance: textfield;
}
.pr-precio-input::-webkit-outer-spin-button,
.pr-precio-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.pr-precio-input:focus {
  border-color:#E5E0DC; background:#FAF8F5;
}
.pr-precio-input.is-dirty {
  border-color:#C6602A; background:rgba(198,96,42,.06); color:#C6602A;
}




#page-movimientos {
  background: #FAF8F5;
  min-height: calc(100vh - 56px);
  box-sizing: border-box;
}


.mv-bc { display:flex; align-items:center; gap:6px; margin-bottom:20px; }
.mv-bc-link { font-family:var(--mono); font-size:11px; color:rgba(26,20,16,0.45); letter-spacing:0.04em; cursor:pointer; }
.mv-bc-link:hover { color:rgba(26,20,16,0.70); }
.mv-bc-sep { font-size:11px; color:rgba(26,20,16,0.30); }
.mv-bc-cur { font-family:var(--mono); font-size:11px; color:rgba(26,20,16,0.70); letter-spacing:0.04em; }


.mv-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:22px; gap:20px; flex-wrap:wrap; }
.mv-kicker { font-family:var(--mono); font-size:9px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(200,98,42,0.80); margin-bottom:6px; }
.mv-title { font-family:var(--serif); font-size:42px; font-weight:700; font-style:normal; letter-spacing:-0.03em; line-height:1; color:#1a1410; margin:0 0 6px; }
.mv-subtitle { font-size:13px; color:rgba(26,20,16,0.50); font-family:var(--sans); margin:0; }
.mv-header-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }


.mv-search-wrap { position:relative; display:flex; align-items:center; background:#fff; border:1px solid rgba(26,20,16,0.14); border-radius:8px; padding:0 10px; gap:8px; height:38px; width:260px; transition:border-color .15s,box-shadow .15s; }
.mv-search-wrap:focus-within { border-color:rgba(200,98,42,0.45); box-shadow:0 0 0 3px rgba(200,98,42,0.08); }
.mv-search-icon { color:rgba(26,20,16,0.38); flex-shrink:0; }
.mv-search-input { border:none; outline:none; background:transparent; font-family:var(--sans); font-size:13px; color:#1a1410; flex:1; min-width:0; }
.mv-search-input::placeholder { color:rgba(26,20,16,0.38); }
.mv-search-clr { background:none; border:none; cursor:pointer; font-size:12px; color:rgba(26,20,16,0.38); padding:0; line-height:1; }
.mv-search-clr:hover { color:rgba(26,20,16,0.70); }

.mv-btn-nuevo { border-radius:999px !important; background:#c8622a !important; border-left-color:#c8622a !important; color:#fff !important; padding:10px 18px !important; }
.mv-btn-nuevo:hover { background:#b75823 !important; border-left-color:#b75823 !important; box-shadow:none !important; }
.mv-btn-nuevo::before { display:none !important; }


.mv-filters-bar {
  display:flex;
  align-items:center;
  gap:0;
  background:#fff;
  border:1px solid rgba(26,20,16,0.09);
  border-radius:12px;
  padding:12px 20px;
  margin-bottom:16px;
  flex-wrap:wrap;
  row-gap:10px;
}
.mv-filters-group { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mv-filters-label { font-family:var(--mono); font-size:8.5px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(26,20,16,0.40); font-weight:600; white-space:nowrap; }
.mv-filters-sep { width:1px; background:rgba(26,20,16,0.08); align-self:stretch; margin:0 16px; flex-shrink:0; }
.mv-filter-pills { display:flex; flex-wrap:wrap; gap:6px; }


.mv-pill { font-family:var(--sans); font-size:12.5px; padding:6px 14px; border-radius:999px; border:1px solid rgba(26,20,16,0.18); background:transparent; color:rgba(26,20,16,0.68); cursor:pointer; transition:background .15s,border-color .15s,color .15s; font-weight:500; }
.mv-pill:hover { background:rgba(200,98,42,0.07); border-color:rgba(200,98,42,0.32); color:rgba(160,70,14,0.90); }
.mv-pill.on { background:rgba(200,98,42,0.88); border-color:rgba(200,98,42,0.88); color:#fff; font-weight:600; }


.mv-body { display:flex; gap:0; position:relative; flex:1; min-height:0; }


.mv-table-card { flex:1; background:#fff; border:1px solid rgba(26,20,16,0.09); border-radius:12px; overflow:hidden; transition:filter 0.38s cubic-bezier(0.16,1,0.3,1); }


body:has(#mov-inspector .mov2-ins-hd) #page-movimientos .mv-table-card { filter:blur(2.5px); }
body:has(#mov-inspector .mov2-ins-hd) #page-movimientos .mv-header,
body:has(#mov-inspector .mov2-ins-hd) #page-movimientos .mv-filter-card{ filter:blur(2.5px); pointer-events:none; }


.mv-ins-overlay {
  position: fixed;
  inset: 0;
  top: var(--topbar, 54px);
  background: rgba(26,20,16,0.28);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.38s cubic-bezier(0.16,1,0.3,1);
}
.mv-ins-overlay.open { opacity:1; pointer-events:auto; }


.mv-table { width:100%; border-collapse:collapse; }
.mv-table thead tr { border-bottom:1px solid rgba(26,20,16,0.08); }
.mv-table th { font-family:var(--mono); font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(26,20,16,0.42); font-weight:600; padding:13px 16px; text-align:left; white-space:nowrap; background:#fff; position:sticky; top:0; z-index:2; }
.mv-table th:last-child { width:28px; }
.mv-table td { padding:14px 16px; border-bottom:1px solid rgba(26,20,16,0.06); vertical-align:middle; }
.mv-table tbody tr:last-child td { border-bottom:none; }
.mv-table tbody tr:hover td { background:rgba(200,98,42,0.04); }
.mv-table tbody tr.mv-row-selected td { background:rgba(200,98,42,0.06); }


.mv-date-sep-row td { background:rgba(245,239,231,0.70) !important; border-bottom:1px solid rgba(26,20,16,0.06) !important; padding:8px 16px !important; }
.mv-date-sep-text { font-family:var(--serif); font-size:13px; font-weight:400; font-style:italic; color:rgba(26,20,16,0.65); }
.mv-td-local { font-family:var(--mono); font-size:10px; font-weight:700; color:rgba(26,20,16,0.40); letter-spacing:0.10em; white-space:nowrap; }
.mv-td-fecha { font-family:var(--mono); font-size:11px; color:rgba(26,20,16,0.46); white-space:nowrap; }
.mv-td-cliente { font-family:var(--sans); font-size:13px; font-weight:600; color:#1a1410; letter-spacing:-0.01em; }
.mv-td-producto { font-family:var(--sans); font-size:13px; color:rgba(26,20,16,0.55); max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mv-td-arrow { color:rgba(26,20,16,0.25); font-size:16px; text-align:right; padding-right:14px !important; opacity:0; transition:opacity .12s; }
.mv-table tbody tr:hover .mv-td-arrow { opacity:1; }
.mv-table tbody tr.mv-row-selected .mv-td-arrow { opacity:1; color:rgba(200,98,42,0.72); }


.mv-tipo-pill { display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; padding:3px 9px; border-radius:5px; font-weight:600; white-space:nowrap; }
.mv-tipo-pill.venta { background:rgba(200,98,42,0.11); color:rgba(155,65,10,0.95); }
.mv-tipo-pill.ingreso { background:rgba(45,122,79,0.11); color:rgba(22,84,46,0.95); }
.mv-tipo-pill.merma { background:rgba(181,58,42,0.11); color:rgba(140,35,20,0.95); }
.mv-tipo-pill.ajuste { background:rgba(42,90,140,0.11); color:rgba(28,60,110,0.95); }
.mv-tipo-pill.transferencia_salida { background:rgba(126,60,160,0.10); color:rgba(90,30,130,0.90); }
.mv-tipo-pill.transferencia_entrada { background:rgba(45,122,79,0.11); color:rgba(22,84,46,0.95); }


.mv-pago-pill { display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; padding:4px 10px; border-radius:6px; font-weight:600; white-space:nowrap; border:1px solid transparent; }
.mv-pago-pill.efectivo { background:rgba(200,150,42,0.13); border-color:rgba(200,150,42,0.28); color:rgba(120,80,5,0.92); }
.mv-pago-pill.debito { background:rgba(26,20,16,0.07); border-color:rgba(26,20,16,0.14); color:rgba(26,20,16,0.62); }
.mv-pago-pill.transferencia { background:rgba(45,122,79,0.11); border-color:rgba(45,122,79,0.24); color:rgba(22,84,46,0.92); }


.mv-td-total { font-family:var(--mono); font-size:14px; font-weight:700; color:#1a1410; letter-spacing:-0.02em; text-align:right; white-space:nowrap; }
.mv-td-total.neg { color:rgba(181,58,42,0.90); }
.mv-td-total.pos { color:rgba(30,100,58,0.90); }


.mv-inspector {
  position: fixed;
  top: var(--topbar, 54px);
  right: -460px;
  bottom: 0;
  width: 440px;
  background: #fff;
  border-left: 1px solid rgba(26,20,16,0.10);
  box-shadow: -12px 0 48px rgba(26,20,16,0.14);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: right 0.42s cubic-bezier(0.16,1,0.3,1);
  z-index: 100;
}

body:has(#page-movimientos.active) .mv-inspector:has(.mov2-ins-hd) { right: 0; }


body:not(:has(#page-movimientos.active)) .mv-ins-overlay {
  opacity: 0 !important;
  pointer-events: none !important;
}


.mov2-ins-doc { flex:1; overflow-y:auto; min-height:0; padding:24px 22px 16px; }
.mov2-ins-hd { margin-bottom:16px; }
.mov2-ins-kicker { font-family:var(--mono); font-size:8px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(26,20,16,0.42); margin-bottom:8px; }
.mov2-ins-num { font-family:var(--serif); font-size:28px; font-weight:700; font-style:normal; letter-spacing:-0.02em; color:#1a1410; line-height:1.1; margin-bottom:4px; }
.mov2-ins-date { font-family:var(--sans); font-size:13px; color:rgba(26,20,16,0.52); }
.mov2-ins-close { position:absolute; top:18px; right:18px; width:30px; height:30px; border-radius:50%; background:rgba(26,20,16,0.06); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; color:rgba(26,20,16,0.50); transition:background .15s,color .15s; }
.mov2-ins-close:hover { background:rgba(26,20,16,0.12); color:#1a1410; }
.mov2-ins-divider { height:1px; background:rgba(26,20,16,0.08); margin:16px 0; border:none; }
.mov2-ins-meta-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.mov2-ins-meta-card { background:rgba(245,240,232,0.60); border:1px solid rgba(26,20,16,0.08); border-radius:8px; padding:12px 14px; }
.mov2-ins-meta-label { font-family:var(--mono); font-size:8px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(26,20,16,0.48); margin-bottom:5px; font-weight:600; }
.mov2-ins-meta-val { font-family:var(--sans); font-size:13.5px; font-weight:600; color:#1a1410; display:flex; align-items:center; gap:5px; }
.mov2-ins-sec-label { font-family:var(--mono); font-size:8.5px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(26,20,16,0.45); font-weight:600; margin-bottom:12px; }
.mov2-ins-items { display:flex; flex-direction:column; }
.mov2-ins-item { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid rgba(26,20,16,0.07); }
.mov2-ins-item:last-child { border-bottom:none; }
.mov2-ins-item-info { flex:1; min-width:0; }
.mov2-ins-item-name { font-family:var(--sans); font-size:14px; font-weight:600; color:#1a1410; margin-bottom:3px; letter-spacing:-0.01em; }
.mov2-ins-item-detail { font-family:var(--mono); font-size:10.5px; color:rgba(26,20,16,0.48); letter-spacing:0.02em; }
.mov2-ins-item-right { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.mov2-ins-item-price { font-family:var(--mono); font-size:14px; font-weight:700; color:#1a1410; letter-spacing:-0.02em; white-space:nowrap; }
.mov2-ins-item-del { width:28px; height:28px; border-radius:6px; border:none; background:transparent; color:rgba(26,20,16,0.25); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .13s,color .13s; flex-shrink:0; }
.mov2-ins-item-del:hover { background:rgba(181,58,42,0.09); color:rgba(150,40,25,0.85); }
.mov2-ins-footer { padding:16px 22px; border-top:1px solid rgba(26,20,16,0.08); display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
.mov2-ins-total-label { font-family:var(--mono); font-size:8.5px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(26,20,16,0.48); margin-bottom:4px; font-weight:600; }
.mov2-ins-total-val { font-family:var(--serif); font-size:32px; font-weight:700; font-style:italic; letter-spacing:-0.04em; color:#1a1410; line-height:1; }
.mov2-ins-ticket-btn { width:38px; height:38px; border-radius:50%; background:rgba(200,98,42,0.10); border:1px solid rgba(200,98,42,0.28); color:rgba(160,70,14,0.90); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:15px; transition:background .15s; }
.mov2-ins-ticket-btn:hover { background:rgba(200,98,42,0.20); }
.mv-ins-actions { padding:12px 22px 16px; display:flex; gap:8px; flex-shrink:0; border-top:1px solid rgba(26,20,16,0.07); }
.mv-ins-action-btn { flex:1; font-family:var(--mono); font-size:9px; letter-spacing:0.12em; text-transform:uppercase; padding:9px 12px; border-radius:7px; border:1px solid rgba(26,20,16,0.16); background:#fff; color:rgba(26,20,16,0.65); cursor:pointer; text-align:center; transition:background .14s,border-color .14s,color .14s; font-weight:600; }
.mv-ins-action-btn:hover { background:rgba(26,20,16,0.06); color:#1a1410; }
.mv-ins-action-btn.edit { border-color:rgba(42,90,140,0.28); color:rgba(30,60,110,0.85); }
.mv-ins-action-btn.edit:hover { background:rgba(42,90,140,0.08); }
.mv-ins-action-btn.del { border-color:rgba(181,58,42,0.24); color:rgba(150,40,25,0.85); }
.mv-ins-action-btn.del:hover { background:rgba(181,58,42,0.08); }


.mv-load-more-btn { font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; padding:10px 20px; border-radius:8px; border:1px solid rgba(26,20,16,0.16); background:#fff; color:rgba(26,20,16,0.58); cursor:pointer; transition:background .14s; font-weight:600; }
.mv-load-more-btn:hover { background:rgba(26,20,16,0.05); }


#page-movimientos {
  height: auto !important;
  overflow: visible !important;
  padding-bottom: 28px !important;
  position: relative;
}

#page-movimientos:not(.active):not(.leaving) {
  display: none !important;
}
#page-movimientos .mv-body {
  min-height: 400px;
}

#page-movimientos .mv-header,
#page-movimientos .mv-filter-card,
#page-movimientos .mv-table-card {
  transition: filter 0.38s cubic-bezier(0.16,1,0.3,1);
}



#page-dashboard {
  padding: 32px 32px 40px;
  box-sizing: border-box;
}


.nd-header {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.nd-brand { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.nd-brand-avatar {
  width: 42px; height: 42px;
  background: #C6602A;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 13px; font-weight: 700;
  color: rgba(255,245,235,0.92); letter-spacing: 0.04em;
  flex-shrink: 0;
}
.nd-brand-sup {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.20em;
  text-transform: uppercase; color: rgba(26,20,16,0.45); line-height:1;
  margin-bottom: 3px;
}
.nd-brand-name {
  font-family: var(--serif); font-size: 15px; font-weight: 700;
  letter-spacing: -0.01em; color: #1a1410; line-height: 1;
}
.nd-header-center { flex: 1; min-width: 0; }
.nd-greeting {
  font-family: var(--serif); font-size: 38px; font-weight: 700;
  letter-spacing: -0.03em; color: #1a1410; line-height: 1.2;
  margin: 0 0 4px; white-space: nowrap; overflow: visible; text-overflow: ellipsis;
  padding-bottom: 2px;
}
.nd-greeting strong { font-weight: 700; }
.nd-date {
  font-family: var(--sans); font-size: 13px; color: rgba(26,20,16,0.48); margin: 0;
}
.nd-header-right { display:flex; align-items:center; gap:10px; flex-shrink:0; margin-left:auto; }


.nd-search-wrap {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid rgba(26,20,16,0.14);
  border-radius: 9px; padding: 0 14px; height: 40px; width: 240px;
  transition: border-color .15s, box-shadow .15s; cursor: pointer;
}
.nd-search-wrap:hover { border-color: rgba(26,20,16,0.28); }
.nd-search-ico { color: rgba(26,20,16,0.35); flex-shrink:0; }
.nd-search-input {
  border: none; outline: none; background: transparent;
  font-family: var(--sans); font-size: 13px; color: #1a1410;
  flex: 1; min-width: 0; cursor: pointer;
}
.nd-search-input::placeholder { color: rgba(26,20,16,0.38); }


.nd-btn-primary {
  display: flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 18px;
  background: #6B1A1A; border: none; border-radius: 9px;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: rgba(255,245,235,0.96); cursor: pointer; white-space: nowrap;
  transition: background .15s, box-shadow .15s;
  box-shadow: 0 2px 12px rgba(107,26,26,0.28);
}
.nd-btn-primary:hover { background: #5a1515; box-shadow: 0 4px 18px rgba(107,26,26,0.36); }


.nd-kpi-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin-bottom: 24px;
}
.nd-kpi-card {
  background: #fff; border: 1px solid rgba(26,20,16,0.09);
  border-radius: 14px; padding: 20px 22px 18px;
  transition: box-shadow .18s;
}
.nd-kpi-card:hover { box-shadow: 0 4px 20px rgba(26,20,16,0.07); }
.nd-kpi-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
.nd-kpi-icon {
  width: 36px; height: 36px;
  background: rgba(26,20,16,0.05); border: 1px solid rgba(26,20,16,0.10);
  border-radius: 8px; display:flex; align-items:center; justify-content:center;
  color: rgba(26,20,16,0.55); flex-shrink:0;
}
.nd-kpi-badge {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.04em; padding: 3px 8px; border-radius: 5px;
  background: rgba(26,20,16,0.06); color: rgba(26,20,16,0.50);
}
.nd-kpi-badge.up   { background: rgba(30,130,70,0.10); color: rgba(20,110,55,0.92); }
.nd-kpi-badge.down { background: rgba(181,58,42,0.10); color: rgba(150,40,25,0.90); }
.nd-kpi-label {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(26,20,16,0.45); margin-bottom: 6px; font-weight:600;
}
.nd-kpi-val {
  font-family: var(--serif); font-size: 30px; font-weight: 700;
  letter-spacing: -0.03em; color: #1a1410; line-height: 1;
}


.nd-body {
  display: grid;
  grid-template-columns: 1fr 370px;
  gap: 20px;
  align-items: start;
}
.nd-col-main { display:flex; flex-direction:column; gap:20px; }
.nd-col-side  { display:flex; flex-direction:column; gap:20px; }


.nd-card {
  background: #fff; border: 1px solid rgba(26,20,16,0.09);
  border-radius: 16px; padding: 22px 24px; box-sizing: border-box;
}
.nd-card-kicker {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.20em;
  text-transform: uppercase; color: rgba(26,20,16,0.42); margin-bottom: 4px; font-weight:600;
}
.nd-card-title {
  font-family: var(--serif); font-size: 20px; font-weight: 700;
  letter-spacing: -0.02em; color: #1a1410; margin: 0 0 18px; line-height: 1.1;
}
.nd-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 18px;
}
.nd-card-head .nd-card-title { margin-bottom: 0; }
.nd-card-link {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  color: rgba(26,20,16,0.42); background: none; border: none; cursor: pointer;
  padding: 0; transition: color .12s; white-space: nowrap; align-self:flex-end;
}
.nd-card-link:hover { color: rgba(107,26,26,0.85); }
.nd-empty {
  font-family: var(--mono); font-size: 11px; color: rgba(26,20,16,0.32);
  letter-spacing: 0.06em; padding: 20px 0; text-align: center;
}


.nd-chart-wrap { position:relative; height:160px; }
.nd-chart-wrap canvas { width:100% !important; height:100% !important; }


.nd-ventas-list { display:flex; flex-direction:column; gap:0; }
.nd-venta-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(26,20,16,0.06);
}
/* El wrapper sin clase de nombre+meta necesita min-width:0 para que el 1fr pueda contraerse y el texto haga ellipsis. */
.nd-venta-row > div:not(.nd-venta-avatar):not(.nd-venta-total) { min-width: 0; }
.nd-venta-row:last-child { border-bottom: none; }
.nd-venta-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(26,20,16,0.07); border: 1px solid rgba(26,20,16,0.10);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px; font-weight:700;
  color: rgba(26,20,16,0.45); flex-shrink:0;
}
.nd-venta-name {
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  color: #1a1410; letter-spacing: -0.01em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.nd-venta-meta {
  font-family: var(--mono); font-size: 10.5px; color: rgba(26,20,16,0.42);
  letter-spacing: 0.02em; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nd-pago-pill {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 5px; white-space:nowrap;
}
.nd-pago-pill.efectivo    { background: rgba(30,130,70,0.10); color: rgba(20,110,55,0.90); }
.nd-pago-pill.debito      { background: rgba(26,20,16,0.07);  color: rgba(26,20,16,0.60); }
.nd-pago-pill.transferencia { background: rgba(20,100,110,0.10); color: rgba(15,80,95,0.90); }
.nd-venta-total {
  font-family: var(--mono); font-size: 14px; font-weight: 700;
  color: #1a1410; letter-spacing: -0.02em; text-align:right;
  white-space: nowrap;
}


.nd-mix-wrap { display:flex; align-items:center; gap:20px; }
.nd-mix-donut { flex-shrink:0; width:140px; height:140px; position:relative; }
.nd-mix-donut canvas { width:100% !important; height:100% !important; }
.nd-mix-legend { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.nd-mix-row {
  display: flex; align-items: center; justify-content: space-between; gap:8px;
  min-width: 0;
}
.nd-mix-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink:0;
}
.nd-mix-lbl {
  flex:1; min-width:0; font-family: var(--sans); font-size: 13px;
  color: rgba(26,20,16,0.75); font-weight:500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nd-mix-pct {
  font-family: var(--mono); font-size: 11px; font-weight:700;
  color: rgba(26,20,16,0.60); letter-spacing:0.02em;
}


.nd-ranking-list { display:flex; flex-direction:column; gap:14px; }
.nd-rank-row { display:flex; align-items:center; gap:12px; }
.nd-rank-num {
  font-family: var(--mono); font-size: 11px; font-weight:700;
  color: rgba(26,20,16,0.30); letter-spacing:0.06em;
  width: 22px; flex-shrink:0; text-align:right;
}
.nd-rank-info { flex:1; min-width:0; }
.nd-rank-name {
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  color: #1a1410; letter-spacing: -0.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nd-rank-meta {
  font-family: var(--mono); font-size: 10.5px; color: rgba(26,20,16,0.42);
  margin-top: 3px;
}
.nd-rank-bar-wrap {
  height: 2px; background: rgba(26,20,16,0.08); border-radius: 2px; margin-top:6px;
}
.nd-rank-bar {
  height: 2px; background: #C6602A; border-radius: 2px;
  transition: width .4s cubic-bezier(.16,1,.3,1);
}
.nd-rank-price {
  font-family: var(--mono); font-size: 12px; font-weight:700;
  color: #1a1410; text-align:right; white-space:nowrap; flex-shrink:0;
}


.nd-stockbajo-list { display:flex; flex-direction:column; gap:14px; }
.nd-sb-row { display:flex; flex-direction:column; gap:4px; }
.nd-sb-top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.nd-sb-name {
  font-family: var(--sans); font-size: 14px; font-weight:600;
  color: #1a1410; letter-spacing:-0.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1;
}
.nd-sb-qty {
  font-family: var(--mono); font-size: 13px; font-weight:700;
  color: rgba(26,20,16,0.70); white-space:nowrap;
}
.nd-sb-meta {
  font-family: var(--mono); font-size: 10px; color: rgba(26,20,16,0.38);
  letter-spacing: 0.04em;
}
.nd-sb-bar-wrap {
  height: 2px; background: rgba(26,20,16,0.08); border-radius:2px; margin-top:2px;
}
.nd-sb-bar {
  height: 2px; background: #6B1A1A; border-radius:2px;
  transition: width .4s cubic-bezier(.16,1,.3,1);
}




@media (max-width: 1200px) {
  #page-dashboard.page,
  .page#page-dashboard { padding: 60px 80px 60px !important; }

  .nd-greeting { font-size: 30px; }
  .nd-body { grid-template-columns: 1fr 330px; }
}


@media (max-width: 1200px) {
  #page-dashboard.page,
  .page#page-dashboard { padding: 48px 48px 48px !important; }

  .nd-greeting { font-size: 26px; }
  .nd-kpi-val  { font-size: 26px; }
  .nd-body { grid-template-columns: 1fr 290px; }
  .nd-mix-donut { width: 110px; height: 110px; }
}


@media (max-width: 960px) {
  #page-dashboard.page,
  .page#page-dashboard { padding: 32px 24px 40px !important; }

  /* Header compacto */
  .nd-header { gap: 16px; margin-bottom: 20px; }
  .nd-brand-avatar { width: 38px; height: 38px; font-size: 13px; }
  .nd-greeting { font-size: 22px; white-space: normal; }
  .nd-date { font-size: 12px; }
  .nd-search-wrap { display: none; }          /* ocultar búsqueda */
  .nd-btn-primary { padding: 8px 14px; font-size: 12px; }

  /* KPI grid: 2 columnas */
  .nd-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
  }
  .nd-kpi-val { font-size: 24px; }

  /* Body: una sola columna */
  .nd-body { grid-template-columns: 1fr; gap: 16px; }

  /* Columna lateral pasa a grilla 2 cols */
  .nd-col-side {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  /* El primer card (mix) ocupa ancho completo */
  .nd-col-side > .nd-card:first-child { grid-column: 1 / -1; }

  /* Donut mix más pequeño */
  .nd-mix-donut { width: 100px; height: 100px; }
  .nd-mix-lbl   { font-size: 12px; }

  /* Ventas recientes: ocultar total en mobile */
  .nd-venta-total { font-size: 12px; }
}


@media (max-width: 640px) {
  #page-dashboard.page,
  .page#page-dashboard { padding: 20px 16px 32px !important; }

  /* Header apilado */
  .nd-header {
    flex-wrap: wrap;
    gap: 12px;
  }
  .nd-header-center { order: 3; flex-basis: 100%; }
  .nd-header-right  { margin-left: 0; }
  .nd-greeting { font-size: 20px; }

  /* KPI: 2 cols ajustadas */
  .nd-kpi-grid { gap: 10px; }
  .nd-kpi-card { padding: 14px; }
  .nd-kpi-val  { font-size: 20px; }
  .nd-kpi-label { font-size: 8px; }

  /* Body col-side: 1 columna en mobile */
  .nd-col-side {
    grid-template-columns: 1fr;
  }
  .nd-col-side > .nd-card:first-child { grid-column: auto; }

  /* Cards */
  .nd-card { padding: 16px; }
  .nd-card-title { font-size: 15px; }

  /* Ventas recientes: avatar más pequeño + grid reducido para evitar overflow */
  .nd-venta-row {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 10px;
  }
  .nd-venta-avatar { width: 30px; height: 30px; font-size: 9px; }
  .nd-venta-name   { font-size: 12px; }
  .nd-venta-total  { display: none; } /* Oculto en mobile: el total se ve al tocar el row / en el listado */
  .nd-pago-pill    { font-size: 8.5px; padding: 3px 7px; }

  /* Ranking: ocultar barra en mobile muy chico */
  .nd-rank-bar-wrap { display: none; }
  .nd-rank-name { font-size: 12px; }
}



#page-costos {
  background: #FAF8F5;
  padding: 36px 40px 60px;
  gap: 0;
  min-height: 100%;
  box-sizing: border-box;
}

#page-costos.active { display: flex !important; flex-direction: column; }


.co-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
}
.co-header-left { display: flex; flex-direction: column; }
.co-eyebrow {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #9A8F86;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.co-title {
  font-family: Fraunces, Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  color: #1A1410;
  line-height: 1.1;
  margin: 0 0 4px;
}
.co-subtitle {
  font-size: 13px;
  color: #9A8F86;
  margin: 0;
}
.co-btn-primary {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #C4522A;
  color: #fff;
  border: none;
  border-radius: 100px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s;
  margin-top: 8px;
  flex-shrink: 0;
}
.co-btn-primary:hover { background: #A84220; }


.co-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.co-topbar .co-subnav { margin-bottom: 0; }


.co-period-bar {
  display: flex;
  gap: 2px;
  background: #EDE9E2;
  border-radius: 10px;
  padding: 4px;
  flex-shrink: 0;
}
.co-period-btn {
  background: none;
  border: none;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #7A6F66;
  cursor: pointer;
  border-radius: 7px;
  transition: all 0.18s;
  white-space: nowrap;
  font-family: inherit;
}
.co-period-btn.active {
  background: #fff;
  color: #1A1410;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.co-period-btn:not(.active):hover {
  color: #1A1410;
  background: rgba(255,255,255,0.45);
}


.co-subnav {
  display: flex;
  gap: 2px;
  background: #EDE9E2;
  border-radius: 10px;
  padding: 4px;
  width: fit-content;
}
.co-subnav-btn {
  background: none;
  border: none;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 500;
  color: #7A6F66;
  cursor: pointer;
  border-radius: 7px;
  transition: all 0.18s;
  white-space: nowrap;
  font-family: inherit;
}
.co-subnav-btn.active {
  background: #fff;
  color: #1A1410;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.co-subnav-btn:not(.active):hover {
  color: #1A1410;
  background: rgba(255,255,255,0.45);
}


.co-subpage {
  display: flex;
  flex-direction: column;
  gap: 20px;
}


.co-card {
  background: #fff;
  border-radius: 14px;
  padding: 24px 28px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
}
.co-card-eyebrow {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #9A8F86;
  font-weight: 700;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.co-card-title {
  font-family: Fraunces, Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: #1A1410;
  margin-bottom: 20px;
}


.co-chart-card { }
.co-chart-wrap {
  height: 300px;
  position: relative;
}
.co-chart-suc-wrap { height: 240px; }
.co-chart-legend {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 16px;
  flex-wrap: wrap;
}
.co-leg-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #7A6F66;
}
.co-leg-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.co-leg-dash {
  width: 18px;
  height: 2.5px;
  border-radius: 2px;
  flex-shrink: 0;
}


.co-kpi-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.co-kpi3 {
  background: #fff;
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
  text-align: center;
}
.co-kpi3-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #9A8F86;
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.co-kpi3-val {
  font-family: Fraunces, Georgia, serif;
  font-size: 32px;
  font-weight: 700;
  color: #1A1410;
  line-height: 1;
}
.co-kpi3-red { color: #C4522A !important; }


.co-kpi-row-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.co-kpi4 {
  background: #fff;
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
}
.co-kpi4-label {
  font-size: 10px;
  letter-spacing: 0.09em;
  color: #9A8F86;
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.co-kpi4-val {
  font-family: Fraunces, Georgia, serif;
  font-size: 26px;
  font-weight: 700;
  color: #1A1410;
  line-height: 1;
  margin-bottom: 8px;
}
.co-kpi4-red { color: #C4522A !important; }
.co-kpi4-sub {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.co-sub-green { color: #2D6B4A; }
.co-sub-red   { color: #C4522A; }


.co-body-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}


.co-gauge-wrap {
  position: relative;
  width: 200px;
  height: 112px;
  margin: 20px auto 4px;
}
.co-gauge-center {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
}
.co-gauge-pct {
  font-family: Fraunces, Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  color: #1A1410;
  line-height: 1;
}
.co-gauge-unit {
  font-size: 11px;
  color: #9A8F86;
  margin-top: 2px;
}
.co-gauge-status {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
}


.co-cat-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 12px;
}
.co-cat-donut-wrap {
  width: 130px;
  height: 130px;
  flex-shrink: 0;
}
.co-cat-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.co-cat-leg-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.co-cat-leg-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.co-cat-leg-name { flex: 1; color: #1A1410; }
.co-cat-leg-amt  { color: #1A1410; font-weight: 600; font-size: 13px; }


.co-search-wrap {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 100px;
  padding: 10px 18px;
  gap: 10px;
  width: 340px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.07);
}
.co-search-icon { color: #9A8F86; flex-shrink: 0; }
.co-search-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: #1A1410;
  flex: 1;
  font-family: inherit;
}
.co-search-input::placeholder { color: #B5ADA6; }

.co-table-card { padding: 0; overflow: hidden; }
.co-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.co-table thead th {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #9A8F86;
  font-weight: 700;
  text-transform: uppercase;
  padding: 14px 20px;
  text-align: left;
  border-bottom: 1px solid #F0EDE8;
  background: #FDFCFA;
}
.co-table tbody tr {
  border-bottom: 1px solid #F5F2EC;
  transition: background 0.12s;
}
.co-table tbody tr:last-child { border-bottom: none; }
.co-table tbody tr:hover { background: #FDFCFA; }
.co-table tbody td { padding: 14px 20px; color: #1A1410; }
.co-td-date {
  color: #7A6F66 !important;
  font-size: 13px !important;
  white-space: nowrap;
}
.co-td-monto {
  text-align: right !important;
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  font-size: 15px;
}
.co-td-acciones {
  white-space: nowrap;
  vertical-align: middle;
}
.co-td-acciones-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
}
.co-row-edit,
.co-row-del {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px;
  border-radius: 6px;
  color: rgba(26,20,16,0.30);
  transition: color 0.15s, background 0.15s;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.co-row-edit:hover { color: var(--gold); background: rgba(198,96,42,0.08); }
.co-row-del:hover  { color: #b53a2a;    background: rgba(181,58,42,0.08); }


.co-cat-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 100px;
  text-transform: uppercase;
  white-space: nowrap;
}


.co-suc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.co-suc-card {
  background: #fff;
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
}
.co-suc-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 4px;
}
.co-suc-card-name {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: Fraunces, Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  color: #1A1410;
}
.co-suc-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.co-suc-total {
  font-family: Fraunces, Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: #1A1410;
  text-align: right;
}
.co-suc-pct {
  font-size: 12px;
  color: #9A8F86;
  text-align: right;
}
.co-suc-meta {
  font-size: 12px;
  color: #9A8F86;
  margin-bottom: 10px;
}
.co-suc-bar {
  height: 3px;
  border-radius: 2px;
  margin-bottom: 14px;
  transition: width 0.5s ease;
}
.co-suc-breakdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.co-suc-breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}
.co-suc-breakdown-amt { color: #1A1410; font-weight: 500; }

/* KPIs dentro de cada card de sucursal (Ingresos / Gastos / Utilidad / Margen) */
.co-suc-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 16px;
  padding: 14px;
  background: #FBF8F4;
  border: 1px solid #EEE8DF;
  border-radius: 10px;
}
.co-suc-kpi { min-width: 0; }
.co-suc-kpi-lbl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #9A8F86;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.co-suc-kpi-val {
  font-family: Fraunces, Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  color: #1A1410;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.co-util-pos { color: #2D6B4A !important; }
.co-util-neg { color: #C4522A !important; }

.co-suc-breakdown-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #9A8F86;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.co-suc-breakdown-empty {
  font-size: 12px;
  color: #9A8F86;
  padding: 8px 0;
  font-style: italic;
}

/* Ranking de rendimiento */
#co-suc-ranking { margin-top: 16px; }
.co-rank-card { padding: 22px 24px; }
.co-rank-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.co-rank-row {
  display: grid;
  grid-template-columns: 52px 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: #FBF8F4;
  border: 1px solid #EEE8DF;
  border-radius: 12px;
}
.co-rank-row:first-child {
  background: linear-gradient(135deg, #FDF6E9 0%, #FBF8F4 100%);
  border-color: #E5D4A8;
}
.co-rank-pos {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #9A8F86;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 13px;
  font-weight: 600;
}
.co-rank-medal { display: inline-flex; align-items: center; }
.co-rank-name { min-width: 0; }
.co-rank-name-top {
  font-family: Fraunces, Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.co-rank-name-sub {
  font-size: 11.5px;
  color: #9A8F86;
  margin-top: 3px;
}
.co-rank-metric { text-align: right; min-width: 0; }
.co-rank-metric-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #9A8F86;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.co-rank-metric-val {
  font-family: Fraunces, Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  color: #1A1410;
  line-height: 1;
  white-space: nowrap;
}
.co-rank-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #EEE8DF;
  font-size: 12px;
  color: #7A6F66;
  text-align: center;
}
.co-rank-footer b { color: #1A1410; font-weight: 600; }





#sidebar, #sidebar-backdrop { display: none !important; }
#main { margin-left: 0 !important; width: 100% !important; }


.topbar {
  background: #FAF8F5;
  box-shadow: none;
  border-bottom: 1px solid rgba(26,20,16,0.08) !important;
  height: 56px !important;
  padding: 0 20px !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  position: relative;
  z-index: 200;
}
#menu-toggle { display: none !important; }


.tb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-right: 8px;
}


.tb-nav-center {
  flex: 1;
  display: flex;
  justify-content: center;
}
.tb-section-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(26,20,16,0.06);
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #1A1410;
  cursor: pointer;
  transition: background 0.15s;
  font-family: var(--sans, sans-serif);
}
.tb-section-btn:hover { background: rgba(26,20,16,0.1); }
.tb-section-btn.open { background: rgba(26,20,16,0.1); }
.tb-chevron {
  width: 14px; height: 14px;
  transition: transform 0.2s;
  opacity: 0.55;
  flex-shrink: 0;
}
.tb-section-btn.open .tb-chevron { transform: rotate(180deg); }


/* ============== SIDEBAR NAV (hover-reveal desde borde izquierdo) ============== */
/* Wrapper que cubre el borde izquierdo + ancho del panel para mantener el hover */
.nav-wrap {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 28px;           /* zona de detección del hover cuando está cerrada */
  z-index: 9000;
  pointer-events: none;  /* sólo handle + panel capturan eventos */
}
.nav-wrap:hover,
.nav-wrap.open-hover { width: 300px; } /* al abrir se expande para que el mouse se mantenga sobre ella */

/* Handle visible en el borde — pastilla con flecha */
.nav-handle {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 18px;
  height: 54px;
  background: #FAF8F5;
  border: 1px solid rgba(26, 20, 16, 0.1);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  box-shadow: 2px 2px 10px rgba(26, 20, 16, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  color: #8A7E70;
  transition: background 0.2s, color 0.2s, transform 0.28s cubic-bezier(0.22, 0.8, 0.26, 1), opacity 0.2s;
  z-index: 9002;
}
.nav-handle:hover { background: #F3EEE8; color: #1A1410; }
.nav-handle-icon {
  width: 12px;
  height: 12px;
  transition: transform 0.28s ease;
}
/* Al abrir: el handle se desliza con el panel (260px + 12px left + 10px gap) y la flecha rota */
.nav-wrap:hover .nav-handle {
  transform: translate(284px, -50%);
  background: #F3EEE8;
}
.nav-wrap:hover .nav-handle .nav-handle-icon { transform: rotate(180deg); }
.nav-wrap.open .nav-handle { transform: translate(284px, -50%); background: #F3EEE8; }
.nav-wrap.open .nav-handle .nav-handle-icon { transform: rotate(180deg); }

.tb-nav-dropdown {
  position: fixed;
  top: 50%;
  left: 12px;
  transform: translate(calc(-100% - 16px), -50%);
  height: auto;
  max-height: calc(100vh - 48px);
  width: 260px;
  background: #FAF8F5;
  border: 1px solid rgba(26, 20, 16, 0.08);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(26, 20, 16, 0.14);
  padding: 18px 12px 18px;
  z-index: 9001;
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform 0.3s cubic-bezier(0.22, 0.8, 0.26, 1);
  pointer-events: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tb-nav-dropdown::-webkit-scrollbar { width: 0; height: 0; display: none; }

.nav-wrap:hover .tb-nav-dropdown,
.tb-nav-dropdown.open { transform: translate(0, -50%); }

.tb-dropdown-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Mobile: sin hover, sólo tap en el handle; ancho ajustado */
@media (max-width: 640px) {
  .nav-wrap:hover { width: 28px; }   /* deshabilitar hover-reveal en táctil */
  .nav-wrap:hover .tb-nav-dropdown { transform: translate(calc(-100% - 16px), -50%); }
  .nav-wrap:hover .nav-handle { transform: translateY(-50%); }
  .tb-nav-dropdown.open { transform: translate(0, -50%); }
  .tb-nav-dropdown { width: min(280px, 84vw); }
  .nav-wrap.open { width: min(300px, 86vw); }
}
.tb-dd-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tb-dd-group-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(26,20,16,0.38);
  padding: 0 10px;
  margin-bottom: 4px;
}
.tb-dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;
  color: #3D2E22;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.12s, color 0.12s;
  font-family: var(--sans, sans-serif);
}
.tb-dd-item:hover { background: rgba(26,20,16,0.06); color: #1A1410; }
.tb-dd-item.active {
  background: #1A1410;
  color: #FAF8F5;
  font-weight: 600;
}

/* Íconos en los ítems del menú */
.tb-dd-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: #8A7E70;
  transition: color 0.12s;
}
.tb-dd-item:hover .tb-dd-icon { color: #1A1410; }
.tb-dd-item.active .tb-dd-icon { color: #FAF8F5; }
.tb-vr-btn .tb-dd-icon { color: #B53A2A; }
.tb-vr-btn:hover .tb-dd-icon { color: #7A2A08; }
.tb-vr-btn {
  background: rgba(181,58,42,0.07);
  color: #7A2A08;
  font-weight: 600;
}
.tb-vr-btn:hover { background: rgba(181,58,42,0.14); color: #5A1A02; }


.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.tb-local-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(26,20,16,0.55);
  background: rgba(26,20,16,0.05);
  border-radius: 20px;
  padding: 4px 10px 4px 8px;
  white-space: nowrap;
}
.tb-local-pill svg { width: 11px; height: 11px; opacity: 0.55; flex-shrink: 0; }
#loc-label { font-weight: 700; color: #1A1410; }
.tb-user-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(26,20,16,0.65);
  padding: 4px 6px;
  white-space: nowrap;
}
.tb-logout-btn {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: rgba(26,20,16,0.45);
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.tb-logout-btn:hover { background: rgba(181,58,42,0.1); color: #9A3A10; }
.tb-logout-btn svg { width: 15px; height: 15px; }


#tb-ni-vencimientos { position: relative; }


.tb-brand {
  background: none;
  padding: 0;
  border-radius: 0;
}
.tb-wagon-logo {
  height: 22px;
  width: auto;
  display: block;
  opacity: 0.94;
}


.tb-engine-sep {
  width: 1px;
  height: 18px;
  background: rgba(26,20,16,0.14);
  flex-shrink: 0;
}
.tb-engine {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.03em;
  color: transparent;
  background: linear-gradient(
    100deg,
    #1A1410 0%,
    #1A1410 30%,
    #C6602A 50%,
    #1A1410 70%,
    #1A1410 100%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  animation: engine-shimmer 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  line-height: 1;
  padding-bottom: 3px;
  user-select: none;
}
@keyframes engine-shimmer {
  0%   { background-position: 200% center; }
  50%  { background-position:   0% center; }
  100% { background-position: 200% center; }
}


.topbar .rt-pill {
  background: rgba(26,20,16,0.05);
  border-color: rgba(26,20,16,0.12);
  color: rgba(26,20,16,0.55);
}
.topbar .rt-pill span { color: rgba(26,20,16,0.55); }


.tb-venta-rapida-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #1A1410;
  color: #FAF8F5;
  border: none;
  border-radius: 8px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--sans, sans-serif);
  transition: background 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.tb-venta-rapida-btn:hover { background: #2c2219; }
.tb-venta-rapida-btn svg { width: 14px; height: 14px; flex-shrink: 0; }



:root { --page: #FAF8F5; }

body,
html,
#pages,
.page                           { background: #FAF8F5 !important; }


#page-dashboard                 { background: #FAF8F5; }


#page-dashboard > [aria-hidden="true"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}



#page-stock {
  padding: 100px 200px 60px !important;
  overflow: visible !important;
  flex-direction: column !important;
  gap: 0 !important;
  min-height: 100% !important;
  box-sizing: border-box !important;
}

#page-stock.active { display: flex !important; }


.sk-bc {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(26,20,16,0.45);
  margin-bottom: 20px;
}
.sk-bc-link {
  cursor: pointer;
  transition: color 0.12s;
}
.sk-bc-link:hover { color: #1A1410; }
.sk-bc-sep { opacity: 0.4; }
.sk-bc-cur { color: rgba(26,20,16,0.65); font-weight: 500; }


.sk-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.sk-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(26,20,16,0.4);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.sk-title {
  font-family: var(--serif, Georgia, serif);
  font-size: 40px;
  font-weight: 500;
  color: #1A1410;
  line-height: 1;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.sk-subtitle {
  font-size: 13px;
  color: rgba(26,20,16,0.5);
  margin: 0;
}
.sk-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.sk-btn-ghost {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1.5px solid rgba(26,20,16,0.15);
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #1A1410;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: var(--sans, sans-serif);
  white-space: nowrap;
}
.sk-btn-ghost:hover {
  border-color: rgba(26,20,16,0.3);
  box-shadow: 0 2px 8px rgba(26,20,16,0.07);
}
.sk-btn-primary {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--gold, #c8622a);
  border: none;
  border-radius: 10px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  font-family: var(--sans, sans-serif);
  white-space: nowrap;
}
.sk-btn-primary:hover {
  background: var(--gold-lt, #e07a45);
  box-shadow: 0 4px 14px rgba(200,98,42,0.3);
}


.sk-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.sk-kpi-card {
  background: #fff;
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 1px 3px rgba(26,20,16,0.06), 0 4px 16px rgba(26,20,16,0.04);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sk-kpi-card-click { cursor: pointer; transition: box-shadow 0.15s; }
.sk-kpi-card-click:hover { box-shadow: 0 2px 8px rgba(26,20,16,0.1), 0 6px 20px rgba(26,20,16,0.07); }
.sk-kpi-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: rgba(26,20,16,0.05);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.sk-kpi-icon svg { width: 16px; height: 16px; color: rgba(26,20,16,0.55); }
.sk-kpi-icon-warn { background: rgba(200,98,42,0.08); }
.sk-kpi-icon-warn svg { color: var(--gold, #c8622a); }
.sk-kpi-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(26,20,16,0.45);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.sk-kpi-val {
  font-family: var(--serif, Georgia, serif);
  font-size: 30px;
  font-weight: 500;
  color: #1A1410;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.sk-kpi-val-sm { font-size: 22px; }
.sk-kpi-val-warn { color: var(--gold, #c8622a); }
.sk-kpi-sub {
  font-size: 12px;
  color: rgba(26,20,16,0.45);
  margin-top: 2px;
}


.sk-filter-bar {
  background: #fff;
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 1px 3px rgba(26,20,16,0.06), 0 4px 16px rgba(26,20,16,0.04);
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sk-filter-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sk-search-wrap {
  flex: 1;
  position: relative;
}
.sk-search-ico {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: rgba(26,20,16,0.35);
  pointer-events: none;
}
.sk-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px 9px 36px;
  border: 1.5px solid rgba(26,20,16,0.1);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--sans, sans-serif);
  color: #1A1410;
  background: #FAF8F5;
  outline: none;
  transition: border-color 0.15s;
}
.sk-search-input:focus { border-color: rgba(26,20,16,0.3); }
.sk-search-input::placeholder { color: rgba(26,20,16,0.35); }
.sk-sucursal-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(26,20,16,0.5);
  flex-shrink: 0;
}
.sk-locf-sel {
  border: 1.5px solid rgba(26,20,16,0.1);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  font-family: var(--sans, sans-serif);
  color: #1A1410;
  background: #FAF8F5;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
.sk-locf-sel:focus { border-color: rgba(26,20,16,0.3); }
.sk-filter-divider {
  height: 1px;
  background: rgba(26,20,16,0.07);
}
.sk-filter-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.sk-fpill-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sk-fpill {
  border: 1.5px solid rgba(26,20,16,0.12);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(26,20,16,0.6);
  background: none;
  cursor: pointer;
  transition: all 0.12s;
  font-family: var(--sans, sans-serif);
  white-space: nowrap;
}
.sk-fpill:hover {
  border-color: rgba(26,20,16,0.3);
  color: #1A1410;
}
.sk-fpill.active {
  background: var(--gold, #c8622a);
  border-color: var(--gold, #c8622a);
  color: #fff;
  font-weight: 600;
}


.sk-results-bar {
  margin-bottom: 10px;
  padding: 0 2px;
}
.sk-results-count {
  font-size: 12px;
  color: rgba(26,20,16,0.45);
  font-weight: 500;
}


.sk-table-wrap {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(26,20,16,0.06), 0 4px 16px rgba(26,20,16,0.04);
  overflow: hidden;
  overflow-x: auto;
}
.sk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.sk-table thead tr {
  border-bottom: 1.5px solid rgba(26,20,16,0.07);
}
.sk-table th {
  padding: 13px 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(26,20,16,0.4);
  text-align: left;
  white-space: nowrap;
  background: #fff;
}
.sk-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(26,20,16,0.05);
  vertical-align: middle;
  color: #1A1410;
}
.sk-table tbody tr:last-child td { border-bottom: none; }
.sk-table tbody tr:hover td { background: rgba(26,20,16,0.02); }


#page-stock .stock-shell,
#page-stock .stock-hero,
#page-stock .table-wrap,
#page-stock .ph { display: none !important; }




#page-stock .sk-table-wrap table,
#page-stock .sk-table-wrap .sk-table { border-collapse: collapse; width: 100%; font-size: 13px; }

#page-stock .sk-table-wrap thead tr { border-bottom: 1.5px solid rgba(26,20,16,0.07); background: #fff; }
#page-stock .sk-table-wrap th {
  background: #fff;
  color: rgba(26,20,16,0.4);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 13px 16px !important;
  border: none !important;
  box-shadow: none;
}
#page-stock .sk-table-wrap td {
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(26,20,16,0.05) !important;
  border-top: none !important;
  background: transparent;
  vertical-align: middle !important;
}
#page-stock .sk-table-wrap tbody tr:last-child td { border-bottom: none !important; }
#page-stock .sk-table-wrap tbody tr:hover td { background: rgba(26,20,16,0.018); }
#page-stock .sk-table-wrap tbody tr.stock-lotes-row td { background: rgba(26,20,16,0.02); }


#page-stock .sk-table-wrap .stock-prod-name {
  font-size: 13px;
  font-weight: 600;
  color: #1A1410;
  letter-spacing: -0.01em;
}
#page-stock .sk-table-wrap .stock-prod-meta { margin-top: 3px; }
#page-stock .sk-table-wrap .stock-notes { font-size: 11px; color: rgba(26,20,16,0.45); margin-top: 2px; }
#page-stock .sk-table-wrap .stock-mini-pill {
  font-size: 10px;
  background: rgba(26,20,16,0.05);
  color: rgba(26,20,16,0.55);
  border: none !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  font-weight: 500;
}
#page-stock .sk-table-wrap .stock-warn-badge {
  font-size: 10px;
  background: rgba(200,98,42,0.08);
  color: var(--gold, #c8622a);
  border-radius: 4px !important;
  padding: 1px 6px !important;
  border: none !important;
}


#page-stock .sk-table-wrap .tag {
  font-size: 10px;
  font-weight: 600;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  border: 1.5px solid transparent !important;
  letter-spacing: 0.03em;
  white-space: nowrap !important;
}
#page-stock .sk-table-wrap .tag-dim {
  background: rgba(26,20,16,0.05);
  color: rgba(26,20,16,0.65);
  border-color: rgba(26,20,16,0.08);
}
#page-stock .sk-table-wrap .tag-l1,
#page-stock .sk-table-wrap .tag-l2 {
  background: rgba(26,20,16,0.06);
  color: rgba(26,20,16,0.6);
  border-color: rgba(26,20,16,0.1);
}
#page-stock .sk-table-wrap .tag-ok {
  background: rgba(34,139,34,0.07);
  color: #1A8040;
  border-color: rgba(34,139,34,0.15);
}
#page-stock .sk-table-wrap .tag-lo {
  background: rgba(200,98,42,0.08);
  color: #9A4A00;
  border-color: rgba(200,98,42,0.2);
}
#page-stock .sk-table-wrap .tag-cr {
  background: rgba(181,58,42,0.08);
  color: #9A2A10;
  border-color: rgba(181,58,42,0.2);
}


#page-stock .sk-table-wrap .stock-qty {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}
#page-stock .sk-table-wrap .stock-qty-sub,
#page-stock .sk-table-wrap .stock-price-sub,
#page-stock .sk-table-wrap .stock-next-sub,
#page-stock .sk-table-wrap .stock-updated {
  font-size: 11px;
  color: rgba(26,20,16,0.4);
  margin-top: 2px;
}


#page-stock .sk-table-wrap .stock-price {
  font-size: 13px;
  font-weight: 600;
  color: #1A1410;
}


#page-stock .sk-table-wrap .stock-next { font-size: 13px; font-weight: 600; }
#page-stock .sk-table-wrap .stock-next-empty { color: rgba(26,20,16,0.3); }


#page-stock .sk-table-wrap .stock-level { min-width: 120px; }
#page-stock .sk-table-wrap .stock-level-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 5px;
}
#page-stock .sk-table-wrap .stock-level-value {
  font-size: 11px;
  color: rgba(26,20,16,0.45);
}
#page-stock .sk-table-wrap .bar {
  height: 4px !important;
  background: rgba(26,20,16,0.07);
  border-radius: 2px !important;
  overflow: hidden !important;
}
#page-stock .sk-table-wrap .bar-fill {
  height: 100% !important;
  border-radius: 2px !important;
  transition: width 0.4s ease !important;
}


#page-stock .sk-table-wrap .stock-actions { display: flex; gap: 4px; align-items: center; }
#page-stock .sk-table-wrap .btn-icon {
  width: 28px !important; height: 28px !important;
  border-radius: 7px !important;
  border: 1.5px solid rgba(26,20,16,0.1) !important;
  background: #fff;
  color: rgba(26,20,16,0.5);
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important;
  transition: border-color 0.12s, color 0.12s !important;
}
#page-stock .sk-table-wrap .btn-icon:hover {
  border-color: rgba(26,20,16,0.3);
  color: #1A1410;
}
#page-stock .sk-table-wrap .btn-icon svg { width: 12px !important; height: 12px !important; }


#page-stock .sk-table-wrap .stock-expand-btn {
  width: 20px !important; height: 20px !important;
  border-radius: 5px !important;
  border: 1.5px solid rgba(26,20,16,0.1) !important;
  background: #fff;
  color: rgba(26,20,16,0.45);
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}




#page-cierre.active { display: flex !important; flex-direction: column; }


#page-cierre {
  padding: 28px 32px 48px;
  gap: 22px;
  background: var(--page);
  min-height: 100vh;
  box-sizing: border-box;
}


.cc2-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--char3);
  font-family: var(--mono);
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.cc2-bc-link {
  cursor: pointer;
  color: var(--char3);
  transition: color 0.15s;
}
.cc2-bc-link:hover { color: var(--leather); }
.cc2-bc-sep { opacity: 0.5; }
.cc2-bc-current { color: var(--char2); font-weight: 500; }


.cc2-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}
.cc2-header-left { display: flex; flex-direction: column; gap: 4px; }
.cc2-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--leather);
  font-family: var(--mono);
}
.cc2-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--char);
  margin: 0;
  line-height: 1.1;
}
.cc2-subtitle {
  font-size: 12px;
  color: var(--char3);
  margin: 0;
  font-family: var(--sans);
}
.cc2-btn-cerrar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #C8622A;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
  box-shadow: 0 2px 12px rgba(200,98,42,0.28);
  white-space: nowrap;
}
.cc2-btn-cerrar:hover {
  background: #b3571f;
  box-shadow: 0 4px 18px rgba(200,98,42,0.38);
  transform: translateY(-1px);
}
.cc2-btn-cerrar:active { transform: translateY(0); }


.cc2-hero {
  background: #C8622A;
  border-radius: 16px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 8px 32px rgba(200,98,42,0.22);
  position: relative;
  overflow: hidden;
}
.cc2-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(255,200,140,.18) 0%, transparent 55%),
    radial-gradient(80% 80% at 0% 100%, rgba(0,0,0,.12) 0%, transparent 55%);
}
.cc2-hero-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  z-index: 1;
}
.cc2-hero-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  font-family: var(--mono);
}
.cc2-hero-total {
  font-family: var(--serif);
  font-size: 46px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.12);
}
.cc2-hero-status {
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  font-family: var(--mono);
}
.cc2-hero-egresos {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: rgba(255,220,180,0.9);
  font-family: var(--mono);
  margin-top: 2px;
}
.cc2-hero-kpis {
  display: flex;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.cc2-hero-kpi {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 90px;
  backdrop-filter: blur(4px);
}
.cc2-hero-kpi-icon { color: rgba(255,255,255,0.6); line-height: 1; }
.cc2-hero-kpi-val {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  font-family: var(--mono);
  letter-spacing: -0.01em;
}
.cc2-hero-kpi-lbl {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
}


.cc2-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(26,20,16,0.07), 0 4px 16px rgba(26,20,16,0.05);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cc2-card-eyebrow {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--leather);
  font-family: var(--mono);
  margin-bottom: -8px;
}
.cc2-card-title {
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--char);
  line-height: 1.2;
}
.cc2-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cc2-card-full { width: 100%; box-sizing: border-box; }


.cc2-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.cc2-grid-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 22px;
}


.cc2-donut-layout {
  display: flex;
  align-items: center;
  gap: 24px;
}
.cc2-donut-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cc2-legend-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
}
.cc2-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cc2-legend-name {
  flex: 1;
  color: var(--char2);
  font-size: 13px;
}
.cc2-legend-amount {
  font-weight: 600;
  color: var(--char);
  font-family: var(--mono);
  font-size: 13px;
  margin-left: auto;
}



.cc2-det-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cc2-det-count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--char3);
}
.cc2-filtro-btns {
  display: flex;
  gap: 4px;
}


.cc2-list { display: flex; flex-direction: column; }
.cc2-list-body {
  display: flex;
  flex-direction: column;
  max-height: 340px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(26,20,16,0.15) transparent;
}
.cc2-list-body::-webkit-scrollbar { width: 4px; }
.cc2-list-body::-webkit-scrollbar-track { background: transparent; }
.cc2-list-body::-webkit-scrollbar-thumb { background: rgba(26,20,16,0.15); border-radius: 4px; }
.cc2-row-wrap { display: flex; flex-direction: column; }

.cc2-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(26,20,16,0.06);
}
.cc2-row-clickable { cursor: pointer; transition: background .12s; }
.cc2-row-clickable:hover { background: rgba(26,20,16,0.025); border-radius: 8px; }
.cc2-row-clickable.is-open { background: rgba(198,96,42,0.04); border-radius: 8px 8px 0 0; }

.cc2-row-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(26,20,16,0.07);
  border: 1px solid rgba(26,20,16,0.10);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  color: rgba(26,20,16,0.45); flex-shrink: 0;
}
.cc2-row-info { min-width: 0; overflow: hidden; }
.cc2-row-name {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: #1a1410; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.cc2-row-meta {
  font-family: var(--mono); font-size: 10px; color: rgba(26,20,16,0.42);
  letter-spacing: 0.02em; margin-top: 2px;
}
.cc2-row-chevron {
  font-size: 9px; color: var(--gold);
  display: inline-block; transition: transform .2s;
}
.cc2-row-clickable.is-open .cc2-row-chevron { transform: rotate(180deg); }

.cc2-pago-pill {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 20px;
  font-size: 10.5px; font-weight: 500; white-space: nowrap;
  font-family: var(--sans);
}
.cc2-pago-pill.efectivo      { background: rgba(30,130,70,0.10);  color: rgba(20,110,55,0.90);  }
.cc2-pago-pill.debito        { background: rgba(26,80,160,0.09);  color: rgba(26,60,140,0.80);  }
.cc2-pago-pill.transferencia { background: rgba(20,100,110,0.10); color: rgba(15,80,95,0.90);   }

.cc2-row-total {
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: #1a1410; text-align: right; white-space: nowrap;
}


.cc2-row-detail {
  padding: 10px 0 12px 48px;
  background: rgba(26,20,16,0.025);
  border-bottom: 1px solid rgba(26,20,16,0.06);
  border-radius: 0 0 8px 8px;
}
.cc2-detail-item {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(26,20,16,0.06);
  font-size: 11px;
}
.cc2-detail-item:last-of-type { border-bottom: none; }
.cc2-detail-prod { flex: 1; color: var(--char); font-weight: 500; }
.cc2-detail-qty  { color: var(--char3); font-family: var(--mono); font-size: 10px; }
.cc2-detail-sub  { color: var(--char2); font-family: var(--mono); font-size: 10.5px; min-width: 60px; text-align: right; }
.cc2-detail-desc {
  text-align: right; font-size: 10px; color: var(--green);
  margin-top: 6px; padding-top: 6px;
}
.cc2-detail-total {
  text-align: right; font-size: 12px; font-weight: 600;
  font-family: var(--mono); margin-top: 6px; padding-top: 6px;
  border-top: 1.5px solid rgba(26,20,16,0.08); color: var(--char);
}


.cc2-list-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0 4px;
  border-top: 1.5px solid rgba(26,20,16,0.10);
  margin-top: 4px;
}
.cc2-list-foot-label {
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--char3);
}
.cc2-list-foot-total {
  font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--char);
}


.cc2-empty-state {
  padding: 24px 0; text-align: center;
  color: var(--char3); font-size: 13px;
}




.cc2-top-prod-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 340px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(26,20,16,0.15) transparent;
}
.cc2-top-prod-body::-webkit-scrollbar { width: 4px; }
.cc2-top-prod-body::-webkit-scrollbar-track { background: transparent; }
.cc2-top-prod-body::-webkit-scrollbar-thumb { background: rgba(26,20,16,0.15); border-radius: 4px; }
.cc2-empty { color: var(--char3); font-size: 12px; padding: 16px 0; }




.cc2-hist-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
}
.cc2-hist-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s;
}
.cc2-hist-item:hover { background: var(--parch2); }
.cc2-hist-avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #C8622A;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--mono);
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.cc2-hist-info { flex: 1; min-width: 0; }
.cc2-hist-fecha {
  font-size: 12px;
  font-weight: 500;
  color: var(--char);
}
.cc2-hist-meta {
  font-size: 10px;
  color: var(--char3);
  margin-top: 2px;
  font-family: var(--mono);
}
.cc2-hist-amounts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.cc2-hist-total {
  font-size: 14px;
  font-weight: 700;
  color: var(--char);
  font-family: var(--mono);
}
.cc2-hist-breakdown {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cc2-hist-bp {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--mono);
  font-weight: 500;
}
.cc2-hist-bp-ef  { background: rgba(45,122,79,0.10);  color: var(--green); }
.cc2-hist-bp-db  { background: rgba(37,99,235,0.10);  color: var(--blue); }
.cc2-hist-bp-tr  { background: rgba(180,120,0,0.10);  color: var(--amber); }
.cc2-hist-obs-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1.5px solid var(--parch3);
  background: #fff;
  color: var(--char3);
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.12s, color 0.12s;
  flex-shrink: 0;
}
.cc2-hist-obs-btn:hover { border-color: var(--leather); color: var(--leather); }
.cc2-hist-obs-btn.has-obs { border-color: var(--leather); color: var(--leather); background: rgba(200,98,42,0.06); }


.cc2-op-body { display: flex; flex-direction: column; gap: 0; }


@media (max-width: 900px) {
  .cc2-grid-2col,
  .cc2-grid-3col {
    grid-template-columns: 1fr;
  }
  .cc2-hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .cc2-hero-kpis {
    width: 100%;
    justify-content: space-between;
  }
  .cc2-header {
    flex-direction: column;
    align-items: flex-start;
  }
  #page-cierre { padding: 16px 16px 40px; }
  .cc2-hero-total { font-size: 34px; }
}
@media (max-width: 600px) {
  .cc2-hero-kpis { flex-direction: column; gap: 8px; }
  .cc2-hero-kpi { flex-direction: row; min-width: unset; width: 100%; gap: 10px; }
  .cc2-card { padding: 18px 16px; }
}




.cc2-comp-badge {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(30,130,70,0.12);
  color: #2d7a4f;
  white-space: nowrap;
}
.cc2-comp-badge.down { background: rgba(181,58,42,0.10); color: #b53a2a; }

.cc2-comp-subtitle {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--char3);
  margin-top: 5px;
  margin-bottom: 20px;
}


.cc2-comp-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 130px;
  padding-bottom: 26px;
  position: relative;
}

.cc2-comp-bars::after {
  content: '';
  position: absolute;
  bottom: 26px;
  left: 0; right: 0;
  height: 1.5px;
  background: rgba(26,20,16,0.07);
  border-radius: 1px;
}


.cc2-comp-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  position: relative;
}


.cc2-comp-bar {
  width: 100%;
  max-width: 34px;
  border-radius: 5px 5px 0 0;
  min-height: 4px;
  background: rgba(198,96,42,0.20);
  transition: height 0.45s cubic-bezier(.22,.68,0,1.1), background .2s;
}
.cc2-comp-bar.today {
  background: #C6602A;
  box-shadow: 0 3px 10px rgba(198,96,42,0.28);
}
.cc2-comp-bar-col:hover .cc2-comp-bar { background: rgba(198,96,42,0.40); }
.cc2-comp-bar-col:hover .cc2-comp-bar.today { background: #b5521f; }


.cc2-comp-bar-val {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  color: var(--char3);
  margin-bottom: 3px;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.cc2-comp-bar-col:last-child .cc2-comp-bar-val { color: #C6602A; }


.cc2-comp-bar-lbl {
  font-family: var(--mono);
  font-size: 8.5px;
  color: var(--char3);
  position: absolute;
  bottom: 5px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.cc2-comp-bar-col:last-child .cc2-comp-bar-lbl {
  color: #C6602A;
  font-weight: 700;
}

.cc2-comp-empty {
  font-size: 12px;
  color: var(--char3);
  text-align: center;
  padding: 20px 0;
  width: 100%;
}


#cc-donut-svg text { pointer-events: none; }






.vc2-breadcrumb { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--char3); margin-bottom:8px; font-family:var(--mono); letter-spacing:0.04em; }
.vc2-bc-link { cursor:pointer; color:var(--char3); } .vc2-bc-link:hover { color:var(--char); }
.vc2-bc-sep { color:var(--char4); } .vc2-bc-current { color:var(--char); font-weight:600; }


.vc2-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
.vc2-header-left { display:flex; flex-direction:column; gap:2px; }
.vc2-eyebrow { font-size:10px; font-weight:700; letter-spacing:0.12em; color:var(--char3); text-transform:uppercase; font-family:var(--mono); }
.vc2-title { font-family:var(--serif); font-size:36px; font-weight:700; color:var(--char); line-height:1.05; margin:0; }
.vc2-subtitle { font-size:12px; color:var(--char3); margin:0; margin-top:2px; }
.vc2-btn-add { display:inline-flex; align-items:center; gap:7px; background:var(--gold); color:#fff; border:none; border-radius:22px; padding:10px 18px; font-size:13px; font-weight:600; cursor:pointer; transition:opacity 0.15s; }
.vc2-btn-add:hover { opacity:0.88; }


.vc2-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.vc2-search-wrap { flex:1; display:flex; align-items:center; gap:10px; background:#fff; border:1.5px solid var(--parch3); border-radius:10px; padding:8px 14px; }
.vc2-search-input { border:none; background:transparent; font-size:13px; color:var(--char); width:100%; outline:none; font-family:var(--body); }
.vc2-search-input::placeholder { color:var(--char4); }
.vc2-filtros-btn { display:inline-flex; align-items:center; gap:7px; background:#fff; color:var(--char); border:1.5px solid var(--parch3); border-radius:22px; padding:9px 16px; font-size:13px; font-weight:600; cursor:pointer; transition:all 0.15s; white-space:nowrap; }
.vc2-filtros-btn:hover { border-color:var(--char); }
.vc2-filtros-btn.active { background:var(--char); }


.vc2-filter-panel { display:none; background:#fff; border:1.5px solid var(--parch3); border-radius:14px; padding:18px 22px; margin-bottom:16px; gap:14px; flex-direction:column; }
.vc2-filter-panel.open { display:flex; }
.vc2-filter-section { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.vc2-filter-label { font-size:10px; font-weight:700; letter-spacing:0.1em; color:var(--char3); text-transform:uppercase; font-family:var(--mono); min-width:80px; }
.vc2-filter-chips { display:flex; gap:6px; flex-wrap:wrap; }
.vc2-chip { background:var(--parch2); border:1.5px solid var(--parch3); color:var(--char2); border-radius:20px; padding:5px 13px; font-size:12px; font-weight:500; cursor:pointer; transition:all 0.15s; }
.vc2-chip:hover { border-color:var(--leather); color:var(--leather); }
.vc2-chip.active { background:var(--leather); border-color:var(--leather); color:#fff; font-weight:600; }


.vc2-alerta-banner { background:rgba(200,98,42,0.08); border:1.5px solid rgba(200,98,42,0.25); border-radius:14px; padding:14px 18px; margin-bottom:16px; }
.vc2-alerta-head { display:flex; align-items:center; gap:12px; }
.vc2-alerta-icon { width:32px; height:32px; background:rgba(200,98,42,0.15); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--leather); flex-shrink:0; }
.vc2-alerta-txt { flex:1; }
.vc2-alerta-title { font-size:14px; font-weight:700; color:var(--char); }
.vc2-alerta-sub { font-size:11px; color:var(--char3); margin-top:1px; }
.vc2-alerta-controls { display:flex; gap:6px; }
.vc2-alerta-toggle, .vc2-alerta-close { background:transparent; border:1.5px solid var(--parch3); border-radius:6px; width:26px; height:26px; cursor:pointer; font-size:14px; color:var(--char3); display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
.vc2-alerta-toggle:hover, .vc2-alerta-close:hover { border-color:var(--leather); color:var(--leather); }
.vc2-alerta-cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:14px; }
@media (max-width:700px) { .vc2-alerta-cards { grid-template-columns:1fr; } }
.vc2-alerta-card { background:#fff; border-radius:10px; padding:14px 16px; border:1.5px solid var(--parch3); }
.vc2-alerta-card.critico { border-color:rgba(181,58,42,0.3); background:rgba(181,58,42,0.04); }
.vc2-alerta-card.proximo { border-color:rgba(200,158,42,0.3); background:rgba(200,158,42,0.04); }
.vc2-ac-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.vc2-ac-nombre { font-size:13px; font-weight:600; color:var(--char); }
.vc2-ac-cat { font-size:10px; color:var(--char3); background:var(--parch2); padding:2px 7px; border-radius:10px; }
.vc2-ac-meta { font-size:11px; color:var(--char3); margin-bottom:3px; }
.vc2-ac-ubi { font-size:11px; color:var(--char3); display:flex; align-items:center; gap:4px; margin-bottom:6px; }
.vc2-ac-status { font-size:12px; font-weight:700; }
.vc2-ac-status.critico { color:var(--red); }
.vc2-ac-status.proximo { color:var(--leather); }


.vc2-kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
@media (max-width:700px) { .vc2-kpi-grid { grid-template-columns:repeat(2,1fr); } }
.vc2-kpi-card { background:#fff; border:1.5px solid var(--parch3); border-radius:14px; padding:18px 20px; }
.vc2-kpi-top { display:flex; align-items:center; gap:7px; margin-bottom:8px; }
.vc2-kpi-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.vc2-kpi-dot.critico { background:var(--red); }
.vc2-kpi-dot.proximo { background:var(--amber); }
.vc2-kpi-dot.ok { background:var(--green); }
.vc2-kpi-dot.total { background:var(--char3); }
.vc2-kpi-label { font-size:9px; font-weight:700; letter-spacing:0.1em; color:var(--char3); text-transform:uppercase; font-family:var(--mono); }
.vc2-kpi-val { font-family:var(--serif); font-size:40px; font-weight:700; line-height:1; margin-bottom:6px; }
.vc2-kpi-val.critico { color:var(--red); }
.vc2-kpi-val.proximo { color:var(--amber); }
.vc2-kpi-val.ok { color:var(--green); }
.vc2-kpi-val.total { color:var(--char); }
.vc2-kpi-sub { font-size:11px; color:var(--char3); }


.vc2-table-meta { font-size:12px; color:var(--char3); margin-bottom:10px; }


.vc2-table-container { background:#fff; border:1.5px solid var(--parch3); border-radius:14px; overflow:hidden; }
.vc2-table { width:100%; border-collapse:collapse; }
.vc2-table thead tr { border-bottom:1.5px solid var(--parch3); }
.vc2-table thead th { padding:11px 14px; font-size:9px; font-weight:700; letter-spacing:0.1em; color:var(--char3); text-transform:uppercase; font-family:var(--mono); text-align:left; background:#fff; white-space:nowrap; }
.vc2-table tbody tr { border-bottom:1px solid var(--parch3); transition:background 0.1s; }
.vc2-table tbody tr:last-child { border-bottom:none; }
.vc2-table tbody tr:hover { background:var(--parch2); }
.vc2-table tbody td { padding:12px 14px; font-size:12px; vertical-align:middle; }
.vc2-empty-cell { text-align:center; padding:32px 14px !important; color:var(--char3); font-size:13px; }


.vc2-prod-name { font-size:13px; font-weight:600; color:var(--char); }
.vc2-prod-prov { font-size:11px; color:var(--char3); margin-top:1px; }
.vc2-lote { font-family:var(--mono); font-size:11px; color:var(--char2); }
.vc2-qty { font-family:var(--mono); font-size:12px; font-weight:600; color:var(--char); }
.vc2-date-muted { font-size:11px; color:var(--char3); }
.vc2-venc-date { font-size:12px; font-weight:600; }
.vc2-venc-date.critico { color:var(--red); }
.vc2-venc-date.proximo { color:var(--leather); }
.vc2-venc-date.semana { color:var(--amber); }
.vc2-venc-date.ok { color:var(--char2); }
.vc2-ubicacion { font-size:12px; color:var(--char2); }


.vc2-cat { display:inline-block; padding:2px 9px; border-radius:20px; font-size:10px; font-weight:600; }


.vc2-estado { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:20px; font-size:10px; font-weight:700; letter-spacing:0.04em; white-space:nowrap; }
.vc2-estado.vencido  { background:rgba(181,58,42,0.12); color:#b53a2a; }
.vc2-estado.hoy      { background:rgba(200,158,42,0.15); color:#b45309; }
.vc2-estado.urgente  { background:rgba(200,98,42,0.12); color:var(--leather); }
.vc2-estado.pronto   { background:rgba(20,184,166,0.12); color:#0f766e; }
.vc2-estado.bien     { background:rgba(45,122,79,0.10); color:var(--green); }


.vc2-table tbody td:last-child { white-space:nowrap; display:flex; align-items:center; gap:2px; }
.vc2-row-edit,
.vc2-row-del { opacity:0; background:transparent; border:none; cursor:pointer; padding:4px; color:var(--char3); border-radius:6px; transition:all 0.15s; flex-shrink:0; }
.vc2-table tbody tr:hover .vc2-row-edit,
.vc2-table tbody tr:hover .vc2-row-del { opacity:1; }
.vc2-row-edit:hover { color:var(--gold); background:rgba(198,96,42,0.08); }
.vc2-row-del:hover  { color:var(--red);  background:rgba(181,58,42,0.08); }


@media (max-width:800px) {
  .vc2-title { font-size:28px; }
  .vc2-table-container { overflow-x:auto; }
  .vc2-table { min-width:700px; }
  .vc2-kpi-val { font-size:32px; }
}


#page-tendencias {
  background: #faf8f5;
  padding: 28px 24px 36px;
}
#page-tendencias .tn-header {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
#page-tendencias .tn-header::before { display: none; }
#page-tendencias .tn-header-left { gap: 6px; }
#page-tendencias .tn-header-eyebrow {
  color: rgba(35, 29, 26, 0.6);
  letter-spacing: 0.22em;
}
#page-tendencias .tn-header-title {
  color: #231d1a;
  font-size: 50px;
  line-height: 0.98;
  letter-spacing: -0.02em;
}
#page-tendencias .tn-header-sub {
  color: rgba(35, 29, 26, 0.68);
  font-size: 20px;
  font-family: var(--sans);
}
#page-tendencias .tn-local-bar {
  margin-left: auto;
  background: #f1edea;
  border: 1px solid #e2dbd3;
  border-radius: 12px;
  padding: 6px;
}
#page-tendencias .tn-local-label { color: rgba(35, 29, 26, 0.55); }
#page-tendencias .tn-header .tn-toggle-group {
  background: transparent;
  border: 0;
}
#page-tendencias .tn-header .tn-toggle-btn {
  color: rgba(35, 29, 26, 0.64);
  border-radius: 9px;
  border-left: 0;
}
#page-tendencias .tn-header .tn-toggle-btn + .tn-toggle-btn { border-left: 0; }
#page-tendencias .tn-header .tn-toggle-btn.active {
  background: #ffffff;
  color: #231d1a;
  box-shadow: 0 1px 4px rgba(26, 20, 16, 0.08);
}

#page-tendencias .tn-tabs {
  margin: 0 0 18px;
  padding: 6px;
  width: fit-content;
  border: 0;
  border-radius: 16px;
  background: #f1edea;
}
#page-tendencias .tn-tab {
  border-radius: 12px;
  color: rgba(35, 29, 26, 0.66);
  padding: 10px 20px;
}
#page-tendencias .tn-tab.active {
  background: #ffffff;
  color: #231d1a;
  border-color: #e1d8ce;
  box-shadow: 0 1px 4px rgba(26, 20, 16, 0.06);
}

#tn-panel-ranking .tn-rank-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 0;
  margin-bottom: 18px;
}
#tn-panel-ranking .tn-rank-sum-card {
  background: #ffffff;
  border: 1px solid #e2dbd3;
  border-radius: 18px;
  padding: 20px 24px;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
#tn-panel-ranking .tn-rank-sum-card::before { display: none; }
#tn-panel-ranking .tn-rank-sum-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f2ece7;
  color: #3f3f3f;
  font-size: 15px;
}
#tn-panel-ranking .tn-rank-sum-lbl {
  color: rgba(35, 29, 26, 0.62);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: 10px;
}
#tn-panel-ranking .tn-rank-sum-val {
  color: #231d1a;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.02;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

#tn-panel-ranking .tn-toolbar-ranking {
  padding: 12px 0;
  border: 0;
  background: transparent;
  margin-bottom: 8px;
}
#tn-panel-ranking .tn-toolbar-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#tn-panel-ranking .tn-toolbar-ranking .tn-toggle-group {
  border-radius: 999px;
  border: 1px solid #e2dbd3;
  background: #f1edea;
  box-shadow: none;
}
#tn-panel-ranking .tn-toolbar-ranking .tn-toggle-btn {
  border-left: 0;
  color: rgba(35, 29, 26, 0.66);
  font-weight: 500;
}
#tn-panel-ranking .tn-toolbar-ranking .tn-toggle-btn + .tn-toggle-btn { border-left: 0; }
#tn-panel-ranking .tn-toolbar-ranking .tn-toggle-btn.active {
  background: #c8622a;
  color: #fff;
}
#tn-panel-ranking .tn-info-btn,
#tn-panel-ranking .tn-exp-btn {
  border-radius: 999px;
  border: 1px solid #dfd7cd;
  background: #fff;
  color: #231d1a;
  font-weight: 600;
}
#tn-panel-ranking .tn-rank-table-wrap {
  margin: 0;
  border: 1px solid #e2dbd3;
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
}
#tn-panel-ranking .tn-rank-th {
  color: rgba(35, 29, 26, 0.62);
  letter-spacing: 0.2em;
  font-size: 10px;
  background: #fff;
  border-bottom: 1px solid #ece6df;
}
#tn-panel-ranking .tn-rank-tr { border-bottom: 1px solid #ece6df; }
#tn-panel-ranking .tn-rank-tr:hover { background: #fcfaf7; }
#tn-panel-ranking .tn-rank-tr td { padding: 15px 16px; }
#tn-panel-ranking .tn-rank-pos-badge {
  border: 0;
  background: transparent;
  color: rgba(35, 29, 26, 0.6);
  font-family: var(--mono);
  font-weight: 500;
}
#tn-panel-ranking .tn-rank-nombre {
  color: #231d1a;
  font-size: 18px;
  font-weight: 700;
}
#tn-panel-ranking .tn-rank-num {
  color: #4b3b2d;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

#tn-panel-ranking .tn-cat-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
}
#tn-panel-ranking .tn-cat-res { background: #f6dedd; color: #aa5450; }
#tn-panel-ranking .tn-cat-aves { background: #f0e7b6; color: #8d7920; }
#tn-panel-ranking .tn-cat-cordero { background: #e5ddf8; color: #6e4eb1; }
#tn-panel-ranking .tn-cat-cerdo { background: #f3dec8; color: #a8672d; }
#tn-panel-ranking .tn-cat-embutidos { background: #f3d5e3; color: #b34a7f; }
#tn-panel-ranking .tn-cat-otros { background: #ece6df; color: #74655a; }

#tn-panel-ranking .tn-rank-share-track {
  height: 6px;
  border-radius: 999px;
  background: #ede7e1;
}
#tn-panel-ranking .tn-rank-share-fill {
  background: #c8622a;
}
#tn-panel-ranking .tn-rank-share-pct {
  color: rgba(35, 29, 26, 0.52);
  font-size: 11px;
  min-width: 42px;
}


#tn-panel-medios .tn-toolbar-medios {
  padding: 12px 0;
  margin-bottom: 10px;
  background: transparent;
  border: 0;
}
#tn-panel-medios .tn-toolbar-medios .tn-toggle-group {
  border-radius: 999px;
  border: 1px solid #e2dbd3;
  background: #f1edea;
  box-shadow: none;
}
#tn-panel-medios .tn-toolbar-medios .tn-toggle-btn {
  border-left: 0;
  color: rgba(35, 29, 26, 0.68);
  font-weight: 500;
}
#tn-panel-medios .tn-toolbar-medios .tn-toggle-btn + .tn-toggle-btn { border-left: 0; }
#tn-panel-medios .tn-toolbar-medios .tn-toggle-btn.active {
  background: #ffffff;
  color: #231d1a;
  box-shadow: 0 1px 3px rgba(26, 20, 16, 0.08);
}
#tn-panel-medios .tn-toolbar-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#tn-panel-medios .tn-info-btn,
#tn-panel-medios .tn-exp-btn {
  margin-left: 0;
  border-radius: 999px;
  border: 1px solid #dfd7cd;
  background: #fff;
  color: #231d1a;
  font-weight: 600;
}

#tn-panel-medios .tn-medio-cards-v2 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 0;
  margin-bottom: 20px;
}
#tn-panel-medios .tn-medio-card {
  background: #fff;
  border: 1px solid #e2dbd3;
  border-radius: 18px;
  padding: 18px 22px;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}
#tn-panel-medios .tn-medio-card::before { display: none; }
#tn-panel-medios .tn-medio-card:hover { border-color: #d5c8bb; box-shadow: none; }
#tn-panel-medios .tn-medio-card.tn-medio-selected {
  border-color: #c8622a;
  box-shadow: inset 0 0 0 1px rgba(200, 98, 42, 0.16);
}
#tn-panel-medios .tn-medio-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
#tn-panel-medios .tn-medio-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
#tn-panel-medios .tn-medios-efectivo .tn-medio-icon { background: #f3e7b7; color: #9b5a18; }
#tn-panel-medios .tn-medios-tarjeta .tn-medio-icon { background: #f3dec8; color: #c8622a; }
#tn-panel-medios .tn-medios-transferencia .tn-medio-icon { background: #dbf1e4; color: #2f7f5b; }
#tn-panel-medios .tn-medio-pct {
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(35, 29, 26, 0.58);
}
#tn-panel-medios .tn-medio-name {
  color: rgba(35, 29, 26, 0.62);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 11px;
  margin: 0 0 6px;
}
#tn-panel-medios .tn-medio-monto {
  color: #231d1a;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  font-variant-numeric: tabular-nums;
}
#tn-panel-medios .tn-medio-progress {
  height: 4px;
  border-radius: 999px;
  background: #ede7e1;
  overflow: hidden;
}
#tn-panel-medios .tn-medio-progress > span {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 999px;
  background: #c8622a;
}

#tn-panel-medios .tn-medios-chart-wrap {
  border: 1px solid #e2dbd3;
  border-radius: 18px;
  background: #fff;
  padding: 20px 24px 16px;
  margin-bottom: 20px;
}
#tn-panel-medios .tn-medios-overline {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(35, 29, 26, 0.58);
  margin-bottom: 6px;
}
#tn-panel-medios .tn-medios-title {
  margin: 0;
  color: #231d1a;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 700;
}
#tn-panel-medios .tn-medios-legend {
  margin-top: 14px;
  display: inline-flex;
  gap: 18px;
  color: rgba(35, 29, 26, 0.66);
  font-size: 13px;
}
#tn-panel-medios .tn-medios-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
#tn-panel-medios .tn-medios-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
#tn-panel-medios .tn-medios-dot-efectivo,
#tn-panel-medios .tn-medios-seg-efectivo { background: #bb5b06; }
#tn-panel-medios .tn-medios-dot-tarjeta,
#tn-panel-medios .tn-medios-seg-tarjeta { background: #c8622a; }
#tn-panel-medios .tn-medios-dot-transferencia,
#tn-panel-medios .tn-medios-seg-transferencia { background: #2f7f5b; }

#tn-panel-medios .tn-medios-chart-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: 12px;
  min-height: 320px;
}
#tn-panel-medios .tn-medios-yaxis {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  align-items: end;
  color: rgba(35, 29, 26, 0.48);
  font-size: 12px;
}
#tn-panel-medios .tn-medios-bars {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 18px;
  border-left: 0;
}
#tn-panel-medios .tn-medios-bars::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, #ece6df 1px, transparent 1px);
  background-size: 100% 25%;
  pointer-events: none;
}
#tn-panel-medios .tn-medios-col {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
#tn-panel-medios .tn-medios-stack {
  width: 100%;
  max-width: 54px;
  height: 250px;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}
#tn-panel-medios .tn-medios-seg {
  display: block;
  width: 100%;
  min-height: 0;
}
#tn-panel-medios .tn-medios-xlbl {
  margin-top: 10px;
  font-size: 13px;
  color: rgba(35, 29, 26, 0.58);
  text-transform: lowercase;
}

#tn-panel-medios .tn-ops-card {
  border: 1px solid #e2dbd3;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}
#tn-panel-medios .tn-ops-header {
  margin: 0;
  padding: 18px 22px;
  border-bottom: 1px solid #ece6df;
}
#tn-panel-medios .tn-ops-title {
  color: #231d1a;
  font-size: 24px;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--serif);
  font-weight: 700;
}
#tn-panel-medios .tn-ops-meta {
  font-size: 14px;
  color: rgba(35, 29, 26, 0.56);
}
#tn-panel-medios .tn-ops-list {
  padding: 0;
  max-height: 420px;
}
#tn-panel-medios .tn-op-row {
  grid-template-columns: minmax(260px, 1fr) auto auto;
  gap: 14px;
  padding: 14px 22px;
  border-bottom: 1px solid #ece6df;
  font-size: 14px;
}
#tn-panel-medios .tn-op-row:last-child { border-bottom: 0; }
#tn-panel-medios .tn-op-main {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}
#tn-panel-medios .tn-op-main > strong {
  color: #231d1a;
  font-size: 15px;
  line-height: 1.05;
  font-weight: 700;
}
#tn-panel-medios .tn-op-main > small {
  color: rgba(35, 29, 26, 0.55);
  font-size: 12px;
}
#tn-panel-medios .tn-op-medio {
  font-size: 14px;
  font-weight: 700;
  color: #a7652d;
}
#tn-panel-medios .tn-op-medio.tn-medios-transferencia { color: #2f7f5b; }
#tn-panel-medios .tn-op-total {
  color: #231d1a;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1200px) {
  #tn-panel-medios .tn-medio-cards-v2 { grid-template-columns: 1fr; }
  #tn-panel-medios .tn-medios-title { font-size: 32px; }
  #tn-panel-medios .tn-ops-title { font-size: 22px; }
}
@media (max-width: 900px) {
  #tn-panel-medios .tn-toolbar-medios { gap: 10px; }
  #tn-panel-medios .tn-toolbar-actions { margin-left: 0; }
  #tn-panel-medios .tn-medios-chart-grid { grid-template-columns: 52px 1fr; min-height: 260px; }
  #tn-panel-medios .tn-medios-stack { height: 200px; }
  #tn-panel-medios .tn-op-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  #tn-panel-medios .tn-op-main > strong { font-size: 16px; }
  #tn-panel-medios .tn-op-main > small,
  #tn-panel-medios .tn-op-medio,
  #tn-panel-medios .tn-op-total { font-size: 14px; }
}

#tn-panel-proyeccion .tn-toolbar {
  padding: 12px 0;
  margin-bottom: 12px;
  align-items: flex-start;
}
#tn-panel-proyeccion .tn-toolbar .tn-toggle-group { display: none; }
#tn-panel-proyeccion .tn-toolbar .tn-exp-wrap {
  margin-left: auto;
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}
#tn-panel-proyeccion .tn-toolbar .tn-exp-btn,
#tn-panel-proyeccion .tn-toolbar .tn-info-btn {
  border-radius: 999px;
  border: 1px solid #dfd7cd;
  background: #fff;
  color: #231d1a;
  font-weight: 600;
}
#tn-panel-proyeccion .tn-toolbar .tn-exp-dd { display: none !important; }

#tn-panel-proyeccion .tn-pedido-banner { display: none; }

#tn-panel-proyeccion .pry-status-wrap {
  padding: 0;
  margin-bottom: 18px;
}
#tn-panel-proyeccion .pry-status-card {
  background: #fff;
  border: 1px solid #e2dbd3;
  border-radius: 18px;
  padding: 18px 22px;
  box-shadow: none;
  display: grid;
  grid-template-columns: 260px minmax(0,1fr);
  gap: 10px 20px;
}
#tn-panel-proyeccion .pry-status-card::before { display: none; }
#tn-panel-proyeccion .pry-status-eyebrow {
  color: rgba(35,29,26,.58);
  letter-spacing: .24em;
  text-transform: uppercase;
}
#tn-panel-proyeccion .pry-status-card-title {
  color: #231d1a;
  font-family: var(--serif);
  font-size: 40px;
  margin-bottom: 8px;
}
#tn-panel-proyeccion .pry-status-donut-wrap {
  width: 170px;
  height: 170px;
}
#tn-panel-proyeccion .pry-donut-big {
  font-size: 40px;
  color: #231d1a;
}
#tn-panel-proyeccion .pry-donut-sub {
  color: rgba(35,29,26,.62);
}
#tn-panel-proyeccion .pry-status-legend {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-content: center;
}
#tn-panel-proyeccion .pry-leg-item {
  background: transparent;
  border: 0;
  padding: 0;
}
#tn-panel-proyeccion .pry-leg-label { color: #231d1a; font-size: 28px; }
#tn-panel-proyeccion .pry-leg-count { color: rgba(35,29,26,.6); font-size: 24px; }
#tn-panel-proyeccion .pry-leg-sub { display: none; }

#tn-panel-proyeccion .tn-proy-table-wrap {
  margin: 0;
  background: #fff;
  border: 1px solid #e2dbd3;
  border-radius: 18px;
  box-shadow: none;
}
#tn-panel-proyeccion .tn-proy-table { font-size: 13px; }
#tn-panel-proyeccion .tn-proy-table thead th {
  background: #fff;
  color: rgba(35,29,26,.62);
  letter-spacing: .22em;
  font-size: 10px;
  border-bottom: 1px solid #ece6df;
}
#tn-panel-proyeccion .tn-proy-table tbody tr { border-bottom: 1px solid #ece6df; }
#tn-panel-proyeccion .tn-proy-table tbody tr:hover { background: #fcfaf7; }
#tn-panel-proyeccion .tn-proy-table td { padding: 14px 16px; }
#tn-panel-proyeccion .tn-proy-nombre {
  color: #231d1a;
  font-weight: 700;
  font-size: 15px;
}
#tn-panel-proyeccion .tn-proy-num,
#tn-panel-proyeccion .tn-proy-pedir {
  font-family: var(--mono);
  font-size: 13px;
  color: #4b3b2d;
}
#tn-panel-proyeccion .tn-proy-pedir { color: #c8622a; font-weight: 700; }
#tn-panel-proyeccion .tn-estado-badge {
  border-radius: 999px;
  font-size: 11px;
  padding: 5px 12px;
}

@media (max-width: 960px) {
  #tn-panel-proyeccion .pry-status-card { grid-template-columns: 1fr; }
  #tn-panel-proyeccion .pry-status-card-title { font-size: 30px; }
  #tn-panel-proyeccion .pry-leg-label { font-size: 20px; }
  #tn-panel-proyeccion .pry-leg-count { font-size: 16px; }
  #tn-panel-proyeccion .tn-toolbar .tn-exp-wrap { margin-left: 0; align-items: flex-start; }
}

#page-clientes { background:#faf8f5; padding:28px 24px 36px; }
#page-clientes .cli-layout { display:block; }
#page-clientes .cli-master { display:block; background:transparent; border:0; }
#page-clientes .cli-master-head { display:flex; flex-direction:column; gap:16px; margin-bottom:10px; }
#page-clientes .cli-page-head { display:flex; flex-direction:column; gap:4px; }
#page-clientes .cli-breadcrumb { color:rgba(35,29,26,.58); font-size:13px; }
#page-clientes .cli-eyebrow { color:rgba(35,29,26,.62); text-transform:uppercase; letter-spacing:.24em; font-size:11px; font-weight:700; }
#page-clientes .cli-title { color:#231d1a; font-family:var(--serif); font-size:64px; line-height:1; letter-spacing:-.02em; }
#page-clientes .cli-subtitle { color:rgba(35,29,26,.68); font-size:33px; }

#page-clientes .cli-master-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; border:0; background:transparent; padding:0; }
#page-clientes .cli-mkpi { border:1px solid #e2dbd3; border-radius:18px; background:#fff; padding:20px 22px; min-height:110px; display:flex; flex-direction:column; gap:10px; }
#page-clientes .cli-mkpi-val { color:#231d1a; font-family:var(--serif); font-size:24px; line-height:1.05; }
#page-clientes .cli-mkpi-lbl { color:rgba(35,29,26,.62); text-transform:uppercase; letter-spacing:.22em; font-size:10px; font-weight:700; }

#page-clientes .cli-master-bar { display:flex; align-items:center; gap:12px; }
#page-clientes .cli-master-bar input { flex:0 0 420px; max-width:100%; border:1px solid #dfd7cd; border-radius:999px; background:#fff; height:40px; padding:0 16px; color:#231d1a; }
#page-clientes .cli-btn-new { margin-left:auto; border-radius:999px; background:#c8622a; border-color:#c8622a; color:#fff; padding:10px 18px; }
#page-clientes .cli-btn-new:hover { background:#b75823; }

#page-clientes .cli-tier-filters { display:inline-flex; gap:8px; background:#f1edea; border-radius:999px; padding:4px; width:fit-content; }
#page-clientes .cli-tier-btn { border:0; background:transparent; color:rgba(35,29,26,.64); font-weight:600; padding:8px 14px; border-radius:999px; cursor:pointer; }
#page-clientes .cli-tier-btn.active { background:#fff; color:#231d1a; box-shadow:0 1px 3px rgba(26,20,16,.08); }

#page-clientes .cli-list-count { margin:10px 0 12px; color:rgba(35,29,26,.64); font-size:13px; }
#page-clientes .cli-master-list { max-height:none; overflow:visible; padding:0; }
#page-clientes .cli-card-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
#page-clientes .cli-card-item { border:1px solid #e2dbd3; border-radius:16px; background:#fff; padding:16px; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
#page-clientes .cli-card-item:hover { border-color:#d6c7b8; }
#page-clientes .cli-card-item.is-selected { border-color:#e4b699; box-shadow:0 2px 8px rgba(200,98,42,.12); }
#page-clientes .cli-card-head { display:flex; gap:10px; align-items:flex-start; }
#page-clientes .cli-card-avatar { width:46px; height:46px; border-radius:12px; background:#f1edea; color:#231d1a; font-family:var(--serif); font-size:28px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
#page-clientes .cli-card-main { min-width:0; flex:1; }
#page-clientes .cli-card-name { color:#231d1a; font-size:18px; font-weight:700; line-height:1.15; }
#page-clientes .cli-card-tier { display:inline-flex; margin-top:6px; border-radius:999px; padding:3px 10px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
#page-clientes .tier-bronce { background:#f3e7b7; color:#9b6f0f; }
#page-clientes .tier-plata { background:#e5ecf5; color:#607289; }
#page-clientes .tier-oro { background:#f4dec6; color:#b76a2f; }
#page-clientes .tier-premium { background:#f8ddd0; color:#c8622a; }
#page-clientes .cli-card-edit { width:28px; height:28px; border:0; background:transparent; color:rgba(35,29,26,.6); margin-left:auto; }
#page-clientes .cli-card-body { margin-top:12px; border-top:1px solid #ece6df; border-bottom:1px solid #ece6df; padding:10px 0; display:flex; flex-direction:column; gap:6px; }
#page-clientes .cli-card-line { color:rgba(35,29,26,.7); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#page-clientes .cli-card-foot { margin-top:10px; display:flex; align-items:center; justify-content:space-between; color:rgba(35,29,26,.66); font-size:14px; }
#page-clientes .cli-card-foot strong { color:#231d1a; font-size:21px; font-family:var(--serif); }

#page-clientes .cli-detail { position:fixed; inset:0; z-index:70; pointer-events:none; }
/* .cli-drawer-shell y .cli-drawer: definiciones idénticas removidas en v7.0.1 (ver líneas ~13970 y ~14080) */
#page-clientes .cli-drw-head { display:flex; justify-content:space-between; gap:10px; padding:18px; border-bottom:1px solid #ece6df; }
#page-clientes .cli-drw-ident { display:flex; gap:12px; align-items:flex-start; }
#page-clientes .cli-drw-avatar { width:54px; height:54px; border-radius:14px; background:#f1edea; color:#231d1a; font-family:var(--serif); font-size:34px; display:inline-flex; align-items:center; justify-content:center; }
#page-clientes .cli-drw-name { color:#231d1a; font-family:var(--serif); font-size:43px; line-height:1.02; }
#page-clientes .cli-drw-tier { display:inline-flex; margin-top:8px; border-radius:999px; padding:4px 10px; font-size:11px; font-weight:700; text-transform:uppercase; }
#page-clientes .cli-drw-actions { display:flex; gap:6px; }
#page-clientes .cli-drw-actions .btn-icon { width:32px; height:32px; border:0; background:transparent; color:rgba(35,29,26,.6); }
#page-clientes .cli-drw-points { padding:18px; border-bottom:1px solid #ece6df; }
#page-clientes .cli-drw-points-top { display:flex; justify-content:space-between; align-items:baseline; color:#231d1a; }
#page-clientes .cli-drw-points-top span { color:rgba(35,29,26,.66); font-size:16px; }
#page-clientes .cli-drw-points-top strong { font-family:var(--serif); font-size:42px; }
#page-clientes .cli-drw-points-track { margin-top:10px; height:8px; border-radius:999px; background:#efe8e1; overflow:hidden; }
#page-clientes .cli-drw-points-track span { display:block; height:100%; background:#c8622a; }
#page-clientes .cli-drw-contact { padding:18px; border-bottom:1px solid #ece6df; display:flex; flex-direction:column; gap:8px; }
#page-clientes .cli-drw-sec-title { color:rgba(35,29,26,.58); font-size:10px; letter-spacing:.24em; text-transform:uppercase; font-weight:700; margin-bottom:4px; }
#page-clientes .cli-drw-line { color:#41342c; font-size:16px; }
#page-clientes .cli-drw-note { color:rgba(35,29,26,.66); font-size:15px; line-height:1.4; margin-top:4px; }
#page-clientes .cli-drw-kpis { padding:18px; border-bottom:1px solid #ece6df; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#page-clientes .cli-drw-kpi { border:1px solid #e6dfd7; border-radius:12px; background:#faf8f5; padding:12px; display:flex; flex-direction:column; gap:6px; align-items:center; }
#page-clientes .cli-drw-kpi strong { color:#231d1a; font-family:var(--serif); font-size:31px; line-height:1; }
#page-clientes .cli-drw-kpi span { color:rgba(35,29,26,.58); text-transform:uppercase; letter-spacing:.18em; font-size:10px; }
#page-clientes .cli-drw-history { padding:18px; display:flex; flex-direction:column; gap:10px; flex:1; }
#page-clientes .cli-drw-hist-row { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid #efe8e1; }
#page-clientes .cli-drw-hist-date { color:rgba(35,29,26,.55); font-size:13px; }
#page-clientes .cli-drw-hist-desc { color:#231d1a; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#page-clientes .cli-drw-hist-amt { color:#231d1a; font-family:var(--serif); font-size:20px; }
#page-clientes .cli-drw-empty { color:rgba(35,29,26,.56); font-size:14px; padding:12px 0; }
#page-clientes .cli-drw-foot { padding:12px 18px 18px; display:flex; gap:8px; }
#page-clientes .cli-drw-foot .btn-prime { border-radius:10px; }
#page-clientes .cli-drw-foot .btn-ghost { border-radius:10px; }

@media (max-width: 1200px) {
  #page-clientes .cli-title { font-size:50px; }
  #page-clientes .cli-subtitle { font-size:24px; }
  #page-clientes .cli-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  #page-clientes .cli-master-kpis { grid-template-columns:1fr; }
  #page-clientes .cli-master-bar { flex-wrap:wrap; }
  #page-clientes .cli-master-bar input { flex:1 1 100%; }
  #page-clientes .cli-btn-new { margin-left:0; }
  #page-clientes .cli-card-grid { grid-template-columns:1fr; }
  #page-clientes .cli-title { font-size:38px; }
  #page-clientes .cli-subtitle { font-size:18px; }
  #page-clientes .cli-drw-name { font-size:30px; }
}

#page-clientes .cli-detail { display: none; }
#page-clientes.cli-drawer-open .cli-detail { display: block; }
#page-clientes .cli-drawer-shell { position:absolute; inset:0; background:rgba(245,239,230,.12); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); display:flex; justify-content:flex-end; pointer-events:auto; }
#page-clientes .cli-detail-empty { display: none !important; }

#page-clientes .cli-master-head { gap: 14px; background: transparent; border: 0; padding: 0; }
#page-clientes .cli-head-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
#page-clientes .cli-page-head { gap: 2px; }
#page-clientes .cli-title { font-size: 68px; line-height: 1.02; }
#page-clientes .cli-subtitle { font-size: 20px; }
#page-clientes .cli-breadcrumb { font-size: 12px; }

#page-clientes .cli-btn-new { margin-left: 0; margin-top: 12px; padding: 10px 20px; }

#page-clientes .cli-master-kpis { gap: 14px; }
#page-clientes .cli-mkpi { padding: 14px 18px; min-height: 88px; border-radius: 16px; }
#page-clientes .cli-mkpi-val { font-size: 18px; }
#page-clientes .cli-mkpi-lbl { font-size: 10px; }

#page-clientes .cli-controls { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
#page-clientes .cli-master-bar { margin: 0; }
#page-clientes .cli-master-bar input { flex: 0 0 390px; height: 38px; font-size: 13px; }
#page-clientes .cli-tier-filters { margin: 0; }
#page-clientes .cli-tier-btn { padding: 7px 14px; font-size: 12px; }

#page-clientes .cli-list-count { margin: 2px 0 10px; font-size: 13px; }
#page-clientes .cli-card-grid { gap: 14px; }
#page-clientes .cli-card-item { padding: 14px; }
#page-clientes .cli-card-avatar { width: 44px; height: 44px; font-size: 17px; }
#page-clientes .cli-card-name { font-size: 14px; }
#page-clientes .cli-card-tier { font-size: 10px; padding: 2px 8px; }
#page-clientes .cli-card-line { font-size: 12px; }
#page-clientes .cli-card-foot { font-size: 12px; }
#page-clientes .cli-card-foot strong { font-size: 16px; }

#page-clientes .cli-drw-name { font-size: 20px; }
#page-clientes .cli-drw-avatar { width: 48px; height: 48px; font-size: 17px; }
#page-clientes .cli-drw-points-top strong { font-size: 18px; }
#page-clientes .cli-drw-kpi strong { font-size: 17px; }
#page-clientes .cli-drw-hist-amt { font-size: 15px; }

@media (max-width: 1200px) {
  #page-clientes .cli-title { font-size: 54px; }
  #page-clientes .cli-subtitle { font-size: 18px; }
}
@media (max-width: 900px) {
  #page-clientes .cli-head-top { flex-direction: column; }
  #page-clientes .cli-btn-new { margin-top: 0; }
  #page-clientes .cli-controls { flex-direction: column; align-items: stretch; }
  #page-clientes .cli-master-bar input { flex: 1 1 auto; width: 100%; }
}

#page-clientes.active {
  height: auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}
#page-clientes .cli-layout,
#page-clientes .cli-master,
#page-clientes .cli-master-list {
  overflow: visible !important;
  min-height: 0;
}

#page-clientes .cli-master-kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
#page-clientes .cli-mkpi {
  position: relative;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 158px;
  padding: 24px 22px;
  gap: 10px;
}
#page-clientes .cli-mkpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #f1edea;
  color: #3f3f3f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#page-clientes .cli-mkpi-icon svg {
  width: 20px;
  height: 20px;
}
#page-clientes .cli-mkpi-lbl {
  order: 2;
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: .22em;
}
#page-clientes .cli-mkpi-val {
  order: 3;
  font-size: 20px;
  line-height: 1.05;
  margin-top: 2px;
}

#page-clientes .cli-head-top { align-items: center; }
#page-clientes .cli-title { font-size: 52px; }
#page-clientes .cli-subtitle { font-size: 18px; }

@media (max-width: 900px) {
  #page-clientes .cli-master-kpis { grid-template-columns: 1fr; }
  #page-clientes .cli-mkpi { min-height: 132px; }
}

#page-clientes .cli-drawer-shell {
  background: rgba(35, 29, 26, 0.08) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
#page-clientes .cli-drawer {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
}
#page-clientes .cli-drw-history {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 8px;
}
#page-clientes .cli-drw-foot {
  margin-top: 0;
  border-top: 1px solid #ece6df;
  background: #fff;
  flex-shrink: 0;
}

#page-clientes .cli-detail { position: fixed !important; inset: 0 !important; z-index: 9000 !important; }
#page-clientes .cli-drawer-shell {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(35, 29, 26, 0.16) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
#page-clientes .cli-drawer {
  position: fixed !important;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100dvh !important;
  width: min(430px, 94vw);
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
}
#page-clientes .cli-drw-history {
  padding: 18px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  overflow: hidden !important;
}
#page-clientes .cli-drw-history-list {
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}
#page-clientes .cli-drw-foot {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: #fff;
}

#page-clientes.cli-drawer-open { overflow: hidden !important; }
#page-clientes .cli-detail {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9100 !important;
  display: none;
  background: transparent !important;
  overflow: visible !important;
}
#page-clientes.cli-drawer-open .cli-detail { display: block !important; }
#page-clientes .cli-drawer-shell {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  background: rgba(35, 29, 26, 0.24) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
#page-clientes .cli-drawer {
  width: min(430px, 94vw) !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  background: #fff !important;
  border-left: 1px solid #e2dbd3 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) !important;
}
#page-clientes .cli-drw-history {
  min-height: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}
#page-clientes .cli-drw-history-list {
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-right: 4px;
}
#page-clientes .cli-drw-foot { display: none !important; }

#page-clientes.cli-drawer-open,
#page-clientes.cli-drawer-open .cli-layout,
#page-clientes.cli-drawer-open .cli-master {
  background: transparent !important;
}
#page-clientes .cli-drawer-shell {
  background: rgba(35, 29, 26, 0.48) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

#page-carga.cmv2 {
  padding: 0 0 56px;
}


#page-carga.cmv2 .cmv2-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
#page-carga.cmv2 .cmv2-eyebrow {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(200,98,42,0.80);
  margin-bottom: 6px;
}
#page-carga.cmv2 .cmv2-title {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #1a1410;
}
#page-carga.cmv2 .cmv2-sub {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(26,20,16,0.50);
  line-height: 1.45;
}


#page-carga.cmv2 .cmv2-btn-primary {
  flex-shrink: 0;
  border: none;
  background: #c8622a;
  color: #fff;
  height: 38px;
  padding: 0 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.18s ease;
}
#page-carga.cmv2 .cmv2-btn-primary:hover { background: #b75823; }


#page-carga.cmv2 .cmv2-toolbar,
#page-carga.cmv2 .cmv2-global,
#page-carga.cmv2 .cmv2-table-card,
#page-carga.cmv2 .cmv2-resumen {
  background: #ffffff;
  border: 1px solid rgba(26,20,16,0.10);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(26,20,16,0.04);
}


#page-carga.cmv2 .cmv2-toolbar {
  display: grid;
  grid-template-columns: 180px 220px minmax(240px, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 16px 18px;
  margin-bottom: 12px;
}
#page-carga.cmv2 .cmv2-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#page-carga.cmv2 .cmv2-field-label {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(26,20,16,0.45);
}
#page-carga.cmv2 .cmv2-field select,
#page-carga.cmv2 .cmv2-field input[type="text"],
#page-carga.cmv2 .cmv2-field input[type="date"] {
  width: 100%;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(26,20,16,0.16);
  background: #faf8f5;
  color: #1a1410;
  font-family: var(--sans);
  font-size: 13px;
  padding: 0 10px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#page-carga.cmv2 .cmv2-field input:focus,
#page-carga.cmv2 .cmv2-field select:focus {
  border-color: rgba(200,98,42,0.60);
  box-shadow: 0 0 0 3px rgba(200,98,42,0.10);
}
#page-carga.cmv2 .cmv2-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  border: 1px solid rgba(26,20,16,0.16);
  border-radius: 8px;
  background: #faf8f5;
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(26,20,16,0.55);
  cursor: pointer;
  white-space: nowrap;
}
#page-carga.cmv2 .cmv2-check input {
  accent-color: #c8622a;
  width: 14px;
  height: 14px;
  cursor: pointer;
}


#page-carga.cmv2 .cmv2-global {
  padding: 16px 18px;
  margin-bottom: 12px;
}
#page-carga.cmv2 .cmv2-global-title {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(200,98,42,0.85);
  margin-bottom: 3px;
}
#page-carga.cmv2 .cmv2-global-sub {
  margin: 0;
  font-family: var(--sans);
  font-size: 12px;
  color: rgba(26,20,16,0.45);
  line-height: 1.4;
}
#page-carga.cmv2 .cmv2-global-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 240px));
  gap: 12px;
  margin-top: 12px;
}


#page-carga.cmv2 .cmv2-table-card {
  background: #fff;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(26,20,16,0.06), 0 4px 16px rgba(26,20,16,0.04) !important;
  overflow: hidden;
  margin-bottom: 12px;
}
#page-carga.cmv2 #carga-tabla-wrap {
  overflow-x: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#page-carga.cmv2 #carga-tabla-content thead tr {
  background: #fff !important;
  border-bottom: 1.5px solid rgba(26,20,16,0.07) !important;
}
#page-carga.cmv2 #carga-tabla-content th {
  background: #fff !important;
  color: rgba(26,20,16,0.40) !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  padding: 13px 16px !important;
  white-space: nowrap !important;
  border: none !important;
}
#page-carga.cmv2 #carga-tabla-content td {
  padding: 14px 16px !important;
  background: #fff !important;
  vertical-align: middle !important;
  color: #1a1410 !important;
  border-bottom: 1px solid rgba(26,20,16,0.05) !important;
  border-top: none !important;
  transition: background 0.12s;
}
#page-carga.cmv2 #carga-tabla-content tbody tr:last-child td {
  border-bottom: none !important;
}
#page-carga.cmv2 #carga-tabla-content tbody tr:hover td {
  background: rgba(26,20,16,0.018) !important;
}


#page-carga.cmv2 .cm-prod-name {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: #1a1410;
  letter-spacing: -0.01em;
}
#page-carga.cmv2 .cm-prod-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(26,20,16,0.40);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 3px;
}
#page-carga.cmv2 .cm-qty-actual {
  font-family: var(--mono);
  font-size: 13px;
  color: rgba(26,20,16,0.55);
  white-space: nowrap;
}
#page-carga.cmv2 .cm-unit {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(26,20,16,0.40);
}
#page-carga.cmv2 .cm-preview {
  font-family: var(--mono);
  font-size: 10px;
  color: #3a7d44;
  letter-spacing: 0.04em;
}


#page-carga.cmv2 .cmv2-resumen {
  display: none;
  padding: 13px 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(26,20,16,0.55);
}


#page-carga.cmv2 .empty {
  padding: 44px 16px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(26,20,16,0.35);
}

@media (max-width: 1200px) {
  #page-carga.cmv2 .cmv2-toolbar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  #page-carga.cmv2 .cmv2-head { flex-direction: column; align-items: flex-start; }
  #page-carga.cmv2 .cmv2-title { font-size: 32px; }
  #page-carga.cmv2 .cmv2-toolbar,
  #page-carga.cmv2 .cmv2-global-grid { grid-template-columns: 1fr; }
  #page-carga.cmv2 .cmv2-btn-primary { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE OVERRIDES — #page-stock
   Colocado al final del archivo para ganar por orden de cascada contra
   las reglas base de .sk-* (≈L12000) y el padding 100px 200px forzado
   en el selector #page-stock (L11955). */
@media (max-width: 960px) {
  #page-stock { padding: 48px 32px 40px !important; }
  .sk-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-title { font-size: 32px; }
}
@media (max-width: 640px) {
  #page-stock { padding: 32px 14px 72px !important; }
  .sk-header { margin-bottom: 18px; }
  .sk-title { font-size: 26px; }
  .sk-subtitle { font-size: 12px; }
  .sk-header-right { width: 100%; }
  .sk-header-right .sk-btn-ghost,
  .sk-header-right .sk-btn-primary { flex: 1; justify-content: center; white-space: nowrap; padding: 9px 10px; font-size: 12px; }
  .sk-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
  .sk-kpi-card { padding: 14px 14px; border-radius: 12px; min-width: 0; }
  .sk-kpi-icon { width: 28px; height: 28px; margin-bottom: 8px; }
  .sk-kpi-val { font-size: 24px; }
  .sk-kpi-val-sm { font-size: 18px; }
  .sk-kpi-label { font-size: 9px; letter-spacing: 0.06em; }
  .sk-kpi-sub { font-size: 11px; }
  .sk-filter-bar { padding: 12px 12px; border-radius: 12px; }
  .sk-filter-top { flex-wrap: wrap; gap: 8px; }
  .sk-search-wrap { flex: 1 1 100%; min-width: 0; }
  .sk-sucursal-wrap { flex: 1 1 100%; min-width: 0; }
  .sk-locf-sel { flex: 1; min-width: 0; }
  .sk-filter-bottom { gap: 10px; }
  .sk-fpill { padding: 5px 10px; font-size: 11px; }
  .sk-table-wrap { border-radius: 10px; }

  /* Primera columna (PRODUCTO) sticky: fondo opaco + sombra para no superponerse */
  #page-stock .sk-table-wrap th:first-child,
  #page-stock .sk-table-wrap td:first-child,
  #page-stock th:first-child,
  #page-stock td:first-child {
    background: #fff !important;
    z-index: 3;
    box-shadow: 2px 0 6px rgba(26,20,16,0.06);
  }
  #page-stock .sk-table-wrap thead th:first-child {
    background: #fff !important;
    z-index: 4;
  }
  #page-stock .sk-table-wrap tbody tr:hover td:first-child { background: #fdfcfa !important; }
  #page-stock .sk-table-wrap tbody tr.stock-lotes-row td:first-child { background: #fafaf7 !important; }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE OVERRIDES — #page-movimientos
   Colocado al final del archivo para ganar por orden de cascada
   contra las reglas base de .mv-* (L10587-10770). */
@media (max-width: 960px) {
  .mv-title { font-size: 32px; }
  .mv-search-wrap { width: 220px; }
}
@media (max-width: 640px) {
  /* Header + título compactos */
  .mv-header { margin-bottom: 16px; gap: 12px; }
  .mv-kicker { font-size: 8.5px; letter-spacing: 0.18em; margin-bottom: 4px; }
  .mv-title { font-size: 26px; letter-spacing: -0.02em; margin: 0 0 4px; }
  .mv-subtitle { font-size: 12px; }
  .mv-header-left { width: 100%; }
  .mv-header-right { width: 100%; flex-wrap: wrap; gap: 8px; }
  .mv-search-wrap { width: 100%; height: 36px; flex: 1 1 100%; }
  .mv-search-input { font-size: 12.5px; }
  .mv-btn-nuevo { padding: 9px 14px !important; font-size: 12px !important; white-space: nowrap; }

  /* Filters: apilados verticales */
  .mv-filters-bar { padding: 10px 12px; border-radius: 10px; gap: 8px; row-gap: 8px; }
  .mv-filters-sep { display: none; }
  .mv-filters-group { width: 100%; gap: 8px; }
  .mv-filters-label { font-size: 8px; letter-spacing: 0.14em; }
  .mv-filter-pills { gap: 5px; }
  .mv-pill { font-size: 11.5px; padding: 5px 10px; }

  /* Tabla: scroll horizontal dentro del card */
  .mv-table-card { overflow-x: auto !important; -webkit-overflow-scrolling: touch; border-radius: 10px; }
  .mv-table { min-width: 640px; } /* fuerza scroll horizontal si viewport < 640 */
  .mv-table th { padding: 11px 12px; font-size: 8.5px; }
  .mv-table td { padding: 12px 12px; }
  .mv-td-producto { max-width: 160px; }
  .mv-td-total { font-size: 13px; }
  .mv-tipo-pill { font-size: 9px; padding: 3px 7px; }
  .mv-pago-pill { font-size: 9px; padding: 3px 7px; }

  /* Inspector drawer: full-width en mobile */
  .mv-inspector { width: 100vw !important; right: -100vw; border-left: none; }
  body:has(#page-movimientos.active) .mv-inspector:has(.mov2-ins-hd) { right: 0 !important; }
  .mov2-ins-doc { padding: 20px 16px 12px; }
  .mov2-ins-num { font-size: 22px; }
  .mov2-ins-total-val { font-size: 26px; }
  .mov2-ins-footer { padding: 12px 16px; }
  .mv-ins-actions { padding: 10px 16px 14px; }
}

/* ===== CARGA MASIVA — mobile ===== */
@media (max-width: 640px) {
  #page-carga.cmv2 .cmv2-eyebrow { font-size: 9px; letter-spacing: 0.18em; margin-bottom: 4px; }
  #page-carga.cmv2 .cmv2-title { font-size: 26px; letter-spacing: -0.02em; margin: 0 0 4px; }
  #page-carga.cmv2 .cmv2-sub { font-size: 12px; line-height: 1.4; }
}

/* ===== CAMADAS — mobile ===== */
@media (max-width: 640px) {
  #page-camadas .cam-header { margin-bottom: 16px; }
  #page-camadas .cam-eyebrow { font-size: 9px; letter-spacing: 0.18em; margin-bottom: 4px; }
  #page-camadas .cam-title { font-size: 26px; letter-spacing: -0.02em; margin: 0 0 4px; line-height: 1.05; }
  #page-camadas .cam-subtitle { font-size: 12px; }

  /* KPI strip: 2x2 grid, evita overflow */
  #page-camadas .cam-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
  }
  #page-camadas .cam-kpi { padding: 12px 14px; border-radius: 12px; }
  #page-camadas .cam-kpi-top { gap: 6px; margin-bottom: 6px; }
  #page-camadas .cam-kpi-lbl { font-size: 8.5px; letter-spacing: 0.08em; }
  #page-camadas .cam-kpi-val { font-size: 28px; margin-bottom: 2px; }
  #page-camadas .cam-kpi-sub { font-size: 10px; line-height: 1.3; }

  /* Filtros: search full-width, fechas 50/50, selects 50/50 */
  #page-camadas .cam-filter-bar { gap: 8px; margin-bottom: 16px; }
  #page-camadas .cam-search-wrap { width: 100%; height: 38px; flex: 1 1 100%; }
  #page-camadas .cam-search-input { font-size: 12.5px; }
  #page-camadas .cam-filter-input,
  #page-camadas .cam-filter-select { height: 38px; font-size: 12.5px; padding: 0 10px; }
  #page-camadas .cam-filter-date { flex: 1 1 calc(50% - 4px); width: auto; min-width: 0; }
  #page-camadas #camadas-local-f,
  #page-camadas #camadas-estado-f { flex: 1 1 calc(50% - 4px); min-width: 0; }
}

/* ===== TENDENCIAS — mobile (cabecera + tabs) ===== */
@media (max-width: 640px) {
  /* Header: tipografía compacta */
  #page-tendencias .tn-header { margin: 0 0 14px; gap: 12px; }
  #page-tendencias .tn-header-left { width: 100%; gap: 4px; }
  #page-tendencias .tn-header-eyebrow { font-size: 10px; letter-spacing: 0.18em; }
  #page-tendencias .tn-header-title { font-size: 30px; letter-spacing: -0.02em; line-height: 1.02; margin: 2px 0 2px; }
  #page-tendencias .tn-header-sub { font-size: 13px; line-height: 1.35; }

  /* Sucursal bar: full-width, tres botones en flex 1/3 */
  #page-tendencias .tn-local-bar {
    margin-left: 0;
    width: 100%;
    padding: 5px;
    border-radius: 10px;
    gap: 6px;
    flex-wrap: nowrap;
  }
  #page-tendencias .tn-local-label { font-size: 9px; letter-spacing: 0.1em; gap: 4px; padding: 0 6px; }
  #page-tendencias .tn-header .tn-toggle-group { flex: 1 1 auto; min-width: 0; }
  #page-tendencias .tn-header .tn-toggle-btn {
    flex: 1 1 0; min-width: 0;
    padding: 7px 6px;
    font-size: 11px;
    text-align: center;
    white-space: nowrap;
  }

  /* Tabs: scrollables horizontalmente si no entran */
  #page-tendencias .tn-tabs {
    width: 100%;
    max-width: 100%;
    margin: 0 0 14px;
    padding: 5px;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #page-tendencias .tn-tabs::-webkit-scrollbar { display: none; }
  #page-tendencias .tn-tab {
    padding: 8px 12px;
    font-size: 11.5px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  #page-tendencias .tn-tab svg { width: 12px; height: 12px; }

  /* --- RANKING DE CORTES: KPI summary --- */
  #tn-panel-ranking .tn-rank-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
  }
  #tn-panel-ranking .tn-rank-sum-card {
    padding: 12px 10px;
    min-height: 0;
    gap: 4px;
    border-radius: 12px;
    min-width: 0;
    overflow: hidden;
  }
  #tn-panel-ranking .tn-rank-sum-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    font-size: 12px;
  }
  #tn-panel-ranking .tn-rank-sum-lbl {
    font-size: 8.5px;
    letter-spacing: 0.14em;
    line-height: 1.25;
  }
  #tn-panel-ranking .tn-rank-sum-val {
    font-size: 18px;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
}

/* ===== COSTOS — mobile ===== */
@media (max-width: 640px) {
  /* Botón "Registrar gasto" reducido */
  #page-costos .co-btn-primary {
    padding: 9px 14px;
    font-size: 12.5px;
    gap: 6px;
    margin-top: 4px;
  }
  #page-costos .co-btn-primary svg { width: 11px; height: 11px; }

  /* Header compacto */
  #page-costos .co-header { margin-bottom: 16px; gap: 10px; }
  #page-costos .co-title { font-size: 26px; }
  #page-costos .co-subtitle { font-size: 12px; }

  /* Sub-nav: scroll horizontal (4 tabs no entran en 375px) */
  #page-costos .co-topbar { gap: 10px; margin-bottom: 18px; }
  #page-costos .co-subnav {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  #page-costos .co-subnav::-webkit-scrollbar { display: none; }
  #page-costos .co-subnav-btn {
    padding: 7px 14px;
    font-size: 12.5px;
    flex-shrink: 0;
  }

  /* Período bar: misma lógica, compact */
  #page-costos .co-period-bar { flex-wrap: nowrap; }
  #page-costos .co-period-btn { padding: 7px 12px; font-size: 12px; }

  /* Cards de chart */
  #page-costos .co-card { padding: 16px 14px; border-radius: 12px; }
  #page-costos .co-card-title { font-size: 18px; margin-bottom: 12px; }
  #page-costos .co-chart-wrap { height: 240px; }

  /* KPI row 3 (Evolución): 3 cols compactas, sin overflow */
  #page-costos .co-kpi-row-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  #page-costos .co-kpi3 {
    padding: 12px 8px;
    border-radius: 12px;
    min-width: 0;
    overflow: hidden;
  }
  #page-costos .co-kpi3-label {
    font-size: 8.5px;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
    line-height: 1.2;
  }
  #page-costos .co-kpi3-val {
    font-size: 17px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* --- RENTABILIDAD: KPIs 4 y 2-col body --- */
  #page-costos .co-kpi-row-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  #page-costos .co-kpi4 {
    padding: 14px 14px;
    border-radius: 12px;
    min-width: 0;
    overflow: hidden;
  }
  #page-costos .co-kpi4-label {
    font-size: 9px;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
    line-height: 1.2;
  }
  #page-costos .co-kpi4-val {
    font-size: 20px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #page-costos .co-kpi4-sub { font-size: 10.5px; }

  /* Body 2-col (Margen operativo / Gastos por categoría): apilar */
  #page-costos .co-body-2col {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Gauge: escala al ancho disponible */
  #page-costos .co-gauge-wrap {
    width: 100%;
    max-width: 220px;
    margin: 16px auto 4px;
  }

  /* Gastos por categoría: donut arriba + leyenda abajo */
  #page-costos .co-cat-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  #page-costos .co-cat-donut-wrap {
    width: 140px;
    height: 140px;
    margin: 0 auto;
  }
  #page-costos .co-cat-legend { width: 100%; }
  #page-costos .co-cat-leg-item { font-size: 12px; }

  /* --- REGISTRO DE GASTOS: search + tabla con scroll horizontal --- */
  #page-costos .co-search-wrap {
    width: 100%;
    padding: 9px 14px;
  }
  #page-costos .co-search-input { font-size: 13px; }

  #page-costos .co-table-card {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
  }
  #page-costos .co-table { min-width: 720px; font-size: 13px; }
  #page-costos .co-table thead th {
    padding: 11px 14px;
    font-size: 9px;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
  #page-costos .co-table tbody td { padding: 12px 14px; }
  #page-costos .co-td-date { font-size: 12px !important; }
  #page-costos .co-td-monto { font-size: 14px; }

  /* --- POR SUCURSAL: grid 2-col → 1 col apilado --- */
  #page-costos .co-suc-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #page-costos .co-suc-card {
    padding: 16px 16px;
    border-radius: 12px;
    min-width: 0;
    overflow: hidden;
  }
  #page-costos .co-suc-card-head { gap: 10px; flex-wrap: wrap; }
  #page-costos .co-suc-card-name { font-size: 16px; gap: 7px; min-width: 0; }
  #page-costos .co-suc-icon { width: 26px; height: 26px; }
  #page-costos .co-suc-total { font-size: 20px; }
  #page-costos .co-suc-pct { font-size: 11px; }
  #page-costos .co-suc-meta { font-size: 11px; margin-bottom: 8px; }
  #page-costos .co-suc-breakdown-row { font-size: 12.5px; gap: 10px; min-width: 0; }
  #page-costos .co-suc-breakdown-amt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  /* KPI grid dentro de card de sucursal: 2 columnas compactas */
  #page-costos .co-suc-kpi-grid {
    gap: 8px;
    padding: 10px;
    margin: 12px 0 12px;
  }
  #page-costos .co-suc-kpi-lbl { font-size: 8.5px; letter-spacing: 0.08em; }
  #page-costos .co-suc-kpi-val { font-size: 14px; }
  #page-costos .co-suc-breakdown-title { font-size: 9px; }

  /* Ranking: filas más compactas */
  #page-costos .co-rank-card { padding: 16px 14px; }
  #page-costos .co-rank-row {
    grid-template-columns: 40px 1fr auto;
    gap: 10px;
    padding: 10px 12px;
    row-gap: 6px;
  }
  #page-costos .co-rank-row .co-rank-metric:nth-child(4) {
    grid-column: 2 / 4;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  #page-costos .co-rank-row .co-rank-metric:nth-child(4) .co-rank-metric-lbl { margin-bottom: 0; }
  #page-costos .co-rank-pos { font-size: 11px; gap: 4px; }
  #page-costos .co-rank-medal svg { width: 14px; height: 14px; }
  #page-costos .co-rank-name-top { font-size: 14.5px; }
  #page-costos .co-rank-name-sub { font-size: 10.5px; }
  #page-costos .co-rank-metric-lbl { font-size: 8.5px; }
  #page-costos .co-rank-metric-val { font-size: 13px; }
  #page-costos .co-rank-footer { font-size: 11px; line-height: 1.5; }
}

/* ===== LISTA DE PRECIOS — mobile ===== */
@media (max-width: 640px) {
  #page-precios .pr-header {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
  }
  #page-precios .pr-header-left { flex: 1; min-width: 0; }
  #page-precios .pr-eyebrow { font-size: 9px; letter-spacing: 0.18em; margin-bottom: 3px; }
  #page-precios .pr-title { font-size: 26px; letter-spacing: -0.02em; line-height: 1.05; }
  #page-precios .pr-subtitle { font-size: 11.5px; line-height: 1.35; margin-top: 3px; }

  #page-precios .pr-save-btn {
    padding: 9px 14px !important;
    font-size: 12px !important;
    border-radius: 100px;
    flex-shrink: 0;
  }
  #page-precios .pr-save-btn .pr-btn-label { gap: 5px; }
  #page-precios .pr-save-btn svg { width: 11px; height: 11px; }

  /* Filtros: search + select en fila, compactos */
  #page-precios .pr-filter-bar { gap: 8px; margin-bottom: 14px; }
  #page-precios .pr-search-wrap { width: auto; flex: 1 1 60%; height: 38px; min-width: 0; }
  #page-precios .pr-search-input { font-size: 12.5px; }
  #page-precios .pr-filter-select {
    flex: 1 1 40%;
    height: 38px;
    font-size: 12.5px;
    padding: 0 10px;
    min-width: 0;
  }
}