/* Producción: lo que el mockup dibuja fijo (1440x900, divs) pasa a ser fluido y con controles reales.
   Los estilos visuales vienen tal cual de mockups/src/portal.css y del <style> de cada mockup. */
html,body{min-height:100%}
.desk{width:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.btn{cursor:pointer;text-decoration:none}
.btn.p:hover{background:var(--g-hover);border-color:var(--g-hover)}
.btn:not(.p):hover{background:var(--g-soft)}
.btn[disabled]{opacity:.45;cursor:default}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.brand img{height:28px;width:auto;display:block}
.lft .brand img{height:36px}
.app{height:auto;min-height:100vh;overflow:visible}  /* el overflow:hidden del mockup ataba el sticky a .app y la barra se iba con el scroll */
.app .side{position:sticky;top:0;height:100vh;overflow-y:auto;align-self:start}
.main{overflow:visible}
.nav a{text-decoration:none}
.nav a:hover{background:var(--side-2)}
/* inputs reales dentro de la caja .inp del mockup */
.inp input{border:0;outline:0;background:transparent;font:inherit;color:var(--text);flex:1;min-width:0;height:100%}
.inp:focus-within{border:2px solid var(--g);box-shadow:0 0 0 3px var(--g-soft);padding:0 11px}
.inp .ver{display:grid;place-items:center;color:var(--muted);height:100%;padding:0 2px}
.srch input{border:0;outline:0;background:transparent;font:inherit;color:var(--text);flex:1;min-width:0}
.srch input::placeholder{color:var(--faint)}
/* casilla, interruptores y radios con input real (el mockup usa <i> y <span>) */
.keep{cursor:pointer;position:relative}
.cb .ico{opacity:0}
.keep input:checked+.cb{background:var(--g);border-color:var(--g)}
.keep input:checked+.cb .ico{opacity:1}
.keep input:focus-visible+.cb{box-shadow:0 0 0 3px var(--g-soft)}
input:checked+.tog{background:var(--g-mid)}
input:checked+.tog::after{left:auto;right:2px}
input:checked+.tog.j{background:var(--neg-j)}
input:checked+.tog.c{background:var(--neg-c)}
input:focus-visible+.tog{box-shadow:0 0 0 3px var(--g-soft)}
label.ng,label.mxr,label.ro,label.sr,label.swl{cursor:pointer;position:relative}
.ro:has(input:checked){border:2px solid var(--g);background:var(--g-soft);padding:7px 9px}
.ro:has(input:checked) .rad{border:4px solid var(--g)}
.sr .rad{width:14px;height:14px;border-radius:50%;border:1.5px solid #6b645d;flex:none}
.sr:has(input:checked) .rad{border:4px solid var(--g)}
.err{display:flex;gap:9px;align-items:center;background:var(--bad-bg);color:var(--bad);border-radius:10px;padding:10px 12px;font-size:13px;font-weight:500;margin-top:18px}
.msg{display:flex;gap:9px;align-items:center;padding:11px 16px;font-size:13px;font-weight:500}
.msg.ok{color:var(--ok);background:var(--ok-bg);border-color:#c5e6d2}
.msg.bad{color:var(--bad);background:var(--bad-bg);border-color:#f3c9c4}
/* login */
.login{height:auto;min-height:100vh}
.lft h1{margin-top:min(150px,14vh)}
.rgt{padding:40px 24px}
.rgt .top b{color:var(--g-text);font-weight:600}
.back{text-decoration:none}
.big-note{margin-top:22px;font-size:13.5px}
.btn.mt{margin-top:22px}
.box b{font-weight:600}
/* user menu (details) */
details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
.usrd{position:relative}
.usrd .menu{top:auto;bottom:calc(100% + 8px);left:0;right:auto;width:270px;color:var(--text)}
.usrd[open] .usr{background:var(--side-3)}
.med{position:relative}
.med .menu{top:calc(100% + 8px);right:0}
.menu{display:block}
.mi{text-decoration:none;width:100%;color:var(--text);font-size:13.5px}
.mi:hover{background:var(--sunk)}
.mi.dis{color:var(--faint);cursor:default}
.mi.dis:hover{background:none}
.menu form{margin:0}
/* launcher */
.wrap{height:auto}
.seg button{height:30px;padding:0 14px;border-radius:999px;display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);font-weight:500}
.seg button.on{background:var(--g);color:#fff;font-weight:600}
.ap{text-decoration:none;color:inherit}
.ap.yes:hover{border-color:#d8cdc0;box-shadow:0 1px 2px rgba(28,25,23,.06),0 10px 24px rgba(28,25,23,.08)}
.ap.no .tip{display:none}
.ap.no:hover,.ap.no:focus{background:var(--sunk);border-color:var(--line)}
.ap.no:hover .tip{display:flex}
.ap[hidden]{display:none}
.vacio{color:var(--muted);font-size:13px;padding:14px 4px 0}
.rc{text-decoration:none;color:inherit}
.rc:hover{background:var(--sunk)}
/* admin */
.tabs a{padding:0 12px;height:28px;display:flex;align-items:center;border-radius:7px;font-size:12.5px;color:var(--muted);text-decoration:none}
.tabs a.on{background:#fff;color:var(--text);font-weight:600;box-shadow:var(--sh)}
a.nm{text-decoration:none;color:inherit}
tr[data-href]{cursor:pointer}
tr[data-href]:hover td{background:#faf7f3}
.ell a{color:var(--muted);display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%}
.tablewrap{overflow-x:auto}
.tl.ic .appi.bld img{opacity:.55}
.crumb a{color:inherit;text-decoration:none}
.crumb a:hover{text-decoration:underline}
.ev{display:inline-flex;align-items:center;gap:7px}
.ev.ok{color:var(--ok)}.ev.bad{color:var(--bad)}
.inp.url{height:34px;font-size:13px;min-width:360px}
.hform{display:flex;flex-direction:column;gap:12px}
/* editar */
.mxr .t span{text-align:left;justify-self:auto}
.mxr.tool .t>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mxr.tool .t{min-width:0}
.tl.ic .appi.nolink{outline:1.2px dashed #a39a8f;outline-offset:-1px}
.app.full{min-height:100vh}
.datos .inp{padding:0 12px}
.datos .inp:focus-within{padding:0 11px}
.mx{padding-bottom:12px}
.dotn{display:inline-block;width:9px;height:9px;border-radius:50%}
.dotn.j{background:var(--neg-j)}.dotn.c{background:var(--neg-c)}
.mxr.tool.off .t>span:last-child{color:var(--muted)}
.mxr.tool.off .appi{opacity:.55}
.mxnota{font-size:11.5px;color:var(--muted);margin-top:10px}
.secreto{display:flex;align-items:center;gap:14px;padding:14px 18px;border:2px solid var(--g);background:var(--g-soft)}
.secreto b{display:block;font-size:13.5px}
.secreto small{display:block;color:var(--muted);font-size:12px;margin-top:2px;max-width:420px}
.secreto code{margin-left:auto;font:600 13px ui-monospace,SFMono-Regular,Menlo,monospace;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px;word-break:break-all;max-width:560px;user-select:all}
.hist .vacio{padding-top:6px}
.vt{font-size:12px}
.bar{position:sticky;bottom:10px;z-index:3}
.bar .dot{background:var(--faint)}
.bar.sucio .dot{background:var(--warn)}
form.sr,form.dz{margin:0}
/* avisos y cambiar contraseña */
.pg-aviso{display:block}
.aviso-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.aviso{width:100%;max-width:440px;padding:30px 30px 26px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.aviso-ic{width:48px;height:48px;border-radius:14px;background:var(--side);color:var(--side-fg);display:grid;place-items:center}
.aviso h1{font-size:21px;font-weight:700;letter-spacing:-.02em}
.aviso p{font-size:13.5px;color:var(--muted);line-height:1.5}
.form-card .field{width:100%}
.form-card .inp{height:44px}
.form-card .err{margin-top:0;width:100%}
.hint{font-size:12px!important}
.acts-row{display:flex;gap:8px;justify-content:flex-end;width:100%;margin-top:6px}

h3 .nsh{display:none}
/* badge de experto (azul / rosa) en Drive y Escuela */
.appi.conb{position:relative;overflow:visible}
.appi.conb img{border-radius:inherit}
.appi .nb{position:absolute;top:-5px;right:-5px;width:42%;height:42%;min-width:14px;min-height:14px;border-radius:50%;
  display:grid;place-items:center;color:#fff;font:700 10px/1 var(--font-title);border:2px solid #fff;font-style:normal}
.appi .nb.j{background:var(--neg-j)}.appi .nb.c{background:var(--neg-c)}
.ap .appi .nb{font-size:15px;border-width:3px;top:-6px;right:-6px;width:34%;height:34%}
.appi.sm .nb,.appi.xs .nb{font-size:0;border-width:1.5px;width:9px;height:9px;min-width:9px;min-height:9px;top:-3px;right:-3px}
.ap.no .appi .nb{filter:grayscale(1)}
/* herramientas propias: colores fijos (la CSP no permite estilo en línea) */
.appi.col-grafito{background:var(--side)}.appi.col-grafito .ico{color:var(--side-fg)}
.appi.col-naranja{background:#c2410c}.appi.col-azul{background:var(--neg-j)}.appi.col-rosa{background:var(--neg-c)}
.appi.col-violeta{background:#6d28d9}.appi.col-ambar{background:#b45309}.appi.col-verde{background:#15803d}
.appi[class*=" col-"]:not(.col-grafito) .ico{color:#fff}
.propia{display:flex;flex-direction:column;gap:18px;padding:18px 20px}
.pgrid{display:grid;grid-template-columns:1fr 1.4fr;gap:14px}.pgrid .wide{grid-column:1/-1}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.op span{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border:1px solid var(--line);border-radius:999px;font-size:13px;cursor:pointer;background:#fff}
.op input:checked+span{border:2px solid var(--g);background:var(--g-soft);padding:0 13px;font-weight:600}
.op input:focus-visible+span{box-shadow:0 0 0 3px var(--g-soft)}
.op .appi.xs{width:16px;height:16px;border-radius:5px}
.icos{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px;max-width:760px}
.icop{cursor:pointer;display:grid;place-items:center;padding:4px;border-radius:10px;border:2px solid transparent}
.icop:has(input:checked){border-color:var(--g);background:var(--g-soft)}
.icop:has(input:focus-visible){box-shadow:0 0 0 3px var(--g-soft)}
.nota-propia{font-size:12.5px;padding:0 4px}
td .acts form{margin:0}
/* ---------- celular (mockup 05-inicio-celular) ---------- */
@media (max-width:820px){
  body{font-size:14px}
  .app{display:block}
  .app .side{position:sticky;top:0;z-index:10;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;padding:12px 16px;gap:8px}
  .side .brand{margin:0;padding:0;height:auto}.side .brand img{height:24px}
  .side .grp,.side .nav,.side .grow{display:none}
  .usrd{margin-left:auto}.usrd .usr{background:none;padding:0}.usrd .usr div{display:none}
  .usrd .menu{bottom:auto;top:calc(100% + 8px);left:auto;right:0}
  .main{padding:12px 12px 20px}
  .topb .srch{width:auto;flex:1}.topb .grow,.med{display:none}
  .hello{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 16px}
  .apps{padding:14px 10px 16px}
  .sec-h{flex-direction:column}
  .sec-h p{display:none}
  .leg{flex-wrap:wrap;gap:10px;font-size:11px}
  .agrid{grid-template-columns:repeat(4,1fr);gap:16px 4px;margin-top:14px}
  .ap,.ap.yes,.ap.bld{padding:4px 0;border:0;background:none;box-shadow:none;min-height:0}
  .ap .appi{width:58px;height:58px;border-radius:16px}
  .ap .appi .ico{width:26px;height:26px}
  .ap h3{font-size:11px;margin-top:6px;font-weight:600;white-space:nowrap}
  .ap h3 .nl{display:none}.ap h3 .nsh{display:inline}
  .agrid>*{min-width:0}
  .ap .bchip{white-space:nowrap}
  .ap .d,.ap .neg,.ap .sin,.ap .tip{display:none!important}
  .ap.bld .appi{outline:1.5px dashed #a39a8f;outline-offset:3px}
  .ap .bchip{background:none;padding:0;height:auto;font-size:9.5px;margin-top:2px}.ap .bchip .ico{display:none}
  .recent2{flex-wrap:wrap}
  .login{display:block}
  .lft{padding:22px 22px 26px}.lft h1{margin-top:22px;font-size:26px}.lft p,.lft .row,.lft small{display:none}
  .rgt .top{position:static;margin-bottom:22px}
  .rgt{display:block;padding:26px 20px}
  .box{width:auto;max-width:420px;margin:0 auto}
  .stats{grid-template-columns:1fr 1fr}
  .ph{flex-direction:column;align-items:flex-start;gap:10px}
  .acts{flex-wrap:wrap}
  .cols,.two,.datos,.roles,.pgrid{grid-template-columns:1fr!important}
  .secreto{flex-direction:column;align-items:flex-start}
  .secreto code{margin-left:0;max-width:100%}
}