/* Portal público del docente */
.login{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:26px 14px}
.card-login{max-width:420px;margin:0 auto;width:100%;background:var(--sup);border:1px solid var(--bd);
  border-radius:16px;padding:26px 22px 22px}
.logo-big{width:112px;margin:0 auto 14px;display:block}
.card-login h1{font-size:25px;text-align:center;color:var(--azul);letter-spacing:-.5px;font-weight:600}
.tagline{text-align:center;color:var(--tx2);font-size:13.5px;margin-bottom:3px}
.ugel-tag{text-align:center;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--turq);
  margin-bottom:20px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:5px}
.segs{display:flex;gap:7px}
.seg{flex:1;height:44px;border:1.5px solid var(--bd);border-radius:10px;background:#FCFCFA;font-size:13.5px;
  color:var(--tx2);font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px;
  text-align:center;line-height:1.25;padding:0 6px}
.seg.on{border-color:var(--azul);background:#EAF2F8;color:var(--azul)}
.fechas{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:7px}
.ayuda{font-size:11.5px;color:var(--tx3);margin-top:6px}
.consent{display:flex;gap:9px;align-items:flex-start;margin-top:19px;padding-top:16px;border-top:1px solid var(--bd)}
.consent input{width:19px;height:19px;margin-top:1px;flex:none;accent-color:var(--azul)}
.consent span{font-size:11.5px;color:var(--tx2);line-height:1.6}
.consent b{color:var(--tx)}
.aviso{max-width:420px;margin:14px auto 0;font-size:11.5px;color:var(--tx3);text-align:center;line-height:1.65}
#entrar{margin-top:20px}

/* ---- ficha del docente ---- */
.hero{background:var(--sup);border:1px solid var(--bd);border-radius:var(--r);padding:17px;margin:13px 0}
.ident{padding-bottom:15px;border-bottom:1px solid var(--bd);margin-bottom:15px}
.ident h3{font-size:18px;color:var(--azul);font-weight:600;letter-spacing:-.3px;line-height:1.3;margin-bottom:11px}
.dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px}
.dl dt{color:var(--tx2);white-space:nowrap;display:flex;align-items:center;gap:6px}
.dl dd{color:var(--tx);font-weight:600}
.ident .fuente{font-size:11px;color:var(--tx3);margin-top:11px;display:flex;align-items:center;gap:6px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi{border-radius:10px;padding:12px 13px}
.kpi .eyebrow{font-size:10px}
.kpi .v{font-size:24px;font-weight:600;letter-spacing:-.6px;margin-top:2px}
.kpi .p{font-size:11.5px;margin-top:1px}
.k-real{background:#EAF2F8;border:1px solid #C6DCEA}
.k-real .eyebrow{color:#3A6E8C} .k-real .v{color:var(--azul)} .k-real .p{color:#5E7F92}
.k-ret{background:#FBF4E3;border:1px solid #E8D6A6}
.k-ret .eyebrow{color:#87681C} .k-ret .v{color:#77590F} .k-ret .p{color:#87681C}
.k-est{background:#EFFAFA;border:1px dashed #85CBCE}
.k-est .eyebrow{color:#0E7A7F} .k-est .v{color:#0A585C} .k-est .p{color:#3C8A8D}
.linea{display:flex;align-items:center;gap:7px;margin:16px 0 8px}
.dot{width:8px;height:8px;border-radius:50%;flex:none}
.linea b{font-size:13.5px;color:var(--azul);font-weight:600}

.barra{margin-top:14px;background:#FAF9F5;border:1px solid var(--bd);border-radius:10px;padding:13px}
.barra .r{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:#4A555E;margin-bottom:7px}
.pista{height:10px;background:#E7E5DD;border-radius:5px;overflow:hidden;display:flex}
.p-ok{background:var(--oro)}
.p-falta{background:repeating-linear-gradient(90deg,#B3DDDE 0 5px,#DEF2F3 5px 10px)}
.barra p{font-size:11.5px;color:var(--tx2);margin-top:9px;line-height:1.6}
.resto{margin-top:13px;border-top:1px dashed #C9D9DA;padding-top:12px}
.resto .t{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#0E7A7F;font-weight:700;
  margin-bottom:9px;display:flex;align-items:center;gap:5px}
.rm{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.rc{background:#EFFAFA;border:1px dashed #A6D8DA;border-radius:9px;padding:9px 8px;text-align:center}
.rc .n{font-size:11.5px;color:#0E7A7F;font-weight:700}
.rc .v{font-size:15px;color:#0A585C;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
.rc .f{font-size:9.5px;color:#3C8A8D;margin-top:2px}
.resto p{font-size:11.5px;color:var(--tx2);margin-top:9px;line-height:1.6}

/* ---- meses ---- */
.meses{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.mes{border:1px solid var(--bd);border-radius:10px;padding:10px 11px;background:#fff;text-align:left;width:100%;
  transition:border-color .12s,transform .12s}
.mes:hover{border-color:var(--turq);transform:translateY(-1px)}
.mes.est{border-style:dashed;border-color:#9AD3D5;background:#FBFEFE}
.mes.on{border:2px solid var(--oro);background:#FFFCF3;padding:9px 10px}
.mes .mn{font-size:13.5px;color:var(--azul);font-weight:600;margin-bottom:7px;display:flex;
  justify-content:space-between;align-items:center;gap:5px}
.chip{font-size:9.5px;color:#0E7A7F;background:#DDF3F4;border-radius:4px;padding:1px 5px;font-weight:700}
.mes .lb{font-size:10px;color:var(--tx2);letter-spacing:.04em;text-transform:uppercase;font-weight:700;
  display:flex;align-items:center;gap:4px}
.mes .v1{font-size:15px;color:#123F5C;font-variant-numeric:tabular-nums}
.mes .v2{font-size:15px;color:var(--azul);font-weight:600;font-variant-numeric:tabular-nums}
.mes .v0{font-size:15px;color:#B6AFA6;font-variant-numeric:tabular-nums}
.mes .gap{height:6px}
.leyenda{display:flex;gap:15px;flex-wrap:wrap;margin-top:11px;font-size:11.5px;color:var(--tx2)}
.sw{display:inline-block;width:9px;height:9px;border-radius:2px;vertical-align:-1px;margin-right:4px}

/* ---- detalle del mes ---- */
.det{background:#FAF9F5;border:1px solid var(--bd);border-radius:var(--r);padding:17px;margin:13px 0}
.det h2{font-size:15px;color:var(--azul);font-weight:600;display:flex;align-items:center;gap:7px}
.det .sub{font-size:12.5px;color:var(--tx2);margin:3px 0 14px}
.pl{background:#fff;border:1px solid var(--bd);border-radius:10px;padding:13px;margin-bottom:10px}
.pl-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.pl-h b{font-size:13px;color:var(--azul);font-weight:600;display:flex;align-items:center;gap:6px}
.pl-h span{font-size:11px;color:var(--tx3)}
.f{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid #F3F1EB;font-size:13.5px}
.f:last-child{border-bottom:none}
.f .m,.tot,.quinta,.base{font-variant-numeric:tabular-nums}
.tot{display:flex;justify-content:space-between;padding:8px 0 2px;color:var(--azul);font-weight:600}
.cts{background:#FCF0E7;border-left:3px solid #D8792A;padding:10px 12px;margin-top:9px}
.cts .t{display:flex;justify-content:space-between;color:#8A4B14;font-weight:600;font-variant-numeric:tabular-nums}
.cts .t span:first-child{display:flex;align-items:center;gap:6px}
.cts p{font-size:11.5px;color:#8A4B14;margin-top:4px;line-height:1.6}
.quinta{display:flex;justify-content:space-between;padding:9px 11px;margin:4px 0;background:#FBF4E3;
  border-left:3px solid var(--oro);color:var(--azul);font-weight:600}
.quinta span:first-child{display:flex;align-items:center;gap:6px}
.base{display:flex;justify-content:space-between;padding:9px 12px;margin-top:9px;background:#EAF2F8;
  border-radius:9px;color:var(--azul);font-weight:600}

/* ---- cálculo paso a paso ---- */
.paso{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--bd);font-size:13.5px}
.paso:last-child{border-bottom:none}
.paso .d{color:var(--tx2);font-size:12px;display:block;margin-top:1px}
.paso .m{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.paso.res{background:#EAF2F8;margin:6px -10px 0;padding:11px 10px;border-radius:9px;border:none;color:var(--azul)}

/* ---- historial ---- */
.hito{display:flex;gap:11px;padding:9px 0}
.hito .b{width:9px;height:9px;border-radius:50%;background:var(--turq);margin-top:6px;flex:none;position:relative}
.hito .b::after{content:"";position:absolute;top:12px;left:3.5px;width:2px;height:28px;background:#D9E7E8}
.hito:last-child .b::after{display:none}
.hito b{font-size:13.5px;color:var(--azul);font-weight:600;display:flex;align-items:center;gap:6px}
.hito span{font-size:12.5px;color:var(--tx2);display:block}

@media(max-width:640px){
  .meses{grid-template-columns:repeat(2,1fr)}
  .grid2,.det .grid2{grid-template-columns:1fr}
  .rm{grid-template-columns:repeat(2,1fr)}
  .dl{grid-template-columns:1fr;gap:1px 0}
  .dl dt{margin-top:7px;font-size:11.5px}
}