/* ==========================================================================
   Bon Gout · MVP · paneles.css
   Lleva las pantallas de la aplicación (catálogo, pedidos, stock, ruta…) a la
   misma estética editorial de la landing: esquinas rectas, serif de alto
   contraste en los títulos, mayúsculas espaciadas en las etiquetas y el
   dorado del logo como único acento.

   Se carga DESPUÉS de styles.css, así que gana por orden y no hace falta
   pelear con especificidad.
   ========================================================================== */

/* ---------- Esquinas rectas en toda la aplicación ----------
   El botón flotante de WhatsApp queda redondo a propósito: es una convención
   que la gente reconoce y romperla no aporta nada. */
.logo,
.hero-feats span,
.demo-chip,
.nav button,
.nav button .dot,
.btn,
.btn.sm,
.input, .select, textarea.input,
.badge,
.stepper,
.stock-pill,
.notice,
.tl-chip,
.tl-hoy-tag,
.modal,
.toast,
.card,
.kpi,
.prod,
.scan-box,
.cam-frame::after,
#cam-video,
#mapa {
  border-radius: 0;
}

/* ---------- Titulares en serif ---------- */
.page-head h2,
.login-panel h2,
.modal-head h3,
.kpi .v,
.prod .precio,
.totals .l.big {
  font-family: var(--fuente-serif);
  font-weight: 400;
  letter-spacing: 0;
}
.page-head h2 { font-size: 28px; }
.login-panel h2 { font-size: 26px; }
.modal-head h3 { font-size: 19px; }
.kpi .v { font-size: 28px; }
.prod .precio { font-size: 21px; }
.totals .l.big { font-size: 19px; }

/* ---------- Etiquetas: mayúsculas espaciadas ---------- */
.kpi .k,
table.tbl th,
.field label,
.card-head h3,
.demo-users .t,
.prod .cat-tag {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 9.5px;
  font-weight: 600;
}
.card-head h3 { color: var(--txt-2); }
.field label { letter-spacing: .13em; font-size: 10px; }

/* ---------- Botones: planos y rectos ---------- */
.btn {
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 10.5px;
  font-weight: 600;
  padding: 11px 18px;
}
.btn.sm { padding: 8px 13px; font-size: 9.5px; letter-spacing: .11em; }
.btn.gold { color: #16130A; }
.btn.bad { background: #fff; color: var(--bad); border-color: #E0C4C0; }
.btn.wa { background: #25D366; color: #06301A; border-color: #25D366; }

/* ---------- Barra superior ---------- */
.topbar { border-bottom: 1px solid rgba(239,231,218,.12); }
.nav button {
  text-transform: uppercase; letter-spacing: .15em; font-size: 10px; font-weight: 600;
}
.who b { font-family: var(--fuente-serif); font-weight: 400; font-size: 15px; }

/* ---------- Tarjetas y tablas ---------- */
.card { box-shadow: none; border-color: var(--line); }
.card-head { background: #FDFBF7; }
table.tbl th { background: #FDFBF7; }
.kpi { box-shadow: none; }
.kpi.alert { background: #FDF6E9; border-color: #E8D3A8; }

/* ---------- Catálogo ---------- */
.prod { box-shadow: none; }
.prod:hover { border-color: var(--gold); }
.prod .nom { font-family: var(--fuente-serif); font-weight: 400; font-size: 16px; line-height: 1.28; }
.prod .cat-tag { color: var(--gold); }
.stepper button { background: #FDFBF7; }

/* ---------- Login ---------- */
.login-wrap { background: var(--ink); }
.login-hero {
  background:
    radial-gradient(820px 460px at 14% 12%, rgba(201,162,39,.14), transparent 62%),
    linear-gradient(165deg, #16232700 0%, #1F2E33 0%, #182428 100%);
}
.login-hero h1 {
  font-family: var(--fuente-serif); font-weight: 400;
  font-size: 38px; line-height: 1.12;
}
.hero-feats span { border-color: rgba(239,231,218,.14); background: rgba(239,231,218,.05); }
.demo-chip { background: #FDFBF7; }
.demo-chip:hover { border-color: var(--gold); background: var(--gold-dim); }

/* ---------- Pedidos: pasos del estado ---------- */
.step { text-transform: uppercase; letter-spacing: .1em; font-size: 9.5px; font-weight: 600; }

/* ---------- Estados y avisos ---------- */
.notice.warn { background: #FDF6E9; border-color: #E8D3A8; color: #7A4E08; }
.notice.bad  { background: #FBF1F0; border-color: #E5C8C4; color: #7E2A24; }
.notice.ok   { background: #F0F6F1; border-color: #C9DFCF; color: #24543A; }
.notice.info { background: #F1F5F8; border-color: #CBD9E2; color: #2A4A61; }
.notice { background: #FDFBF7; }

.stock-ok  { background: #F0F6F1; color: #24543A; }
.stock-low { background: #FDF6E9; color: #7A4E08; }
.stock-out { background: #FBF1F0; color: #7E2A24; }

.v-vencido { background: #FBF1F0; color: #7E2A24; border-color: #E5C8C4; }
.v-critico { background: #FDF6E9; color: #7A4E08; border-color: #E8D3A8; }
.v-pronto  { background: #FBF7E7; color: #6E5A07; border-color: #E4D9A4; }
.v-ok      { background: #F0F6F1; color: #24543A; border-color: #C9DFCF; }

/* ---------- Ruta ---------- */
.parada .ord { border-radius: 0; }

/* ---------- Modal ---------- */
.modal-foot { background: #FDFBF7; }

/* ---------- Impresión ---------- */
@media print {
  .remito { font-family: var(--fuente-ui); }
  .remito h1 { font-family: var(--fuente-serif); font-weight: 400; }
}