:root{
  --bg:#fff; --panel:#f6f7f9; --panel2:#eef0f3; --bd:#dfe3e8; --bd2:#c9cfd6;
  --tx:#16191d; --mut:#67707a; --ac:#0b5cad; --ac2:#e8f0f9;
  --ok:#1a7f37; --okbg:#e7f5ec; --wa:#9a6700; --wabg:#fdf5e3; --ba:#b42318; --babg:#fdeceb;
  --sh:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.1);
  --hh:58px;          /* alto del encabezado: todo lo pegado se apila debajo de él */
}
*{box-sizing:border-box;margin:0;padding:0}
body{font:15px/1.55 "Segoe UI",system-ui,sans-serif;color:var(--tx);background:var(--panel)}
button,input,select,textarea{font:inherit;color:inherit}
.oculto{display:none!important}

/* ── barra superior ── */
header{height:58px;background:var(--bg);border-bottom:1px solid var(--bd);display:flex;
  align-items:center;gap:16px;padding:0 20px;position:sticky;top:0;z-index:20}
header.flotando{box-shadow:0 2px 8px rgba(16,24,40,.08)}
.marca{font-weight:700;letter-spacing:-.2px;white-space:nowrap}
.marca small{display:block;font-weight:400;font-size:11px;color:var(--mut);letter-spacing:.04em}
.sep{width:1px;height:30px;background:var(--bd)}
.muni{font-weight:600}
.muni small{display:block;font-size:12px;color:var(--mut);font-weight:400}
.spacer{flex:1}
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px;
  font-size:13px;font-weight:600;border:1px solid transparent;white-space:nowrap}
