/* ITAP Academy — sistema visual (manual de marca v1.2 Navy & White).
   Navy #061B3A y blanco; azul acero y grises solo como apoyo. Montserrat (títulos) + Inter (texto). */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Montserrat;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/montserrat-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Montserrat;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/montserrat-latin-700-normal.woff2) format('woff2')}
:root{
  --navy:#061B3A; --navy2:#0D2C57; --blanco:#FFFFFF; --acero:#6F829B; --gris:#DCE3EC; --claro:#F4F6F9;
  --texto:#061B3A; --texto2:#3D4C63; --suave:#56657C;   /* texto secundario con contraste AA sobre blanco */
  --ok:#1F7A4D; --ok-bg:#E8F4ED; --bad:#B42318; --bad-bg:#FDECEA;
  --f-tit:Montserrat,"Segoe UI",system-ui,sans-serif; --f-txt:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
  /* nombres de la versión anterior (algunos estilos en línea los usan) */
  --fondo:var(--claro); --panel:var(--blanco); --panel2:var(--claro); --borde:var(--gris); --borde2:var(--acero);
  --tenue:var(--suave); --verde:var(--navy); --lima:var(--navy); --rojo:var(--bad);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--blanco);color:var(--texto);font-family:var(--f-txt);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-tit);color:var(--navy);letter-spacing:-.2px;line-height:1.2}
