/* ============================================================================
   Panel Admin Pirulí · Design System (v2 "premium")
   Solo presentación. CSP-safe: 100% CSS externo, sin inline. Accesible AA.
   Capas: (1) @font-face  (2) tokens  (3) base  (4) restyle Bootstrap
          (5) componentes  (6) sidebar/topbar.
   ========================================================================== */

/* ------------------------------- (1) Fuente ------------------------------- */
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap;
    src:url("/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap;
    src:url("/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap;
    src:url("/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap;
    src:url("/fonts/inter-700.woff2") format("woff2"); }

/* ------------------------------- (2) Tokens ------------------------------- */
:root {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Neutrales (grises Apple-ish) */
    --ink:      #1d1d1f;   /* texto casi-negro */
    --ink-soft: #3a3a3c;
    --gray-700: #48484a;
    --gray-600: #6e6e73;   /* texto secundario */
    --gray-500: #86868b;   /* muted / labels */
    --gray-400: #aeaeb2;
    --gray-300: #d2d2d7;   /* bordes fuertes */
    --gray-200: #e3e3e8;
    --hairline: #e7e7ea;   /* líneas finas */
    --gray-100: #f0f0f2;
    --gray-050: #f5f5f7;   /* lienzo */
    --surface:  #ffffff;
    --canvas:   #f5f5f7;

    /* Marca Pirulí como ACENTO sutil */
    --accent:      #e0446d;
    --accent-600:  #c93862;
    --accent-700:  #ab2f53;
    --accent-050:  #fdeff3;
    --accent-100:  #fbdfe8;
    --accent-ring: rgba(224,68,109,.28);

    /* Semánticos apagados */
    --ok:      #1c7c54;  --ok-bg:   #e9f6ef;  --ok-bd:   #bfe6d1;
    --warn:    #9a6a12;  --warn-bg: #fbf2df;  --warn-bd: #f0dca8;
    --danger:  #c0362c;  --danger-bg:#fbecea;  --danger-bd:#f2c9c4;
    --info:    #3757b8;  --info-bg: #eef1fb;  --info-bd: #d3ddf5;

    /* Radios */
    --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;

    /* Sombras suaves estratificadas */
    --shadow-xs: 0 1px 2px rgba(17,17,26,.04);
    --shadow-sm: 0 1px 2px rgba(17,17,26,.04), 0 1px 3px rgba(17,17,26,.06);
    --shadow-md: 0 2px 6px rgba(17,17,26,.05), 0 8px 24px rgba(17,17,26,.08);
    --shadow-lg: 0 12px 40px rgba(17,17,26,.16);

    --ease: cubic-bezier(.4, 0, .2, 1);
}

/* -------------------------------- (3) Base -------------------------------- */
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-sans);
    background: var(--canvas);
    color: var(--ink);
    letter-spacing: -0.006em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5 { font-weight: 600; letter-spacing: -0.021em; color: var(--ink); }
h1,.h1 { font-size: 1.9rem; } h4,.h4 { font-weight: 600; }
a { color: var(--accent-600); text-decoration: none; }
a:hover { color: var(--accent-700); text-decoration: underline; text-underline-offset: 2px; }
.text-muted { color: var(--gray-500) !important; }
.small, small { font-size: .82rem; }
.mono, .font-monospace { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Números alineados (tabular) donde importa */
.table td, .table th, .kpi-value, .tnum,
input[type="number"], .text-end { font-variant-numeric: tabular-nums; }

/* Foco visible y elegante en todo lo interactivo */
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); border-radius: var(--r-xs); }

