/* ════════════════════════════════════════════════════════════════
   Rúbrica Diaria v2 · Sistema de estilos (mobile-first)
   Variables → layout → componentes → vistas concretas.
   ════════════════════════════════════════════════════════════════ */
:root{
  --azul:#1565c0; --azul-d:#0d47a1; --muted:#667085; --linea:#e4e8ee;
  --card:#fff; --bg:#f4f6f9; --ok:#2e7d32; --warn:#ef6c00; --bad:#c62828;
  --sombra:0 1px 3px rgba(0,0,0,.08);
}
*{box-sizing:border-box} html,body{margin:0}
[hidden]{display:none !important}   /* el atributo hidden debe ganar a cualquier display (login/app) */
body{font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:#1a1a1a}
.muted{color:var(--muted)} .right{margin-left:auto}
h1,h2,h3,h4{margin:.2rem 0}

/* ── Acceso ── */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:var(--card);border-radius:18px;box-shadow:var(--sombra);padding:32px;max-width:380px;width:100%;text-align:center}
.login-card h1{color:var(--azul)}

/* ── Estructura ── */
.topbar{position:sticky;top:0;display:flex;align-items:center;gap:10px;background:var(--card);
  border-bottom:1px solid var(--linea);padding:10px 14px;z-index:20}
