/* ── Reset ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Variables ──────────────────────────────────── */
:root {
  --bg:        #f9fafb;
  --surface:   #ffffff;
  --surface2:  #f3f4f6;
  --border:    #e5e7eb;
  --border2:   #d1d5db;
  --text:      #111827;
  --text2:     #6b7280;
  --text3:     #9ca3af;
  --green:     #16a34a;
  --green-bg:  #dcfce7;
  --amber:     #b45309;
  --amber-bg:  #fef3c7;
  --red:       #dc2626;
  --red-bg:    #fee2e2;
  --blue:      #1d4ed8;
  --blue-bg:   #dbeafe;
  --gray-bg:   #f3f4f6;
  --radius:    8px;
  --radius-lg: 12px;
  --shadow:    0 1px 3px rgba(0,0,0,.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:       #0f1117;
    --surface:  #1a1d27;
    --surface2: #232635;
    --border:   #2e3244;
    --border2:  #3d4259;
    --text:     #f1f3f9;
    --text2:    #8b92a9;
    --text3:    #555e78;
    --green:     #4ade80;
    --green-bg:  #052e16;
    --amber:     #fcd34d;
    --amber-bg:  #1c1500;
    --red:       #f87171;
    --red-bg:    #1f0707;
    --blue:      #93c5fd;
    --blue-bg:   #0b1733;
    --gray-bg:   #1e2130;
  }
}

/* ── Base ───────────────────────────────────────── */
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

/* ── App wrapper ────────────────────────────────── */
.app {
  max-width: 1140px;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
  position: relative;
}

/* ── Toast ──────────────────────────────────────── */
.toast {
  display: none;
  position: fixed;
  top: 14px;
  right: 14px;
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid var(--green);
  border-radius: var(--radius);
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  z-index: 999;
  box-shadow: var(--shadow);
}

/* ── Header ─────────────────────────────────────── */
.hdr {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  box-shadow: var(--shadow);
}
.hdr h1 { font-size: 18px; font-weight: 600; color: var(--text); }
.hdr p  { font-size: 12px; color: var(--text2); margin-top: 2px; }
.hdr-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Tabs ───────────────────────────────────────── */
.tabs { display: flex; gap: 5px; margin-bottom: 1rem; flex-wrap: wrap; }
.tab {
  padding: 6px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: 13px;
  cursor: pointer;
  background: var(--surface);
  color: var(--text2);
  font-weight: 500;
  transition: all .15s;
}
.tab:hover { background: var(--surface2); color: var(--text); }
.tab.active { background: var(--blue-bg); color: var(--blue); border-color: var(--blue); }

/* ── Card ───────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}

/* ── Section label ──────────────────────────────── */
.sl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* ── Form group ─────────────────────────────────── */
.fg { display: flex; flex-direction: column; gap: 4px; }
.fg label { font-size: 12px; color: var(--text2); font-weight: 500; }
.fg input, .fg select, .fg textarea {
  padding: 8px 10px;
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(29,78,216,.12);
}

/* ── Grids ──────────────────────────────────────── */
.g2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 10px; margin-bottom: 12px; }
.g3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 12px; }

/* ── Days grid ──────────────────────────────────── */
.days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.dg { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.dg label { font-size: 11px; color: var(--text2); font-weight: 500; }
.dg input {
  padding: 8px 3px;
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
  text-align: center;
  width: 100%;
}
.dg input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29,78,216,.12); }