/* -------------------- (4) Restyle de clases Bootstrap -------------------- */
/* Tarjetas */
.card { border: 0; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.card.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.card-header { background: transparent; border-bottom: 1px solid var(--hairline);
    font-weight: 600; color: var(--ink); padding: 1rem 1.25rem; }

/* Tablas: hairlines finas, aire, headers en mayúsculas pequeñas con tracking */
.table { --bs-table-bg: transparent; color: var(--ink-soft); margin-bottom: 0; }
.table > thead > tr > th {
    text-transform: uppercase; font-size: .7rem; font-weight: 600;
    letter-spacing: .06em; color: var(--gray-500);
    border-bottom: 1px solid var(--hairline); padding: .7rem 1.1rem; white-space: nowrap;
}
.table > tbody > tr > td { padding: .85rem 1.1rem; border-top: 0; border-bottom: 1px solid var(--hairline);
    vertical-align: middle; }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table.table-hover > tbody > tr { transition: background-color .12s var(--ease); }
.table.table-hover > tbody > tr:hover { background: var(--gray-050); }
.table-sm > tbody > tr > td, .table-sm > thead > tr > th { padding-top: .55rem; padding-bottom: .55rem; }

/* Botones: jerarquía y microtransición */
.btn { border-radius: var(--r-sm); font-weight: 500; letter-spacing: -0.01em;
    padding: .48rem .95rem; transition: background-color .15s var(--ease), border-color .15s var(--ease),
    box-shadow .15s var(--ease), color .15s var(--ease); }
.btn:active { transform: translateY(.5px); }
.btn-sm { padding: .32rem .7rem; border-radius: var(--r-xs); font-size: .82rem; }
.btn-lg { padding: .65rem 1.3rem; border-radius: var(--r-md); }

/* Primario / marca = acento */
.btn-brand, .btn-primary { background: var(--accent); border: 1px solid var(--accent); color: #fff; }
.btn-brand:hover, .btn-primary:hover { background: var(--accent-600); border-color: var(--accent-600); color:#fff; box-shadow: var(--shadow-sm); }
.btn-brand:focus-visible, .btn-primary:focus-visible { color:#fff; box-shadow: 0 0 0 3px var(--accent-ring); }
.btn-outline-brand { color: var(--accent-600); border: 1px solid var(--gray-300); background: var(--surface); }
.btn-outline-brand:hover { background: var(--accent-050); border-color: var(--accent); color: var(--accent-700); }

/* Éxito (emitir/activar) = verde apagado */
.btn-success { background: var(--ok); border: 1px solid var(--ok); color:#fff; }
.btn-success:hover { background:#166643; border-color:#166643; color:#fff; box-shadow: var(--shadow-sm); }

/* Secundario tenue */
.btn-outline-secondary, .btn-secondary { color: var(--gray-700); background: var(--surface);
    border: 1px solid var(--gray-300); }
.btn-outline-secondary:hover, .btn-secondary:hover { background: var(--gray-100); border-color: var(--gray-300); color: var(--ink); }
.btn-outline-danger { color: var(--danger); border-color: var(--danger-bd); background: var(--surface); }
.btn-outline-danger:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }

/* Inputs suaves con focus ring */
.form-control, .form-select { border-radius: var(--r-sm); border: 1px solid var(--gray-300);
    color: var(--ink); padding: .5rem .75rem; background-color: var(--surface);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.form-control::placeholder { color: var(--gray-400); }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.form-control-sm, .form-select-sm { border-radius: var(--r-xs); }
.form-label { font-weight: 500; color: var(--ink-soft); margin-bottom: .35rem; font-size: .88rem; }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.form-text { color: var(--gray-500); }

/* Badges / pills refinados (tono suave, no color duro) */
.badge { font-weight: 600; font-size: .72rem; letter-spacing: .01em; padding: .34em .62em;
    border-radius: var(--r-pill); border: 1px solid transparent; }
.badge.bg-success   { background: var(--ok-bg)     !important; color: var(--ok)     !important; border-color: var(--ok-bd); }
.badge.bg-primary   { background: var(--info-bg)   !important; color: var(--info)   !important; border-color: var(--info-bd); }
.badge.bg-info      { background: var(--info-bg)   !important; color: var(--info)   !important; border-color: var(--info-bd); }
.badge.bg-warning   { background: var(--warn-bg)   !important; color: var(--warn)   !important; border-color: var(--warn-bd); }
.badge.bg-danger    { background: var(--danger-bg) !important; color: var(--danger) !important; border-color: var(--danger-bd); }
.badge.bg-secondary { background: var(--gray-100)  !important; color: var(--gray-600)!important; border-color: var(--gray-200); }
.badge.bg-dark      { background: var(--ink)       !important; color: #fff          !important; }
/* INMUTABLE: pill de "bloqueado" suave (no negro duro), a juego con los demás */
.badge.badge-inmutable { background: var(--gray-100) !important; color: var(--ink-soft) !important;
    border-color: var(--gray-300); }
.badge.bg-light     { background: var(--gray-100)  !important; color: var(--gray-700)!important; border-color: var(--gray-200); }

/* Texto semántico apagado (montos verde/rojo) */
.text-success { color: var(--ok) !important; }
.text-danger  { color: var(--danger) !important; }

/* Alerts suaves */
.alert { border: 0; border-radius: var(--r-md); padding: .85rem 1.1rem; box-shadow: var(--shadow-xs); }
.alert-success { background: var(--ok-bg);     color: var(--ok); }
.alert-danger  { background: var(--danger-bg); color: var(--danger); }
.alert-warning { background: var(--warn-bg);   color: var(--warn); }
.alert-info    { background: var(--info-bg);   color: var(--info); }

/* Modales: sombra suave, backdrop sutil (con blur), header/footer hairline */
.modal-content { border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.modal-header, .modal-footer { border-color: var(--hairline); padding: 1rem 1.25rem; }
.modal-body { padding: 1.25rem; }
.modal-title { font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.modal-backdrop.show { opacity: .28; }
@supports (backdrop-filter: blur(2px)) { .modal-backdrop.show { backdrop-filter: blur(2px); } }

/* ------------------------------ (5) Componentes --------------------------- */
/* Encabezado de sección/catálogo */
.catalogo-head { display:flex; justify-content:space-between; align-items:center; gap:1rem;
    margin-bottom: 1.25rem; flex-wrap: wrap; }
.catalogo-head h4 { margin:0; font-weight:600; font-size:1.35rem; letter-spacing:-0.02em; }

/* Botón-ícono de acciones por fila */
.btn-icon { display:inline-flex; align-items:center; justify-content:center; width:2.1rem; height:2.1rem;
    padding:0; border-radius: var(--r-sm); border:1px solid var(--hairline); background: var(--surface);
    color: var(--gray-600); line-height:0; transition: background-color .13s var(--ease), color .13s var(--ease), border-color .13s var(--ease); }
.btn-icon:hover { background: var(--gray-100); color: var(--ink); }
.btn-icon.icon-warning:hover { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-bd); }
.btn-icon.icon-success:hover { background: var(--ok-bg);   color: var(--ok);   border-color: var(--ok-bd); }
.btn-icon.icon-brand:hover   { background: var(--accent-050); color: var(--accent-600); border-color: var(--accent-100); }
.acciones-fila { display:inline-flex; gap:.4rem; }

/* Chips de IVA */
.chip-iva { font-size:.7rem; font-weight:600; padding:.18rem .5rem; border-radius: var(--r-pill);
    border:1px solid transparent; }
.chip-iva.exento  { background: var(--gray-100); color: var(--gray-600); border-color: var(--gray-200); }
.chip-iva.gravado { background: var(--info-bg);  color: var(--info);     border-color: var(--info-bd); }

/* KPI cards */
.card-kpi { border:0; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); background: var(--surface);
    transition: box-shadow .18s var(--ease), transform .18s var(--ease); }
.card-kpi:hover { box-shadow: var(--shadow-md); }
.card-kpi .kpi-label { color: var(--gray-500); font-size:.8rem; font-weight:500; }
.card-kpi .kpi-value { font-size:1.75rem; font-weight:600; letter-spacing:-0.03em; color: var(--ink); line-height:1.15; }

/* Empty states cuidados */
.empty-state { text-align:center; color: var(--gray-500); padding: 2.5rem 1rem; }
.empty-state svg { color: var(--gray-300); margin-bottom:.5rem; }

/* Estado sí/no en tablas (reemplaza los ✅/—) */
.estado-si { display:inline-flex; align-items:center; justify-content:center; width:1.5rem; height:1.5rem;
    border-radius: var(--r-pill); background: var(--ok-bg); color: var(--ok); border:1px solid var(--ok-bd); }
.estado-si svg { width:14px; height:14px; }
.estado-no { color: var(--gray-400); }

/* Nota de candado (reemplaza los 🔒 de las notas de seguridad) */
.nota-candado { display:inline-flex; align-items:flex-start; gap:.4rem; color: var(--gray-500); }
.nota-candado svg { flex:0 0 auto; width:14px; height:14px; margin-top:.12em; color: var(--gray-400); }

/* Header de sección con subtítulo */
.catalogo-head .sub { color: var(--gray-500); font-size:.86rem; margin-top:.15rem; }

/* Nav pills (filtros / tabs) on-brand */
.nav-pills { gap:.35rem; }
.nav-pills .nav-link { color: var(--gray-600); border-radius: var(--r-pill); font-weight:500;
    font-size:.88rem; padding:.4rem .9rem; border:1px solid transparent;
    transition: background-color .13s var(--ease), color .13s var(--ease); }
.nav-pills .nav-link:hover { background: var(--gray-100); color: var(--ink); }
.nav-pills .nav-link.active { background: var(--accent-050); color: var(--accent-700);
    border-color: var(--accent-100); }
.nav-pills .nav-link svg { width:1.05em; height:1.05em; vertical-align:-.15em; }

/* Marca en la pantalla de login (standalone, sin sidebar) */
.login-mark { color: var(--accent); display:inline-flex; }
.login-mark svg { width:36px; height:36px; }

/* SVG dentro de botones/links: alineado, hereda color, tamaño consistente */
.btn svg, .nav-link svg, .btn-icon svg { vertical-align: middle; }
.btn > svg { width: 1.05em; height: 1.05em; }
.sidebar-brand .brand-mark svg { width: 22px; height: 22px; }
.admin-sidebar .nav-link .lock svg { width: 14px; height: 14px; }

/* ---------------------------- (6) Sidebar / Topbar ----------------------- */
.app-shell { min-height: 100vh; }
.admin-sidebar {
    width: 250px; min-height: 100vh; background: #fbfbfd;
    border-right: 1px solid var(--hairline); position: sticky; top: 0; align-self: flex-start;
    padding: 1rem .75rem;
}
.sidebar-brand { display:flex; align-items:center; gap:.55rem; padding:.4rem .55rem .9rem;
    color: var(--ink); font-weight:700; font-size:1.15rem; letter-spacing:-0.03em; }
.sidebar-brand:hover { color: var(--ink); text-decoration:none; }
.sidebar-brand .brand-mark { color: var(--accent); display:inline-flex; }
.sidebar-brand small { color: var(--gray-500); font-weight:500; font-size:.72rem; text-transform:uppercase;
    letter-spacing:.08em; }
.sidebar-section { color: var(--gray-400); font-size:.68rem; font-weight:600; text-transform:uppercase;
    letter-spacing:.09em; padding:.9rem .6rem .3rem; }
.admin-sidebar .nav { gap:.1rem; }
.admin-sidebar .nav-link {
    position: relative; display:flex; align-items:center; gap:.7rem;
    color: var(--gray-600); border-radius: var(--r-sm); padding:.5rem .6rem;
    font-weight: 500; font-size:.9rem; letter-spacing:-0.01em;
    transition: background-color .13s var(--ease), color .13s var(--ease);
}
.admin-sidebar .nav-link svg { width:19px; height:19px; color: var(--gray-400); flex:0 0 auto;
    transition: color .13s var(--ease); }
.admin-sidebar .nav-link:hover { background: var(--gray-100); color: var(--ink); text-decoration:none; }
.admin-sidebar .nav-link:hover svg { color: var(--gray-600); }
.admin-sidebar .nav-link.active { background: var(--accent-050); color: var(--accent-700); font-weight:600; }
.admin-sidebar .nav-link.active svg { color: var(--accent-600); }
.admin-sidebar .nav-link.active::before { content:""; position:absolute; left:-.75rem; top:.4rem; bottom:.4rem;
    width:3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.admin-sidebar .nav-link .lock { margin-left:auto; color: var(--gray-400); display:inline-flex; }

.admin-topbar { position: sticky; top:0; z-index:10; background: rgba(255,255,255,.8);
    border-bottom: 1px solid var(--hairline); padding:.7rem 1.5rem; }
@supports (backdrop-filter: blur(10px)) { .admin-topbar { backdrop-filter: saturate(180%) blur(12px); background: rgba(255,255,255,.72); } }
.admin-topbar .topbar-title { font-weight:600; letter-spacing:-0.02em; color: var(--ink); }
.admin-topbar .role-pill { background: var(--gray-100); color: var(--gray-700); border:1px solid var(--gray-200);
    border-radius: var(--r-pill); font-weight:600; font-size:.72rem; padding:.28em .7em; }
.admin-topbar .user-name { color: var(--gray-600); font-size:.86rem; }

main.app-main { padding: 1.75rem 1.75rem 3rem; }

/* Responsive: colapsa el sidebar en pantallas chicas */
@media (max-width: 820px) {
    .admin-sidebar { position: static; width: 100%; min-height: auto; border-right:0;
        border-bottom:1px solid var(--hairline); }
    .app-shell { flex-direction: column; }
    .admin-sidebar .nav { flex-direction: row !important; flex-wrap: wrap; }
    .admin-sidebar .nav-link.active::before { display:none; }
}