/* Nebucor · Panel de supervisor */
:root {
  --navy: #000D2D; --royal: #123A9E; --azul: #2F7FE8; --cyan: #7FD0F7;
  --oro: #D59F3F; --oro-hi: #EFCB7C; --claro: #F4F7FC; --tinta: #08122F; --gris: #5A6987; --gris2: #8492AC;
  --linea: rgba(214,222,236,.9); --verde: #178A52; --rojo: #C2362F; --ambar: #B07A1E;
  --disp: 'Archivo', system-ui, sans-serif; --txt: 'Instrument Sans', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--txt); color: var(--tinta); background: var(--claro); -webkit-font-smoothing: antialiased; min-height: 100vh; }
a { color: var(--royal); }
a:hover { color: #071A57; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- cabecera oscura ---------- */
.cab { position: relative; overflow: hidden; color: #fff; background: radial-gradient(120% 140% at 70% 0%, #1747B8 0%, #0B2470 38%, #061650 62%, #000A26 100%); }
.cab::before { content: ''; position: absolute; left: 55%; top: -200px; width: 700px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(170,215,255,.42), rgba(47,127,232,.12) 55%, rgba(47,127,232,0) 78%); pointer-events: none; }
.envolver { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.barra { min-height: 68px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.1); }
.barra .izq { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.barra img.logo { height: 28px; display: block; }
.nav { display: flex; gap: 4px; }
.nav a { padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: rgba(228,238,255,.72); text-decoration: none; }
.nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav a.on { color: #fff; background: rgba(255,255,255,.12); }
.der { display: flex; align-items: center; gap: 10px; }
.sello { padding: 4px 9px; border-radius: 6px; background: rgba(239,203,124,.18); color: var(--oro-hi); font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; font-weight: 700; }
.avatar { width: 36px; height: 36px; border-radius: 50%; padding: 2px; border: 0; background: linear-gradient(160deg, #FFF3CF, #D59F3F 60%, #F3D48E); }
.avatar span { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, #1F56D0, #061650 80%); font-family: var(--disp); font-weight: 800; font-size: 12px; color: var(--oro-hi); }
.icono-btn { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; }
.icono-btn.gira svg { animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.heroe { padding: 26px 0 30px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px; }
.ceja { font-family: var(--mono); font-size: 10.5px; letter-spacing: 3px; font-weight: 700; color: var(--oro-hi); text-transform: uppercase; }
.titulo { margin: 8px 0 0; font-family: var(--disp); font-weight: 900; font-stretch: 86%; font-size: 42px; line-height: .98; letter-spacing: -1.2px; }
.tw { background: linear-gradient(176deg, #fff 40%, #C7DBF5 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tg { padding-right: 6px; background: linear-gradient(180deg, #FFF1C6 0%, #EFCB7C 48%, #C8902F 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { margin-top: 8px; font-size: 15px; color: rgba(228,238,255,.72); }
.cab .heroe:not(.sin-kpi) { padding-bottom: 76px; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 0; font: 800 14px var(--txt); text-decoration: none; white-space: nowrap; }
.btn-oro { color: #1A1200; background: linear-gradient(160deg, #FFF3CF 0%, #EFCB7C 30%, #D59F3F 65%, #F3D48E 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 0 26px rgba(239,203,124,.3); }
.btn-oro:hover { color: #1A1200; filter: brightness(1.04); }
.btn-vidrio { color: #fff; font-weight: 700; background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.22); }
.btn-vidrio:hover { color: #fff; background: rgba(255,255,255,.16); }
.btn-claro { color: var(--royal); font-weight: 700; background: #fff; box-shadow: 0 0 0 1px var(--linea); }
.btn-claro:hover { background: #EEF3FC; }
.btn-azul { color: #fff; background: linear-gradient(160deg, #2F7FE8, #123A9E); }
.btn-azul:hover { color: #fff; filter: brightness(1.06); }
.btn-wa { color: #0E6B39; background: #E7F7EE; font-weight: 700; }
.btn-wa:hover { color: #0E6B39; background: #D6F1E2; }
.btn.chico { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.ancho { width: 100%; }

/* ---------- contenido ---------- */
main.cuerpo { max-width: 1200px; margin: 0 auto; padding: 24px 24px 60px; display: flex; flex-direction: column; gap: 20px; }
.tarjeta { padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--linea), 0 10px 30px rgba(7,26,87,.06); min-width: 0; }
.tarjeta h2 { margin: 0; font-family: var(--disp); font-weight: 800; font-size: 19px; letter-spacing: -.2px; }
.tarjeta .cab-t { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.tarjeta .cab-t a, .tarjeta .cab-t .nota { font-size: 13px; font-weight: 700; text-decoration: none; }
.tarjeta .cab-t .nota { font-weight: 600; color: var(--gris2); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: -52px; position: relative; }
.kpi { padding: 18px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--linea), 0 14px 32px rgba(7,26,87,.12); text-decoration: none; color: inherit; }
a.kpi:hover { box-shadow: 0 0 0 2px var(--azul), 0 14px 32px rgba(7,26,87,.12); color: inherit; }
.kpi .t { font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; font-weight: 700; color: var(--gris2); }
.kpi .v { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.kpi .v b { font-family: var(--disp); font-weight: 900; font-size: 40px; line-height: 1; letter-spacing: -1px; }
.kpi .v span { font-size: 13px; color: var(--gris); font-weight: 600; }
.rejilla { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.persona { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; }
.persona + .persona { margin-top: 8px; }
.ini { width: 40px; height: 40px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--disp); font-weight: 800; font-size: 13px; color: #fff; background: radial-gradient(circle at 35% 30%, #2A63E0, #071A57 80%); }
.persona .info { flex: 1; min-width: 0; }
.persona .nom { font-weight: 700; font-size: 15px; color: var(--tinta); text-decoration: none; }
.persona .nom:hover { text-decoration: underline; }
.persona .mot { font-size: 13px; font-weight: 600; margin-top: 2px; }
.wa { width: 44px; height: 44px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #E7F7EE; color: #128C4A; }
.wa:hover { background: #D6F1E2; color: #0E6B39; }
.wa.no { background: #EEF1F6; color: #A9B3C6; pointer-events: none; }
.vacio { padding: 18px; border-radius: 14px; background: var(--claro); color: var(--gris); font-size: 14px; line-height: 1.5; }

.barras { display: flex; flex-direction: column; gap: 11px; }
.barra-f { display: grid; grid-template-columns: 170px minmax(0, 1fr) 46px; gap: 12px; align-items: center; font-size: 13.5px; }
.barra-f span:first-child { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-f span:last-child { font-family: var(--mono); font-weight: 700; font-size: 12.5px; text-align: right; color: var(--gris); }
.pista { height: 10px; border-radius: 99px; background: #E9EEF7; overflow: hidden; }
.pista i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #2F7FE8, #123A9E); }
.pista i.oro { background: linear-gradient(90deg, #F3D48E, #D59F3F); }
.pista i.verde { background: linear-gradient(90deg, #6EE7B7, #10B981); }

.falla { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-top: 1px solid #EEF2F8; }
.falla:first-of-type { border-top: 0; padding-top: 0; }
.pct { flex: none; min-width: 58px; padding: 6px 8px; border-radius: 10px; text-align: center; font-family: var(--disp); font-weight: 900; font-size: 18px; background: #FDF1F0; color: var(--rojo); }
.pct.medio { background: #FFF6E5; color: var(--ambar); }
.pct.bajo { background: #EAF6EF; color: var(--verde); }
.falla .q { font-weight: 700; font-size: 14.5px; line-height: 1.4; }
.falla .m { font-size: 12.5px; color: var(--gris); margin-top: 3px; }

/* ---------- filtros y tabla ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { min-height: 36px; padding: 0 13px; border-radius: 99px; border: 0; background: #fff; box-shadow: 0 0 0 1px var(--linea); font-size: 13px; font-weight: 700; color: var(--gris); display: inline-flex; align-items: center; gap: 6px; }
.chip b { font-family: var(--mono); font-size: 11.5px; color: var(--gris2); }
.chip.on { background: var(--royal); color: #fff; box-shadow: none; }
.chip.on b { color: var(--oro-hi); }
.buscar { flex: 1; min-width: 200px; max-width: 320px; height: 40px; padding: 0 14px; border-radius: 12px; border: 0; box-shadow: 0 0 0 1px var(--linea); background: #fff; font: 500 14px var(--txt); color: var(--tinta); margin-left: auto; }
.tabla-env { overflow-x: auto; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--linea), 0 10px 30px rgba(7,26,87,.06); }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 980px; }
.tabla th { text-align: left; padding: 14px 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 1.2px; font-weight: 700; color: var(--gris2); border-bottom: 1px solid #E7EDF7; white-space: nowrap; background: #FAFCFF; }
.tabla th.c, .tabla td.c { text-align: center; }
.tabla td { padding: 12px 10px; border-bottom: 1px solid #EEF2F8; vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr { cursor: pointer; }
.tabla tbody tr:hover td { background: #F7FAFF; }
.tabla td:first-child, .tabla th:first-child { padding-left: 20px; }
.tabla td:last-child, .tabla th:last-child { padding-right: 20px; }
.tabla .nom { font-weight: 700; color: var(--tinta); text-decoration: none; }
.tabla .cor { font-size: 12px; color: var(--gris2); }
.celda { width: 30px; height: 30px; margin: 0 auto; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 10.5px; font-weight: 700; background: #EEF1F6; color: #A9B3C6; }
.celda.ok { background: #DDF4E8; color: #14512F; }
.celda.med { background: #FBE9C4; color: #7A4F00; }
.celda.vista { background: #E3ECFB; color: var(--royal); }
.estado { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.estado::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.e-aprobado { background: #DDF4E8; color: #14512F; }
.e-repetir { background: #FDE7E5; color: #9E2B25; }
.e-curso { background: #E3ECFB; color: #123A9E; }
.e-sin { background: #EEF1F6; color: #5A6987; }
.e-inactivo { background: #EEF1F6; color: #8492AC; }
.e-atorado { background: #FFF1D6; color: #7A4F00; }
.mono { font-family: var(--mono); font-weight: 700; font-size: 12.5px; }
.tarjetas-m { display: none; flex-direction: column; gap: 10px; }

/* ---------- detalle ---------- */
.volver { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; text-decoration: none; }
.leccion { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid #EEF2F8; }
.leccion:first-of-type { border-top: 0; padding-top: 0; }
.leccion .n { width: 32px; height: 32px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--disp); font-weight: 800; font-size: 14px; background: #EEF1F6; color: var(--gris2); }
.leccion .n.ok { background: #DDF4E8; color: var(--verde); }
.leccion .n.med { background: #FBE9C4; color: var(--ambar); }
.leccion .n.vista { background: #E3ECFB; color: var(--royal); }
.leccion .t { flex: 1; min-width: 0; }
.leccion .t b { display: block; font-size: 14.5px; }
.leccion .t span { font-size: 12.5px; color: var(--gris); }
.leccion .r { font-family: var(--mono); font-weight: 700; font-size: 13px; white-space: nowrap; }
.intentos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-bottom: 16px; }
.intento { padding: 12px; border-radius: 14px; background: var(--claro); }
.intento .t { font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.2px; font-weight: 700; color: var(--gris2); }
.intento b { display: block; margin-top: 4px; font-family: var(--disp); font-weight: 900; font-size: 26px; }
.tema-f { margin-top: 10px; }
.tema-f .f { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600; margin-bottom: 5px; }
.sugerencia { margin-top: 16px; padding: 14px; border-radius: 14px; background: #FFF8EA; color: #5C3D00; font-size: 14px; line-height: 1.5; }
.evento { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid #EEF2F8; font-size: 13.5px; line-height: 1.4; }
.evento:first-of-type { border-top: 0; padding-top: 0; }
.evento .f { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--gris2); padding-top: 1px; }
.fallo-q { padding: 12px 0; border-top: 1px solid #EEF2F8; font-size: 14px; line-height: 1.45; }
.fallo-q:first-of-type { border-top: 0; padding-top: 0; }
.fallo-q .ok { color: var(--verde); font-weight: 600; font-size: 13px; }
.etq { display: inline-block; padding: 2px 7px; border-radius: 6px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .8px; background: #EEF1F6; color: var(--gris); vertical-align: 1px; }

/* ---------- qué reforzar ---------- */
.pregunta-r { display: flex; flex-direction: column; gap: 10px; }
.pregunta-r .top { display: flex; gap: 14px; align-items: flex-start; }
.pregunta-r .q { font-weight: 700; font-size: 15.5px; line-height: 1.4; }
.pregunta-r .m { font-size: 12.5px; color: var(--gris); margin-top: 4px; }
.pregunta-r .resp { padding: 12px 14px; border-radius: 12px; background: #F1FAF5; font-size: 14px; line-height: 1.5; }
.pregunta-r .resp b { color: var(--verde); }
.pregunta-r .quienes { font-size: 13px; color: var(--gris); line-height: 1.5; }
.pregunta-r details summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--royal); }

/* ---------- acceso ---------- */
.acceso { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; color: #fff; background: radial-gradient(120% 100% at 70% 0%, #1747B8 0%, #0B2470 38%, #061650 62%, #000A26 100%); position: relative; overflow: hidden; }
.acceso::before { content: ''; position: absolute; left: 40%; top: -240px; width: 800px; height: 520px; border-radius: 50%; background: radial-gradient(closest-side, rgba(170,215,255,.35), rgba(47,127,232,0) 78%); pointer-events: none; }
.acceso form { position: relative; width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 14px; }
.acceso img { height: 34px; align-self: flex-start; margin-bottom: 18px; }
.acceso label { font-size: 13px; font-weight: 700; color: rgba(228,238,255,.8); display: flex; flex-direction: column; gap: 6px; }
.acceso input { height: 50px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.07); color: #fff; font: 500 16px var(--txt); }
.acceso input::placeholder { color: rgba(228,238,255,.4); }
.acceso input:focus { outline: none; border-color: var(--oro-hi); background: rgba(255,255,255,.1); }
.acceso .err { min-height: 20px; color: #FFB4AE; font-size: 14px; font-weight: 600; }
.acceso .suave { color: rgba(228,238,255,.7); font-size: 14.5px; line-height: 1.5; margin: 0; }
.acceso .btn { min-height: 52px; font-size: 15px; }

/* ---------- modal y aviso ---------- */
#capa:empty { display: none; }
.fondo-m { position: fixed; inset: 0; z-index: 50; background: rgba(0,10,38,.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { width: 100%; max-width: 440px; padding: 24px; border-radius: 22px; background: #fff; box-shadow: 0 30px 80px rgba(0,10,38,.4); display: flex; flex-direction: column; gap: 14px; }
.modal h2 { margin: 0; font-family: var(--disp); font-weight: 800; font-size: 21px; }
.modal p { margin: 0; color: var(--gris); font-size: 14.5px; line-height: 1.5; }
.modal label { font-size: 13px; font-weight: 700; color: var(--gris); display: flex; flex-direction: column; gap: 6px; }
.modal input { height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid #D6DEEC; font: 500 15px var(--txt); color: var(--tinta); }
.modal input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(47,127,232,.2); }
.modal .pie { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.modal .err { color: var(--rojo); font-size: 13.5px; font-weight: 600; min-height: 18px; }
.clave { padding: 16px; border-radius: 14px; text-align: center; font-family: var(--mono); font-weight: 700; font-size: 28px; letter-spacing: 3px; color: var(--royal); background: #EEF3FC; user-select: all; }
#aviso { position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 12px 18px; border-radius: 12px; background: #08122F; color: #fff; font-size: 14px; font-weight: 600; transition: .25s; max-width: calc(100vw - 32px); }
#aviso.ver { opacity: 1; transform: translate(-50%, 0); }
.carga { min-height: 60vh; display: flex; align-items: center; justify-content: center; color: var(--gris); font-weight: 600; }
.pie-datos { font-size: 12.5px; color: var(--gris2); text-align: center; }

/* ---------- celular ---------- */
.nav-m { display: none; }
@media (max-width: 900px) {
  .rejilla { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .envolver { padding: 0 16px; }
  main.cuerpo { padding: 18px 16px 100px; gap: 14px; }
  .nav { display: none; }
  .barra { min-height: 60px; }
  .barra img.logo { height: 24px; }
  .titulo { font-size: 34px; }
  .heroe { padding: 20px 0 64px; }
  .heroe.sin-kpi { padding-bottom: 24px; }
  .kpis { gap: 10px; margin-top: -60px; }
  .kpi { padding: 14px; }
  .kpi .v b { font-size: 32px; }
  .tarjeta { padding: 16px; border-radius: 18px; }
  .barra-f { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .barra-f .pista { grid-column: 1 / -1; grid-row: 2; }
  .tabla-env { display: none; }
  .tarjetas-m { display: flex; }
  .buscar { max-width: none; margin-left: 0; order: -1; flex-basis: 100%; }
  .acciones .btn { flex: 1; }
  .nav-m { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 6px 6px calc(10px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -1px 0 #E7EDF7, 0 -10px 30px rgba(7,26,87,.06); }
  .nav-m a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 50px; font-size: 11.5px; font-weight: 600; color: var(--gris2); text-decoration: none; }
  .nav-m a.on { color: var(--royal); font-weight: 700; }
}
.tarjeta-p { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--linea); text-decoration: none; color: inherit; }
.tarjeta-p:hover { color: inherit; }
.tarjeta-p .fila { display: flex; align-items: center; gap: 10px; }
.tarjeta-p .mini { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
.tarjeta-p .mini i { height: 8px; border-radius: 3px; background: #E9EEF7; }
.tarjeta-p .mini i.ok { background: #34C27A; }
.tarjeta-p .mini i.med { background: #E9B44C; }
.tarjeta-p .mini i.vista { background: #8FB5F0; }
.tarjeta-p .datos { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--gris); }