/* ===== Tema cálido: beige / vainilla / cajeta (claro por defecto) ===== */
:root{
  --bg:#f4ecda; --panel:#fffdf6; --panel2:#ece0c8; --line:#e3d6ba;
  --txt:#413523; --muted:#917d5a; --accent:#b07a3c;
  --prod:#4e9a54; --unprod:#cf5a45; --neutral:#a1906f; --idle:#d3c4a2;
  --shadow:0 1px 3px rgba(120,90,40,.09);
}
:root[data-theme="dark"]{
  --bg:#201a11; --panel:#2b2417; --panel2:#362d1c; --line:#463b28;
  --txt:#efe7d5; --muted:#ab9c7e; --accent:#d59f5c;
  --prod:#5fb768; --unprod:#e0785f; --neutral:#9a8b6f; --idle:#4a4230;
  --shadow:none;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--txt);font-size:14px}
a{color:inherit;text-decoration:none}
.muted{color:var(--muted)}
.small{font-size:12px}
.num{text-align:right;font-variant-numeric:tabular-nums}
h1{font-size:22px;margin:.2em 0}
h2{font-size:15px;margin:28px 0 10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

/* ===== Layout con sidebar ===== */
.layout{display:flex;min-height:100vh}
.sidebar{width:212px;flex:0 0 212px;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar .brand{padding:20px 16px 12px;font-size:22px;font-weight:800;
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.sidebar .brand span{color:var(--accent)}
.sidebar .brand-logo{height:66px}
.brand-logo{height:34px;width:auto;flex:0 0 auto}
.mtop .brand{display:flex;align-items:center;gap:8px}
.mtop .brand-logo{height:28px}
.login-logo{height:170px;width:auto;display:block;margin:0 auto 2px}
.brand-word{font-size:38px;font-weight:800;color:var(--txt);margin:0 0 2px;
  text-align:center;letter-spacing:-.01em;line-height:1}
.ctx-path{word-break:break-all;color:var(--accent);font-size:11px}
.drange{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0}
.drange select,.drange input,.drange a.nav{background:var(--panel2);color:var(--txt);
  border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-size:13px;text-decoration:none}
.drange a.nav{font-weight:700;line-height:1}
.drange .lbl{font-size:13px;font-weight:700;min-width:90px;text-align:center}
.missing-box{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;margin-top:16px}
.missing-box h2{font-size:15px;margin:0 0 4px}
.missing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;margin-top:10px}
.missing-item{display:flex;align-items:center;gap:8px;background:var(--panel2);
  border-radius:8px;padding:7px 10px;min-width:0}
.missing-item .mname{font-weight:600;font-size:13px;flex:1;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;color:var(--txt)}
.missing-item .mreason{font-size:10px;flex:0 0 auto}
.mdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.mdot.vacation{background:var(--accent)} .mdot.noreg{background:var(--unprod)}
.mdot.noeq{background:var(--muted,#999)}
.sidebar nav{display:flex;flex-direction:column;gap:1px;flex:1;padding:6px 10px}
.navgroup{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  padding:14px 10px 4px;font-weight:700}
.sidebar nav a{padding:8px 12px;border-radius:8px;color:var(--txt);font-size:13.5px}
.sidebar nav a:hover{background:var(--panel2)}
.sidebar nav a.active{background:var(--accent);color:#fff}
.side-foot{padding:12px 14px;border-top:1px solid var(--line);display:flex;
  flex-direction:column;gap:8px;font-size:13px;color:var(--muted)}
.side-foot .who{color:var(--txt);font-weight:600}
.co-picker{display:flex;flex-direction:column;gap:3px;margin-bottom:4px}
.co-picker .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.co-picker select{background:var(--panel2);color:var(--txt);border:1px solid var(--accent);
  border-radius:8px;padding:7px;font-size:13px;font-weight:600}
.theme-btn{background:var(--panel2);color:var(--txt);border:1px solid var(--line);
  padding:7px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer}
.main{flex:1;min-width:0}
.wrap{max-width:1200px;margin:0 auto;padding:24px}
.brand.big{font-size:30px}

/* barra superior movil (hamburguesa) */
.mtop{display:none;align-items:center;gap:12px;padding:12px 16px;
  background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.hamb{background:none;border:0;color:var(--txt);font-size:22px;cursor:pointer;padding:0 4px}
.scrim{display:none}
@media(max-width:860px){
  .sidebar{position:fixed;left:-230px;top:0;z-index:60;transition:left .2s;box-shadow:var(--shadow)}
  .sidebar.open{left:0}
  .mtop{display:flex}
  .scrim.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:55}
}

/* login */
.login-card{max-width:340px;margin:8vh auto;background:var(--panel);
  padding:32px;border-radius:14px;border:1px solid var(--line);text-align:center}
.login-card form{text-align:left;margin-top:18px;display:flex;flex-direction:column;gap:6px}
.login-card label{font-size:12px;color:var(--muted)}
.login-card input{padding:10px;border-radius:8px;border:1px solid var(--line);
  background:var(--bg);color:var(--txt);margin-bottom:8px}
button{background:var(--accent);color:#fff;border:0;padding:11px;border-radius:8px;
  font-weight:600;cursor:pointer;font-size:14px}
button:hover{filter:brightness(1.1)}
.flash{padding:10px 14px;border-radius:8px;margin-bottom:12px}
.flash.error{background:color-mix(in srgb, var(--unprod) 15%, transparent);color:var(--unprod);
  border:1px solid color-mix(in srgb, var(--unprod) 35%, transparent)}
.flash.ok{background:color-mix(in srgb, var(--prod) 15%, transparent);color:var(--prod)}

/* page head */
.page-head{display:flex;justify-content:space-between;align-items:flex-start;
  gap:16px;margin-bottom:8px}
.daynav{display:flex;gap:12px;align-items:center;background:var(--panel);
  padding:8px 14px;border-radius:10px;border:1px solid var(--line)}
.daynav a{color:var(--accent);font-size:18px}

/* cards */
.filterbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.filterbar .search{flex:1;min-width:200px;padding:9px 12px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel);color:var(--txt)}
.filterbar select{padding:8px 10px;border-radius:8px;border:1px solid var(--line);
  background:var(--panel);color:var(--txt)}
.filterbar #empcount{margin-left:auto}
/* fila reusable de 6 KPIs (dashboard, resumen, prod. semana) */
.kpi6{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:14px 0}
.kpi6 .k{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.kpi6 .k .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.kpi6 .k .val{font-size:24px;font-weight:800;line-height:1.1;margin-top:3px;font-variant-numeric:tabular-nums}
.kpi6 .k .val small{font-size:13px;color:var(--muted);font-weight:600}
.kpi6 .k .val.dur{font-size:19px}
.kpi6 .k.good .val{color:var(--prod)} .kpi6 .k.bad .val{color:var(--unprod)} .kpi6 .k.acc .val{color:var(--accent)}
@media(max-width:760px){.kpi6{grid-template-columns:repeat(3,1fr)}}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
.machine-card{display:block;transition:border-color .15s}
.machine-card:hover{border-color:var(--accent)}
.card-top{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.mname{font-weight:600;font-size:15px}
.dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.dot.on{background:var(--prod);box-shadow:0 0 8px var(--prod)}
.dot.off{background:var(--neutral)}
.bar{height:8px;border-radius:5px;background:var(--panel2);overflow:hidden;display:flex;margin-bottom:12px}
.seg.prod{background:var(--prod)}
.seg.unprod{background:var(--unprod)}
.pcts{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;margin-bottom:12px;
  background:var(--panel2);border-radius:8px;padding:8px 2px;overflow:hidden}
.pcts span{display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center;
  min-width:0;padding:0 1px;
  border-right:1px solid var(--border,rgba(128,128,128,.18))}
.pcts span:last-child{border-right:0}
.pcts b{font-size:13px;font-weight:700;color:var(--prod);line-height:1.1;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.pcts b.dur{font-size:11px}
.pcts b.bad{color:var(--unprod)}
.pcts i{font-size:8px;color:var(--muted);font-style:normal;text-transform:uppercase;
  letter-spacing:.01em;white-space:nowrap}
.pcts span.over b{color:var(--accent,#e0a800)}
.pcts span.muted b{color:var(--muted)}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.exportbtns{display:inline-flex;gap:8px;margin-left:auto}
.exportbtns a{display:inline-flex;align-items:center;gap:5px;background:var(--panel2);
  color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:7px 12px;
  font-size:13px;font-weight:600}
.exportbtns a:hover{background:var(--line)}
.exportbtns a.xls{border-color:color-mix(in srgb,var(--prod) 45%,var(--line))}
.exportbtns a.pdf{border-color:color-mix(in srgb,var(--unprod) 45%,var(--line))}
.prodtable td.over,.prodtable .over{color:var(--accent,#e0a800);font-weight:700}
.prodtable tr.norow td{opacity:.5}
.prodtable th[title]{cursor:help}
.meals{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.meal-row{display:flex;align-items:center;gap:8px}
.meal-row .meal-lbl{min-width:80px;color:var(--muted);font-size:13px}
.meal-row input[type=time]{width:auto}
.pcts-lg{margin:14px 0 18px}
.pcts-lg b{font-size:26px}
.pcts-lg i{font-size:11px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin-bottom:10px}
.stats .lbl{color:var(--muted);display:block;font-size:11px;text-transform:uppercase}
.stats .good{color:var(--prod)}
.stats .bad{color:var(--unprod)}

/* kpis */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:16px 0}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px}
.kpi span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;margin-bottom:6px}
.kpi b{font-size:20px}
.kpi.good b{color:var(--prod)}
.kpi.bad b{color:var(--unprod)}

/* timeline */
.timeline{position:relative;height:44px;background:var(--panel2);border-radius:8px;
  border:1px solid var(--line);overflow:hidden}
.tl-seg{position:absolute;top:0;bottom:0;min-width:1px}
.tl-seg.productive{background:var(--prod)}
.tl-seg.unproductive{background:var(--unprod)}
.tl-seg.neutral{background:var(--neutral)}
.tl-seg.idle{background:var(--idle)}
.tl-axis{position:relative;height:18px;margin-top:2px}
.tl-axis span{position:absolute;transform:translateX(-50%);font-size:10px;color:var(--muted)}
.legend{display:flex;gap:18px;margin:16px 0;flex-wrap:wrap;color:var(--muted);font-size:12px}
.legend .sw{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:5px}
.sw.productive{background:var(--prod)}.sw.unproductive{background:var(--unprod)}
.sw.neutral{background:var(--neutral)}.sw.idle{background:var(--idle)}

/* tables */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.tbl{width:100%;border-collapse:collapse}
.tbl td,.tbl th{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}
.tbl th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase}
.tbl.detail .title-cell{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{font-size:11px;padding:2px 8px;border-radius:20px;background:var(--panel2)}
.tag.productive{background:color-mix(in srgb, var(--prod) 18%, transparent);color:var(--prod)}
.tag.unproductive{background:color-mix(in srgb, var(--unprod) 18%, transparent);color:var(--unprod)}
.tag.idle{background:color-mix(in srgb, var(--muted) 15%, transparent);color:var(--muted)}
.tag.neutral{background:color-mix(in srgb, var(--neutral) 18%, transparent);color:var(--neutral)}

/* asignacion */
.assign-box{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:16px;margin-bottom:20px}
.assign-box h2{margin-top:0}
.assign-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:10px 0;border-top:1px solid var(--line)}
.assign-row .st-id{flex:1 1 240px}
.assign-row select,.assign-row input{padding:8px;border-radius:7px;
  border:1px solid var(--line);background:var(--bg);color:var(--txt)}
.assign-row button{padding:8px 14px}

/* card empleado */
.emp-card .card-top{align-items:center}
.pct{margin-left:auto;font-size:22px;font-weight:700;color:var(--prod)}
.stats{grid-template-columns:1fr 1fr 1fr}
.nowrap{white-space:nowrap}

/* sesiones */
.tbl.sessions td{vertical-align:middle}
.minibar{width:120px}
.minibar i{display:block;height:8px;background:var(--accent);border-radius:4px}

/* nav links */
.topbar nav a{color:var(--muted);font-size:13px}
.topbar nav a:hover{color:var(--txt)}

/* dot de categoria */
.dotc{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
.dotc.good{background:var(--prod)}
.dotc.bad{background:var(--unprod)}

/* grafica de horas (tiempos muertos) */
.hourchart{display:flex;align-items:flex-end;gap:4px;height:180px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:12px;overflow-x:auto}
.hourcol{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1 0 26px;height:100%}
.hbar{flex:1;width:100%;max-width:26px;display:flex;flex-direction:column;
  justify-content:flex-end;background:var(--panel2);border-radius:4px;overflow:hidden}
.hbar .hidle{background:var(--idle)}
.hbar .hact{background:var(--prod)}
.hlbl{font-size:10px;color:var(--muted)}
.minibar i{background:var(--accent)}

/* admin: tabs, formularios */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.tabs a{padding:6px 12px;border-radius:8px;background:var(--panel);border:1px solid var(--line);
  color:var(--muted);font-size:13px}
.tabs a.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.rule-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:16px}
.rule-form input,.rule-form select,.form-grid input,.form-grid select{
  padding:8px;border-radius:7px;border:1px solid var(--line);background:var(--bg);color:var(--txt)}
.rule-form .inl,.inl{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:13px}
.small-btn{padding:6px 10px;font-size:12px}
.btn-link{display:inline-block;background:var(--accent);color:#fff;padding:9px 14px;
  border-radius:8px;font-weight:600;font-size:13px}
.btn-link:hover{filter:brightness(1.08)}
.small-btn.danger{background:color-mix(in srgb, var(--unprod) 15%, transparent);color:var(--unprod)}
code{background:var(--panel2);padding:1px 6px;border-radius:5px;font-size:12px}

.form-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;max-width:720px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.form-grid label,.block{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted)}
.form-grid input,.form-grid select{color:var(--txt)}
.block{margin:10px 0 6px}
.dias{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.chk{display:flex;align-items:center;gap:5px;color:var(--txt);font-size:13px;
  background:var(--panel2);padding:6px 10px;border-radius:8px}

/* jornadas */
.tbl.jornadas th,.tbl.jornadas td{white-space:nowrap;padding:6px 10px}
.tbl.jornadas .sticky{position:sticky;left:0;background:var(--bg);text-align:left;z-index:1}
.jcell{min-width:64px}
.jin{display:block;color:var(--prod);font-size:12px}
.jout{display:block;color:var(--unprod);font-size:12px}
.jcell.k-home{background:rgba(79,140,255,.08)}
.jcell.k-vacation{background:rgba(255,180,60,.08)}
.daytag{display:inline-block;font-size:9px;font-weight:700;padding:1px 5px;border-radius:4px;
  letter-spacing:.03em}
.daytag.home{background:color-mix(in srgb, var(--accent) 20%, transparent);color:var(--accent)}
.daytag.vac{background:color-mix(in srgb, #d99a2b 22%, transparent);color:#c58a1e}
.emp-card.on-vacation{opacity:.6}
.emp-card.on-vacation .bar{filter:grayscale(1)}

@media(max-width:700px){.two-col{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}}