/* ═══════════════════════════════════════════════════════════════════════════
   Panel El Núcleo · estética "Bodega" (oct 2026)
   Paleta cálida (crema, vino y coral), títulos con serifa (Fraunces), interfaz
   en Manrope y NÚMEROS en Geist Mono (alineados, se leen mejor).
   Solo lo cargan las pantallas internas (navAdmin / navDeposito en app/nav.php):
   la tienda y las páginas públicas no cambian. Para volver atrás: sacar el
   <link> de panel.css en nav.php.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --background: #f5efe7;
    --surface: #fffcf8;
    --surface-2: #faf4ec;
    --text: #21151a;
    --text-secondary: #7b6a65;
    --text-muted: #a8968f;
    --border: #eadfd2;
    --border-strong: #dccdbd;
    --primary: #2a1a20;          /* tinta oscura (textos fuertes) */
    --primary-hover: #3a2129;
    --primary-accent: #e2664a;   /* foco y detalles */
    --success: #2f7d5b;
    --success-hover: #256649;

    --coral: #e2664a;            /* marca: íconos, acentos, rellenos */
    --coral-btn: #c4492e;        /* botones con texto blanco (contraste 4.8:1) */
    --coral-btn-hover: #ad3d25;
    --coral-soft: #fbe3db;
    --vino: #7a1f3d;
    --glow: rgba(226, 102, 74, .13);

    --shadow-sm: 0 1px 2px rgba(60, 30, 20, .05);
    --shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 1px 2px rgba(60, 30, 20, .05), 0 8px 24px -14px rgba(60, 30, 20, .2);
    --shadow-soft: var(--shadow);
    --shadow-hover: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 2px 4px rgba(60, 30, 20, .06), 0 22px 40px -20px rgba(90, 30, 20, .34);
    --radius: 18px;
    --radius-sm: 12px;

    --f-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --f-titulo: 'Fraunces', Georgia, serif;
    --f-num: 'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
    --ease: cubic-bezier(.2, .9, .2, 1);
    --resorte: cubic-bezier(.3, 1.25, .5, 1);
}

body {
    font-family: var(--f-ui);
    background: var(--background);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}
/* Textura de papel, apenas perceptible */
body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .2 0 0 0 0 .15 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: var(--coral-soft); color: var(--text); }

/* ── Títulos ─────────────────────────────────────────────────────────────── */
.container > h2, .pv-head h2, .page-head h2, .pv h2 {
    font-family: var(--f-titulo); font-weight: 600; letter-spacing: -.02em; color: var(--text);
}
body:has(.admin-sidebar) .container > h2 { font-size: 30px; line-height: 1.1; }
.pv-head h2 { font-size: 28px; line-height: 1.15; }
.pv h3, .dash-section h3 { font-family: var(--f-ui); }