.pill .dot{width:8px;height:8px;border-radius:99px;background:currentColor}
.pill.ok{background:var(--okbg);color:var(--ok);border-color:#bfe3cd}
.pill.wa{background:var(--wabg);color:var(--wa);border-color:#f0dfae}
.pill.off{background:var(--panel2);color:var(--mut);border-color:var(--bd)}
.btn{padding:8px 15px;border-radius:7px;border:1px solid var(--bd2);background:var(--bg);
  cursor:pointer;font-weight:600;font-size:14px}
.btn:hover{background:var(--panel)}
.btn.pri{background:var(--ac);border-color:var(--ac);color:#fff}
.btn.pri:hover{filter:brightness(1.08)}
.btn.pri:disabled{background:var(--panel2);border-color:var(--bd);color:#9aa3ad;cursor:default;filter:none}
.btn.sm{padding:5px 10px;font-size:13px}
/* Azul "de acción", igual de vistoso que el de volver. Es una clase aparte de
   .pri a propósito: hay reglas que esconden .pri (es "Nuevo residente", que
   solo va en PC) y estos botones sí tienen que verse siempre. */
.btn.azul{background:var(--ac);border-color:var(--ac);color:#fff;font-weight:600}
.btn.azul:hover{background:var(--ac);filter:brightness(1.1);box-shadow:0 3px 10px rgba(11,92,173,.3)}
.user{font-size:13px;color:var(--mut);text-align:right;white-space:nowrap}
.user b{display:block;color:var(--tx);font-size:14px}

main{max-width:1360px;margin:0 auto;padding:22px}

/* ── login ── */
#login{min-height:100vh;display:grid;place-items:center;background:var(--panel)}
.card{background:var(--bg);border:1px solid var(--bd);border-radius:12px;box-shadow:var(--sh)}
.login{width:390px;padding:34px}
.login h1{font-size:21px;margin-bottom:4px}
.login p{color:var(--mut);font-size:13.5px;margin-bottom:22px}
label{display:block;font-size:13px;font-weight:600;margin:14px 0 5px}
.inp{width:100%;padding:10px 12px;border:1px solid var(--bd2);border-radius:7px;background:var(--bg)}
.inp:focus{outline:2px solid var(--ac);outline-offset:-1px;border-color:var(--ac)}
.chk{display:flex;align-items:center;gap:8px;margin:16px 0;font-size:13.5px;color:var(--mut)}
.aviso{background:var(--ac2);border:1px solid #cfe0f2;border-radius:8px;padding:11px 13px;
  font-size:13px;color:#0a4a8c;margin-top:18px}

/* ── contadores ── */
.tit{display:flex;align-items:flex-end;gap:14px;margin-bottom:14px}
.tit h1{font-size:22px}
.cnt{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px}
.c{background:var(--bg);border:1px solid var(--bd);border-radius:9px;padding:10px 14px;min-width:96px}
.c b{display:block;font-size:22px;line-height:1.2}
.c span{font-size:11.5px;color:var(--mut)}
.c.g b{color:var(--ok)} .c.w b{color:var(--wa)} .c.r b{color:var(--ba)}

/* ── barra de herramientas ── */
.tools{display:flex;gap:9px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.busca{flex:1;min-width:230px;position:relative}
.busca .inp{padding-left:34px}
.busca svg{position:absolute;left:10px;top:11px;color:var(--mut)}
.chip{padding:6px 12px;border:1px solid var(--bd2);border-radius:99px;background:var(--bg);
  cursor:pointer;font-size:13px;white-space:nowrap}
.chip:hover{background:var(--panel)}
.chip.on{background:var(--ac);border-color:var(--ac);color:#fff;font-weight:600}

/* ── cabecera FIJA de la lista ──
   Volver + título + contadores + buscador van juntos y no se mueven nunca al desplazar.
   La tabla, debajo, se desplaza por dentro. */
.cabecera{position:sticky;top:var(--hh);z-index:16;background:var(--panel);padding-top:4px}
#lVolver:not(:empty){padding-bottom:2px}

/* ── tabla ── */
/* la tabla ocupa lo que quede libre bajo la cabecera fija (que cambia de alto según la vista) */
.tabla{background:var(--bg);border:1px solid var(--bd);border-radius:10px;
  overflow:auto;max-height:calc(100vh - var(--hh) - var(--cabh,240px) - 34px);min-height:200px}
.tabla::-webkit-scrollbar{height:13px;width:13px}
.tabla::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:99px;border:3px solid var(--bg)}
.tabla::-webkit-scrollbar-thumb:hover{background:#9aa3ad}
table{width:100%;border-collapse:separate;border-spacing:0}
th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);
  padding:11px 12px;border-bottom:1px solid var(--bd);background:var(--panel);cursor:pointer;
  white-space:nowrap;position:sticky;top:0;z-index:5}
th:hover{color:var(--tx)}
td{padding:11px 12px;border-bottom:1px solid #f0f2f4;font-size:14px;vertical-align:middle;
  background:var(--bg);white-space:nowrap}
tbody tr{cursor:pointer}
tbody tr:hover td{background:var(--ac2)}
tbody tr:last-child td{border-bottom:0}

/* ── columnas congeladas a la izquierda ── */
th.n,td.n{position:sticky;left:0;z-index:4;width:38px}
th.nm,td.nm{position:sticky;left:38px;z-index:4;min-width:230px}
thead th.n,thead th.nm{z-index:7}
th.nm,td.nm{box-shadow:1px 0 0 var(--bd)}
tbody tr:hover td.n,tbody tr:hover td.nm{background:var(--ac2)}
.n{color:var(--mut);font-size:13px}
.nombre{font-weight:600}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:13px}
.tag{display:inline-block;padding:2px 8px;border-radius:5px;font-size:12px;font-weight:600;white-space:nowrap}
.t-ok{background:var(--okbg);color:var(--ok)}
.t-wa{background:var(--wabg);color:var(--wa)}
.t-ba{background:var(--babg);color:var(--ba)}
.t-mu{background:var(--panel2);color:var(--mut)}
.vacio{padding:46px;text-align:center;color:var(--mut)}

/* ── ficha ── */
.soloLectura{display:none}                    /* solo aparece en móvil (media query abajo) */
/* Todos los botones de volver viven aquí: arriba y a la izquierda, en todas
   las pantallas, para que siempre estén en el mismo sitio. */
.volverBar{display:flex;justify-content:flex-start;margin:0 0 12px}
.volver{display:inline-flex;align-items:center;gap:9px;background:var(--ac);color:#fff;border:0;
  border-radius:9px;padding:12px 22px;font-weight:700;font-size:15.5px;cursor:pointer;
  margin-bottom:14px;box-shadow:0 2px 6px rgba(11,92,173,.28);transition:.14s}
.volver:hover{filter:brightness(1.12);box-shadow:0 4px 12px rgba(11,92,173,.38);transform:translateY(-1px)}
.volver:active{transform:translateY(0)}
.volver svg{stroke-width:2.6}

/* panel de encima FIJO: botones + nombre del residente quedan pegados al hacer scroll */
.fixo{position:sticky;top:var(--hh);z-index:16;background:var(--panel);padding-bottom:12px;
  transition:box-shadow .15s}
.fixo.flotando{box-shadow:0 10px 14px -10px rgba(16,24,40,.28)}
.fbar{padding:10px 0 8px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fbar .volver{margin-bottom:0}
.fixo .fh{margin-bottom:0}
.guardar{padding:12px 24px;font-size:15.5px;border-radius:9px;font-weight:700}
.estadoG{font-size:13px;color:var(--mut);display:flex;align-items:center;gap:7px}
.estadoG.sucio{color:var(--wa);font-weight:600}
.estadoG.ok{color:var(--ok);font-weight:600}

/* ── modal ── */
.modalbg{position:fixed;inset:0;background:rgba(16,24,40,.5);display:grid;place-items:center;z-index:80}
.modalcard{width:460px;padding:26px;max-width:92vw}
.modalcard h3{font-size:19px;margin-bottom:8px}
.modalcard p{color:var(--mut);font-size:14px;margin-bottom:8px}
.modalcard .cambios{background:var(--wabg);border:1px solid #f0dfae;border-radius:8px;
  padding:10px 12px;font-size:13px;color:#7a5200;margin:12px 0}
.modalcard .acciones{display:flex;gap:9px;margin-top:20px;flex-wrap:wrap}
.modalcard .acciones .btn{flex:1;padding:11px;white-space:nowrap}
.btn.peligro{border-color:#f0b7b2;color:var(--ba);background:var(--bg)}
.btn.peligro:hover{background:var(--babg)}
.fh{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.fh h1{font-size:24px}
.fh .sub{color:var(--mut);font-size:13.5px;margin-top:3px}
.cols{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
.sec{background:var(--bg);border:1px solid var(--bd);border-radius:10px;margin-bottom:14px;overflow:hidden}
.sec>h3{padding:12px 16px;font-size:14px;background:var(--panel);border-bottom:1px solid var(--bd);
  cursor:pointer;display:flex;align-items:center;gap:9px}
.sec>h3 .num{width:20px;height:20px;border-radius:5px;background:var(--ac);color:#fff;
  font-size:11px;display:grid;place-items:center}
.sec .body{padding:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:13px}
.f label{margin-top:0}
.f .inp[readonly]{background:var(--panel);color:var(--mut)}
.hint{font-size:11.5px;color:var(--mut);margin-top:3px}
.falta{border-color:#e9c46a!important;background:#fffdf6}
.anios table{font-size:13.5px}
.anios th,.anios td{padding:7px 9px}
.tutorFila{display:grid;grid-template-columns:1fr 200px auto;gap:8px;margin-bottom:8px;align-items:center}
.tutorFila .quitarTutor{color:var(--ba);border-color:#f0b7b2;padding:7px 11px}
.tutorFila .quitarTutor:hover{background:var(--babg)}
.btnAddTutor{margin-top:2px}
.promedio{display:flex;gap:26px;flex-wrap:wrap;margin-top:13px;padding:12px 16px;
  background:var(--ac2);border:1px solid #cfe0f2;border-radius:9px}
.promedio div{display:flex;flex-direction:column;gap:2px}
.promedio span{font-size:12px;color:var(--mut)}
.promedio b{font-size:23px;color:var(--ac);line-height:1.15;font-variant-numeric:tabular-nums}
.hist{list-style:none;font-size:13.5px}
.hist li{padding:8px 0 8px 16px;border-left:2px solid var(--bd);position:relative}
.hist li:before{content:"";position:absolute;left:-5px;top:13px;width:8px;height:8px;
  border-radius:99px;background:var(--bd2)}
.hist li:first-child:before{background:var(--ac)}
.hist b{display:block;font-size:12px;color:var(--mut);font-weight:600}
.com{border:1px solid var(--bd);border-radius:8px;padding:11px;margin-bottom:9px;background:var(--panel)}
.com b{font-size:12.5px} .com .q{font-size:13.5px;margin:4px 0}
.com small{color:var(--mut);font-size:11.5px}
textarea.inp{resize:vertical;min-height:64px}
.banda{border-radius:9px;padding:11px 14px;font-size:13.5px;margin-bottom:14px;border:1px solid}
.banda.wa{background:var(--wabg);border-color:#f0dfae;color:#7a5200}
.banda.ba{background:var(--babg);border-color:#f5c9c5;color:#8f1d15}

/* ── admin ── */
.munis{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
.mc{background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:14px;cursor:pointer}
.mc:hover{border-color:var(--ac);box-shadow:var(--sh)}
.mc h4{font-size:15px;margin-bottom:8px}
.mc .num{font-size:26px;font-weight:700;line-height:1.1}
.mc .det{font-size:12px;color:var(--mut);margin-top:5px}
.mc .barra{height:5px;border-radius:99px;background:var(--panel2);margin-top:9px;overflow:hidden}
.mc .barra i{display:block;height:100%;background:var(--ok)}

/* ── tablero del administrador ── */
.seg{display:inline-flex;background:var(--panel2);border:1px solid var(--bd);border-radius:10px;
  padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:7px 14px;border-radius:7px;cursor:pointer;
  font-weight:600;font-size:13.5px;color:var(--mut)}
.seg button:hover{color:var(--tx)}
.seg button.on{background:var(--bg);color:var(--ac);box-shadow:var(--sh)}
.seg.sm button{padding:5px 11px;font-size:12.5px}
/* lista enfocada (archivo histórico o una tarjeta del panel): los filtros de curso/vista
   no aplican porque la selección ya viene hecha — se ocultan para no confundir */
#vLista.enfocada #segVer,#vLista.enfocada #fCurso,#vLista.enfocada .chip,
#vLista.enfocada .tools>.btn.pri{display:none}
/* tarjetas del panel: son botones, llevan a ver quiénes son */
.c.clic{cursor:pointer;transition:.12s}
.c.clic:hover{border-color:var(--ac);box-shadow:var(--sh);transform:translateY(-1px)}
.c.on{border-color:var(--ac);background:var(--ac2);box-shadow:0 0 0 2px var(--ac2)}
.c.on span{color:var(--ac);font-weight:600}
/* pendientes por resolver: tareas, no categorías del registro */
.pends{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0 0}
.pend{background:var(--wabg);border:1px solid #f0dfae;border-radius:9px;padding:9px 13px;
  font-size:13.5px;color:#7a5200;cursor:pointer}
.pend:hover{filter:brightness(.98);border-color:#e0c98a}
.pend b{font-size:15px} .pend span{color:#8a6a2a}
/* próximos exámenes */
/* la predicción va en su propia línea a todo lo ancho: en una columna estrecha
   quedaba en una tira de 64px y no se podía leer */
.examFila{display:grid;grid-template-columns:1fr;gap:4px;
  padding:9px 0;border-bottom:1px solid #f0f2f4;font-size:13.5px}
.examFila:last-of-type{border-bottom:0}
.examFila .ed{font-weight:600}
.examFila .ed small{display:block;font-weight:400;font-size:11.5px;color:var(--mut)}
.examFila .coh{font-size:12.5px;color:var(--mut)}
.examFila .pred{color:var(--tx);background:var(--panel);border-radius:7px;
  padding:6px 9px;font-size:13px}
/* paneles en fila horizontal, de izquierda a derecha. 'align-items:start' es la clave:
   cada panel mide lo que su contenido y NO se estira a la altura del más alto. */
/* Rejilla de 4 columnas. Los paneles anchos ocupan 2, así las filas cierran parejas:
   fila 1 = Rendimiento(1) + Exámenes(2) + Completitud(1)
   fila 2 = Por edición(2) + En formación(2)
   'align-items:start' evita que se estiren y dejen huecos en blanco. */
.dash{display:grid;grid-template-columns:1fr;gap:12px;align-items:start;margin:16px 0 0}
.pnl{background:var(--bg);border:1px solid var(--bd);border-radius:11px;padding:13px 14px}
@media(min-width:681px){ .dash{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1150px){
  .dash{grid-template-columns:repeat(4,1fr)}
  .pnl.ancho{grid-column:span 2}
  /* con doble ancho cada edición cabe en una línea y el panel no queda el doble de alto */
  .pnl.ancho .examFila{grid-template-columns:180px 185px 1fr;gap:10px;align-items:center}
  .pnl.ancho .examFila .pred{background:none;padding:0}
}
.pnl h4{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);
  margin-bottom:11px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.pnl h4 small{text-transform:none;letter-spacing:0;font-weight:400;font-size:12px}
.bars{display:flex;flex-direction:column;gap:9px}
.bar{display:grid;grid-template-columns:118px 1fr 44px;align-items:center;gap:10px;font-size:13px}
.bar.clk{cursor:pointer;border-radius:6px;padding:1px 3px;margin:-1px -3px}
.bar.clk:hover{background:var(--ac2)}
.bar .bl{color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .bt{background:var(--panel2);border-radius:99px;height:9px;overflow:hidden}
.bar .bt i{display:block;height:100%;background:var(--ac);border-radius:99px;min-width:2px}
.bar .bn{font-variant-numeric:tabular-nums;font-weight:600;color:var(--mut);text-align:right}
.futuro{background:var(--panel);border:1px dashed var(--bd2)}
.futuro h4{color:var(--mut)}
.chips3{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.chips3 span{background:var(--bg);border:1px solid var(--bd);border-radius:7px;padding:7px 11px;font-size:13px}
.chips3 b{color:var(--tx)}

/* selector de columnas */
.colspanel{position:absolute;right:0;top:40px;background:var(--bg);border:1px solid var(--bd2);
  border-radius:9px;box-shadow:0 8px 26px rgba(16,24,40,.18);padding:12px;width:300px;z-index:30;
  max-height:420px;overflow:auto}
.colspanel h5{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);
  margin:10px 0 5px}
.colspanel h5:first-child{margin-top:0}
.colspanel label{display:flex;align-items:center;gap:8px;padding:4px 5px;border-radius:5px;
  font-weight:400;font-size:13.5px;margin:0;cursor:pointer}
.colspanel label:hover{background:var(--panel)}
.colspanel .fija{color:var(--mut)}
/* la acción principal, arriba y pegada al desplazar */
.colspanel .cabeza{position:sticky;top:-12px;background:var(--bg);margin:-12px -12px 4px;
  padding:12px;border-bottom:1px solid var(--bd);z-index:2}
.colspanel .cabeza .btn{width:100%;padding:9px}

/* selector de prototipo */
.demo{position:fixed;right:14px;bottom:14px;background:#16191d;color:#fff;border-radius:9px;
  padding:9px 11px;font-size:12px;z-index:60;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.demo b{display:block;margin-bottom:6px;font-size:10.5px;letter-spacing:.08em;color:#9aa3ad}
.demo button{background:#2b3138;border:0;color:#fff;padding:5px 9px;border-radius:5px;
  cursor:pointer;font-size:12px;margin-right:3px}
.demo button.on{background:var(--ac);font-weight:600}
@media(max-width:1000px){.cols{grid-template-columns:1fr}}

/* ═══════ MÓVIL: la lista deja de ser tabla y pasa a tarjetas ═══════ */
.tarjetas{display:none}
@media(max-width:680px){
  :root{--hh:52px}
  main{padding:12px}
  header{gap:9px;padding:0 12px;height:52px}
  .marca small{display:none}
  .user{display:none}                       /* el nombre del usuario no cabe: se ve al tocar Salir */
  header .btn.pri{padding:8px 13px}
  .tit h1{font-size:19px}
  /* contadores: en fila que se arrastra, sin romper */
  .cnt{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .cnt::-webkit-scrollbar{height:0}
  .c{min-width:auto;flex:0 0 auto;padding:8px 12px}
  .c b{font-size:19px}
  /* herramientas apiladas y a lo ancho */
  .tools{gap:7px}
  .busca{flex:1 1 100%;min-width:0}
  .tools>select,.tools #colsWrap{flex:1 1 auto}
  .tools .btn.pri{flex:1 1 100%}
  #colsWrap{display:none}                    /* el selector de columnas es de escritorio */
  .tools .btn.pri{display:none}              /* "Nuevo residente" es carga de datos: solo en PC */
  /* se esconde la tabla, se muestran las tarjetas */
  .tabla{display:none}
  .tarjetas{display:block}
  .rcard{background:var(--bg);border:1px solid var(--bd);border-radius:11px;padding:13px 14px;
    margin-bottom:9px;box-shadow:var(--sh);cursor:pointer}
  .rcard:active{background:var(--ac2)}
  .rcard .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
  .rcard .nom{font-weight:700;font-size:15.5px;line-height:1.3}
  .rcard .ci{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:var(--mut);margin-top:2px}
  .rcard .meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:9px;font-size:13px;color:var(--mut)}
  .rcard .meta b{color:var(--tx);font-weight:600}
  .rcard .flags{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
  /* ficha en móvil: barra de acciones cómoda, botones a lo ancho */
  .fbar{gap:8px}
  .fbar .volver{flex:1 1 100%;justify-content:center}
  .fbar .guardar{flex:1 1 100%}
  .estadoG{flex:1 1 100%}
  .fh h1{font-size:20px}
  .sec .body{padding:13px}
  /* tablero del admin: barras más compactas para que quepan */
  .bar{grid-template-columns:84px 1fr 40px;gap:8px;font-size:12.5px}
  .seg button{padding:6px 10px;font-size:12.5px}
  .seg.sm button{padding:5px 9px;font-size:12px}
  /* selector de prototipo, más chico y sin tapar */
  .demo{right:8px;bottom:8px;padding:7px 8px;max-width:calc(100vw - 16px)}
  .demo button{font-size:11px;padding:5px 7px;margin-bottom:2px}
  /* el aviso de guardar ocupa la pantalla cómodo */
  .modalcard{width:auto;margin:14px}
  .modalcard .acciones{flex-direction:column}
  /* móvil = solo lectura: se ve pero no se toca */
  #vFicha .guardar,#vFicha .estadoG{display:none}
  .soloLectura{background:var(--ac2);border:1px solid #cfe0f2;border-radius:9px;
    padding:11px 14px;font-size:13.5px;color:#0a4a8c;margin-bottom:14px;display:flex;gap:9px;align-items:center}
  #vFicha .inp,#vFicha textarea{background:var(--panel)!important;color:var(--tx)!important;
    border-color:var(--bd)!important;cursor:default}
  #vFicha .body input,#vFicha .body select,#vFicha .body textarea{pointer-events:none}
  .soloLectura{display:flex}
  /* tutores: una columna, y sin agregar/quitar (el móvil es solo lectura) */
  .tutorFila{grid-template-columns:1fr}
  #vFicha .quitarTutor,#vFicha .btnAddTutor{display:none}
  /* excepción: los comentarios SÍ se pueden responder desde el móvil */
  #vFicha .coment{pointer-events:auto!important;background:var(--bg)!important;cursor:text}
  #vFicha button.coment{cursor:pointer}
  .secComent{border:1.5px solid var(--ac);box-shadow:0 0 0 3px var(--ac2)}
  .secComent>h3{background:var(--ac2);color:var(--ac)}
}
/* ═══════════ IMPRESIÓN DEL MODELO 36-24 ═══════════
   28 columnas no caben a lo ancho: se imprimen por bloques, repitiendo el
   nombre, para que ninguna fila quede partida ni se pierda un dato. */
#impresion{display:none}
body.imprimiendo #impresion{display:block}

@media print{
  @page{size:landscape;margin:11mm}
  /* solo se imprime el modelo: la aplicación se esconde */
  body.imprimiendo #login,body.imprimiendo #app,body.imprimiendo #modal{display:none!important}
  body.imprimiendo{background:#fff}
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact}

  #impresion{font:10pt/1.35 "Segoe UI",system-ui,sans-serif;color:#000}
  /* cada policlínico empieza en hoja nueva */
  .hoja{page-break-after:always;break-after:page}
  .hoja:last-child{page-break-after:auto;break-after:auto}

  .encab{border-bottom:2px solid #000;padding-bottom:5pt;margin-bottom:9pt}
  .encab h1{font-size:14pt;margin:0 0 3pt}
  .encab .sub{font-size:9.5pt}

  #impresion h2{font-size:10.5pt;margin:11pt 0 4pt;padding:3pt 5pt;background:#e8e8e8;
    border-left:3pt solid #000;break-after:avoid;page-break-after:avoid}

  #impresion table{width:100%;border-collapse:collapse;margin-bottom:6pt;font-size:8.5pt}
  /* el encabezado se repite en CADA hoja: si no, la 2da página no se entiende */
  #impresion thead{display:table-header-group}
  #impresion tfoot{display:table-footer-group}
  /* una fila NUNCA se parte entre dos hojas */
  #impresion tr{page-break-inside:avoid;break-inside:avoid}
  #impresion th,#impresion td{border:0.5pt solid #444;padding:2.5pt 4pt;text-align:left;
    vertical-align:top;word-break:break-word}
  #impresion th{background:#dcdcdc;font-weight:700}
  #impresion tbody tr:nth-child(even) td{background:#f4f4f4}
  #impresion .np{width:22pt;text-align:right}
  #impresion .nm{width:150pt;font-weight:600}

  .firmas{display:flex;gap:26pt;margin-top:18pt;font-size:9pt;break-inside:avoid;page-break-inside:avoid}
  .firmas>div{flex:1;text-align:center}
  .firmas .linea{border-top:0.8pt solid #000;margin-bottom:3pt;height:26pt}
  .pie{margin-top:9pt;font-size:8pt;color:#555;text-align:right}
}

/* ═══════════ LO QUE ME TOCA (tareas) ═══════════ */
.tgrupo{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);
  margin:20px 0 8px}
.tlista{display:flex;flex-direction:column;gap:8px}
.titem{display:grid;grid-template-columns:30px 52px 1fr 20px;align-items:center;gap:10px;
  background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:12px 14px;
  cursor:pointer;transition:.12s}
.titem:hover{border-color:var(--ac);box-shadow:var(--sh);transform:translateY(-1px)}
.titem.sinclic{cursor:default}
.titem.sinclic:hover{border-color:var(--bd);box-shadow:none;transform:none}
.tico{font-size:19px;text-align:center}
.tn{font-size:24px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;
  color:var(--ac)}
.ttxt b{display:block;font-size:15px}
.ttxt small{color:var(--mut);font-size:12.5px}
.tflecha{color:var(--mut);font-size:17px;text-align:center}
.titem.sinclic .tflecha{visibility:hidden}
.tvacio{background:var(--okbg);border:1px solid #bfe3cd;color:var(--ok);border-radius:10px;
  padding:18px;text-align:center;font-weight:600;margin-top:14px}
@media(max-width:680px){
  .titem{grid-template-columns:26px 44px 1fr;gap:8px;padding:11px}
  .tflecha{display:none}
  .tn{font-size:20px}
}

/* ═══════════ AVISOS DE VALIDACIÓN (carné, teléfono) ═══════════ */
.chequeo{font-size:12px;margin-top:4px;line-height:1.35}
.chequeo.err{color:var(--ba);font-weight:600}
.chequeo.avi{color:var(--wa);font-weight:600}
.chequeo.ok{color:var(--ok)}
.inp.malo{border-color:var(--ba);background:#fdeceb}
.inp.malo:focus{outline-color:var(--ba)}

/* ═══════════ PEDIR DATOS A UN MUNICIPIO ═══════════ */
.mcPedir{margin-top:10px;width:100%}
.mcPedir.pedido{background:var(--okbg);border-color:#bfe3cd;color:var(--ok);font-weight:600}
#solModal textarea.inp{min-height:60px;margin-top:4px}
#solResumen ul{margin:8px 0 0;padding-left:20px}
#solResumen li{margin:2px 0}
/* la banda que ve el administrativo */
.pedido-admin{background:#eef5ff;border:1.5px solid var(--ac);border-radius:11px;
  padding:14px 16px;margin-bottom:16px}
.pa-cab{display:flex;align-items:center;gap:8px;font-size:15px}
.pa-cab small{color:var(--mut);font-weight:400;margin-left:auto}
.pa-txt{white-space:pre-wrap;font-size:13.5px;margin:8px 0 10px;color:var(--tx)}
/* aviso corto flotante */
#toast{position:fixed;top:70px;right:16px;z-index:90;background:#16191d;color:#fff;
  padding:11px 15px;border-radius:9px;box-shadow:0 6px 20px rgba(0,0,0,.3);max-width:320px;
  font-size:13.5px;opacity:0;transform:translateY(-8px);transition:.2s;pointer-events:none}
#toast.ver{opacity:1;transform:none}

/* ═══════════ ENLACES DE LOGIN (crear cuenta / recuperar) ═══════════ */
.enlaces{display:flex;flex-direction:column;gap:8px;margin-top:16px;text-align:center}
.enlaces a{color:var(--ac);font-size:13.5px;text-decoration:none}
.enlaces a:hover{text-decoration:underline}
#login,#registro,#recuperar,#nuevaClave{min-height:100vh;display:grid;place-items:center;background:var(--panel)}
#registro.oculto,#recuperar.oculto,#nuevaClave.oculto{display:none}

/* ═══════════ PANEL DE CUENTAS ═══════════ */
.cuGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-bottom:8px}
.cuCard{background:var(--bg);border:1px solid var(--bd);border-radius:11px;padding:14px}
.cuTop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.cuSub{font-size:12.5px;color:var(--mut);margin-top:2px}
.cuBtns{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
/* Pedidos a los municipios y la comprobación de qué hicieron de verdad */
.pedGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.pedCard{background:var(--bg);border:1px solid var(--bd);border-radius:11px;padding:12px 13px}
.pedTop{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.pedSub{font-size:12.5px;color:var(--mut);margin:3px 0 9px}
.modalcard.ancha{max-width:900px;width:calc(100vw - 40px)}
.revTabla{max-height:52vh;overflow:auto;margin-top:4px}
.revTabla td{font-size:13px;vertical-align:top}
.revAntes{color:var(--mut);text-decoration:line-through}
.revDesp{color:var(--ok);font-weight:600}
.revQuien{color:var(--mut);font-size:12px;white-space:nowrap}
.invBox{background:var(--ac2);border:1px solid var(--bd);border-radius:12px;padding:16px;margin-bottom:20px}
.invFila{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.invFila .inp{flex:1 1 160px;min-width:140px}
.invFila .btn{flex:0 0 auto}
.invOk{color:var(--ok);font-weight:600;margin-bottom:8px}
.invLink{display:flex;gap:8px;align-items:center}
.invLink .inp{flex:1;font-size:12.5px;background:var(--bg)}