/* Bitácora SAU — usa exclusivamente las variables que pinta public/js/themes.js
   (--bg, --card, --ink, --muted, --line, --brand, --brand-ink, --accent, --accent-ink,
   --on, --on-soft, --off, --s1, --s2, --warn, --warn-bg, --ok-bg, --focus).
   No hay colores sueltos aquí: cambiar de plantilla o de modo claro/oscuro repinta
   estas variables en <html style="..."> y toda la página sigue sin tocar el CSS. */

*{box-sizing:border-box;}
html{color-scheme:light;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.wrap{max-width:720px; margin:0 auto; padding:24px 18px 70px;}
h1{font-size:22px; margin:0 0 4px;}
p.sub{color:var(--muted); margin:0 0 20px; font-size:14px;}

.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:20px;
  margin-bottom:16px;
}

label{display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:4px;}
input,textarea,select{
  width:100%;
  padding:9px 10px;
  border-radius:8px;
  border:1.5px solid var(--line);
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  margin-bottom:12px;
  font-family:inherit;
}
input:focus,textarea:focus,select:focus{outline:2px solid var(--focus); border-color:var(--focus);}

.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:480px){ .row2{grid-template-columns:1fr;} }

button{
  background:var(--brand);
  color:var(--brand-ink);
  border:none;
  border-radius:9px;
  padding:10px 18px;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  font-family:inherit;
}
button:hover{filter:brightness(1.05);}
button.ghost{background:none; border:1px solid var(--line); color:var(--muted);}
button.ghost:hover{background:var(--on-soft); filter:none;}

.err{color:var(--warn); font-size:13px; min-height:18px;}

table{width:100%; border-collapse:collapse; font-size:13.5px;}
td,th{padding:7px 4px; border-bottom:1px solid var(--line); text-align:left;}
td.num{text-align:right; font-family:ui-monospace,Menlo,monospace;}
th{color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em;}
tr:hover td{background:color-mix(in srgb, var(--ink) 4%, transparent);}
.del{color:var(--muted); cursor:pointer; text-align:center;}
.del:hover{color:var(--warn);}

.top{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}

/* ---- selector de tema (claro/oscuro + 6 plantillas) ---- */
.theme-bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px;}
.theme-bar select{width:auto; margin:0; padding:7px 9px; font-size:13px;}
.mode-seg{display:inline-flex; border:1.5px solid var(--line); border-radius:9px; overflow:hidden;}
.mode-seg button{
  background:var(--card); color:var(--muted); border-radius:0; padding:7px 12px; font-size:13px; font-weight:600;
}
.mode-seg button + button{border-left:1.5px solid var(--line);}
.mode-seg button.on{background:var(--brand); color:var(--brand-ink);}
.mode-seg button:hover{filter:none; background:var(--on-soft);}
.mode-seg button.on:hover{background:var(--brand); filter:brightness(1.05);}

[hidden]{display:none!important;}

/* ---- kpis ---- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-bottom:16px;}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px;}
.kpi-label{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700;}
.kpi-value{font-family:ui-monospace,Menlo,monospace; font-size:20px; font-weight:600; margin-top:2px;}
.kpi-sub{font-size:11.5px; color:var(--muted); margin-top:2px;}

/* ---- navegación por día ---- */
.day-nav{display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap;}
.day-nav input[type=date]{width:auto; margin:0;}
.navbtn{background:var(--card); border:1.5px solid var(--line); color:var(--ink); border-radius:8px; width:34px; height:34px; padding:0; font-size:15px; cursor:pointer;}
.navbtn:hover{background:var(--on-soft); filter:none;}

/* ---- desplegables ---- */
details.grp{border:1px solid var(--line); border-radius:12px; margin-bottom:14px; background:var(--card); overflow:hidden;}
details.grp summary{padding:13px 16px; cursor:pointer; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); list-style:none; display:flex; align-items:center; gap:8px;}
details.grp summary::-webkit-details-marker{display:none;}
details.grp summary:before{content:'▸'; transition:transform .15s; font-size:11px;}
details.grp[open] summary:before{transform:rotate(90deg);}
details.grp .inner{padding:4px 16px 16px;}
.subnote{font-size:11.5px; color:var(--muted); margin:2px 0 10px; line-height:1.5;}

/* ---- checksum ---- */
.checksum{font-size:11.5px; padding:6px 9px; border-radius:7px; display:flex; justify-content:space-between; margin-bottom:12px;}
.checksum.ok{background:var(--ok-bg); color:var(--on);}
.checksum.bad{background:var(--warn-bg); color:var(--warn);}

/* ---- accesos rápidos (chips) ---- */
.preset-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px;}
.preset-chip{display:inline-flex; align-items:center; gap:7px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:7px 11px; cursor:pointer; font-size:13px; color:var(--ink);}
.preset-chip:hover{border-color:var(--brand); background:var(--on-soft);}
.preset-chip .pc-del{color:var(--muted); font-size:12px; padding:0 2px;}
.preset-chip .pc-del:hover{color:var(--warn);}
.preset-add-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:4px;}
.preset-add-row input[type=text]{flex:1; min-width:160px; margin:0;}
.chk-inline{display:flex; align-items:center; gap:7px; font-size:13px; font-weight:400; color:var(--ink); flex:0 0 auto;}
.chk-inline input{width:auto; margin:0;}

/* ---- checkboxes de suplementos ---- */
.supp-cols{display:grid; grid-template-columns:repeat(4,1fr); gap:0 16px;}
@media (max-width:640px){ .supp-cols{grid-template-columns:1fr 1fr;} }
.supp-group-label{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:10px 0 6px; font-weight:700;}
.chk{display:flex; align-items:center; gap:9px; padding:6px 4px; border-radius:8px; cursor:pointer; font-size:13.5px;}
.chk:hover{background:var(--on-soft);}
.chk input{width:16px; height:16px; margin:0; accent-color:var(--brand);}
.chk .dose{margin-left:auto; font-size:11px; color:var(--muted); font-family:ui-monospace,Menlo,monospace;}

.adv-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0 14px;}
@media (max-width:600px){ .adv-grid{grid-template-columns:1fr 1fr;} }

.save-row{display:flex; align-items:center; gap:12px; margin-top:4px;}
.save-row .ok-msg{font-size:12.5px; color:var(--on); min-width:60px;}