/* ── Números: Geist Mono, alineados ──────────────────────────────────────── */
.num:not(th), .stat-numero, .dash-kpi .num, .canal-card .ch-num, .bar-value,
.report-kpi .n, .kpi .n, .pv-count, .pv-total, .cc-saldo, .estado-cuenta td.num,
input[type="number"], .pv-in--num {
    font-family: var(--f-num); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
table { font-variant-numeric: tabular-nums; }
.dash-kpi .num { font-weight: 600; color: var(--text); letter-spacing: -.04em; }

/* ── Menú lateral (vino) ─────────────────────────────────────────────────── */
.admin-sidebar {
    background: linear-gradient(185deg, #241318 0%, #1a0e12 55%, #150b0f 100%);
    color: #eadcd2;
    box-shadow: 6px 0 30px rgba(40, 10, 15, .18);
    overflow-x: hidden;
}
.admin-sidebar::after {
    content: ""; position: absolute; left: -40%; right: -40%; bottom: -25%; height: 55%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(226, 102, 74, .16), transparent);
}
.admin-brand { position: relative; z-index: 1; border-bottom: 1px solid rgba(255, 236, 225, .08); padding-bottom: 14px; margin-bottom: 6px; }
.admin-brand-chip { background: #fff7f0; box-shadow: 0 6px 18px -8px rgba(226, 102, 74, .7); }
.admin-brand-text strong { font-family: var(--f-titulo); font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.admin-brand-text small { color: #a58f87; }
.admin-nav { position: relative; z-index: 1; }
.admin-nav-group { color: #a58f87; font-size: 10.5px; letter-spacing: .12em; }
.admin-nav-item {
    position: relative; z-index: 1; color: #eadcd2; opacity: .84; font-weight: 500; font-size: 13.5px;
    transition: opacity .2s, transform .25s var(--ease), background .2s;
}
.admin-nav-item:hover { opacity: 1; background: transparent; transform: translateX(2px); color: #fff; }
.admin-nav-item.active { opacity: 1; font-weight: 700; color: #fff; background: rgba(226, 102, 74, .16); }
.admin-nav-item.active .ico { color: #ffb39f; }
.admin-nav-badge { background: var(--coral); color: #fff; font-family: var(--f-num); }
/* Píldora que sigue al ítem (la mueve nav.php); con ella, el activo no lleva fondo propio */
.np-pildora {
    position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 0; border-radius: 10px; pointer-events: none;
    background: rgba(226, 102, 74, .16); opacity: 0;
    transition: top .42s var(--resorte), height .42s var(--resorte), opacity .2s;
}
.np-pildora::before { content: ""; position: absolute; left: -14px; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: var(--coral); }
.admin-nav.np-con-pildora .np-pildora { opacity: 1; }
.admin-nav.np-con-pildora .admin-nav-item.active { background: transparent; }
.admin-nav.np-con-pildora .admin-nav-item.active::before { display: none; }

.np-buscar {
    position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; width: 100%; margin: 4px 0 8px;
    padding: 9px 12px; border-radius: 11px; border: 1px solid rgba(255, 236, 225, .1); background: rgba(255, 236, 225, .05);
    color: #a58f87; font: 500 13px var(--f-ui); cursor: pointer; text-align: left; transition: background .2s, border-color .2s, color .2s;
}
.np-buscar:hover { background: rgba(255, 236, 225, .09); border-color: rgba(255, 236, 225, .18); color: #eadcd2; }
.np-buscar svg { width: 16px; height: 16px; flex: none; }
.np-buscar kbd { margin-left: auto; font: 600 10.5px var(--f-num); padding: 2px 6px; border-radius: 6px; border: 1px solid rgba(255, 236, 225, .14); color: #c9b3aa; }
.np-yo { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 12px 6px 4px; margin-top: 10px; border-top: 1px solid rgba(255, 236, 225, .08); }
.np-avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--f-ui); color: #2a0f0a; background: linear-gradient(140deg, #f3c9bb, #e2664a); }
.np-yo div { line-height: 1.25; font-size: 13px; color: #eadcd2; min-width: 0; }
.np-yo small { color: #a58f87; font-size: 11.5px; }
.admin-logout, .admin-micuenta { position: relative; z-index: 1; border-radius: 11px; font-weight: 600; font-size: 13px; }
.admin-micuenta { color: #d9c6bd; border-color: rgba(255, 236, 225, .12); }
.admin-micuenta:hover { background: rgba(255, 236, 225, .07); color: #fff; }

/* Barra de arriba (celular) */
.admin-topbar { background: linear-gradient(90deg, #241318, #1a0e12); box-shadow: 0 6px 24px -10px rgba(40, 10, 15, .5); }
.admin-topbar-brand { font-family: var(--f-titulo); font-weight: 600; }
.np-buscar-top { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; margin-left: auto; margin-right: 6px; }
.np-buscar-top svg { width: 20px; height: 20px; }
.admin-scrim { background: rgba(20, 10, 12, .4); backdrop-filter: blur(3px); }

/* ── Tarjetas ────────────────────────────────────────────────────────────── */
.pv-card, .box, .stat-card, .dash-kpi, .dash-section, .report-card, .report-section, .canal-card, .usuario-card, .cl-card {
    position: relative; isolation: isolate;
    background: var(--surface); border-color: var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.pv-card::before, .box::before, .dash-kpi::before, .dash-section::before, .report-card::before, .cl-card::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: 0; pointer-events: none; transition: opacity .3s;
    background: radial-gradient(420px circle at var(--x, 50%) var(--y, 50%), var(--glow), transparent 60%);
}
.pv-card:hover::before, .box:hover::before, .dash-kpi:hover::before, .dash-section:hover::before, .report-card:hover::before, .cl-card:hover::before { opacity: 1; }
a.dash-kpi, a.report-card, a.pv-card { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
a.dash-kpi:hover, a.report-card:hover, a.pv-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--border-strong); }
.pv h3, .pv-card h3 { color: var(--text-secondary); letter-spacing: .08em; }
.pv-card--nota { background: #fff8ea; border-color: #f3dfb4; }

/* KPIs del inicio: el de deuda, destacado en vino */
.dash-kpi { padding: 18px 20px; }
.dash-kpi .lbl { color: var(--text-secondary); }
.dash-kpi[href*="filtro=deben"] { background: linear-gradient(155deg, #2a1419, #451b28 60%, #6a2534); border-color: transparent; color: #fbeee6; }
.dash-kpi[href*="filtro=deben"] .num { color: #fff !important; }
.dash-kpi[href*="filtro=deben"] .lbl, .dash-kpi[href*="filtro=deben"] .sub { color: #d7bdb3; }
.dash-alert { background: linear-gradient(120deg, #7a1f3d, #b8432c) !important; box-shadow: 0 14px 30px -14px rgba(122, 31, 61, .7) !important; border-radius: var(--radius) !important; }
.trend-bar { background: linear-gradient(180deg, #e2664a, #7a1f3d) !important; transform-origin: bottom; animation: np-crecer .9s var(--ease) both; }
.trend-col:nth-child(n) .trend-bar { animation-delay: calc(var(--np-i, 0) * 35ms + 250ms); }
.bar-track { background: rgba(122, 31, 61, .08) !important; }
.bar-fill { background: linear-gradient(90deg, #7a1f3d, #e2664a) !important; transform-origin: left; animation: np-crecer-x 1s .3s var(--ease) both; }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.pv-btn, .btn-block, .filtro-btn, .btn-sm {
    font-family: var(--f-ui); border-radius: 12px; transition: transform .15s, box-shadow .25s, background .2s, border-color .2s, color .2s;
}
.pv-btn:active, .btn-block:active, .filtro-btn:active { transform: scale(.97); }
.pv-btn--primary, .btn-block:not(.success):not(.secondary):not(.danger) {
    position: relative; overflow: hidden;
    background: var(--coral-btn); color: #fff; border-color: transparent;
    box-shadow: 0 8px 18px -10px rgba(196, 73, 46, .9), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.pv-btn--primary:hover, .btn-block:not(.success):not(.secondary):not(.danger):hover { background: var(--coral-btn-hover); }
.pv-btn--primary::after, .btn-block:not(.success):not(.secondary):not(.danger)::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32), transparent); transform: skewX(-20deg); transition: left .7s ease;
}
.pv-btn--primary:hover::after, .btn-block:not(.success):not(.secondary):not(.danger):hover::after { left: 130%; }
.pv-btn--success, .btn-block.success { background: var(--success); }
.pv-btn--success:hover, .btn-block.success:hover { background: var(--success-hover); }
.pv-btn--ghost, .btn-block.secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.pv-btn--ghost:hover, .btn-block.secondary:hover { border-color: #c9b5a2; box-shadow: var(--shadow); background: #fff; }
.pv-btn--danger { background: var(--surface); }
.filtro-btn { background: var(--surface); border-color: var(--border); color: var(--text-secondary); }
.filtro-btn:hover { border-color: var(--border-strong); color: var(--text); }
.filtro-btn.active { background: var(--text); border-color: var(--text); color: #fff; }

/* ── Formularios ─────────────────────────────────────────────────────────── */
.pv-in, .form-control, select.pv-in, textarea.form-control {
    border-color: var(--border-strong); border-radius: 10px; background: #fffefc; color: var(--text);
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.pv-in:hover, .form-control:hover { border-color: #cdb9a6; }
.pv-in:focus, .form-control:focus { border-color: var(--coral); box-shadow: 0 0 0 4px rgba(226, 102, 74, .14); background: #fff; outline: none; }
.pn-label, .form-group label { color: var(--text-secondary); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--coral-btn); }

/* ── Tablas ──────────────────────────────────────────────────────────────── */
.pv-table th, table th { color: var(--text-muted); letter-spacing: .08em; }
.pv-table td, .pv-table th { border-color: var(--border); }
.pv-table tbody tr { transition: background .2s; }
.pv-table tbody tr:hover { background: var(--surface-2); }
.pv-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--coral); }
.pv-table tfoot td { border-top-color: var(--border-strong); }

/* ── Estados, etiquetas y avisos ─────────────────────────────────────────── */
.estado-badge { border-radius: 999px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.estado-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.estado-Pendiente { background: #fdebd6; color: #9a4b0c; }
.estado-Pendiente::before { animation: np-latido 1.8s infinite; }
.estado-En-preparacion { background: #ebe8fa; color: #4a3f99; }
.estado-Listo { background: #fbe3db; color: #8f2f1b; }
.estado-Despachado { background: #f3e3ea; color: #7a1f3d; }
.estado-Facturacion-directa { background: #f3efd9; color: #6b5f2a; }
.estado-Entregado { background: #e1f1e8; color: #23684a; }
.estado-Cancelado { background: #f2e9e7; color: #8b7d79; }
.pv-tag { border-radius: 999px; background: #f2e9df; }
.pv-tag--ok { background: #e1f1e8; color: #23684a; }
.pv-tag--warn { background: #fdebd6; color: #9a4b0c; }
.pv-tag--danger { background: #fbe2e5; color: #a1263a; }
.alert { border-radius: 14px; border-width: 1px; border-left-width: 4px; box-shadow: var(--shadow-sm); animation: np-entra .5s var(--ease) both; }
.alert-success { background: #eaf5ee; color: #1f5c40; border-color: #2f7d5b; }
.alert-error { background: #fcebec; color: #8d1f30; border-color: #c0394f; }
.alert-warning { background: #fdf3e2; color: #7c4a0b; border-color: #d98c1f; }
.alert-info { background: #f1edf9; color: #4a3f99; border-color: #6b5fc0; }
.pv-aviso-credito, .pv-aviso-bloqueo, .pv-contra-entrega { animation: np-entra .5s var(--ease) both; }

/* ── Entradas escalonadas al abrir una pantalla ──────────────────────────── */
.container > *, .pv-main > *, .pv-side > *, .dash-grid > *, .pv-grid > * { animation: np-entra .6s var(--ease) both; }
.container > :nth-child(2), .dash-grid > :nth-child(2), .pv-main > :nth-child(2), .pv-side > :nth-child(2) { animation-delay: .05s; }
.container > :nth-child(3), .dash-grid > :nth-child(3), .pv-main > :nth-child(3), .pv-side > :nth-child(3) { animation-delay: .1s; }
.container > :nth-child(4), .dash-grid > :nth-child(4), .pv-main > :nth-child(4), .pv-side > :nth-child(4) { animation-delay: .15s; }
.container > :nth-child(5), .dash-grid > :nth-child(5), .pv-main > :nth-child(5) { animation-delay: .2s; }
.container > :nth-child(6), .dash-grid > :nth-child(6) { animation-delay: .25s; }
.container > :nth-child(n+7), .dash-grid > :nth-child(n+7) { animation-delay: .3s; }
.pv-table tbody tr, .tabla-lista tbody tr { animation: np-entra .45s var(--ease) both; }
.pv-table tbody tr:nth-child(-n+12) { animation-delay: calc(.12s + var(--np-f, 0) * 30ms); }

/* ── Refinamientos por pantalla (colores sueltos que traían algunas páginas) ── */
body:has(.admin-sidebar) .container h2 { font-family: var(--f-titulo); font-weight: 600; letter-spacing: -.02em; }
.container a:not([class]), .pv-card a:not([class]), .cc-det {
    color: var(--vino); text-decoration-color: rgba(122, 31, 61, .3); text-underline-offset: 3px;
}
.container a:not([class]):hover, .pv-card a:not([class]):hover { color: var(--coral-btn); text-decoration-color: currentColor; }
.pv-montos div, .cc-saldo--aldia, .cc-anterior td, .pv-next--muted { background: var(--surface-2) !important; }
.cc-saldo--aldia { border-color: var(--border) !important; color: var(--text) !important; }
.cc-tipos label:has(input:checked) { border-color: var(--coral); background: #fff6f2; }
.pv-count, .badge-total { background: #f2e9df; color: var(--text); }
.cc-pendientes li { border-top-color: var(--border); }
table.planilla thead th { background: #2a1419 !important; color: #f1e4dc !important; }
.pv-btn--wa { background: #e9f6ee; color: #1d7a4c; border-color: #cfe9d9; }
.pv-btn--wa:hover { background: #dcf1e4; }
/* Pantallas de ingreso: la acción principal en coral */
.login-wrap .btn-block.success { background: var(--coral-btn); box-shadow: 0 10px 22px -12px rgba(196, 73, 46, .9); }
.login-wrap .btn-block.success:hover { background: var(--coral-btn-hover); }
.login-wrap .box { padding: 24px; }
/* Inicio: canal de venta en la paleta (online = coral, vendedores = vino) */
.canal-card[style*="#eef2ff"], .canal-card[style*="#f0fdf4"] { background: var(--surface-2) !important; border-color: var(--border) !important; }
.canal-card[style*="#f0fdf4"] .ch-num { color: var(--vino) !important; }
.canal-card[style*="#eef2ff"] .ch-num { color: var(--coral-btn) !important; }
.bar-track > div[style*="#4f46e5"] { background: var(--coral) !important; }
.bar-track > div[style*="#059669"] { background: var(--vino) !important; }

/* ── Buscador rápido (Ctrl+K) ────────────────────────────────────────────── */
.np-paleta { position: fixed; inset: 0; z-index: 3000; display: none; place-items: start center; padding: 12vh 16px 0; background: rgba(20, 10, 12, .34); backdrop-filter: blur(6px); }
.np-paleta.abierta { display: grid; animation: np-aparece .2s ease; }
.np-paleta-caja { width: min(620px, 100%); border-radius: 18px; background: var(--surface); overflow: hidden; box-shadow: 0 40px 90px -30px rgba(40, 10, 15, .55), 0 0 0 1px var(--border); animation: np-zoom .28s var(--resorte); }
.np-paleta input { width: 100%; border: 0; outline: 0; padding: 18px 20px; font: 500 16px var(--f-ui); background: transparent; color: var(--text); border-bottom: 1px solid var(--border); }
.np-paleta ul { list-style: none; margin: 0; padding: 8px; max-height: min(380px, 55vh); overflow: auto; }
.np-paleta h6 { margin: 8px 12px 4px; font: 700 10.5px var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.np-paleta li a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 14px; }
.np-paleta li a .ico { width: 18px; height: 18px; color: var(--text-secondary); flex: none; }
.np-paleta li a small { margin-left: auto; color: var(--text-muted); font-size: 12px; }
.np-paleta li.sel a { background: var(--coral-soft); }
.np-paleta li.sel a .ico { color: var(--coral-btn); }
.np-paleta .np-vacio { padding: 18px 14px; color: var(--text-muted); font-size: 14px; }
.np-paleta-pie { display: flex; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 12px; }
.np-paleta-pie kbd { font: 600 11px var(--f-num); padding: 1px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-secondary); }

/* ── Depósito (barra de arriba) ──────────────────────────────────────────── */
.premium-nav-deposito { background: linear-gradient(90deg, #241318, #1a0e12) !important; box-shadow: 0 8px 26px -12px rgba(40, 10, 15, .55) !important; }
.premium-nav-deposito a { color: #eadcd2; }
.premium-nav-deposito .nav-scroll a.active { background: rgba(226, 102, 74, .2) !important; color: #fff !important; }

/* ── Animaciones ─────────────────────────────────────────────────────────── */
@keyframes np-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes np-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes np-zoom { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes np-crecer { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes np-crecer-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes np-latido { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

@media (max-width: 1023px) {
    body:has(.admin-sidebar) .container > h2 { font-size: 26px; }
    .pv-head h2 { font-size: 24px; }
}
@media (max-width: 700px) {
    .np-paleta { padding-top: 7vh; }
    .np-paleta-pie { display: none; } /* atajos de teclado: en el celular no sirven */
}
/* Quien pidió "reducir movimiento" en su teléfono o compu: sin animaciones. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}
/* Al imprimir, nada de esto */
@media print {
    body::before { display: none; }
    .container > *, .pv-main > *, .pv-side > * { animation: none !important; }
}