.brand{font-weight:800;color:var(--azul)}
.user-chip{margin-left:auto;font-size:.84rem;color:var(--muted);font-weight:600}
.icon-btn{background:none;border:0;font-size:1.3rem;cursor:pointer;color:#333}
.nav{display:flex;gap:4px;flex-wrap:wrap;background:var(--card);border-bottom:1px solid var(--linea);padding:6px 10px;position:sticky;top:51px;z-index:19}
.nav a{padding:8px 14px;border-radius:8px;font-weight:700;font-size:.9rem;color:var(--muted);cursor:pointer;text-decoration:none}
.nav a.activo{background:#e8f0fe;color:var(--azul)}
.main{max-width:1040px;margin:0 auto;padding:16px}

/* ── Componentes base ── */
.card{background:var(--card);border:1px solid var(--linea);border-radius:14px;box-shadow:var(--sombra);padding:16px;margin-bottom:14px}
.card.flex{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.row{display:flex;gap:14px;flex-wrap:wrap}
label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700;margin-bottom:3px}
select,input,textarea{width:100%;padding:9px 11px;border:1px solid var(--linea);border-radius:9px;font:inherit;background:#fff}
.btn{background:var(--azul);color:#fff;border:0;border-radius:10px;padding:10px 16px;font-weight:700;cursor:pointer;font-size:.95rem}
.btn:hover{background:var(--azul-d)} .btn:disabled{opacity:.5;cursor:default}
.btn.sm{padding:6px 12px;font-size:.82rem} .btn.sec{background:#eef2f7;color:var(--azul)}
.btn.danger{background:#fdecea;color:var(--bad)} .btn.grande{padding:14px 20px;font-size:1.02rem;border-radius:12px}
.btn.full{width:100%}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.74rem;font-weight:700;background:#eef2f7;color:var(--muted)}
.badge.ok{background:#e8f5e9;color:var(--ok)} .badge.bad{background:#fdecea;color:var(--bad)} .badge.warn{background:#fff3e0;color:var(--warn)}
table{width:100%;border-collapse:collapse} th,td{padding:8px;text-align:left;border-bottom:1px solid var(--linea);font-size:.88rem}
tr.click{cursor:pointer} tr.click:hover{background:#f7f9fc}
.grid-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.kpi{background:var(--card);border:1px solid var(--linea);border-radius:12px;padding:12px}
.kpi .lbl{font-size:.74rem;color:var(--muted);font-weight:700;text-transform:uppercase}
.kpi .val{font-size:1.5rem;font-weight:800;color:var(--azul)}
.chart-box{position:relative;height:240px}
.reco{padding:10px 12px;border-radius:10px;background:#f4f6f9;margin-bottom:8px;font-size:.9rem}
.reco.alerta{background:#fdecea;color:#7a1c12} .reco.ok{background:#e8f5e9;color:#1b5e20}
.pill-list{display:flex;flex-wrap:wrap;gap:6px}

/* ── Loader / toast / modal ── */
.loader{display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px;color:var(--muted)}
.spinner{width:34px;height:34px;border:3px solid var(--linea);border-top-color:var(--azul);border-radius:50%;animation:giro .8s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#1a1a1a;color:#fff;padding:11px 18px;border-radius:10px;z-index:60;font-size:.9rem;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.toast.ok{background:var(--ok)} .toast.bad{background:var(--bad)} .toast.hidden{display:none}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;z-index:50}
.modal-overlay.hidden{display:none}
.modal{background:var(--card);width:100%;max-width:560px;max-height:92vh;overflow:auto;border-radius:18px 18px 0 0;padding:16px}
.modal.ancho{max-width:940px}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
@media(min-width:640px){.modal{border-radius:18px;align-self:center}.modal-overlay{align-items:center}}

/* ── Evaluación ── */
.eh-controls{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.eh-field{display:flex;flex-direction:column;gap:3px;flex:1 1 150px;min-width:0}
.eh-field.fecha{flex:0 1 150px}
.seg-pills{display:flex;align-items:center;gap:6px;overflow-x:auto;margin-top:12px;padding-bottom:3px}
.seg-pills .lbl-min{font-size:.7rem;text-transform:uppercase;color:var(--muted);font-weight:700;flex:0 0 auto}
.seg-pills .pill{flex:0 0 auto;border:1.5px solid var(--linea);background:#fff;border-radius:999px;padding:7px 15px;font-size:.85rem;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap}
.seg-pills .pill.on{background:var(--azul);color:#fff;border-color:var(--azul)}
.eh-prog{margin:14px 0 2px}
.prog-count{background:#e8f0fe;color:var(--azul);font-weight:800;border-radius:999px;padding:2px 11px;font-size:.85rem}
.barra-prog{height:10px;background:#eceff3;border-radius:999px;overflow:hidden;margin-top:6px}
.barra-prog>i{display:block;height:100%;background:linear-gradient(90deg,#43a047,#66bb6a);transition:width .4s}
.alu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.alu-card{background:var(--card);border:1px solid var(--linea);border-radius:14px;box-shadow:var(--sombra);padding:14px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;text-align:center}
.alu-card.done{border-color:#a5d6a7;background:#f5fbf6}
.avatar{width:52px;height:52px;border-radius:50%;background:#e8f0fe;color:var(--azul);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem}
.alu-nom{font-weight:700;font-size:.9rem;line-height:1.15} .alu-meta{font-size:.7rem;color:var(--muted);font-weight:600}
.estado{font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:999px;background:#fff3e0;color:var(--warn)}
.alu-card.done .estado{background:#e8f5e9;color:var(--ok)}

/* Evaluador (modal) */
.ev-nav{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ev-nav .ev-who{flex:1;text-align:center} .ev-nav .ev-who b{font-size:1.1rem}
.navbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--linea);background:#fff;font-size:1.5rem;cursor:pointer}
.navbtn:disabled{opacity:.3} .seg{display:flex;background:#eef2f7;border-radius:12px;padding:4px;margin-bottom:14px}
.seg button{flex:1;padding:10px;border:0;background:transparent;border-radius:9px;font-weight:700;color:var(--muted);cursor:pointer}
.seg button.on{background:#fff;color:var(--azul);box-shadow:var(--sombra)}
.cols3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.col-crit{border:1px solid var(--linea);border-radius:12px;overflow:hidden}
.col-h{display:flex;justify-content:space-between;padding:8px 10px;color:#fff;font-weight:700}
.col-body{padding:6px} .sub{display:flex;gap:8px;align-items:center;padding:7px;border-radius:8px;cursor:pointer}
.sub.on{background:#e8f5e9} .sub .mk{width:20px;height:20px;border:1.5px solid var(--linea);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--ok)}
.rt-wrap{overflow-x:auto} .rub-tabla{border-collapse:separate;border-spacing:0;min-width:480px}
.rub-tabla th{padding:6px;text-align:center;color:#fff;border-radius:8px 8px 0 0;font-size:.78rem} .rub-tabla th small{display:block;font-weight:600;opacity:.9}
.rt-c0{min-width:120px;text-align:left} .rt-cell{padding:9px;text-align:center;cursor:pointer;border:1px solid var(--linea);font-size:.82rem}
.obs{margin:14px 0 4px} .ev-foot{position:sticky;bottom:0;background:linear-gradient(transparent,var(--card) 35%);padding:12px 0 2px;display:flex;align-items:center;gap:12px}
.media-big{font-weight:800;color:var(--azul)} .media-big span{font-size:1.8rem} .media-big small{font-size:.9rem;color:var(--muted)}
.ev-estado{font-size:.82rem;font-weight:600;padding:3px 10px;border-radius:999px}
.ev-estado.ok{color:var(--ok);background:#2e7d3214} .ev-estado.pend{color:var(--warn);background:#ef6c0014} .ev-estado.guardando{color:var(--azul);background:#1565c014}
.ev-foot .btn{margin-left:auto}

/* Matriz Seguimiento */
.mx-wrap{overflow-x:auto;border:1px solid var(--linea);border-radius:10px;margin-top:8px}
.matriz{border-collapse:separate;border-spacing:0;min-width:100%}
.matriz th,.matriz td{padding:9px 8px;text-align:center;border-bottom:1px solid var(--linea);font-size:.85rem;white-space:nowrap}
.matriz th{position:sticky;top:0;background:var(--card);color:var(--muted)}
.mx-c0{position:sticky;left:0;background:var(--card);text-align:left!important;min-width:140px}
.mx-cell{cursor:pointer} .mx-cell.vacia{color:#cfcfcf}
.mx-med{background:#fafafa;font-weight:700} .mx-acum{background:#f1f6ff;color:var(--azul)}

/* Semáforo y logros */
.dot{display:inline-block;width:13px;height:13px;border-radius:50%;vertical-align:middle}
.semaforo-badge{display:inline-block;padding:3px 11px;border-radius:999px;color:#fff;font-size:.74rem;font-weight:800;margin-left:6px}
.logros-grid{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:560px){.logros-grid{grid-template-columns:1fr 1fr}}
.logro-item{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--linea);border-radius:12px;padding:10px 12px;background:#fafbfc;opacity:.6}
.logro-item.got{opacity:1;background:#f1f8f2;border-color:#a5d6a7}
.lg-ic{font-size:1.6rem} .lg-nom{font-weight:700;font-size:.9rem;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.lg-desc{font-size:.8rem;color:var(--muted)} .lg-ok{color:var(--ok);font-size:.68rem;font-weight:800;background:#e8f5e9;border-radius:999px;padding:1px 8px}
.lg-no{color:var(--muted);font-size:.68rem;font-weight:700;background:#ececec;border-radius:999px;padding:1px 8px}

/* Chips admin */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chip{border:1.5px solid var(--linea);background:#fff;border-radius:999px;padding:7px 14px;font-size:.85rem;font-weight:600;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.chip.on{background:var(--azul);color:#fff;border-color:var(--azul)}