/* Estilos base y de la aplicación. La portada tiene además inicio.css. */
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(../fuentes/archivo-latin.woff2) format("woff2-variations"),url(../fuentes/archivo-latin.woff2) format("woff2")}

:root{
  --papel:#F3F5F0; --hoja:#fff; --tinta:#141B2D; --tinta-2:#465066; --tinta-3:#768095;
  --boli:#1E40D8; --boli-osc:#1531A8; --boli-suave:#E7ECFC;
  --folio:#C5302B; --rojo-suave:#FBE9E6;
  --sello:#0B8558; --sello-suave:#E1F3EA;
  --ambar:#9A5B00; --ambar-suave:#FBF0D9;
  --linea:#D5DBD0; --linea-2:#E6EAE1;
  --radio:10px; --radio-s:6px;
  --sombra-hoja:0 1px 0 rgba(20,27,45,.04),0 12px 32px -18px rgba(20,27,45,.28);
  --fuente:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--fuente);font-size:16px;line-height:1.5;font-stretch:100%;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-stretch:88%;font-weight:750;line-height:1.12;letter-spacing:-.012em;margin:0 0 .5em;color:var(--tinta);text-wrap:balance}
h1{font-size:clamp(1.7rem,1.2rem + 1.6vw,2.3rem)} h2{font-size:1.32rem} h3{font-size:1.08rem} h4{font-size:.98rem}
p{margin:0 0 1em} a{color:var(--boli);text-underline-offset:2px} a:hover{color:var(--boli-osc)}
img,svg{max-width:100%} [hidden]{display:none!important}
:focus-visible{outline:2.5px solid var(--boli);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono,.folio{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.folio{color:var(--folio);font-weight:700;white-space:nowrap}
.sub{color:var(--tinta-3);font-size:.86rem} .rojo{color:var(--folio)} .verde{color:var(--sello)}
.ancho{max-width:1120px;margin:0 auto;padding:0 20px}
body.amplio main .ancho,body.amplio .barra-app .ancho,body.amplio .pie-app .ancho{max-width:1340px}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:42px;padding:.55em 1.1em;border:1.5px solid var(--boli);border-radius:var(--radio-s);background:var(--boli);color:#fff;
  font:inherit;font-weight:650;font-stretch:96%;line-height:1.15;text-decoration:none;cursor:pointer;transition:background .12s,border-color .12s,transform .06s}
.btn:hover{background:var(--boli-osc);border-color:var(--boli-osc);color:#fff} .btn:active{transform:translateY(1px)}
.btn[disabled],.btn.inactivo{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn.sec{background:var(--hoja);color:var(--boli);border-color:var(--linea)} .btn.sec:hover{border-color:var(--boli);background:var(--boli-suave);color:var(--boli-osc)}
.btn.chico{min-height:34px;padding:.35em .8em;font-size:.9rem} .btn.grande{min-height:50px;padding:.7em 1.5em;font-size:1.06rem}
.btn.verde{background:var(--sello);border-color:var(--sello)} .btn.verde:hover{background:#086c47;border-color:#086c47}
.btn.peligro{background:var(--hoja);color:var(--folio);border-color:#e7c3bf} .btn.peligro:hover{background:var(--rojo-suave);border-color:var(--folio)}
.lnk{background:none;border:0;padding:0;font:inherit;color:var(--boli);text-decoration:underline;text-underline-offset:2px;cursor:pointer} .lnk.rojo{color:var(--folio)}
.acciones{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px} .acciones.m0{margin-top:0}

/* Formularios */
label{display:block;font-weight:600;font-size:.9rem;margin-bottom:5px;color:var(--tinta)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],input[type=tel],input[type=url],input:not([type]),select,textarea{
  width:100%;min-height:42px;padding:.5em .7em;border:1.5px solid var(--linea);border-radius:var(--radio-s);background:#fff;color:var(--tinta);font:inherit;line-height:1.3}
textarea{min-height:110px;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:#b9c1b3}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--boli);box-shadow:0 0 0 3px var(--boli-suave)}
input.may{text-transform:uppercase} input[readonly]{background:var(--papel);color:var(--tinta-2)}
input[type=color]{width:52px;height:42px;padding:3px;border:1.5px solid var(--linea);border-radius:var(--radio-s);background:#fff}
.ayuda{font-size:.84rem;color:var(--tinta-3);margin-top:5px} .ayuda.err{color:var(--folio)} .ayuda.ok{color:var(--sello)}
.campos{display:grid;grid-template-columns:repeat(12,1fr);gap:14px 16px}
.campos .f{grid-column:span 12;min-width:0}
@media(min-width:720px){.f.s3{grid-column:span 3}.f.s4{grid-column:span 4}.f.s5{grid-column:span 5}.f.s6{grid-column:span 6}.f.s7{grid-column:span 7}.f.s8{grid-column:span 8}.f.s9{grid-column:span 9}}
.chk{display:flex;gap:.55em;align-items:flex-start;font-weight:500;font-size:.94rem;cursor:pointer} .chk input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--boli);flex:none}

/* Avisos */
.aviso{display:none;padding:.7em .9em;border-radius:var(--radio-s);font-size:.94rem;border:1px solid transparent;margin:10px 0}
.aviso.si{display:block} .aviso.ok{background:var(--sello-suave);border-color:#b6e0cb;color:#07593b}
.aviso.err{background:var(--rojo-suave);border-color:#efc4be;color:#8d1f1b} .aviso.warn{background:var(--ambar-suave);border-color:#ecd49d;color:#6d4100}
.aviso.info{background:var(--boli-suave);border-color:#c5d0f7;color:#172c8a}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;pointer-events:none;max-width:min(92vw,560px);padding:.75em 1.1em;border-radius:8px;background:var(--tinta);color:#fff;font-weight:550;font-size:.95rem;z-index:90;transition:opacity .18s,transform .18s;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.toast.si{opacity:1;transform:translate(-50%,0)} .toast.err{background:#8d1f1b} .toast.warn{background:#6d4100}
.chip{display:inline-flex;align-items:center;gap:.35em;padding:.12em .6em;border-radius:99px;font-size:.78rem;font-weight:650;background:var(--linea-2);color:var(--tinta-2);white-space:nowrap}
.chip.ok{background:var(--sello-suave);color:#07593b} .chip.mal{background:var(--rojo-suave);color:#8d1f1b} .chip.warn{background:var(--ambar-suave);color:#6d4100} .chip.azul{background:var(--boli-suave);color:#172c8a}

/* Marca */
.marca{display:inline-flex;align-items:center;gap:.55em;font-weight:800;font-stretch:84%;font-size:1.22rem;letter-spacing:-.01em;color:var(--tinta);text-decoration:none;line-height:1}
.marca svg{width:30px;height:30px;flex:none} .marca:hover{color:var(--tinta)}

/* Barra de la aplicación */
.barra-app{background:var(--hoja);border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:40}
.barra-app .ancho{display:flex;align-items:center;gap:18px;min-height:60px}
.nav{display:flex;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none} .nav::-webkit-scrollbar{display:none}
.nav a{padding:.5em .75em;border-radius:6px;color:var(--tinta-2);text-decoration:none;font-weight:600;font-size:.95rem;white-space:nowrap}
.nav a:hover{background:var(--papel);color:var(--tinta)} .nav a.activo{background:var(--boli-suave);color:var(--boli-osc)}
.saldo{display:flex;align-items:center;gap:.5em;padding:.3em .75em;border:1px solid var(--linea);border-radius:99px;font-size:.88rem;font-weight:600;color:var(--tinta-2);text-decoration:none;white-space:nowrap}
.saldo b{color:var(--tinta);font-variant-numeric:tabular-nums} .saldo:hover{border-color:var(--boli);color:var(--tinta)} .saldo.bajo b{color:var(--folio)}
.menu-usuario{position:relative} .menu-usuario summary{list-style:none;cursor:pointer;width:36px;height:36px;border-radius:50%;background:var(--tinta);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.9rem}
.menu-usuario summary::-webkit-details-marker{display:none}
.menu-usuario .caja{position:absolute;right:0;top:44px;min-width:230px;background:var(--hoja);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra-hoja);padding:8px;z-index:50}
.menu-usuario .caja p{margin:4px 8px 8px;font-size:.84rem;color:var(--tinta-3);word-break:break-all} .menu-usuario .caja a,.menu-usuario .caja button{display:block;width:100%;text-align:left;padding:.5em .6em;border:0;border-radius:6px;background:none;font:inherit;color:var(--tinta);text-decoration:none;cursor:pointer}
.menu-usuario .caja a:hover,.menu-usuario .caja button:hover{background:var(--papel)}
main.app{padding:26px 0 80px}
.titulo-pag{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 20px;margin-bottom:18px} .titulo-pag h1{margin:0} .titulo-pag p{margin:4px 0 0;color:var(--tinta-2)}
.migas{margin:0 0 10px;font-size:.92rem}

/* Hojas (secciones de contenido) */
.hoja{background:var(--hoja);border:1px solid var(--linea);border-radius:var(--radio);padding:20px 22px;margin-bottom:18px}
.hoja>h2{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--linea-2)}
.hoja>h2 small{font-size:.86rem;font-weight:500;font-stretch:100%;color:var(--tinta-3);letter-spacing:0}
.nota{font-size:.88rem;color:var(--tinta-3)} .vacio{padding:26px 16px;text-align:center;color:var(--tinta-2);border:1.5px dashed var(--linea);border-radius:var(--radio);background:#fafbf8}
.vacio p{margin:0 0 12px} .vacio p:last-child{margin:0}
.dos{display:grid;gap:18px} @media(min-width:900px){.dos{grid-template-columns:1fr 1fr}.dos.a{grid-template-columns:1.5fr 1fr}}

/* Tablas */
.tabla-caja{overflow-x:auto;border:1px solid var(--linea-2);border-radius:var(--radio-s)}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th{text-align:left;font-weight:650;font-size:.8rem;color:var(--tinta-2);background:#f8f9f6;padding:.6em .7em;border-bottom:1px solid var(--linea);white-space:nowrap}
td{padding:.55em .7em;border-bottom:1px solid var(--linea-2);vertical-align:middle} tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums} td.acc{white-space:nowrap;text-align:right} td.acc>*{margin-left:10px}
tr.fila-link{cursor:pointer} tr.fila-link:hover td{background:#f8f9f6} tr.inactivo td{color:var(--tinta-3)}
.tabla-edit{min-width:1010px}.tabla-edit input[data-k=pat],.tabla-edit input[data-k=mat]{min-width:125px}.tabla-edit input[data-k=nom],.tabla-edit input[data-k=puesto]{min-width:150px}.tabla-edit td{padding:3px 4px} .tabla-edit input,.tabla-edit select{min-height:36px;border-color:transparent;background:transparent;padding:.3em .45em;font-size:.9rem;border-radius:4px}
.tabla-edit input:hover,.tabla-edit select:hover{border-color:var(--linea)} .tabla-edit input:focus,.tabla-edit select:focus{background:#fff;border-color:var(--boli)}
.tabla-edit td.num{color:var(--tinta-3);font-size:.82rem;padding:0 6px;width:1%} .tabla-edit .est{font-size:.78rem;font-weight:650;white-space:nowrap;padding:0 8px}
.est.ok{color:var(--sello)} .est.err{color:var(--folio)} .est.warn{color:var(--ambar)}
.quitar button{width:30px;height:30px;border:0;background:none;color:var(--tinta-3);border-radius:6px;cursor:pointer;font-size:.95rem} .quitar button:hover{background:var(--rojo-suave);color:var(--folio)}
.paginas{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:14px;font-size:.9rem;color:var(--tinta-2)}
.busqueda{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px} .busqueda input{flex:1;min-width:220px}
.pestanas{display:inline-flex;border:1.5px solid var(--linea);border-radius:var(--radio-s);overflow:hidden;background:#fff}
.pestanas button{border:0;background:none;padding:.5em .9em;font:inherit;font-weight:600;font-size:.9rem;color:var(--tinta-2);cursor:pointer} .pestanas button.activo{background:var(--boli);color:#fff}

/* Listas simples */
.lista{list-style:none;margin:0;padding:0} .lista>li{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:.7em 0;border-bottom:1px solid var(--linea-2)} .lista>li:last-child{border-bottom:0}
.lista b{display:block} .lista span.sub{display:block}
.pasos{list-style:none;margin:0;padding:0;counter-reset:paso} .pasos>li{counter-increment:paso;display:flex;gap:12px;align-items:flex-start;padding:.6em 0;border-bottom:1px solid var(--linea-2)} .pasos>li:last-child{border-bottom:0}
.pasos>li::before{content:counter(paso);flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--linea);display:grid;place-items:center;font-weight:700;font-size:.82rem;color:var(--tinta-2)}
.pasos>li.hecho::before{content:"✓";background:var(--sello);border-color:var(--sello);color:#fff} .pasos>li.hecho{color:var(--tinta-3)} .pasos a{font-weight:650}

/* Diálogos */
dialog{border:0;border-radius:12px;padding:0;max-width:min(94vw,620px);width:100%;box-shadow:0 30px 80px -20px rgba(20,27,45,.5);color:var(--tinta)}
dialog::backdrop{background:rgba(20,27,45,.5)} dialog .d{padding:22px 24px} dialog h3{margin-bottom:.6em} dialog.ancho-d{max-width:min(96vw,860px)}
dialog textarea{min-height:170px;font-size:.9rem}

/* Acceso (entrar, registro, recuperar) */
.acceso{min-height:100vh;display:grid;grid-template-columns:1fr;align-content:center;justify-items:center;padding:28px 16px}
.acceso .tarjeta{width:100%;max-width:440px;background:var(--hoja);border:1px solid var(--linea);border-radius:14px;padding:30px 30px 26px;box-shadow:var(--sombra-hoja)}
.acceso .tarjeta.ancha{max-width:560px}
.acceso h1{font-size:1.55rem;margin:18px 0 6px} .acceso .tarjeta>p.sub{font-size:.96rem;margin-bottom:18px;color:var(--tinta-2)}
.acceso form>label{margin-top:14px} .acceso form .btn{width:100%;margin-top:20px}
.acceso .pie-acceso{margin:18px 0 0;font-size:.92rem;color:var(--tinta-2);text-align:center} .acceso .legal{max-width:440px;margin-top:16px;font-size:.8rem;color:var(--tinta-3);text-align:center}

/* Generador */
.gen{display:grid;gap:18px} @media(min-width:1340px){.gen{grid-template-columns:minmax(0,1fr) 310px;align-items:start}.gen .lado{position:sticky;top:78px}}
.zona{border:1.5px dashed #b9c1b3;border-radius:var(--radio);padding:18px;background:#fafbf8;text-align:center} .zona.sobre{border-color:var(--boli);background:var(--boli-suave)} .zona p{margin:0 0 12px;color:var(--tinta-2)}
.curso{border:1px solid var(--linea);border-radius:var(--radio);margin-bottom:12px;background:#fff}
.curso .ct{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--linea-2);background:#f8f9f6;border-radius:var(--radio) var(--radio) 0 0} .curso .ct h3{margin:0;font-size:.98rem;flex:1}
.curso .cc{padding:14px} .fechas{display:flex;align-items:center;gap:8px} .fechas span{color:var(--tinta-3);font-size:.9rem}
.asist{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:.92rem;padding-top:4px}
.cuenta-gen{font-size:2.7rem;font-weight:800;font-stretch:80%;line-height:1;letter-spacing:-.02em} .cuenta-gen small{display:block;font-size:.88rem;font-weight:500;font-stretch:100%;color:var(--tinta-2);letter-spacing:0;margin-top:6px}
.revision{list-style:none;margin:14px 0;padding:0;font-size:.9rem} .revision li{padding:.3em 0 .3em 1.5em;position:relative}
.revision li::before{position:absolute;left:0;font-weight:800} .revision li.err{color:#8d1f1b} .revision li.err::before{content:"✕"} .revision li.warn{color:#6d4100} .revision li.warn::before{content:"!"} .revision li.ok{color:#07593b} .revision li.ok::before{content:"✓"}
.estado{min-height:1.4em;font-size:.92rem;color:var(--tinta-2);margin-top:10px} .costo{font-size:.9rem;color:var(--tinta-2);margin:10px 0 12px;padding:.6em .75em;background:var(--papel);border-radius:var(--radio-s)} .costo b{color:var(--tinta)}
.logo-zona{display:flex;gap:12px;align-items:center} .logo-prev{width:150px;height:62px;border:1.5px dashed var(--linea);border-radius:var(--radio-s);display:grid;place-items:center;background:#fff;color:var(--tinta-3);font-size:.82rem;overflow:hidden;flex:none}
.logo-prev img{max-width:92%;max-height:86%;object-fit:contain}
.fijo{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--hoja);border-top:1px solid var(--linea);z-index:35} @media(min-width:1340px){.fijo{display:none}} @media(max-width:1339px){body.amplio main.app{padding-bottom:110px}}
.lista-asist{max-height:46vh;overflow:auto;border:1px solid var(--linea-2);border-radius:var(--radio-s);padding:6px 10px} .lista-asist label{display:flex;gap:.6em;align-items:center;font-weight:500;padding:.35em 0;margin:0}
.lista-asist input{width:17px;height:17px;accent-color:var(--boli)}

/* Tarjetas de dato */
.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:18px}
.dato{background:var(--hoja);border:1px solid var(--linea);border-radius:var(--radio);padding:14px 16px} .dato span{display:block;font-size:.84rem;color:var(--tinta-2)} .dato b{display:block;font-size:1.7rem;font-stretch:82%;font-weight:780;line-height:1.15;font-variant-numeric:tabular-nums} .dato small{color:var(--tinta-3);font-size:.8rem}

/* Precios (dentro de la aplicación) */
.paquetes{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.paq{position:relative;display:block;border:1.5px solid var(--linea);border-radius:var(--radio);padding:14px 16px;background:#fff;cursor:pointer;margin:0;font-weight:400}
.paq:hover{border-color:#b9c1b3} .paq input{position:absolute;opacity:0} .paq:has(input:checked){border-color:var(--boli);box-shadow:0 0 0 3px var(--boli-suave)} .paq:has(input:focus-visible){outline:2.5px solid var(--boli);outline-offset:2px}
.paq b{display:block;font-size:1.05rem;font-stretch:90%} .paq .precio{display:block;font-size:1.6rem;font-weight:800;font-stretch:82%;margin:4px 0 0;line-height:1.1} .paq .unit{display:block;font-size:.84rem;color:var(--tinta-2)} .paq .desc{display:block;font-size:.82rem;color:var(--tinta-3);margin-top:6px}
.paq .marca-rec{position:absolute;top:-10px;right:12px;background:var(--tinta);color:#fff;font-size:.72rem;font-weight:700;padding:.15em .6em;border-radius:99px}
.metodos{display:grid;gap:10px;margin:14px 0} @media(min-width:640px){.metodos{grid-template-columns:1fr 1fr}}
.datos-banco{background:var(--papel);border-radius:var(--radio-s);padding:14px 16px;margin:12px 0} .datos-banco dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0} .datos-banco dt{color:var(--tinta-2);font-size:.9rem} .datos-banco dd{margin:0;font-weight:650;font-variant-numeric:tabular-nums;word-break:break-all}

/* Pie */
.pie-app{padding:22px 0 40px;font-size:.84rem;color:var(--tinta-3)} .pie-app a{color:var(--tinta-2)}
@media(max-width:640px){.hoja{padding:16px 14px}.barra-app .ancho{gap:10px}.saldo span.txt{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.barra-app,.fijo,.pie-app,.no-imp{display:none!important}body{background:#fff}}