:root{
  --navy:#0B1B2E; --teal:#1F6F73; --orange:#F08020; --cream:#FDF2E6;
  --green:#2E7D32; --amber:#D89000; --red:#C0392B; --grey:#9AA1AC;
  --ink:#0B1B2E; --muted:#5B6470; --line:#E6E8EC; --bg:#F4F5F7; --card:#FFFFFF; --track:#EDEFF2;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  font-size:15px; line-height:1.45;}
.wrap{max-width:1240px; margin:0 auto; padding:0 20px 60px;}
header.top{background:var(--navy); color:#fff; padding:28px 32px; border-radius:0 0 14px 14px; margin-bottom:22px;}
header.top h1{margin:0 0 4px; font-size:26px;}
header.top .sub{color:var(--orange); font-size:15px;}
header.top .tag{color:#AEB8C4; font-size:13px; margin-top:6px; max-width:820px;}
.corte{display:inline-block; margin-top:12px; background:#16304D; border:1px solid #2C4A6E;
  border-radius:8px; padding:8px 14px; font-size:13px; color:#D8E2EC;}
.corte b{color:var(--orange);}

.panel{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px 22px; margin-bottom:22px;}
.panel h2{margin:0 0 14px; font-size:17px; color:var(--navy);}
.panel h2 .hint{font-weight:400; font-size:13px; color:var(--muted); margin-left:8px;}

/* minmax(0,…) por lo mismo que en .quad: un 1fr al lado de contenido de ancho fijo no se
   achica y desborda la página entera. */
.hero{display:grid; grid-template-columns:auto auto minmax(0,1fr); gap:26px; align-items:center;}
.hero > *{min-width:0;}
.big{display:flex; flex-direction:column; align-items:center; gap:6px; min-width:110px;}
.bigLabel{font-size:15px; font-weight:700; text-align:center;}
.bigCap{font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px;}
.deg{font-size:32px; font-weight:800; line-height:1; margin-top:2px;}
.counts{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.count{background:var(--bg); border:1px solid var(--line); border-radius:11px; padding:14px 16px;}
.count .n{font-size:28px; font-weight:700; line-height:1;}
.count .l{font-size:12px; color:var(--muted); margin-top:6px; text-transform:uppercase; letter-spacing:.5px;}
.count.alarm{background:#FBEAE8; border-color:#F0C7C1;} .count.alarm .n{color:var(--red);}
.conclusion{margin-top:18px; background:var(--navy); color:#fff; border-radius:11px; padding:16px 20px;}
.conclusion .lab{color:var(--orange); font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;}
.conclusion .txt{font-size:16px; margin-top:6px; line-height:1.55;}
.conclusion .txt b{color:var(--orange);}
@media(max-width:900px){ .hero{grid-template-columns:1fr;} .counts{grid-template-columns:repeat(2,1fr);} }

table{width:100%; border-collapse:collapse;}
th,td{padding:7px 6px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle;}
th{font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); font-weight:600;}
th.ctr,td.ctr{text-align:center;} th.rt,td.rt{text-align:right;}
td.cli{font-weight:600; font-size:13.5px;}
td.dato{font-size:13px; color:var(--muted);}
td input[type=date]{border:1px solid var(--line); border-radius:7px; padding:5px 6px; font-size:12.5px;
  background:#fff; font-family:inherit; color:var(--ink); width:100%;}
td input[type=date]:focus{outline:none; border-color:var(--teal);}
td.ctr input[type=checkbox]{width:16px; height:16px; accent-color:var(--teal); cursor:pointer;}
thead tr.grp th{border-bottom:none; padding-bottom:2px; font-size:10.5px; letter-spacing:1px;}
th.gA{color:var(--teal);} th.gB{color:var(--orange);} th.gH{color:var(--navy);}
tr.fA{background:#FCFCFD;}
.dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:4px; vertical-align:-1px;}
.c-frio{color:var(--red);} .c-tibio{color:var(--amber);} .c-caliente{color:var(--green);} .c-sd{color:var(--grey);}
.b-frio{background:var(--red);} .b-tibio{background:var(--amber);} .b-caliente{background:var(--green);} .b-sd{background:var(--grey);}
.mini{font-weight:700; font-size:12.5px; white-space:nowrap;}
.mal{color:var(--red); font-weight:700;}

.btnrow{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; align-items:center;}
button.act{border:1px solid var(--teal); background:#fff; color:var(--teal); padding:9px 16px;
  border-radius:9px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit;}
button.act:hover{background:var(--teal); color:#fff;}
button.ghost{border-color:var(--line); color:var(--muted);} button.ghost:hover{background:#EEF0F3; color:var(--navy);}
.save{font-size:12.5px; color:var(--muted); margin-left:auto;}
details.calc{margin-top:12px; font-size:13px; color:var(--muted);}
details.calc summary{cursor:pointer; color:var(--teal); font-weight:600;}
details.calc ul{margin:8px 0 0; padding-left:18px;} details.calc li{margin:3px 0;}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px;}
.tcard{display:grid; grid-template-columns:auto 1fr; gap:14px; border:1px solid var(--line);
  border-radius:12px; padding:14px 16px; background:var(--card);}
.tcard.alarma{border:1px solid #E3B4AD; border-left:6px solid var(--red); background:#FEF7F6;}
.tcard .name{font-weight:700; font-size:14.5px; color:var(--navy);}
.tcard .strat{display:inline-block; font-size:11px; font-weight:700; color:#fff; background:var(--navy);
  border-radius:5px; padding:1px 6px; margin-left:6px; vertical-align:1px;}
.alarmtag{display:inline-block; font-size:10.5px; font-weight:700; color:#fff; background:var(--red);
  border-radius:5px; padding:1px 6px; margin-left:6px; letter-spacing:.4px;}
.tempLbl{font-size:13.5px; font-weight:700; margin:4px 0 8px;}
.sig{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); margin:3px 0;}
.badges{display:flex; gap:6px; flex-wrap:wrap; margin-top:9px;}
.badge{font-size:11px; font-weight:600; border-radius:20px; padding:2px 9px; border:1px solid;}
.bg-owner{color:#fff; border-color:var(--navy); background:var(--navy);}
.bg-champ{color:var(--teal); border-color:var(--teal); background:#EAF3F3;}
.bg-proj{color:var(--green); border-color:var(--green); background:#EAF3EA;}
.bg-sube{color:var(--green); border-color:var(--green); background:#EAF3EA;}
.bg-baja{color:var(--red); border-color:#E3B4AD; background:#FBEAE8;}
.bg-uno{color:var(--amber); border-color:var(--amber); background:#FDF6E6;}
.bg-otros{color:var(--muted); border-color:var(--line); background:#F4F5F7;}
.people{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px;}
.person{border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--card);}
.person .ptop{display:grid; grid-template-columns:auto auto 1fr; gap:10px; align-items:center;}
.person .pname{font-weight:700; color:var(--navy); font-size:15px;}
.person .pmeta{font-size:12px; color:var(--muted); margin-top:2px;}
.person .pdeg{font-size:20px; font-weight:800; line-height:1;}
.person .pcap{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px;}
/* Quien acompaña cuentas sin liderar ninguna: misma tarjeta, borde punteado, para que se
   vea de un saque que su termómetro no se calcula sobre la misma base. */
.person.acomp{border-style:dashed; background:#FCFCFD;}
.person .ptag{display:inline-block; font-size:10px; font-weight:700; color:var(--amber);
  border:1px solid var(--amber); background:#FDF6E6; border-radius:20px; padding:0 7px; margin-left:6px;
  vertical-align:1px; text-transform:uppercase; letter-spacing:.3px;}
.person .pnota{margin-top:10px; padding-top:9px; border-top:1px dashed var(--line);
  font-size:11.5px; color:var(--muted); line-height:1.45;}
.empty{color:var(--muted); font-size:14px; padding:14px 4px;}
.nota{margin-top:16px; padding:11px 14px; background:var(--bg); border-left:4px solid var(--amber);
  border-radius:0 8px 8px 0; font-size:13px; color:var(--muted); line-height:1.5;}
.nota b{color:var(--navy);}
.nota:empty{display:none;}

/* minmax(0,1fr) y no 1fr: una columna 1fr NO se achica por debajo del contenido, así que
   el SVG del gráfico forzaba el ancho del panel, el .wrap superaba el ancho de la ventana
   y —al estar centrado con margin:0 auto— lo que sobraba se iba por los DOS lados, con la
   parte izquierda inalcanzable incluso con scroll. */
.quad{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px; align-items:start;}
.quad > *{min-width:0;}
.quad svg{display:block; width:100%; height:auto;}
@media(max-width:1000px){ .quad{grid-template-columns:1fr;} }
.qleg .qi{border-left:4px solid; padding:6px 0 6px 11px; margin-bottom:11px;}
.qleg .qt{font-weight:700; font-size:13.5px; color:var(--navy);}
.qleg .qd{font-size:12.5px; color:var(--muted); margin-top:1px;}
.q1{border-color:var(--green);} .q2{border-color:var(--red);}
.q3{border-color:var(--amber);} .q4{border-color:var(--grey);}

.lectura{background:var(--cream); border-left:6px solid var(--orange); border-radius:0 10px 10px 0; padding:16px 20px;}
.lectura h2{color:var(--orange); font-size:14px; text-transform:uppercase; letter-spacing:.6px; margin:0 0 8px;}
.lectura p{margin:6px 0; color:#4A3520;} .lectura b{color:var(--navy);}
.ref-grid{display:grid; grid-template-columns:1fr 1fr; gap:2px 28px;}
@media(max-width:760px){ .ref-grid{grid-template-columns:1fr;} }
.ref{padding:7px 0; border-bottom:1px solid var(--line);}
.ref .rt{font-weight:700; color:var(--navy); font-size:13.5px;}
.ref .rt .auto{font-weight:600; font-size:10.5px; color:var(--teal); border:1px solid var(--teal);
  background:#EAF3F3; border-radius:20px; padding:1px 7px; margin-left:7px;}
.ref .rt .hum{color:var(--orange); border-color:var(--orange); background:#FDF0E6;}
.ref .rd{color:var(--muted); font-size:13.5px; margin-top:1px;}
.footer{display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:16px 4px 0; margin-top:4px; color:var(--muted); font-size:12.5px;}
.footer b{color:var(--navy);}
.tabwrap{overflow-x:auto;}
.quien{float:right; font-size:12.5px; color:#AEB8C4;}
.quien a{color:var(--orange);}
@media print{ .btnrow,.save,.quien{display:none!important;} body{background:#fff;} header.top{border-radius:0;} }

.loginbody{display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--navy);}
.loginbox{background:var(--card); border-radius:14px; padding:32px 34px; width:min(380px, 92vw);
  box-shadow:0 18px 48px rgba(0,0,0,.35);}
.loginbox h1{margin:0 0 2px; font-size:20px; color:var(--navy);}
.loginbox .sub{margin:0 0 22px; color:var(--orange); font-size:13.5px;}
.loginbox label{display:block; font-size:12px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--muted); margin:14px 0 5px; font-weight:600;}
.loginbox input{width:100%; border:1px solid var(--line); border-radius:9px; padding:10px 12px;
  font-size:15px; font-family:inherit; color:var(--ink); background:#fff;}
.loginbox input:focus{outline:none; border-color:var(--teal);}
.loginbox button{width:100%; margin-top:22px; border:none; background:var(--teal); color:#fff;
  padding:11px; border-radius:9px; font-size:15px; font-weight:600; cursor:pointer; font-family:inherit;}
.loginbox button:hover{background:#17565A;}
.loginbox .err{background:#FBEAE8; border:1px solid #F0C7C1; color:var(--red); border-radius:9px;
  padding:9px 12px; font-size:13.5px; margin:0;}