/* ── Calc bar ───────────────────────────────────── */
.cbar {
  display: flex;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 14px;
}
.ci { flex: 1; padding: 10px 12px; border-right: 1px solid var(--border); }
.ci:last-child { border-right: none; }
.cl { font-size: 10px; color: var(--text2); margin-bottom: 3px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.cv { font-size: 15px; font-weight: 600; color: var(--text); }
.ci.green .cv { color: var(--green); }
.ci.amber .cv { color: var(--amber); }
.ci.red   .cv { color: var(--red); }

/* ── Metrics ────────────────────────────────────── */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.mc {
  background: var(--surface2);
  border-radius: var(--radius);
  padding: 10px 12px;
  border: 1px solid var(--border);
}
.ml { font-size: 11px; color: var(--text2); margin-bottom: 3px; font-weight: 500; }
.mv { font-size: 19px; font-weight: 600; color: var(--text); }
.mc.green .mv { color: var(--green); }
.mc.amber .mv { color: var(--amber); }
.mc.red   .mv { color: var(--red); }

/* ── Buttons ────────────────────────────────────── */
.btn {
  padding: 7px 15px;
  border-radius: var(--radius);
  border: 1px solid var(--border2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: var(--surface);
  color: var(--text);
  transition: all .15s;
}
.btn:hover { background: var(--surface2); }
.btn.pri { background: var(--blue-bg); color: var(--blue); border-color: var(--blue); }
.btn.pri:hover { opacity: .85; }
.btn.suc { background: var(--green-bg); color: var(--green); border-color: var(--green); }
.btn.suc:hover { opacity: .85; }
.btn.warn { background: var(--amber-bg); color: var(--amber); border-color: var(--amber); }
.btn.dng { border-color: var(--red); color: var(--red); background: transparent; }
.btn.dng:hover { background: var(--red-bg); }
.btn-row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }

/* ── Table ──────────────────────────────────────── */
.tw { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 600px; }
th {
  text-align: left;
  padding: 7px 9px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--text2);
  font-size: 11px;
  white-space: nowrap;
  background: var(--surface2);
}
td {
  padding: 7px 9px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  white-space: nowrap;
}
tr:hover td { background: var(--surface2); }

/* ── Badges ─────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 600;
}
.bs  { background: var(--green-bg); color: var(--green); }
.bw  { background: var(--amber-bg); color: var(--amber); }
.bd  { background: var(--red-bg);   color: var(--red);   }
.bi  { background: var(--blue-bg);  color: var(--blue);  }
.bg  { background: var(--gray-bg);  color: var(--text2); }

/* ── Puesto tags ────────────────────────────────── */
.ptag { display: inline-block; padding: 2px 7px; border-radius: var(--radius); font-size: 11px; font-weight: 600; }
.t-op  { background: #dbeafe; color: #1e40af; }
.t-sup { background: #fef3c7; color: #92400e; }
.t-peon{ background: #f3f4f6; color: #374151; }
.t-tec { background: #d1fae5; color: #065f46; }

/* ── Empty state ────────────────────────────────── */
.empty { text-align: center; padding: 2rem; color: var(--text3); font-size: 13px; }

/* ── Row item (config lists) ────────────────────── */
.ri { display: flex; gap: 7px; align-items: center; margin-bottom: 7px; flex-wrap: wrap; }
.ri input, .ri select {
  padding: 6px 9px;
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
}
.ri input:focus, .ri select:focus { outline: none; border-color: var(--blue); }

/* ── Lote grid ──────────────────────────────────── */
.lote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; margin-bottom: 10px; }
.lote-item { display: flex; gap: 8px; align-items: center; }
.lote-item label { font-size: 12px; color: var(--text2); min-width: 100px; flex: 1; }
.lote-item input {
  width: 80px;
  padding: 5px 8px;
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
  text-align: center;
}
.lote-item input:focus { outline: none; border-color: var(--blue); }

/* ── Recibo ─────────────────────────────────────── */
.recibo {
  max-width: 580px;
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  background: var(--surface);
}
.recibo-hdr { text-align: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.recibo table { min-width: 0; width: 100%; }
.recibo td { white-space: normal; }

/* ── Total label ────────────────────────────────── */
.total-label { font-size: 13px; color: var(--text2); font-weight: 500; }

/* ── Header select ──────────────────────────────── */
#sg {
  padding: 7px 11px;
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
  font-weight: 500;
}
#sg:focus { outline: none; border-color: var(--blue); }

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 600px) {
  .days-grid { grid-template-columns: repeat(4, 1fr); }
  .cbar { flex-wrap: wrap; }
  .ci { flex: 0 0 50%; border-bottom: 1px solid var(--border); }
  .tabs .tab { font-size: 12px; padding: 5px 10px; }
}

/* ── Print styles ───────────────────────────────── */
@media print {
  body { background: #fff; color: #000; }
  .app > *:not(.recibo) { display: none !important; }
}