/* sign-in column (library 22 §5: one layer, no card, centered column 288-412) */
.authbar{display:flex;align-items:center;min-height:64px;padding:8px 24px;border-bottom:1px solid var(--line);background:var(--surface)}
.auth{width:400px;max-width:100%;margin:0 auto;padding:64px 0 96px}
.auth.wide{width:560px}
.auth .h1{margin-bottom:8px}
.auth .lead{margin-top:0;margin-bottom:32px}
.stack{display:grid;gap:16px}
.lab-row{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:4px}
.lab-row .lab{margin:0}
.lab-row a{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0;font-size:16px}
.pw{position:relative}
.pw .field{padding-right:104px}
.pw .show{position:absolute;right:2px;top:2px;height:44px;min-height:44px;padding:0 12px}
.btn-block{width:100%}
.btn-lg{min-height:56px;font-size:17px}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);margin:8px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.help1{font-size:13.5px;color:var(--muted);margin-top:4px;text-align:center}
.endline{margin-top:32px;padding-top:24px;border-top:1px solid var(--line);text-align:center}
.endline a{display:inline-flex;align-items:center;min-height:44px}
.seg{display:flex;border:1px solid var(--ctl);border-radius:var(--r-control);overflow:hidden;background:var(--surface)}
.seg label{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;cursor:pointer;white-space:nowrap}
.seg label+label{border-left:1px solid var(--ctl)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label.is-on{background:var(--accent-soft);color:var(--accent);font-weight:700}
.seg label:hover{background:var(--accent-soft)}
fieldset.fs{border:0;margin:0;padding:0;min-width:0}
fieldset.fs legend{padding:0;margin-bottom:4px;font-weight:600}
.code{font:600 24px/1 var(--font);letter-spacing:.2em;font-variant-numeric:tabular-nums;min-height:56px;text-align:left}
.who-line{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.who-line .avatar{flex:none}
.who-line span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-line a{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0}
.links{display:flex;flex-wrap:wrap;gap:0 24px}
.links a{display:inline-flex;align-items:center;min-height:44px}
.opts-l{border-top:1px solid var(--line)}
.opts-l a{display:grid;grid-template-columns:24px 1fr 16px;gap:12px;align-items:center;min-height:64px;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink);font-weight:400;text-decoration:none}
.opts-l a:hover{background:var(--accent-soft)}
.opts-l b{display:block;font-weight:600}
.opts-l small{display:block;font-size:13.5px;color:var(--muted)}
.opts-l .ic{color:var(--accent)}
.mail{border:1px solid var(--line);border-radius:var(--r-control);padding:16px;background:var(--surface);display:grid;gap:8px}
.mail .from{font-size:13.5px;color:var(--muted)}
/* stepper */
.stepper{display:flex;gap:8px;margin-bottom:32px}
.stepper li{flex:1;display:grid;gap:8px;font-size:13.5px;font-weight:600;color:var(--muted)}
.stepper li::before{content:"";height:4px;border-radius:999px;background:var(--line)}
.stepper li.done::before{background:var(--ok-ink)}
.stepper li.cur::before{background:var(--accent)}
.stepper li.cur{color:var(--accent)}
.stepper li.done{color:var(--ok-ink)}
.qr-row{display:grid;grid-template-columns:168px 1fr;gap:24px;align-items:start}
.qr{width:168px;height:168px;border:1px solid var(--line);border-radius:var(--r-control);background:#FFFFFF;padding:12px}
.key{font:600 17px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;background:var(--student);border-radius:8px;padding:8px 12px;display:inline-block}
.entry{font-weight:600}
.olist{display:grid;gap:24px;counter-reset:o}
.olist>li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px}
.olist>li::before{counter-increment:o;content:counter(o);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}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;padding:16px;background:var(--student);border-radius:var(--r-control);font:600 17px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.codes .used{text-decoration:line-through;color:var(--muted);font-weight:400}
.row-btns{display:flex;flex-wrap:wrap;gap:8px}
.check{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:10px 0;cursor:pointer}
.check input{width:24px;height:24px;margin:0;flex:none;accent-color:var(--accent)}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* security page rows */
.mrow{display:grid;grid-template-columns:40px 1fr auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.mrow:first-child{border-top:1px solid var(--line)}
.mrow .mi{width:40px;height:40px;border-radius:var(--r-control);background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.mrow b{display:block;font-weight:600}
.mrow .meta{color:var(--muted)}
.mrow .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.sub-rows{grid-column:2/4;display:grid;gap:0}
.sub-rows div{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px}
.btn-danger-text{color:var(--danger-ink)}
.btn-danger-text:hover{background:var(--danger-soft)}
@media (max-width:600px){
  .authbar{padding:8px 16px}
  .auth,.auth.wide{width:auto;padding:32px 16px 64px}
  .qr-row{grid-template-columns:1fr}
  .codes{grid-template-columns:1fr 1fr;gap:8px 16px;font-size:16px;padding:12px}
  .mrow{grid-template-columns:40px 1fr;gap:12px}
  .mrow .acts{grid-column:1/3;justify-content:flex-start}
  .sub-rows{grid-column:1/3}
  .stepper li span{display:none}
  .stepper li.cur span{display:inline}
}
.key span{display:block;white-space:nowrap}
/* account page (mockup-seguridad) */
@media (max-width:600px){
}

@media (max-width:600px){
}


.acct{max-width:768px;padding:32px 24px 64px}
.acct .kicker a{display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:600}
.acct .lead{margin-bottom:32px}
.mrow .meta{display:block;color:var(--muted)}
.foot{margin-top:24px;color:var(--muted)}
@media (max-width:600px){.acct{padding:16px 16px 48px}}
/* setup (mockup-configurar-ingreso) */
@media (max-width:600px){
}

@media (max-width:600px){
}


.only-phone{display:none}
@media (max-width:600px){.only-phone{display:grid}}
/* inline styles of the mockups, as classes (the page's CSP allows no style attributes) */
.key-copy{margin-left:-20px}
.code-sm{max-width:240px}
.step-h{margin-bottom:8px}
.btn-danger-line{border-color:var(--danger-ink)}
dialog.dlg.dlg-wide{width:min(640px,calc(100vw - 32px))}
.mrow .hint.sub-rows{margin-top:-8px}
@media print{body.print-codes *{visibility:hidden}body.print-codes .codes,body.print-codes .codes *{visibility:visible}body.print-codes .codes{position:absolute;left:0;top:0;width:100%}}
.acct .flash{margin-bottom:24px}
.mail-tag{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.hint.no-pedi{margin-top:8px}
/* first admin activation (plan/primer-admin.html): label/value pairs on hairlines, scoped so admin.css .pairs stays its own */
.auth .pairs{margin:0 0 32px;border-top:1px solid var(--line)}
.auth .pairs>div{display:grid;grid-template-columns:136px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.auth .pairs dt{font-size:13.5px;font-weight:600;color:var(--muted);padding-top:2px}
.auth .pairs dd{margin:0;overflow-wrap:anywhere}
.auth .pairs dd b{font-weight:700}
.auth .pairs .sub{color:var(--muted)}
.auth .after{margin-top:8px}
.auth .after+.no-pedi{margin-top:24px}
@media (max-width:600px){.auth .pairs>div{grid-template-columns:minmax(0,1fr);gap:0}}