/* Nixtamaíz · Dashboard Operativo — identidad tomada de website/public/styles.css */
:root {
  --blue: #0244c3;
  --blue-dark: #06369a;
  --orange: #ff5b00;
  --orange-warm: #ef9135;
  --corn: #ffff96;
  --cream: #fffaf0;
  --paper: #fffdf8;
  --ink: #25221d;
  --muted: #6f685e;
  --line: #eadfce;
  --ok: #1d8a4b;
  --bad: #c62828;
  --shadow: 0 14px 40px rgba(77, 44, 10, .12);
  --radius: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--cream); color: var(--ink); font-family: "DM Sans", system-ui, sans-serif; line-height: 1.55; }
body, button, input, select { font: inherit; }
img { display: block; max-width: 100%; }
a { color: inherit; }

.brand-stripe { height: 10px; background: repeating-linear-gradient(90deg, var(--blue) 0 22px, var(--orange) 22px 39px, var(--orange-warm) 39px 56px, var(--corn) 56px 70px); }
.wrap { width: min(1240px, calc(100% - 36px)); margin-inline: auto; }

/* ---- Header ---- */
.app-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 253, 248, .95); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.header-inner { min-height: 70px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 8px 0; }
.brand img { width: 110px; height: 58px; object-fit: contain; }
.app-title { display: flex; flex-direction: column; }
.app-title strong { font-family: "Fraunces", serif; font-style: italic; color: var(--blue); font-size: 1.12rem; line-height: 1.2; }
.app-title span { font-size: .74rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.controls { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.controls label { font-size: .78rem; font-weight: 700; color: var(--muted); }
select, input[type="date"], input[type="number"], input[type="text"] {
  min-height: 42px; padding: 8px 12px; border: 2px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--ink); font-weight: 600; font-size: .92rem;
}
select:focus-visible, input:focus-visible, button:focus-visible { outline: 3px solid var(--corn); outline-offset: 2px; }
.badge-demo { background: var(--corn); border: 1.5px solid #d9d96a; color: #5c5a12; font-size: .72rem; font-weight: 800; letter-spacing: .06em; padding: 5px 11px; border-radius: 999px; text-transform: uppercase; }
.badge-live { background: #e2f5e9; border: 1.5px solid #9fdcb6; color: var(--ok); }

/* Header compacto en móvil: no fijo y controles en pares etiqueta+select */
@media (max-width: 640px) {
  .app-header { position: static; }
  .brand img { width: 78px; height: 42px; }
  .controls { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; margin: 0; }
  .controls .badge-demo { grid-column: 1 / -1; justify-self: start; }
}

/* ---- Layout ---- */
main { padding: 26px 0 60px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.section-title { font-family: "Fraunces", serif; font-style: italic; color: var(--blue); font-size: 1.3rem; margin-bottom: 4px; }
.section-sub { color: var(--muted); font-size: .86rem; margin-bottom: 12px; }

/* ---- KPI cards ---- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.kpi { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); border-top: 5px solid var(--kpi-c, var(--blue)); animation: kpi-in .45s cubic-bezier(.2, .7, .3, 1) both; }
.kpi:nth-child(2) { animation-delay: .05s; }
.kpi:nth-child(3) { animation-delay: .1s; }
.kpi:nth-child(4) { animation-delay: .15s; }
.kpi:nth-child(5) { animation-delay: .2s; }
.kpi:nth-child(6) { animation-delay: .25s; }
@keyframes kpi-in { from { opacity: 0; transform: translateY(12px); } }
.kpi .lbl { font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.kpi .val { font-family: "Fraunces", serif; font-size: 1.65rem; font-weight: 700; color: var(--ink); margin-top: 2px; }
.kpi .sub { font-size: .78rem; color: var(--muted); }
.kpi .sub.up { color: var(--ok); font-weight: 700; }
.kpi .sub.down { color: var(--bad); font-weight: 700; }

/* ---- Cards / paneles ---- */
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; }
.panel-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.panel-head .spacer { margin-left: auto; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

.chart-box { position: relative; height: 320px; }
.chart-box.sm { height: 260px; }

/* ---- Toggle píldoras ---- */
.pills { display: inline-flex; background: #f2ecdd; border-radius: 999px; padding: 4px; gap: 4px; }
.pills button { border: 0; background: transparent; padding: 7px 16px; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--muted); cursor: pointer; transition: background .2s, color .2s; }
.pills button.act { background: var(--blue); color: #fff; }

/* ---- Tablas ---- */
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
thead th { background: var(--blue); color: #fff; text-align: left; padding: 9px 12px; font-weight: 700; white-space: nowrap; }
thead th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody td { padding: 8px 12px; border-top: 1px solid var(--line); }
tbody tr:nth-child(even) td { background: #fbf7ec; }
tbody tr { transition: background .15s; }
tbody tr:hover td { background: #f6efdd; }
tfoot td { padding: 10px 12px; border-top: 2px solid var(--blue); font-weight: 800; background: #f4f8ff; }
.pos { color: var(--ok); font-weight: 700; }
.neg { color: var(--bad); font-weight: 700; }
.table-scroll { overflow-x: auto; }

/* ---- Botones ---- */
.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 22px; background: var(--orange); border: 2px solid var(--orange); border-radius: 999px; color: #fff; font-weight: 700; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.button:hover { background: #e84f00; border-color: #e84f00; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255, 91, 0, .25); }
.button-outline { background: transparent; border-color: var(--blue); color: var(--blue); }
.button-outline:hover { background: var(--blue); color: #fff; box-shadow: none; }

/* ---- Captura ---- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.form-grid .field { display: flex; flex-direction: column; gap: 4px; }
.form-grid label { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.form-note { margin-top: 10px; font-size: .8rem; color: var(--muted); }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 10px); background: var(--ink); color: #fff; padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: .88rem; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; z-index: 99; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- Reveal al hacer scroll (se activa por JS, progresivo) ---- */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .3, 1); }

@media (prefers-reduced-motion: reduce) {
  .kpi { animation: none; }
  .reveal { opacity: 1; transform: none; }
  .toast, tbody tr, .pills button, .button { transition: none; }
}

footer { border-top: 1px solid var(--line); padding: 18px 0 34px; font-size: .8rem; color: var(--muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
footer a { color: var(--blue); font-weight: 700; text-decoration: none; }

/* ============================================================
   v0.2 — shell modular, login, y módulos nuevos
   ============================================================ */
:root { --corn-dark: #b8a300; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92em; }
.tenue { color: var(--muted); font-weight: 400; }
.vacio { color: var(--muted); padding: 22px 0; text-align: center; }

/* ---- Login ---- */
.login-gate { position: fixed; inset: 0; z-index: 200; background: var(--cream); display: grid; place-items: center; padding: 24px; overflow-y: auto; }
.login-gate[hidden] { display: none; }
.login-card { background: var(--paper); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); padding: 34px 32px; width: min(560px, 100%); text-align: center; }
.login-logo { width: 120px; margin: 0 auto 14px; }
.login-card h1 { font-family: "Fraunces", serif; font-style: italic; color: var(--blue); font-size: 1.6rem; }
.login-sub { color: var(--muted); font-size: .86rem; margin-bottom: 16px; }
.button-google { width: 100%; background: var(--blue); border-color: var(--blue); }
.button-google:hover { background: var(--blue-dark); border-color: var(--blue-dark); box-shadow: none; }
.button-google:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.login-nota { font-size: .76rem; color: var(--muted); margin-top: 10px; line-height: 1.5; }
.login-error { margin-top: 12px; padding: 11px 15px; background: #fbe5e3; border: 1.5px solid #f0b8b2;
  border-radius: 12px; color: var(--bad); font-size: .84rem; font-weight: 600; line-height: 1.5; text-align: left; }
.login-error[hidden] { display: none; }
.login-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 16px; color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login-usuarios { display: grid; gap: 8px; }
.user-opt { display: flex; gap: 12px; align-items: center; text-align: left; padding: 11px 14px; background: #fff; border: 2px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color .15s, transform .15s; }
.user-opt:hover { border-color: var(--orange); transform: translateX(3px); }
.user-opt-meta { display: flex; flex-direction: column; min-width: 0; }
.user-opt-meta b { font-size: .9rem; }
.user-opt-meta i { font-style: normal; font-size: .76rem; color: var(--blue); font-weight: 700; }
.user-opt-meta em { font-style: normal; font-size: .74rem; color: var(--muted); }
.avatar { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1rem; }

/* ---- Chip de usuario + nav de módulos ---- */
.user-chip { display: flex; align-items: center; gap: 9px; background: #fff; border: 2px solid var(--line); border-radius: 999px; padding: 4px 14px 4px 4px; cursor: pointer; transition: border-color .15s; }
.user-chip:hover { border-color: var(--orange); }
.user-chip .avatar { width: 30px; height: 30px; flex-basis: 30px; font-size: .82rem; }
.user-meta { display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
.user-meta b { font-size: .8rem; }
.user-meta i { font-style: normal; font-size: .68rem; color: var(--muted); font-weight: 700; }
.ctx[hidden] { display: none; }

.modnav { display: flex; gap: 4px; overflow-x: auto; padding: 0 18px; border-top: 1px solid var(--line); scrollbar-width: none; }
.modnav::-webkit-scrollbar { display: none; }
.modnav button { border: 0; background: transparent; padding: 12px 16px; font-size: .87rem; font-weight: 700; color: var(--muted); cursor: pointer; white-space: nowrap; border-bottom: 3px solid transparent; transition: color .15s, border-color .15s; }
.modnav button:hover { color: var(--ink); }
.modnav button.act { color: var(--blue); border-bottom-color: var(--orange); }
.modnav .ico { margin-right: 7px; opacity: .7; }

/* ---- Etiquetas ---- */
.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; vertical-align: middle; }
.tag-alta, .tag-ok { background: #e2f5e9; color: var(--ok); }
.tag-media { background: #fff3dc; color: #8a5a00; }
.tag-baja { background: #fbe5e3; color: var(--bad); }
.tag-molino { background: #ffece0; color: #a33800; }
.tag-tortilleria { background: #e6edfb; color: var(--blue); }
.tag-mostrador, .tag-punto_venta { background: #f2ecdd; color: var(--muted); }

/* ---- Barra de progreso en tabla ---- */
.bar { height: 8px; background: #f2ecdd; border-radius: 999px; overflow: hidden; min-width: 70px; }
.bar > i { display: block; height: 100%; border-radius: 999px; }
td.tick { text-align: center; }
td.tick .si { color: var(--ok); font-weight: 800; }
td.tick .no { color: #cfc6b6; font-weight: 800; }

/* ---- Vencimientos ---- */
.venc { display: grid; gap: 8px; }
.venc-item { display: grid; grid-template-columns: minmax(120px, 1.4fr) auto minmax(90px, auto) minmax(180px, 1.6fr) auto; gap: 12px; align-items: center; padding: 11px 14px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: 12px; font-size: .86rem; }
.venc-item.urge { border-left-color: var(--orange); }
.venc-item.vencido { border-left-color: #cfc6b6; }
.venc-suc { font-weight: 700; }
.venc-prov { font-size: .74rem; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.venc-monto { font-weight: 800; font-variant-numeric: tabular-nums; }
.venc-fecha { color: var(--muted); }
.venc-estado { font-size: .72rem; font-weight: 800; text-transform: uppercase; color: var(--ok); }
@media (max-width: 760px) { .venc-item { grid-template-columns: 1fr auto; } .venc-fecha, .venc-estado { grid-column: 1 / -1; } }

/* ---- Chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; flex-direction: column; padding: 7px 13px; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-size: .82rem; }
.chip i { font-style: normal; font-size: .68rem; color: var(--muted); text-transform: uppercase; font-weight: 700; }
.chip-sm { flex-direction: row; padding: 3px 10px; font-size: .76rem; font-weight: 700; }

/* ---- Ingesta ---- */
.ingesta { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ingesta-paso { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.ingesta-paso b { display: block; color: var(--blue); font-size: .82rem; margin-bottom: 5px; }
.ingesta-paso span { font-size: .8rem; color: var(--muted); line-height: 1.5; }

/* ---- Captura: cálculo en vivo ---- */
.previo { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 16px; padding: 14px; background: #f4f8ff; border: 1px solid #d8e3f8; border-radius: 14px; }
.previo > div { display: flex; flex-direction: column; }
.previo span { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.previo b { font-family: "Fraunces", serif; font-size: 1.3rem; }
.previo b.alerta { color: var(--bad); }

/* ---- Alertas de dirección ---- */
.alertas { display: grid; gap: 10px; }
.alerta { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: 14px; padding: 14px 18px; }
.alerta.alta { border-left-color: var(--bad); }
.alerta.media { border-left-color: var(--orange); }
.alerta-cab { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.alerta-pin { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 8px; }
.alerta.alta .alerta-pin { background: var(--bad); }
.alerta.media .alerta-pin { background: var(--orange); }
.alerta p { font-size: .86rem; color: var(--muted); line-height: 1.55; }
.alerta-accion { margin-top: 6px; font-size: .82rem !important; color: var(--ink) !important; }

/* ---- Mapa ---- */
.mapa-wrap { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 10px; }
.mapa-svg { width: 100%; height: auto; display: block; }
.mapa-svg .nodo { cursor: default; }
.mapa-svg .nodo:hover circle:first-of-type, .mapa-svg .nodo:focus circle:first-of-type { r: 40; transition: r .2s; }
.mapa-lbl { font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 700; fill: var(--ink); }
/* ---- Rejilla de captura semanal ---- */
.rejilla th { vertical-align: bottom; }
.rejilla thead .rej-fecha { display: block; font-weight: 500; font-size: .68rem; opacity: .75; letter-spacing: 0; }
.rejilla td { padding: 5px 6px; }
.rejilla td:first-child { white-space: nowrap; }
.rej-in { width: 78px; min-height: 38px; padding: 6px 8px; text-align: right;
  border: 1.5px solid var(--line); border-radius: 9px; background: #fff; font-variant-numeric: tabular-nums; }
.rej-in:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(2, 68, 195, .12); }
.rej-in::placeholder { color: #c3bcae; }
.rej-merma { border-color: #e6d8bb; background: #fffdf5; }
.rej-total { font-weight: 800; color: var(--blue); }
.rejilla tfoot td { background: #f4f8ff; }
.rej-acciones { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.rej-acciones .form-note { margin: 0; }
@media (max-width: 620px) {
  .rej-acciones .button { width: 100%; }
}

/* ---- Direcciones y navegación ---- */
.direcciones { display: grid; gap: 10px; }
.dir { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 13px 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.dir-info { display: flex; flex-direction: column; gap: 3px; flex: 1 1 300px; min-width: 0; }
.dir-nombre { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dir-calle { font-size: .84rem; color: var(--muted); }
.dir-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.button-sm { min-height: 36px; padding: 7px 15px; font-size: .82rem; }
@media (max-width: 620px) {
  .dir { align-items: stretch; }
  .dir-acciones { width: 100%; }
  .dir-acciones .button { flex: 1; }
}

.mapa-svg .nodo { cursor: pointer; }
.mapa-svg .nodo:focus { outline: none; }
.mapa-svg .nodo:focus-visible circle:nth-of-type(2) { stroke: var(--corn); stroke-width: 5; }
.mapa-leyenda { display: flex; flex-wrap: wrap; gap: 16px; padding: 12px 6px 4px; font-size: .78rem; color: var(--muted); }
.mapa-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.pt { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.pt.naranja { background: var(--orange); }
.pt.azul { background: var(--blue); }
.pt.verde { background: var(--ok); }
.pt.chico { width: 8px; height: 8px; }
.pt.linea { width: 18px; height: 0; border-top: 2px dashed var(--line); border-radius: 0; }
.sin-ubicar { margin-top: 10px; padding: 10px 12px; background: #fbf7ec; border-radius: 12px; font-size: .8rem; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ---- Pendientes ---- */
.pendientes { display: grid; gap: 9px; }
.pend { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; display: flex; flex-direction: column; gap: 3px; }
.pend b { font-size: .9rem; }
.pend span { font-size: .78rem; color: var(--muted); line-height: 1.45; }