a{color:var(--navy);text-underline-offset:3px} a:hover{color:var(--navy2)}
button,input,select,textarea{font:inherit}
.oculto{display:none!important}
.envoltura{max-width:1120px;margin:0 auto;padding:0 24px}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* Botones y campos */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:2px;border:1px solid var(--navy);background:var(--navy);color:var(--blanco);font-weight:500;font-size:15px;cursor:pointer;text-decoration:none;transition:background .15s}
.btn:hover{background:var(--navy2);color:var(--blanco)}
.btn:disabled{opacity:.6;cursor:wait}
.btn.sec{background:var(--blanco);color:var(--navy);border:1px solid var(--navy)}
.btn.sec:hover{background:var(--claro);color:var(--navy)}
.btn.claro{background:var(--blanco);color:var(--navy);border-color:var(--blanco)}
.btn.claro:hover{background:var(--gris)}
.btn.borde-claro{background:transparent;color:var(--blanco);border-color:var(--blanco)}
.btn.borde-claro:hover{background:rgba(255,255,255,.1);color:var(--blanco)}
.btn.peq{min-height:36px;padding:0 12px;font-size:13px}
.btn.peligro{background:var(--blanco);color:var(--bad);border:1px solid var(--bad)}
.btn.peligro:hover{background:var(--bad-bg);color:var(--bad)}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label,.etq{font-size:13px;font-weight:600;color:var(--navy)}
.campo input,.campo select,.campo textarea{max-width:100%;min-width:0;min-height:44px;padding:10px 12px;border-radius:2px;border:1px solid var(--acero);background:var(--blanco);color:var(--texto);font-size:15px}
.campo textarea{min-height:90px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--navy);outline-offset:0;border-color:var(--navy)}
.campo input[readonly]{background:var(--claro);color:var(--suave);cursor:not-allowed}
input::placeholder,textarea::placeholder{color:#8593A6}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--texto2);line-height:1.45}
.chk input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--navy);flex:none}
.msg{font-size:14px;line-height:1.45;padding:10px 12px;border-radius:2px}
.msg.err{background:var(--bad-bg);color:var(--bad);border:1px solid #F1B7B0}
.msg.ok{background:var(--ok-bg);color:var(--ok);border:1px solid #B8DCC6}
.sub{font-size:14px;color:var(--texto2);line-height:1.55}
.mini{font-size:12px;color:var(--suave)}

/* Preloader e intro */
#itap-preloader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:var(--blanco);pointer-events:none;opacity:0;animation:itapAparece .2s .35s forwards;transition:opacity .3s}
#itap-preloader img{width:min(60vw,300px);height:auto}
#itap-preloader.listo{opacity:0!important;animation:none}
@keyframes itapAparece{to{opacity:1}}
#itap-intro{position:fixed;inset:0;z-index:10000;background:var(--navy);display:flex;align-items:center;justify-content:center;transition:opacity .4s}
#itap-intro video{width:100%;height:100%;object-fit:contain;background:var(--navy)}
#itap-intro button{position:absolute;right:20px;bottom:20px;background:transparent;border:1px solid rgba(255,255,255,.6);color:#fff;padding:8px 14px;border-radius:2px;font-size:13px;cursor:pointer}
#itap-intro.fin{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){#itap-preloader{animation:none;opacity:0}}

/* Encabezado público */
.cab{background:var(--blanco);border-bottom:1px solid var(--gris)}
.cab .envoltura{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:70px}
.cab .logo{display:block;line-height:0}
.cab .logo img{width:180px;height:auto;margin:-18px -16px}
.cab nav{display:flex;align-items:center;gap:22px;font-size:14px}
.cab nav a{text-decoration:none;color:var(--navy)}
.cab nav a:hover,.cab nav a.act{text-decoration:underline}
.cab nav .btn{min-height:38px;padding:0 16px;text-decoration:none;color:var(--blanco)}
.pie-sitio{background:var(--navy);color:var(--blanco);font-size:12px;line-height:1.6}
.pie-sitio .envoltura{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:26px;padding-bottom:26px}
.pie-sitio p{margin:0;max-width:460px;color:#E3E9F1}
.pie-sitio a{color:var(--blanco)}
.pie-sitio .enl{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start}

/* Secciones públicas */
.hero{background:var(--navy);color:var(--blanco)}
.hero .envoltura{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center;padding-top:72px;padding-bottom:72px}
.hero h1{color:var(--blanco);font-size:30px;margin:10px 0 16px}
.hero p{margin:0 0 26px;color:#E3E9F1;font-size:14px;max-width:520px}
.eslogan{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#E3E9F1;font-weight:500}
.hero .botones{display:flex;gap:10px;flex-wrap:wrap}
.recorrido{border:1px solid rgba(255,255,255,.45);padding:22px 20px}
.recorrido h2{color:var(--blanco);font-size:15px;margin:0 0 10px}
.recorrido ol{list-style:none;margin:0;padding:0;font-size:13px}
.recorrido li{display:flex;gap:16px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.3)}
.recorrido li:last-child{border-bottom:0}
.recorrido li b{font-weight:500;min-width:18px}
.seccion{padding:56px 0}
.seccion.gris{background:var(--claro)}
.seccion h2{font-size:22px;margin:0 0 28px}
.seccion .titfila{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.seccion .titfila a{font-size:13px}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.programa{display:flex;flex-direction:column;gap:10px;padding:20px 18px;border:1px solid var(--navy);background:var(--blanco);color:var(--navy)}
.programa.desarrollo{border-color:var(--gris);background:var(--claro)}
.programa .arriba{display:flex;justify-content:space-between;align-items:center;gap:8px}
.etiqueta{display:inline-block;background:var(--navy);color:var(--blanco);font-size:10px;font-weight:600;padding:2px 7px;letter-spacing:.3px}
.tipo{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--navy)}
.programa h3{margin:0;font-size:15px}
.programa p{margin:0;font-size:13px;color:var(--texto2)}
.datos-curso{font-size:11px;border:1px dashed var(--acero);background:var(--claro);padding:6px 8px;color:var(--navy)}
.programa .ver{margin-top:auto;font-size:13px}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.rol{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 0 4px;border-top:2px solid var(--navy);color:var(--navy);text-decoration:none}
.rol b{font-family:var(--f-tit);font-size:14px;display:block}
.rol span{font-size:12px;color:var(--texto2)}
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.paso{border-top:2px solid var(--navy);padding-top:14px}
.paso b{font-family:var(--f-tit);font-size:14px;display:block;margin-bottom:6px}
.paso span{font-size:13px;color:var(--texto2)}
.cta{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.cta h2{margin:0;font-size:20px}
.filtros{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 28px}
.filtros button{min-height:34px;padding:0 14px;border:1px solid var(--navy);background:var(--blanco);color:var(--navy);font-size:13px;cursor:pointer;border-radius:0}
.filtros button.act{background:var(--navy);color:var(--blanco)}
.hero.peq .envoltura{display:block;padding-top:28px;padding-bottom:40px}
.hero.peq a{color:var(--blanco);font-size:13px}
.hero.peq h1{font-size:28px;margin:6px 0 8px}
.hero.peq p{margin:0}
.detalle{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:start}
.detalle h2{font-size:19px;margin:0 0 12px}
.detalle ul{margin:0 0 30px;padding-left:20px;font-size:14px}
.detalle li{margin:4px 0}
.temario{border:1px solid var(--gris);margin-bottom:30px}
.temario details{border-bottom:1px solid var(--gris)}
.temario details:last-child{border-bottom:0}
.temario summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;padding:12px 14px;font-size:14px}
.temario summary::-webkit-details-marker{display:none}
.temario summary::after{content:'+';font-weight:600}
.temario details[open] summary::after{content:'−'}
.temario details p{margin:0;padding:0 14px 14px;font-size:13px;color:var(--texto2)}
.ficha{border:1px solid var(--navy);padding:20px 18px;display:flex;flex-direction:column;gap:14px;position:sticky;top:20px}
.ficha .precio{font-family:var(--f-tit);font-size:22px;font-weight:700}
.ficha dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;font-size:13px}
.ficha dt{color:var(--texto2)}
.ficha dd{margin:0}
.ficha .nota{font-size:11px;color:var(--texto2);margin:0}
.caja-gris{border:1px dashed var(--acero);background:var(--claro);padding:12px 14px;font-size:13px}
.inscripcion{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;align-items:start;padding:40px 0 56px}
.inscripcion h1{font-size:28px;margin:0 0 12px}
.inscripcion ol{padding-left:20px;font-size:13px;color:var(--texto2)}
.form-caja{border:1px solid var(--gris);padding:22px;display:flex;flex-direction:column;gap:16px;background:var(--blanco)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.texto-legal{max-width:760px;padding:40px 0 56px;font-size:14px}
.texto-legal h1{font-size:28px}
.texto-legal h2{font-size:17px;margin-top:28px}
.pendiente{background:#FFF7E0;border:1px dashed #C9A227;padding:2px 6px}

/* Ingreso */
body.fondo-claro{background:var(--claro)}
.login{min-height:calc(100vh - 64px);padding:40px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}
.tarjeta{width:100%;max-width:340px;padding:28px 28px 24px;background:var(--blanco);border:1px solid var(--gris);display:flex;flex-direction:column;gap:16px}
.tarjeta .logo-ingreso{width:240px;height:auto;margin:-26px -24px -14px -30px}
.tarjeta h1{margin:0;font-size:19px}
.tarjeta p{margin:0}
.pie{margin:0;font-size:12px;color:var(--texto2);line-height:1.5}

/* Encabezado de la parte privada */
.top{border-bottom:1px solid var(--gris);background:var(--blanco)}
.top .fila{max-width:1120px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.top .titulo{display:flex;align-items:center;gap:10px;font-family:var(--f-tit);font-size:15px;font-weight:600;color:var(--navy);text-decoration:none}
.top .titulo img{width:150px;height:auto;margin:-14px -12px -14px -14px}
.top .titulo b{font-weight:600;color:var(--texto2);border-left:1px solid var(--gris);padding-left:12px}
.top .der{display:flex;align-items:center;gap:14px;font-size:14px;color:var(--texto2)}
.top nav{max-width:1120px;margin:0 auto;padding:0 24px;display:flex;gap:4px;flex-wrap:wrap}
.top nav a{padding:10px 12px;font-size:14px;font-weight:500;color:var(--texto2);text-decoration:none;border-bottom:2px solid transparent}
.top nav a.act{color:var(--navy);font-weight:600;border-bottom-color:var(--navy)}
.top .der .btn.peq{min-height:38px;text-decoration:none}
.top .der a{text-decoration:none}
.linkbtn{background:none;border:0;color:var(--navy);font-weight:500;font-size:14px;cursor:pointer;padding:10px 4px}
.linkbtn:hover{text-decoration:underline}

/* Mis cursos */
main.cont{max-width:1120px;margin:0 auto;padding:32px 24px 56px;display:flex;flex-direction:column;gap:22px}
main.cont h1{margin:0;font-size:28px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.curso{display:flex;flex-direction:column;gap:10px;min-height:190px;padding:20px 18px;background:var(--blanco);border:1px solid var(--navy);color:var(--navy);text-decoration:none;transition:background .15s}
a.curso:hover{background:var(--claro);color:var(--navy)}
.curso .et{font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--navy)}
.curso .nom{font-family:var(--f-tit);font-size:17px;font-weight:700}
.curso .des{font-size:13px;color:var(--texto2);line-height:1.5}
.barra{height:6px;background:var(--gris);overflow:hidden;margin-top:auto}
.barra i{display:block;height:100%;background:var(--navy)}
.vacio{padding:28px;border:1px dashed var(--acero);background:var(--claro);color:var(--texto2);text-align:center;line-height:1.6}

/* Curso (módulo embebido) */
.aviso{position:fixed;left:16px;right:16px;bottom:16px;z-index:10;max-width:720px;margin:0 auto;padding:14px 16px;background:var(--bad-bg);color:var(--bad);border:1px solid #F1B7B0;font-size:14px;line-height:1.45;box-shadow:0 8px 24px rgba(6,27,58,.18)}
body.pag-curso{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
body.pag-curso .top{flex:none}
.zona{position:relative;flex:1 1 auto;min-height:0;display:flex}
.zona.oculto{display:none!important}
.marca-agua{position:absolute;inset:0;pointer-events:none;background-repeat:repeat;z-index:2}
.velo{position:absolute;inset:0;z-index:3;display:none;align-items:center;justify-content:center;background:rgba(244,246,249,.6);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:var(--navy);font-weight:600;text-align:center;padding:24px;cursor:pointer}
body.sin-foco .velo{display:flex}
body.sin-foco .marco{filter:blur(18px)}
@media print{body.pag-curso{display:none!important}}
.marco{display:block;width:100%;flex:1 1 auto;min-height:0;border:0;background:#fff}

/* Panel */
.panel{background:var(--blanco);border:1px solid var(--gris);padding:22px;display:flex;flex-direction:column;gap:16px}
.panel h2{margin:0;font-size:18px}
.form-fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;align-items:end}
.tabla-caja{overflow-x:auto;border:1px solid var(--gris)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:12px;text-align:left;border-bottom:1px solid var(--gris);vertical-align:top}
th{font-size:11px;color:var(--navy);text-transform:uppercase;letter-spacing:.8px;font-weight:600;background:var(--claro)}
tr:last-child td{border-bottom:0}
.pill{display:inline-block;font-size:12px;font-weight:600;padding:2px 8px}
.pill.on{background:var(--ok-bg);color:var(--ok)}
.pill.off{background:var(--bad-bg);color:var(--bad)}
.pill.neutro{background:var(--claro);color:var(--navy);border:1px solid var(--gris)}
.acciones{display:flex;gap:6px;flex-wrap:wrap}
.mods{display:flex;gap:10px;flex-wrap:wrap}
.mods label{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--texto)}
.mods input{accent-color:var(--navy);width:16px;height:16px}
.credencial{background:var(--claro);border:1px solid var(--navy);padding:16px;display:flex;flex-direction:column;gap:10px}
.credencial pre{margin:0;white-space:pre-wrap;font-family:ui-monospace,Menlo,monospace;font-size:14px;color:var(--texto)}
.contador{display:inline-block;min-width:20px;padding:0 6px;margin-left:6px;background:var(--navy);color:var(--blanco);font-size:11px;text-align:center}

/* Módulos en secuencia y progreso */
.curso.bloqueado{border-color:var(--gris);background:var(--claro);cursor:not-allowed}
.curso.bloqueado .nom,.curso.bloqueado .des{opacity:.7}
.curso.aprobado{border-color:var(--ok)}
.curso.aprobado .mini{color:var(--ok);font-weight:600}
.candado{display:flex;align-items:center;gap:6px;margin-top:auto}
.curso.sin-acceso{border-color:var(--gris);background:var(--claro)}
.curso.sin-acceso .btn{align-self:flex-start;white-space:normal;text-align:left}
.curso-grupo{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border:1px solid var(--gris)}
.curso-grupo .lista-mods{font-size:12px;color:var(--texto2);line-height:1.5}
.curso-grupo label{font-weight:600}
.prog{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.prog-fila{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--texto2)}
.prog-fila b{color:var(--navy)}
.alumno-nombre{all:unset;cursor:pointer;display:inline-block}
.alumno-nombre:hover b{text-decoration:underline}
.alumno-nombre:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.alumno-nombre .mini{color:var(--navy);margin-left:4px;text-decoration:underline}

@media (max-width:860px){
  .hero .envoltura,.detalle,.inscripcion{grid-template-columns:1fr;gap:28px}
  .pasos{grid-template-columns:1fr 1fr}
  .roles{grid-template-columns:1fr}
  .ficha{position:static}
}
@media (max-width:600px){
  .envoltura{padding:0 16px}
  .cab .logo img{width:150px;margin:-14px -14px}
  .cab nav{gap:12px;font-size:13px}
  .cab nav .ocultar-movil{display:none}
  .hero .envoltura{padding-top:44px;padding-bottom:44px}
  .hero h1{font-size:24px}
  .pasos,.dos{grid-template-columns:minmax(0,1fr)}
  .inscripcion,.detalle,.hero .envoltura{grid-template-columns:minmax(0,1fr)}
  .top .fila{padding:8px 16px}
  .top nav{padding:0 16px}
  main.cont{padding:24px 16px 48px}
  .tarjeta{padding:22px}
  .pag-curso #nombre{display:none}
  .pag-curso .top .fila{gap:8px;padding:8px 12px;flex-wrap:nowrap}
  .pag-curso .top .der{gap:8px}
  .pag-curso .top .titulo{white-space:nowrap}
  .pag-curso .top .titulo img{width:120px}
  .pag-curso .top .titulo b{display:none}
  .pag-curso .top .der .btn.peq{padding:0 10px;font-size:13px;white-space:nowrap}
}
.pie-sitio .pendiente{background:transparent;border-color:#E3E9F1;color:#fff}
/* Páginas públicas: el pie queda abajo aunque la página sea corta */
body:has(> .cab){min-height:100vh;display:flex;flex-direction:column}
body:has(> .cab) > main{flex:1 0 auto}

/* Ventana de edición (panel) */
.dialogo{width:min(820px,94vw);max-height:90vh;overflow:auto;border:1px solid var(--gris);padding:24px;color:var(--texto);background:var(--blanco)}
.dialogo::backdrop{background:rgba(6,27,58,.45)}