/* === Inter variable (auto-hospedada) === */
@font-face{
  font-family: 'Inter';
  src: url('/assets/fonts/inter/InterVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Inter';
  src: url('/assets/fonts/inter/InterVariable-Italic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ====== Base ====== */
html, body{
  height: 100%;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ====== Variables por tema ====== */
:root,
html[data-bs-theme='light']{
  --bg-900: #ffffff;
  --bg-800: #ffffff;
  --text-100: #0f172a;
  --text-300: #475569;

  --primary-500: #206bc4;

  --accent-emerald: #10b981;
  --accent-rose:   #ef4444;

  --nav-fg:        #5b677a;
  --nav-fg-hover:  #334155;
  --nav-fg-muted:  #64748b;

  --tblr-primary: var(--primary-500);
  --tblr-border-radius: .9rem;
  --tblr-body-bg: var(--bg-900);
  --tblr-body-color: var(--text-100);
}

html[data-bs-theme='dark']{
  --bg-900: #0b1220;
  --bg-800: #0f172a;
  --text-100: #e5e7eb;
  --text-300: #c7cbd6;

  --primary-500: #206bc4;

  --accent-emerald: #10b981;
  --accent-rose:   #ef4444;

  --nav-fg:        #b7c0cc;
  --nav-fg-hover:  #e2e8f0;
  --nav-fg-muted:  #9aa7b7;

  --tblr-primary: var(--primary-500);
  --tblr-border-radius: .9rem;
  --tblr-body-bg: var(--bg-900);
  --tblr-body-color: var(--text-100);
}

/* Body */
html[data-bs-theme='light'] body { background: var(--bg-900); color: #334155; }
html[data-bs-theme='dark']  body { background: var(--bg-900); color: #e5e7eb; }

/* ====== Navbar ====== */
.bistrot-topbar{
  background: var(--bg-800);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
html[data-bs-theme='dark'] .bistrot-topbar{
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.bistrot-topbar .logo{ height: 28px; }
.bistrot-topbar .brand-name{ font-weight: 700; }

.bistrot-topbar .nav-link,
.bistrot-topbar .navbar-text{
  color: var(--nav-fg) !important;
}
.bistrot-topbar .nav-link:hover{
  color: var(--nav-fg-hover) !important;
}

/* Botón outline topbar */
.bistrot-topbar .btn.btn-outline{
  border-color: rgba(127,127,127,.25);
  color: var(--nav-fg);
}
@supports (color: color-mix(in srgb, #000 50%, #fff)) {
  .bistrot-topbar .btn.btn-outline{
    border-color: color-mix(in srgb, var(--nav-fg) 25%, transparent);
  }
  .bistrot-topbar .btn.btn-outline:hover{
    background: color-mix(in srgb, var(--nav-fg) 12%, transparent);
    color: var(--nav-fg-hover);
  }
}

/* Sub bar */
.bistrot-subbar{
  background: var(--tblr-body-bg);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
html[data-bs-theme='dark'] .bistrot-subbar{
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.bistrot-subbar .nav-link{
  color: var(--nav-fg) !important;
  padding: .65rem 1rem;
  transition: color .12s ease, background-color .12s ease;
}
.bistrot-subbar .nav-link:hover{ color: var(--nav-fg-hover) !important; }
.bistrot-subbar .nav-link.active{ color: var(--tblr-primary) !important; }

/* Íconos SOLO en barras (evita “colados” en otros lados) */
.bistrot-topbar .nav-link .ti,
.bistrot-subbar .nav-link .ti{
  font-size: 18px;
  vertical-align: -2px;
  opacity: .95;
  margin-right: .5rem;
  color: currentColor;
}

/* ====== Componentes ====== */
.card { border-radius: 16px; }
.card-header { border-bottom: 1px solid rgba(0,0,0,.06); }
html[data-bs-theme='dark'] .card-header { border-bottom-color: rgba(255,255,255,.08); }

.btn-primary{ background: var(--primary-500); border-color: var(--primary-500); }

.kpi .value { font-size: 1.8rem; font-weight: 800; }
.kpi .delta.up   { color: var(--accent-emerald); }
.kpi .delta.down { color: var(--accent-rose); }

.chip{
  display:inline-flex; gap:.4rem; align-items:center;
  padding:.25rem .5rem; border-radius:999px; font-size:.8rem;
  background: rgba(127,127,127,.1);
  color: var(--text-300);
}
.chip .dot{ width:.45rem; height:.45rem; border-radius:50%; }
.chip .dot.green{ background: var(--accent-emerald); }
.chip .dot.red  { background: var(--accent-rose); }

/* Ilustración */
.illus{
  width: 100%; max-width: 340px; aspect-ratio: 4/3;
  background:
    radial-gradient(120px 120px at 20% 20%, #21406e55, transparent),
    radial-gradient(140px 140px at 80% 30%, #115e5950, transparent),
    linear-gradient(180deg, #15223d, #10192f);
  border-radius: 20px;
  display:flex; align-items:center; justify-content:center;
}
.illus svg{ width: 64%; opacity:.95; }

/* Tipos / colores finos */
.text-secondary { color: var(--nav-fg-muted) !important; }
h1, h2, h3, h4, h5, h6 { color: var(--nav-fg-hover); }

a.nav-link{ transition: color .12s ease; }

/* Subrayado activo *c/
.bistrot-subbar .nav-link{ position: relative; }
.bistrot-subbar .nav-link::after{
  content: "";
  position: absolute;
  left: .35rem;
  right: .35rem;
  bottom: -0.55rem;
  height: 2px;
  border-radius: 2px;
  background: var(--tblr-primary);
  transform: scaleX(0);
  transform-origin: center;
  opacity: .95;
  transition: transform .18s ease-in-out, opacity .18s ease-in-out;
}
.bistrot-subbar .nav-link.active::after,
.bistrot-subbar .nav-link[aria-current="page"]::after{ transform: scaleX(1); }
.bistrot-subbar .nav-link:hover::after,
.bistrot-subbar .nav-link:focus-visible::after{
  transform: scaleX(1);
  opacity: .85;
}*/

/* Subrayado consistente con box-shadow (sin pseudo-elementos) */
.bistrot-subbar .nav-link {
  display: inline-flex;         /* ayuda con íconos + texto */
  align-items: center;
  gap: .5rem;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color .12s ease, box-shadow .12s ease;
}

.bistrot-subbar .nav-link:hover,
.bistrot-subbar .nav-link:focus-visible {
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--tblr-primary) 75%, transparent);
}

.bistrot-subbar .nav-link.active,
.bistrot-subbar .nav-link[aria-current="page"] {
  color: var(--tblr-primary) !important;
  box-shadow: inset 0 -2px 0 var(--tblr-primary);
}

/* Línea inferior recta (sin puntas redondeadas) */
.bistrot-subbar .nav-link {
  border-radius: 0 !important;   /* evita que el box-shadow se curve */
}

/* Opcional: por si Tabler aplica radio distinto en hover/active */
.bistrot-subbar .nav-link:hover,
.bistrot-subbar .nav-link:focus-visible,
.bistrot-subbar .nav-link.active {
  border-radius: 0 !important;
}


/* ====== Login ====== */
.auth-body { min-height: 100vh; display: flex; align-items: center; }
.auth-wrap { max-width: 440px; }
.card-auth { border-radius: 16px; overflow: hidden; }
.card-auth .form-control { height: 44px; }
.input-group-text.cursor-pointer { cursor: pointer; }

/* Evitar el "pill" azul/gris que Tabler/Bootstrap aplica al .nav-link.active */
.bistrot-subbar .nav-link.active {
  background: transparent !important;
}

/* Asegurar que la barra azul se vea igual en todos */
.bistrot-subbar { overflow: visible; } /* por si la pseudo-línea cae fuera */
.bistrot-subbar .nav-link {
  position: relative;
  padding: .85rem 1rem;          /* un poco más de aire para alojar la línea */
}

/* Línea inferior (subrayado) */
.bistrot-subbar .nav-link::after{
  content: "";
  position: absolute;
  left: .75rem;
  right: .75rem;
  bottom: 0;                     /* pegada al borde inferior del link */
  height: 2px;                   /* más visible */
  border-radius: 2px;
  background: var(--tblr-primary);
  transform: scaleX(0);
  transform-origin: center;
  opacity: 1;
  transition: transform .16s ease-in-out;
}

/* Mostrar en activo y en hover */
.bistrot-subbar .nav-link.active::after,
.bistrot-subbar .nav-link[aria-current="page"]::after,
.bistrot-subbar .nav-link:hover::after,
.bistrot-subbar .nav-link:focus-visible::after {
  transform: scaleX(1);
}

/* Color de texto del activo (coherente) */
.bistrot-subbar .nav-link.active,
.bistrot-subbar .nav-link[aria-current="page"]{
  color: var(--tblr-primary) !important;
}

/* Panel Bistrot */

/* ---------- Variables ---------- */
:root,
:root[data-bs-theme="dark"]{
  /* Arte (desktop) */
  --ill-w: 360px;      /* 320–420 según gusto */
  --ill-max: 420px;
  --ill-shift-y: -12px; /* -8 a -20 para subir/bajar */

  /* Tema dark (por defecto) */
  --b-card:#1f2a37;
  --b-pill:#0E2332;
  --b-pill-muted:#0D2230;
  --b-bord:#123B57;
  --b-bord-muted:#223647;
  --b-text:#EAF7FF;
  --b-muted:#A8C4D6;
}

/* Light: cubre varias variantes de toggle */
:root[data-theme="light"],
:root[data-bs-theme="light"],
body[data-theme="light"], body.theme-light, html.light{
  --b-card:#f7f9fc;
  --b-pill:#ffffff;
  --b-pill-muted:#f1f5f9;
  --b-bord:#d2e3f0;
  --b-bord-muted:#c8d7e4;
  --b-text:#0f172a;
  --b-muted:#475569;
}

/* ---------- Card contenedor ---------- */
.hero-bistrot{
  background: var(--b-card) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* ---------- Grid ---------- */
.hero-bistrot .hero6-grid{
  display: grid;
  gap: 16px;
  grid-template-areas:
    "head"
    "kpis"
    "art"
    "last"
    "under";
}
@media (min-width:1200px){
  .hero-bistrot .hero6-grid{
    grid-template-columns: 1.25fr 0.75fr !important;
    grid-template-areas:
      "head  head"
      "kpis  art"
      "last  under" !important;      
    align-items: start !important;
    row-gap: 14px !important;
  }
}
.hero-bistrot .hero6-head{  grid-area: head; }
.hero-bistrot .hero6-kpis{  grid-area: kpis; display:grid; gap:12px; }
.hero-bistrot .hero6-art{   grid-area: art;  display:flex; justify-content:center; align-items:flex-start; overflow:hidden; padding-right:0; margin-top:0px; }
.hero-bistrot .hero6-last{  grid-area: last; justify-self:start; width:100%; max-width:420px; }
.hero-bistrot .hero6-under{ grid-area: under; justify-self:end;   width:100%; max-width:420px; }

/* ---------- Ilustración (regla única) ---------- */
.hero-bistrot .hero-ill-wrapper{ position:relative; display:flex; justify-content:center; align-items:flex-start; }
.hero-bistrot .hero-ill{
  display:block !important;
  width: var(--ill-w) !important;
  max-width: var(--ill-max) !important;
  height: auto !important;
  transform: translateY(var(--ill-shift-y)) !important;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.26)) !important;
  margin: 0 !important; z-index: 1;
}
.hero-bistrot .hero-ill-glow{
  position:absolute; inset:auto 14% 12% 14%;
  background: radial-gradient(60% 60% at 50% 50%, rgba(0,182,90,.18), rgba(34,211,238,.10) 60%, transparent 80%);
  filter: blur(18px); opacity:.78; z-index:0;
}

/* Mobile/Tablet */
@media (max-width:1199.98px){
  .hero-bistrot .hero-ill{ width: 82vw !important; max-width: 620px !important; transform:none !important; }
  .hero-bistrot .hero6-last,
  .hero-bistrot .hero6-under{ max-width:100%; }
}

@media (max-width: 768px) {
  .dashboard-card img,
  .dashboard-card .illustration {
    position: relative !important;
    display: block !important;
    margin: 0 auto 1rem auto !important;
    width: 60% !important;
    max-width: 200px !important;
    opacity: 0.9;
  }

  .dashboard-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}


/* ---------- Pills ---------- */
.hero-bistrot .kpi-pill{
  background: var(--b-pill) !important;
  border: 1px solid var(--b-bord) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  margin: 0 !important;
}
.hero-bistrot .kpi-pill--muted{
  background: var(--b-pill-muted) !important;
  border-color: var(--b-bord-muted) !important;
}
.hero-bistrot .kpi-pill__title{
  color: var(--b-muted) !important;
  font-size: .80rem !important;
  margin-bottom: 3px !important;
}
.hero-bistrot .kpi-pill__value{
  color: var(--b-text) !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}
.hero-bistrot .kpi-sub__label{
  color: color-mix(in oklab, var(--b-muted), transparent 20%) !important;
  font-size: .8rem !important;
}
.hero-bistrot .kpi-sub__value{
  color: var(--b-text) !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  white-space: nowrap !important;
}

/* Delta (colores) */
.kpi-up{ color:#00B65A; }
.kpi-down{ color:#F87171; }
.kpi-flat{ color:rgba(234,247,255,.85); }

/* ---------- Ventas hoy vs. ayer ---------- */
.kpi-sales-inline{ padding: 10px 12px !important; }
.kpi-sales-title{ color: var(--b-muted); font-size:.80rem; /*margin-bottom:4px;*/ }
.kpi-sales-values{
  display:flex; align-items:baseline; gap:10px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color: var(--b-text); font-weight:700;
}
.kpi-sales-item .lbl{ font-size:.85rem; font-weight:600; opacity:.8; margin-right:4px; }
.kpi-delta{ display:inline-flex; align-items:center; gap:4px; font-size:.90rem; margin-left:2px; transform:translateY(-1px); }
.kpi-delta i{ font-size:1rem; line-height:1; }
.kpi-sales-values .sep{ opacity:.35; }

/* ---------- Última transacción ---------- */
.hero-bistrot .tx-meta{
  margin-top: 8px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
}
.hero-bistrot .tx-label{ display:block; font-size:.78rem; color:var(--b-muted); }
.hero-bistrot .tx-val{ display:block; font-weight:700; color:var(--b-text); margin-top:2px; font-size:.95rem; white-space:nowrap; }

/* ===== Desktop: eliminar hueco y acomodar filas ===== */
@media (min-width:1200px){
  .hero-bistrot .hero6-grid{
    grid-template-columns: 1.25fr 0.75fr !important;
    /* La ilustración ocupa 2 filas; la card "under" se vuelve full-width abajo */
    grid-template-areas:
      "head  head"
      "kpis  art"
      "last  art"
      "under under" !important;
    align-items: start !important;
    row-gap: 14px !important;
  }

  /* Subir un toque la ilustración (ajustá el valor a gusto) */
  .hero-bistrot .hero-ill{
    transform: translateY(-10px) !important;
  }

  /* Aseguramos que la card inferior se estire a todo el ancho */
  .hero-bistrot .hero6-under{
    justify-self: stretch;
    max-width: none; /* sobrescribe tu 420px */
  }
}


/* ******************************************* */