body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
code,kbd{font-family:var(--f-mono);font-size:12.5px}
.num,input[type=number]{font-variant-numeric:tabular-nums}
.lbl{line-height:1.3}
.viewhead .actions{align-items:center}
.cinta-pestana{display:inline-flex;align-items:center}
.cinta-pestana .badge,.sec-title .badge{margin-left:var(--esp-2);min-width:18px;padding:0 5px;border-radius:9px;line-height:18px;font-size:11px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums;background:var(--accent-soft);color:var(--accent)}
.cinta-pestana[aria-selected="true"] .badge{background:var(--surface);color:var(--accent)}
.cinta-fila>.brand{flex:none;align-self:center;padding-left:max(12px,env(safe-area-inset-left,0px))}
.cinta-fila .brand h1{font-size:17px}
.ev-btn{display:flex;align-items:center;gap:var(--esp-4);width:100%;min-height:56px;padding:10px var(--esp-4);border:1px solid var(--line-strong);border-radius:10px;background:var(--surface-2);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.ev-btn:hover{border-color:var(--accent)}
.ev-btn .cinta-ic{flex:none;width:36px;height:36px}
.ev-btn b{display:block;font-size:14px}
.ev-btn small{display:block;font-size:12px;color:var(--muted)}
.viewhead h2{font-size:22px;font-weight:700}
.panel>.ph h3{font-size:16px;font-weight:700}
.field>input,.listedit input[type=email],.page input[type=search]{font:14px var(--f-body);color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:var(--esp-3) 10px;min-width:0}
.page input[type=search]{max-width:100%}
.listedit input[type=email]{width:100%}
.field>input:focus,.listedit input[type=email]:focus,.page input[type=search]:focus{outline:2px solid color-mix(in srgb,var(--focus) 45%,transparent);border-color:var(--focus)}
.listedit small{color:var(--muted);font-size:12px}
.card{overflow:hidden}
.card.current{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.card .thumb{aspect-ratio:16/9;background:var(--viewer-bg,var(--surface-2));display:grid;place-items:center;color:var(--muted);border-bottom:1px solid var(--line)}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.card .cb{padding:var(--esp-4) 14px 14px;display:flex;flex-direction:column;gap:var(--esp-2);flex:1}
.card .meta{margin:0;color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.card .foot{display:flex;align-items:center;gap:var(--esp-2);margin-top:auto;padding-top:var(--esp-2);flex-wrap:wrap}
.card .foot .right{margin-left:auto;display:flex;gap:var(--esp-2)}
.gate-card .gbrand{display:flex;align-items:center;gap:10px}
.gate-card .gbrand svg{width:28px;height:28px}
.gate-card .neg{color:var(--neg)}
@media (max-width:760px),(max-height:500px) and (max-width:960px){.cinta-der{gap:var(--esp-2)}.userbox .em{display:none}.viewhead .actions{margin-left:0;width:100%}.viewhead .actions .btn{flex:1}}
:root{--carril-w:44px}
@media (pointer:coarse){:root{--carril-w:53px}}
.cinta-fija{position:fixed;top:0;left:0;right:0;z-index:30;padding-top:env(safe-area-inset-top,0px);background:var(--surface);box-shadow:var(--shadow)}
header.hdr-herr{position:relative;background-image:none;border-bottom:1px solid var(--line-strong)}
.hdr-herr>.hdr-fila{display:flex;align-items:center;gap:10px;min-height:48px;padding:var(--esp-2) max(10px,env(safe-area-inset-right,0px)) var(--esp-2) max(12px,env(safe-area-inset-left,0px))}
.hdr-herr .brandrow{display:contents}
.hdr-herr .brand{flex:none}
.hdr-herr .brand h1{font-size:17px}
.hdr-herr .hdr-centro{justify-content:flex-start;gap:10px}
.hdr-herr nav.tabs{flex-wrap:nowrap;padding:0}
.hdr-herr nav.tabs button{padding:var(--esp-2) 10px;font-size:13.5px}
.hdr-grupo{display:flex;align-items:center;gap:var(--esp-1);flex:none}
.hdr-grupo+.hdr-grupo{padding-left:10px;border-left:1px solid var(--line)}
#hdrMas{display:flex;align-items:center;gap:10px;flex:none}
#menuBtn{display:none}
.herr-izq{background:var(--surface)}
@media (min-width:761px){
  .herr-izq{position:fixed;top:var(--hdr);bottom:0;left:0;display:flex;padding-left:env(safe-area-inset-left,0px);border-right:1px solid var(--line-strong);box-shadow:var(--shadow)}
  .herr-izq>.barra-herr{border-right:0}
  .edge-left{left:var(--herr-w,0px)}
}
@media (min-width:761px) and (max-height:500px){.herr-izq{overflow-y:auto}}
.menu-grupo{position:relative}
.menu-btn{display:inline-flex;align-items:center;gap:var(--esp-2);height:32px;padding:0 10px;font-size:12.5px}
.menu-btn[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.menu-archivo:not(.open){display:none}
.menu-archivo{position:absolute;z-index:3;top:calc(100% + 6px);left:0;min-width:240px;display:flex;flex-direction:column;gap:1px;padding:var(--esp-1);background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;box-shadow:var(--shadow)}
.menu-archivo-item{display:flex;align-items:center;gap:10px;width:100%;padding:var(--esp-2) var(--esp-3);border:0;border-radius:7px;background:none;color:var(--ink);font:500 13px var(--f-body);text-align:left;cursor:pointer}
.menu-archivo-item:hover,.menu-archivo-item:focus-visible{background:var(--surface-2)}
.menu-archivo-item[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
.menu-archivo-item:disabled{opacity:.4;cursor:not-allowed}
.menu-archivo-item .cinta-ic{flex:none}
@media (max-width:1099px){
  .hdr-herr>.hdr-fila{gap:var(--esp-2);min-height:44px;padding-block:var(--esp-2);padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}
  .hdr-herr .hdr-centro{gap:var(--esp-2)}
  .hdr-grupo{gap:3px}
  .hdr-grupo+.hdr-grupo{padding-left:var(--esp-2)}
  #menuBtn{display:inline-flex;align-items:center;justify-content:center;order:2;width:32px;height:32px;padding:0;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--muted);cursor:pointer;flex:none}
  #menuBtn:hover{color:var(--ink);border-color:var(--accent)}
  #menuBtn .mi{display:inline-flex;gap:3px}
  #menuBtn .mi i{display:block;width:4px;height:4px;border-radius:50%;background:currentColor}
  #hdrMas:not(.open){order:1;gap:0}
  #hdrMas:not(.open)>:not(.sync){display:none}
  #hdrMas:not(.open) .sync .stxt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #hdrMas.open{position:absolute;z-index:2;top:calc(100% + 8px);right:max(8px,env(safe-area-inset-right,0px));flex-direction:column;align-items:flex-start;gap:10px;min-width:220px;max-width:calc(100vw - 24px);padding:10px;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;box-shadow:var(--shadow)}
  #hdrMas nav.tabs{flex-direction:column;align-items:stretch;align-self:stretch;gap:2px}
  #hdrMas nav.tabs button{text-align:left}
  #hdrMas .userbox .em{display:inline}
  #hdrMas .userbox{max-width:100%}
}
@media (max-width:560px){.hdr-herr .brand h1{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}
@media (max-width:420px){.hdr-herr>.hdr-fila,.hdr-herr .hdr-centro{gap:var(--esp-1)}.hdr-herr .hdr-grupo+.hdr-grupo{padding-left:var(--esp-1)}}
@media (max-width:389px){.hdr-herr .hdr-fila .hist-btn,#menuBtn{width:30px;height:30px}.hdr-herr>.hdr-fila{padding-left:max(4px,env(safe-area-inset-left,0px));padding-right:max(4px,env(safe-area-inset-right,0px))}.hdr-herr .hdr-grupo+.hdr-grupo{padding-left:2px}}
.saltar{position:fixed;z-index:40;top:8px;left:8px;padding:var(--esp-3) 14px;border:1px solid var(--accent);border-radius:var(--r);background:var(--surface);color:var(--ink);font:600 13px var(--f-body);box-shadow:var(--shadow)}
.saltar:not(:focus){left:-999px}
@media (pointer:coarse){
  .hdr-herr .hdr-grupo{gap:var(--esp-4)}
  .hdr-herr :is(button,a[href]):not(.menu-archivo-item,#hdrMas.open *){position:relative}
  .hdr-herr :is(button,a[href]):not(.menu-archivo-item,#hdrMas.open *)::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
  .menu-archivo-item,#hdrMas.open :is(button,a[href]){min-width:44px;min-height:44px}
}
@media (pointer:coarse) and (max-width:760px),(pointer:coarse) and (max-height:500px) and (max-width:960px){.hdr-herr .hdr-grupo{gap:3px}.hdr-herr :is(button,a[href]):not(.menu-archivo-item,#hdrMas.open *)::before{width:calc(100% + 3px)}}
.hoja-asa{display:none}
@media (max-width:760px),(max-height:500px) and (max-width:960px){
  body{--hoja-plegada:calc(128px + env(safe-area-inset-bottom,0px));--hoja-media:clamp(var(--hoja-plegada),46dvh,calc(100dvh - var(--hdr) - 170px));--hoja-completa:calc(100dvh - var(--hdr) - 8px);--hoja-h:var(--hoja-media)}
  body[data-hoja="plegada"]{--hoja-h:var(--hoja-plegada)}
  body[data-hoja="completa"]{--hoja-h:var(--hoja-completa)}
  .side-panel{z-index:12;top:auto;bottom:0;left:0;right:0;width:auto;height:var(--hoja-h);max-height:none;overflow:hidden;border-width:1px 0 0;border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
  .panel-left[data-collapsed="true"],.panel-right[data-collapsed="true"]{transform:translateY(calc(100% + 24px))}
  .side-panel>.ph{position:static;flex:none;border-radius:0}
  .side-panel>.pb{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .hoja-asa{display:block;flex:none;width:100%;height:22px;padding:0;border:0;border-radius:16px 16px 0 0;background:var(--surface);cursor:grab;touch-action:none}
  .hoja-asa::before{content:"";display:block;width:40px;height:5px;margin:9px auto 0;border-radius:var(--r-pill);background:var(--line-strong)}
  .hoja-asa:hover::before,.hoja-asa:focus-visible::before{background:var(--accent)}
  .hoja-asa:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
  body.hoja-arrastre .side-panel{transition:none}
  body.hoja-arrastre .hoja-asa{cursor:grabbing}
}
@media (max-height:500px) and (min-width:561px) and (max-width:960px){
  body{--hoja-media:calc((100dvh - var(--hdr)) * .6)}
  .side-panel{left:auto;right:max(var(--esp-3),env(safe-area-inset-right,0px));width:min(380px,46vw);border-width:1px 1px 0}
}
@media (prefers-reduced-motion:no-preference) and (max-width:760px),(prefers-reduced-motion:no-preference) and (max-height:500px) and (max-width:960px){.side-panel{transition:transform .28s cubic-bezier(.2,.7,.2,1),height .28s cubic-bezier(.2,.7,.2,1)}}
body .edge-group.carril{transform:none}
body .edge-group.carril>.segmentado{gap:var(--esp-2);padding:0;border:0;border-radius:0;background:none}
body .edge-group.carril .edge-tab{gap:var(--esp-3);padding:10px 0;border:0;border-radius:var(--r);box-shadow:none;background:none;color:var(--muted);font-size:12.5px}
body .edge-group.carril .edge-tab:hover{color:var(--ink)}
body .edge-group.carril .edge-tab[aria-expanded="true"]{background:var(--accent-soft);color:var(--accent)}
body .edge-group.carril .edge-tab:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
@media (min-width:761px) and (min-height:501px),(min-width:961px){
  body{--visor-der-max:calc(var(--carril-w) + 20px + var(--pl-der,324px));--visor-centro:calc((100vw + var(--herr-w,0px) - var(--visor-der-max)) / 2)}
  body .edge-group.carril{top:var(--hdr);bottom:0;width:var(--carril-w);padding:var(--esp-3) var(--esp-1);padding-right:max(4px,env(safe-area-inset-right,0px));background:var(--surface);border-left:1px solid var(--line-strong);box-shadow:var(--shadow)}
  .side-panel{right:calc(var(--carril-w) + 12px)}
  .side-panel[data-collapsed="true"]{transform:translateX(calc(100% + 24px + var(--carril-w)))}
}
@media (max-width:760px),(max-height:500px) and (max-width:960px){
  body>.carril{display:none}
  body .edge-group.carril{position:static;flex:none;padding:0 var(--esp-4) var(--esp-2);border:0;box-shadow:none;background:var(--surface)}
  body .edge-group.carril>.segmentado{flex-direction:row}
  body .edge-group.carril .edge-tab{flex:1;flex-direction:row;justify-content:center;min-height:36px;padding:var(--esp-2) var(--esp-3)}
  body .edge-group.carril .edge-tab span{writing-mode:horizontal-tb;transform:none}
}
@media (pointer:coarse){body .edge-group.carril .edge-tab{min-height:44px}}
.hist-atajos{font:700 15px var(--f-body)}
.modal td.atajo{white-space:nowrap}
@media (max-width:760px),(max-height:500px) and (max-width:960px){.hist-atajos{display:none}}
