:root{
  --asphalt: #1c1e1f;
  --surface: #242729;
  --surface-alt: #2c3033;
  --line: #3a3e41;
  --amber: #f5a300;
  --amber-dim: #a86e00;
  --steel: #6f93c2;
  --duty: #3fa66b;
  --duty-dim: #274a37;
  --off: #7c8288;
  --danger: #d3665a;
  --danger-dim: #4a2622;
  --justificado: #d69a3b;
  --justificado-dim: #4a3a1c;
  --text: #f3f1ec;
  --muted: #a7acb1;
  --radius-s: 3px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--asphalt);
  color: var(--text);
  font-family: 'Work Sans', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,.brand{
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.01em;
  margin: 0;
}

a{ color: inherit; text-decoration: none; }
button{ font-family: 'Work Sans', sans-serif; cursor: pointer; }
:focus-visible{ outline: 2px solid var(--amber); outline-offset: 2px; }

.hazard-strip{
  height: 8px;
  width: 100%;
  background: repeating-linear-gradient(-45deg, var(--amber) 0 18px, var(--asphalt) 18px 36px);
}

/* ---------- Header / nav ---------- */
header.site{ background: var(--surface); border-bottom: 1px solid var(--line); }

.header-inner{
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.brand-block{ display: flex; align-items: center; gap: 12px; }
.brand-block img{ display: block; }
.brand{ font-size: 22px; font-weight: 700; line-height: 1; }
.brand small{
  display: block;
  font-family: 'Work Sans', sans-serif;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 400;
  margin-top: 3px;
}

nav.tabs{ display: flex; gap: 4px; background: var(--surface-alt); padding: 4px; border-radius: var(--radius-s); }
nav.tabs a{
  background: transparent;
  color: var(--muted);
  padding: 9px 16px;
  font-size: 14.5px;
  font-weight: 500;
  border-radius: 2px;
  transition: background 0.15s ease, color 0.15s ease;
}
nav.tabs a:hover{ color: var(--text); }
nav.tabs a.active{ background: var(--amber); color: #1c1400; font-weight: 600; }

main{ max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ---------- Hero ---------- */
.hero{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 72px 0 56px;
  border-bottom: 1px solid var(--line);
}
.hero h1{ font-size: 44px; font-weight: 600; line-height: 1.15; max-width: 11ch; }
.hero p.lead{ margin-top: 18px; max-width: 46ch; color: var(--muted); font-size: 17px; }
.hero-actions{ margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }

.hero-plate{ border: 1px solid var(--line); background: var(--surface); padding: 22px; border-left: 4px solid var(--amber); }
.hero-plate .num{ font-family: 'Oswald', sans-serif; font-size: 30px; font-weight: 600; color: var(--amber); }
.hero-plate .num-label{ color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.hero-plate .rule{ height: 1px; background: var(--line); margin: 16px 0; }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: transparent; color: var(--text);
  padding: 12px 20px; font-size: 14.5px; font-weight: 500;
  border-radius: var(--radius-s);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.btn:hover{ border-color: var(--amber); }
.btn.primary{ background: var(--amber); border-color: var(--amber); color: #1c1400; font-weight: 600; }
.btn.primary:hover{ background: #ffb520; }
.btn.danger{ background: var(--danger); border-color: var(--danger); color: #2a0b06; font-weight: 600; }
.btn.danger:hover{ background: #e17a6e; }
.btn.small{ padding: 7px 12px; font-size: 13px; }
.btn:disabled{ opacity: 0.5; cursor: not-allowed; }

/* ---------- Services / how it works ---------- */
.services{ padding: 56px 0; border-bottom: 1px solid var(--line); }
.services h2{ font-size: 26px; font-weight: 600; margin-bottom: 28px; }
.service-row{ display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); }
.service-row:last-child{ border-bottom: 1px solid var(--line); }
.service-row .mark{ font-family: 'Oswald', sans-serif; font-size: 15px; color: var(--amber); padding-top: 2px; }
.service-row h3{ font-size: 18px; font-weight: 600; }
.service-row p{ margin: 6px 0 0; color: var(--muted); max-width: 60ch; }

.how{ padding: 56px 0 72px; }
.how h2{ font-size: 26px; font-weight: 600; margin-bottom: 10px; }
.how p.lead{ color: var(--muted); max-width: 60ch; margin-bottom: 28px; }
.how-steps{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.how-step{ border-top: 2px solid var(--amber); padding-top: 14px; }
.how-step h3{ font-size: 16px; font-weight: 600; }
.how-step p{ margin: 8px 0 0; color: var(--muted); font-size: 14.5px; }

/* ---------- Public roster ---------- */
.roster-head{ padding: 56px 0 8px; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.roster-head h1{ font-size: 30px; font-weight: 600; }
.roster-head p{ color: var(--muted); margin-top: 8px; max-width: 55ch; }
.refresh-link{ background: none; border: none; color: var(--steel); font-size: 14px; font-weight: 500; padding: 8px 0; }
.refresh-link:hover{ text-decoration: underline; }
.roster{ padding: 24px 0 72px; display: grid; gap: 12px; }

.operator-card{
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px;
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--duty);
  padding: 18px 20px;
}
.duty-dot{ width: 10px; height: 10px; border-radius: 50%; background: var(--duty); box-shadow: 0 0 0 4px var(--duty-dim); }
.operator-info .name{ font-weight: 600; font-size: 16.5px; }
.operator-info .rank{ color: var(--amber); font-size: 12.5px; margin-top: 3px; font-weight: 500; }
.operator-info .since{ color: var(--muted); font-size: 13px; margin-top: 3px; }
.phone-block{ display: flex; align-items: center; gap: 10px; }
.phone-num{ font-family: 'Oswald', sans-serif; font-size: 17px; letter-spacing: 0.02em; }
.copy-btn{
  background: var(--surface-alt); border: 1px solid var(--line); color: var(--text);
  padding: 8px 14px; font-size: 13px; font-weight: 500; border-radius: var(--radius-s); min-width: 96px;
}
.copy-btn:hover{ border-color: var(--amber); }
.copy-btn.copied{ background: var(--duty-dim); border-color: var(--duty); color: #cdf3da; }

.empty-state{ border: 1px dashed var(--line); padding: 40px 24px; text-align: center; color: var(--muted); }
.empty-state strong{ display:block; color: var(--text); font-size: 17px; margin-bottom: 6px; font-family:'Oswald', sans-serif; font-weight:600; }

/* ---------- Auth forms (login, setup) ---------- */
.auth-wrap{ padding: 56px 0 80px; max-width: 440px; margin: 0 auto; }
.auth-wrap h1{ font-size: 26px; font-weight: 600; text-align: center; }
.auth-wrap > p.sub{ text-align:center; color: var(--muted); margin-top:8px; font-size:14.5px; }

.field{ margin-bottom: 16px; }
.field label{ display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input, .field select{
  width: 100%; background: var(--surface); border: 1px solid var(--line); color: var(--text);
  padding: 11px 12px; font-size: 15px; font-family: 'Work Sans', sans-serif; border-radius: var(--radius-s);
}
.field input:focus, .field select:focus{ border-color: var(--amber); }

.form-error{
  background: rgba(211,102,90,0.12); border: 1px solid var(--danger); color: #f3c3bc;
  padding: 10px 14px; font-size: 13.5px; border-radius: var(--radius-s); margin-bottom: 16px;
}
.form-note{ color: var(--muted); font-size: 12.5px; margin-top: 18px; line-height: 1.5; text-align: center; }

/* ---------- Dashboard (mi-cuenta) ---------- */
.dash{ padding: 56px 0 80px; }
.dash-top{ display:flex; justify-content: space-between; align-items:flex-start; flex-wrap: wrap; gap: 16px; margin-bottom: 32px; }
.dash-top h1{ font-size: 26px; font-weight: 600; }
.dash-top p{ color: var(--muted); margin-top:6px; }
.logout-link{ background:none; border:none; color: var(--muted); font-size: 13.5px; padding: 8px 0; }
.logout-link:hover{ color: var(--text); text-decoration: underline; }

.status-panel{
  background: var(--surface); border: 1px solid var(--line); padding: 28px;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; margin-bottom: 28px;
}
.status-panel.on{ border-left: 3px solid var(--duty); }
.status-panel.off{ border-left: 3px solid var(--off); }
.status-label{ display:flex; align-items:center; gap:10px; font-family:'Oswald', sans-serif; font-size: 20px; font-weight:600; }
.status-label .dot{ width:11px; height:11px; border-radius:50%; }
.status-panel.on .dot{ background: var(--duty); box-shadow: 0 0 0 4px var(--duty-dim); }
.status-panel.off .dot{ background: var(--off); }
.status-sub{ color: var(--muted); font-size: 13.5px; margin-top: 6px; }

.dash-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 32px; }
.dash-box{ background: var(--surface); border: 1px solid var(--line); padding: 20px; }
.dash-box h3{ font-size: 14px; color: var(--muted); font-weight: 500; margin-bottom: 10px; }
.dash-box .val{ font-family:'Oswald', sans-serif; font-size: 19px; font-weight: 600; }

/* ---------- Weekly hours table ---------- */
.week-block{ background: var(--surface); border: 1px solid var(--line); padding: 24px; }
.week-block h2{ font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.week-block .week-sub{ color: var(--muted); font-size: 13px; margin-bottom: 18px; }

.week-nav{ display:flex; align-items:center; justify-content: space-between; margin-bottom: 16px; gap: 10px; }
.week-nav .week-range{ font-family:'Oswald', sans-serif; font-size: 14.5px; color: var(--text); }

.week-table{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.day-cell{
  border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px 8px;
  text-align: center; background: var(--surface-alt);
}
.day-cell .dow{ font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.day-cell .dnum{ font-family:'Oswald', sans-serif; font-size: 17px; margin-top: 4px; }
.day-cell .dhoras{ font-size: 12px; margin-top: 6px; color: var(--muted); }

.day-cell.trabajado{ background: var(--duty-dim); border-color: var(--duty); }
.day-cell.trabajado .dhoras{ color: #cdf3da; }
.day-cell.justificado{ background: var(--justificado-dim); border-color: var(--justificado); }
.day-cell.justificado .dhoras{ color: #f3ddb0; }
.day-cell.ausente{ background: var(--danger-dim); border-color: var(--danger); }
.day-cell.ausente .dhoras{ color: #f3c3bc; }
.day-cell.pendiente{ border-style: dashed; }
.day-cell.futuro{ opacity: 0.45; }

.day-cell.clickable{ cursor: pointer; }
.day-cell.clickable:hover{ border-color: var(--amber); }

.week-totals{ display:flex; gap: 24px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.week-totals .tot{ }
.week-totals .tot .label{ font-size: 12.5px; color: var(--muted); }
.week-totals .tot .value{ font-family:'Oswald', sans-serif; font-size: 20px; font-weight: 600; color: var(--amber); }

/* ---------- Admin ---------- */
.admin-wrap{ max-width: 900px; margin: 0 auto; padding: 56px 0 80px; }
.admin-head{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:16px; margin-bottom:28px; }
.admin-head h1{ font-size: 26px; font-weight: 600; }
.admin-head p{ color: var(--muted); margin-top:6px; }

.create-box{ background:var(--surface); border:1px solid var(--line); padding:24px; margin-bottom:32px; }
.create-box h2{ font-size:16px; font-weight:600; margin-bottom:16px; font-family:'Oswald',sans-serif; }
.create-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; }
.create-grid .field{ margin-bottom:0; }
.create-grid .full{ grid-column:1/-1; }

.section-title{ font-size: 14px; color: var(--muted); margin: 0 0 14px; }

.emp-row{ background:var(--surface); border:1px solid var(--line); padding:16px 18px; margin-bottom:10px; }
.emp-row-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.emp-row .name{ font-weight:600; font-size:15.5px; }
.emp-row .meta{ color:var(--muted); font-size:13px; margin-top:3px; }
.emp-row-actions{ display:flex; gap:8px; flex-wrap: wrap; }
.emp-row-actions button{
  background:var(--surface-alt); border:1px solid var(--line); color:var(--text);
  padding:7px 12px; font-size:13px; border-radius:var(--radius-s);
}
.emp-row-actions button:hover{ border-color:var(--amber); }
.emp-row-actions button.del:hover{ border-color:var(--danger); color:#f3c3bc; }

.badge-duty{ display:inline-block; font-size:11.5px; padding:3px 8px; border-radius:2px; margin-left:8px; }
.badge-duty.on{ background:var(--duty-dim); color:#cdf3da; }
.badge-duty.off{ background:var(--surface-alt); color:var(--muted); }

.emp-edit-form{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.emp-week{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }

.despedidos-row{ display:flex; justify-content:space-between; gap:12px; padding: 12px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.despedidos-row:last-child{ padding-bottom: 0; }
.despedidos-row .name{ font-weight: 600; }
.despedidos-row .meta{ color: var(--muted); font-size: 13px; margin-top: 2px; }
.despedidos-row .fecha{ color: var(--muted); font-size: 13px; white-space: nowrap; }

.tab-strip{ display:flex; gap: 4px; background: var(--surface-alt); padding:4px; border-radius: var(--radius-s); margin-bottom: 28px; width: fit-content; }
.tab-strip button{ background: transparent; border:none; color: var(--muted); padding: 9px 18px; font-size: 14px; font-weight:500; border-radius: 2px; }
.tab-strip button.active{ background: var(--amber); color:#1c1400; font-weight:600; }

footer.site{ border-top: 1px solid var(--line); padding: 28px 24px; text-align: center; color: var(--muted); font-size: 13px; }

@media (max-width: 760px){
  .hero{ grid-template-columns: 1fr; padding-top: 40px; }
  .hero h1{ font-size: 32px; max-width: none; }
  .how-steps{ grid-template-columns: 1fr; }
  .header-inner{ flex-direction: column; align-items: flex-start; }
  nav.tabs{ width: 100%; flex-wrap: wrap; }
  nav.tabs a{ flex: 1; text-align:center; }
  .operator-card{ grid-template-columns: auto 1fr; }
  .phone-block{ grid-column: 1 / -1; margin-top: 10px; }
  .dash-grid{ grid-template-columns: 1fr; }
  .status-panel{ grid-template-columns: 1fr; }
  .create-grid{ grid-template-columns: 1fr; }
  .week-table{ grid-template-columns: repeat(4, 1fr); }
}