/* Pages of the accounts and payments flow: planes, crear cuenta (SINPE), pago en revisión, instituciones, admin pagos.
   From plan/planes.html, registro.html, espera.html, instituciones.html, admin-pagos.html; load it before theme.css. */
.page{max-width:1040px;margin:0 auto;padding:64px 24px 96px}
.page-h{max-width:640px}
.page-h .h1{margin-bottom:8px}
.page-h .lead{margin-top:0}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:48px}
.plan{background:var(--surface);border-radius:16px;box-shadow:0 0 0 1px rgba(0,0,0,.09),0 1px 2px rgba(0,0,0,.05);padding:32px;display:flex;flex-direction:column;gap:24px;position:relative}
.plan.rec{box-shadow:0 0 0 2px var(--accent),0 1px 2px rgba(0,0,0,.05)}
.plan-top{display:grid;gap:8px}
.plan-top .tag{justify-self:start}
.plan h2{font:700 24px/1.2 var(--font)}
.plan .who{color:var(--muted)}
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px}
.price b{font:700 39px/1.1 var(--font);font-variant-numeric:tabular-nums}
.price span{color:var(--muted)}
.price.quote b{font-size:24px;line-height:1.3}
.feat{display:grid;gap:12px}
.feat li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start}
.feat svg{color:var(--ok-ink);margin-top:2px}
.plan .btn{width:100%;margin-top:auto}
.plan .after{font-size:13.5px;color:var(--muted);margin-top:-12px}
@media (min-width:901px){.plan .after{min-height:2lh}}
.both{margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
.both h2{font:700 20px/1.3 var(--font)}
.both ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 24px;margin-top:16px}
.both li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px}
.both svg{color:var(--ok-ink);margin-top:2px}
.how{margin-top:64px}
.how h2{font:700 24px/1.2 var(--font)}
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:24px;counter-reset:s}
.steps3 li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start}
.steps3 li::before{counter-increment:s;content:counter(s);width:32px;height:32px;border-radius:999px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:13.5px}
.steps3 b{display:block}
.steps3 p{color:var(--muted)}
@media (max-width:600px){
.page{padding:32px 16px 64px}
.plans{margin-top:32px;gap:16px}
.plan{padding:24px}
.price b{font-size:31px}
.price.quote b{font-size:20px}
.steps3{grid-template-columns:1fr}
}
.auth.wide{width:600px}
.sec-t{display:flex;align-items:center;gap:12px;font:700 20px/1.3 var(--font);margin:48px 0 16px}
.sec-t:first-of-type{margin-top:0}
.sec-t .n{width:32px;height:32px;border-radius:999px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:13.5px;flex:none}
.field.w-sm{max-width:240px}
.opt{font-weight:400;color:var(--muted)}
.pay{background:var(--info-soft);border-radius:var(--r-card);padding:24px;display:grid;gap:16px}
.pay-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:center;padding-bottom:16px;border-bottom:1px solid #D5DAE3}
.pay-row:last-of-type{border-bottom:0;padding-bottom:0}
.pay dt{font-size:13.5px;font-weight:600;color:var(--info-ink)}
.pay dd{margin:0;font:700 24px/1.3 var(--font);font-variant-numeric:tabular-nums}
.pay dd.sm{font-size:17px}
.pay .btn{min-width:96px}
.pay-note{font-size:16px;color:var(--ink)}
.drop{border:2px dashed var(--ctl);border-radius:var(--r-card);background:var(--surface);padding:24px;display:grid;justify-items:start;gap:12px}
.drop.is-error{border:2px solid var(--danger-ink)}
.drop .dz-t{font-weight:600}
.drop .hint{margin-top:0}
.file{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:center;background:var(--surface);border:1px solid var(--ctl);border-radius:var(--r-card);padding:12px}
.file .th{width:72px;height:96px;border-radius:8px;overflow:hidden;background:var(--student);display:grid;place-items:center}
.file .th svg{width:72px;height:96px}
.file b{display:block;overflow-wrap:anywhere}
.file .meta{color:var(--muted);font-size:13.5px}
.file .acts{grid-column:1/3;display:flex;flex-wrap:wrap;gap:8px}
.prog{height:8px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:8px}
.prog i{display:block;height:100%;width:62%;background:var(--accent);border-radius:999px}
.ok-ink{color:var(--ok-ink);font-weight:600}
.sumbar{margin-top:32px;display:grid;gap:12px}
.field:disabled{background:var(--bg);border-style:dashed;color:var(--muted)}
@media (max-width:600px){
.pay{padding:16px}
.pay dd{font-size:20px}
.sec-t{margin-top:40px}
}
.auth .kicker{margin-bottom:8px}
.track{display:grid;gap:0;margin:32px 0}
.track li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:16px;position:relative;padding-bottom:24px}
.track li:last-child{padding-bottom:0}
.track li::after{content:"";position:absolute;left:15px;top:36px;bottom:4px;width:2px;background:var(--line)}
.track li:last-child::after{display:none}
.track li.done::after{background:var(--ok-ink)}
.dot{width:32px;height:32px;border-radius:999px;display:grid;place-items:center;font-weight:700;font-size:13.5px;background:var(--surface);border:2px solid var(--line);color:var(--muted)}
.done .dot{background:var(--ok-ink);border-color:var(--ok-ink);color:#FFF}
.cur .dot{background:var(--accent-soft);border-color:var(--accent)}
.cur .dot .pulse{width:12px;height:12px}
.bad .dot{background:var(--danger-soft);border-color:var(--danger-ink);color:var(--danger-ink)}
.track b{display:block;font-weight:600}
.track .meta{color:var(--muted);font-size:13.5px}
.track .cur b{color:var(--accent)}
.sent{border-top:1px solid var(--line);padding-top:24px;margin-top:8px}
.sent h2{font:700 20px/1.3 var(--font);margin-bottom:12px}
.sent dl{display:grid;gap:8px;margin:0}
.sent dl div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px}
.sent dt{font-size:13.5px;font-weight:600;color:var(--muted);padding-top:2px}
.sent dd{margin:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.sent .th{width:72px;height:120px;border-radius:8px;overflow:hidden}
.sent .th svg{width:72px;height:120px}
.meanwhile{margin-top:32px;padding-top:24px;border-top:1px solid var(--line);display:grid;gap:12px}
.meanwhile h2{font:700 20px/1.3 var(--font)}
.reason{margin:12px 0 0;padding:0 0 0 12px;border-left:3px solid var(--danger-ink);font-size:16px}
@media (max-width:600px){
.sent dl div{grid-template-columns:1fr;gap:0}
.sent-g{grid-template-columns:minmax(0,1fr) 72px}
}
.inst{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:64px;align-items:start}
.inst-l{display:grid;gap:24px;max-width:440px}
.inst-l h2{font:700 20px/1.3 var(--font)}
.inst-l .feat{margin-top:12px}
.chan{border-top:1px solid var(--line);padding-top:24px;display:grid;gap:4px}
.chan a{display:inline-flex;align-items:center;gap:8px;min-height:44px}
textarea.field{min-height:120px;padding:12px;resize:vertical}
.cnt{text-align:right}
@media (max-width:900px){
.inst{grid-template-columns:1fr;gap:40px}
}
.q-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.q-head .lead{margin-top:4px}
.q-tools{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:24px}
.q{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:32px;align-items:start;margin-top:24px}
.q-list td,.q-list th{vertical-align:top}
.q-list tbody tr{cursor:pointer}
.q-list tbody tr:hover{background:var(--accent-soft)}
.q-list tr.is-sel{background:var(--accent-soft)}
.q-list tr.is-sel th{box-shadow:inset 3px 0 0 var(--accent);padding-left:12px}
.q-list tbody th{padding-left:12px}
.q-list thead th:first-child{padding-left:12px}
.q-list .ref{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.q-list .when{white-space:nowrap}
.q-list .em{overflow-wrap:normal;word-break:normal}
.q-list .when b{display:block;font-weight:600}
.q-list .when span{font-size:13.5px;color:var(--muted)}
.q-list .rowlink{display:block;color:var(--ink);text-decoration:none;font-weight:600;min-height:24px}
.det{position:sticky;top:16px;border-left:1px solid var(--line);padding-left:32px;display:grid;gap:24px}
.det-h{display:grid;gap:4px}
.det-h .h2{font-size:24px}
.det-g{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:start}
.rc{display:grid;gap:8px}
.rc .img{width:200px;height:333px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--student)}
.rc .img svg{width:200px;height:333px;display:block}
.det dl{display:grid;gap:12px;margin:0}
.det dl div{display:grid;gap:0}
.det dt{font-size:13.5px;font-weight:600;color:var(--muted)}
.det dd{margin:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.det dd b{font-weight:700}
.det .acts{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:16px;border-top:1px solid var(--line)}
.btn-danger-line{color:var(--danger-ink);border-color:var(--danger-ink)}
.btn-danger-line:hover{background:var(--danger-ink);color:#FFF}
.btn-danger{background:var(--danger-ink);color:#FFF}
.reasons{display:grid;gap:0}
.reasons label{display:flex;gap:12px;align-items:center;min-height:44px;cursor:pointer}
.reasons input{width:20px;height:20px;margin:0;accent-color:var(--accent)}
.toast{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:12px;background:#1F2430;color:#FFF;max-width:480px;box-shadow:0 8px 24px rgba(31,36,48,.24)}
.toast .bi{color:#8FD3AE}
@media (max-width:1200px){
.q{grid-template-columns:1fr}
.det{position:static;border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:24px}
}
@media (max-width:600px){
.q-list thead{display:none}
.q-list tr{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--line)}
.q-list td,.q-list th{border:0;padding:0}
.q-list tbody th{padding-left:0}
.q-list tr.is-sel th{box-shadow:none;padding-left:0}
.q-list td.c-col,.q-list td.ref{display:none}
.det-g{grid-template-columns:1fr}
.rc{justify-items:center}
.rc .img{width:240px;max-width:100%;height:auto;aspect-ratio:3/5}
.rc .img svg{width:100%;height:100%}
.det .acts{flex-direction:column-reverse;align-items:stretch}
.det .acts .btn{width:100%}
}
/* round-2 paint of the same pages («Pizarra y cuaderno») */
.sec-t .n,.steps3 li::before{background:var(--pencil);color:var(--ink)}
.stepper li::before{height:6px}
.stepper li.cur::before{background:var(--pencil)}
.stepper li.cur{color:var(--ink);font-weight:700}
.pay{background:var(--pencil-soft)}
.pay-row{border-bottom-color:rgba(94,67,0,.18)}
.plan .tag-accent,.kicker.tag-accent{background:var(--pencil-soft);color:var(--pencil-ink)}
.plan{border-radius:var(--r-card)}
.plan.rec{box-shadow:0 0 0 2px var(--accent),0 1px 2px rgba(0,0,0,.05)}
.price b{letter-spacing:-.02em}
.page .h1,.auth .h1,.wait .h1{letter-spacing:-.02em}
.toast{background:var(--board);color:var(--chalk)}
.toast .bi{color:var(--pencil)}
.drop{border-color:var(--ctl);border-radius:var(--r-card)}
.drop:hover{border-color:var(--accent);background:var(--accent-soft)}
.q-list tr.is-sel{background:var(--pencil-soft)}
.q-list tr.is-sel th{box-shadow:inset 4px 0 0 var(--pencil)}
.q-list tbody tr:hover{background:var(--bg)}
.authbar{padding:8px 24px}
@media (max-width:600px){.authbar{padding:8px 16px}}
.btn-secondary.btn-danger-line,.btn.btn-danger-line{color:var(--danger-ink);border-color:var(--danger-ink);box-shadow:0 3px 0 var(--danger-soft)}
.btn-secondary.btn-danger-line:hover{background:var(--danger-ink);color:#FFFFFF}
@media (max-width:600px){.q-tools,.q-tools .seg,.q-tools .srch{width:100%}.q-tools .seg label{flex:1;justify-content:center;padding:0 8px}}
@media (max-width:374px){.q-tools .seg{display:grid;grid-template-columns:1fr}.q-tools .seg label+label{border-left:0;border-top:1px solid var(--ctl)}}
@media (max-width:600px){.q-list tr.is-sel{box-shadow:inset 4px 0 0 var(--pencil);padding-left:12px}.q-list tr.is-sel th{box-shadow:none}}
/* classes of Dev A's markup that the mockups only drew inline */
.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.q-empty{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;margin-top:16px;max-width:640px}
.q-empty p{margin-top:8px}
.q-empty div{margin-top:16px}
p.q-empty{color:var(--muted)}
.prog i{width:0;transition:width .2s linear}
@media (prefers-reduced-motion:reduce){.prog i{transition:none}}
[data-tardando]{margin-top:12px}
.tag-danger{background:var(--danger-soft);color:var(--danger-ink)}
dialog.dlg#dlg-rechazar{width:min(520px,calc(100vw - 32px))}
#dlg-rechazar textarea.field{min-height:96px;resize:vertical}
#dlg-rechazar .actions{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:420px){#dlg-rechazar .actions{flex-direction:column-reverse;align-items:stretch}#dlg-rechazar .actions .btn{width:100%}}
/* phone: a long e-mail wraps inside its column instead of widening the row past the screen (320 px) */
@media (max-width:600px){.q-list tr{grid-template-columns:minmax(0,1fr) auto}.q-list .em{overflow-wrap:anywhere}}
.det-h .tag{justify-self:start;align-self:start;width:max-content}
/* the student's name is the row's link: 44 px tall to touch, the same 24 px line on screen */
.q-list .rowlink{display:flex;align-items:center;min-height:44px;margin:-10px 0}

/* ---- /planes: three cards; the limit line sits in the same slot on every card ---- */
.plans.p3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.plan .lim{display:flex;align-items:baseline;gap:8px;font-weight:700;padding:12px 16px;border-radius:var(--r-control);background:var(--bg)}
.plan .lim span{font-weight:400;color:var(--muted)}
.plan .now{display:grid;gap:8px}
@media (min-width:601px){.plans.p3.mine{align-items:start}.plans.p3:not(.mine) .plan-top{min-height:120px;align-content:start}}