/* docs.livestream-mx.com · acceso y explorador de documentos · mismos tokens que el Showcase (tema claro) */
:root{--carbono:#111;--papel:#F5F5F3;--niebla:#ECECE9;--line:#DEDEDB;--line-strong:#C4C4C1;--text-3:#5E5E5E;--dorado:#8a6a3b;
  --ff-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;--ff-sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;--radius:2px;--tap:44px}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--papel);color:var(--carbono);font:300 15px/1.5 var(--ff-sans)}
[hidden]{display:none!important}
.etiqueta{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3)}
.logo{font-family:var(--ff-serif);font-size:22px;font-weight:600;line-height:1.1}
.logo small{display:block;margin-top:3px;font:400 9px var(--ff-sans);letter-spacing:.3em;color:var(--text-3)}
button{font-family:inherit}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 18px;border:1px solid var(--carbono);border-radius:var(--radius);background:transparent;color:var(--carbono);font:400 14px var(--ff-sans);letter-spacing:.04em;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--niebla)}
.btn-p{background:var(--carbono);color:var(--papel)}
.btn-p:hover{background:#333}
:focus-visible{outline:2px solid var(--dorado);outline-offset:2px}

/* ---------- acceso ---------- */
.acceso{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100vh}
.acceso .foto{position:relative;background:#E9E2D6;min-height:240px}
.acceso .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.acceso .foto .etiqueta{position:absolute;left:24px;bottom:20px;color:#6f6253}
.acceso .lado{display:flex;align-items:center;justify-content:center;padding:48px 32px}
.acceso .caja{width:100%;max-width:380px;display:flex;flex-direction:column;gap:36px}
.acceso h1{margin:0;font-family:var(--ff-serif);font-weight:300;font-size:40px;line-height:1.1}
.acceso p{margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--text-3)}
#form{display:flex;flex-direction:column;gap:22px}
.campo{display:flex;flex-direction:column;gap:8px}
.pw{position:relative}
.pw input{width:100%;min-height:48px;padding:0 100px 0 12px;border:1px solid var(--line-strong);border-radius:var(--radius);background:#fff;color:var(--carbono);font:300 15px var(--ff-sans)}
.pw input:focus{border-color:var(--carbono);outline:0}
.pw .ver{position:absolute;right:4px;top:4px;min-height:40px;padding:0 14px;background:transparent;border:0;color:var(--text-3);font:400 11px var(--ff-sans);letter-spacing:.18em;cursor:pointer}
.pw .ver:hover{color:var(--carbono)}
.entrar{min-height:50px;background:var(--carbono);color:var(--papel);border:0;border-radius:var(--radius);font:400 13px var(--ff-sans);letter-spacing:.26em;cursor:pointer}
.entrar:hover{background:#333}
.entrar:disabled{opacity:.6;cursor:default}
.err{color:#B3261E;margin:0!important;min-height:1.2em;font-size:13px!important}
.pie{font-size:10px;letter-spacing:.3em;color:var(--text-3)}

/* ---------- explorador ---------- */
.app{display:grid;grid-template-columns:230px minmax(0,1fr) 280px;min-height:100vh}
.lateral{border-right:1px solid var(--line);background:var(--niebla);padding:24px 14px;display:flex;flex-direction:column;gap:22px}
.lateral nav{display:flex;flex-direction:column;gap:2px}
.carpeta{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--tap);padding:0 12px;border:1px solid transparent;border-radius:var(--radius);background:transparent;color:var(--carbono);font:400 14px var(--ff-sans);text-align:left;cursor:pointer}
.carpeta:hover{background:#fff}
.carpeta[aria-current=true]{background:#fff;border-color:var(--line-strong)}
.carpeta svg{flex:none;color:var(--dorado)}
.carpeta .n{margin-left:auto;font-size:12px;color:var(--text-3)}
.lateral .salir{margin-top:auto}
.centro{padding:28px 32px;min-width:0}
.barra{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.ruta{flex:1;min-width:160px;font-size:14px;color:var(--text-3)}
.ruta b{font-weight:400;color:var(--carbono)}
.buscar{width:200px;min-height:40px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--radius);background:#fff;font:300 14px var(--ff-sans);color:var(--carbono)}
.buscar:focus{border-color:var(--carbono);outline:0}
.vistas{display:flex;border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden}
.vistas button{width:40px;height:38px;border:0;background:transparent;color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center}
.vistas button[aria-pressed=true]{background:#fff;color:var(--carbono)}
.lista .cab,.lista .fila{display:grid;grid-template-columns:minmax(0,1fr) 84px 76px 110px;gap:10px;align-items:center;padding:11px 10px}
.lista .cab{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);border-bottom:1px solid var(--line)}
.fila{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.fila:hover{background:#fff}
.fila[aria-selected=true]{background:#fff;box-shadow:inset 3px 0 0 var(--dorado)}
.fila .nom{display:flex;align-items:center;gap:10px;min-width:0}
.fila .nom svg{flex:none;color:#A32D2D}
.fila .nom span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila .sec{font-size:13px;color:var(--text-3)}
.etq{font-size:11px;padding:1px 8px;border:1px solid var(--line-strong);border-radius:99px;text-align:center;color:var(--text-3);justify-self:start}
.cuadricula{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.tarjeta{border:1px solid var(--line);border-radius:var(--radius);background:transparent;padding:10px;text-align:center;cursor:pointer;color:inherit;font:inherit}
.tarjeta:hover{background:#fff}
.tarjeta[aria-selected=true]{border-color:var(--dorado);background:#fff}
.tarjeta .mini{display:block;width:100%;aspect-ratio:8.5/11;object-fit:cover;background:#fff;border:1px solid var(--line);margin-bottom:8px}
.tarjeta span{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vacio{border:1px dashed var(--line-strong);padding:48px 20px;text-align:center;color:var(--text-3);margin-top:8px}
.vacio b{display:block;font:400 16px var(--ff-sans);color:var(--carbono);margin-bottom:4px}
.detalle{border-left:1px solid var(--line);padding:24px 20px;display:flex;flex-direction:column;gap:14px;background:var(--niebla)}
.detalle .mini{width:100%;aspect-ratio:8.5/11;object-fit:cover;background:#fff;border:1px solid var(--line)}
.detalle h2{margin:0;font:400 15px/1.3 var(--ff-sans);word-break:break-word}
.detalle dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px;color:var(--text-3)}
.detalle dd{margin:0;color:var(--carbono)}
.detalle .acciones{display:flex;flex-direction:column;gap:8px}
.visor{width:min(1100px,94vw);height:92vh;max-height:none;padding:0;border:1px solid var(--carbono);border-radius:var(--radius);background:#fff}
.visor::backdrop{background:rgba(17,17,17,.55)}
.visor .vbar{display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid var(--line)}
.visor .vbar b{flex:1;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visor iframe{display:block;width:100%;height:calc(100% - 57px);border:0}

@media(max-width:1000px){.app{grid-template-columns:200px minmax(0,1fr)}.detalle{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}}
@media(max-width:760px){.acceso{grid-template-columns:1fr}.acceso .foto{min-height:200px;order:-1}.acceso .foto img{object-fit:cover;object-position:center 80%}.acceso h1{font-size:34px}
  .app{grid-template-columns:1fr}.lateral{border-right:0;border-bottom:1px solid var(--line);padding:16px}.lateral .salir{margin-top:0}
  .centro{padding:20px 16px}.lista .cab,.lista .fila{grid-template-columns:minmax(0,1fr) 84px}.lista .cab span:nth-child(n+3),.lista .fila .sec:nth-child(n+3){display:none}.carpeta.sub{display:none}.buscar{width:100%}}

/* Árbol Mice / Weddings, migas de pan y carpetas en el contenido */
.carpeta.sec{font-weight:400}
.carpeta.sub{padding-left:34px;font-size:13px;min-height:36px}
.carpeta.dentro{color:var(--carbono)}
.carpeta.dentro svg{color:var(--carbono)}
.subir{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:var(--radius);background:#fff;color:var(--carbono);cursor:pointer}
.subir:disabled{opacity:.35;cursor:default}
.ruta{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.ruta .sep{color:var(--line-strong)}
.miga{border:0;background:none;padding:2px 0;font:inherit;color:var(--text-3);cursor:pointer}
.miga:hover{color:var(--carbono);text-decoration:underline;text-underline-offset:3px}
.info{margin:-6px 0 14px;font-size:12px;letter-spacing:.04em;color:var(--text-3)}
.fila.es-carpeta .nom svg{color:var(--dorado)}
.fila.es-carpeta .nom span{font-weight:400}
.tarjeta small{display:block;margin-top:2px;font-size:11px;color:var(--text-3)}
.tarjeta .mini.icono{display:flex;align-items:center;justify-content:center;background:var(--niebla);color:var(--dorado)}
.tarjeta .mini.icono svg{width:46%;height:auto}
.detalle .ayuda{margin:0;font-size:13px;color:var(--text-3)}
.hola{margin:-8px 0 0;font-size:13px;color:var(--text-3)}
.hola b{font-weight:400;color:var(--carbono)}
.acceso .nota{margin:0;font-size:13px;color:var(--text-3)}

/* ---------- Panel de administrador ---------- */
.lateral .irpanel{margin-top:auto}
.lateral .irpanel:not([hidden]) + .salir{margin-top:0}
.cuerpo-panel{background:var(--papel)}
.panel-cab{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 32px;border-bottom:1px solid var(--line);background:var(--niebla)}
.panel-nav{display:flex;gap:8px;flex-wrap:wrap}
.panel{max-width:1240px;margin:0 auto;padding:28px 32px 56px;display:flex;flex-direction:column;gap:20px}
.panel[aria-busy=true] .cifras,.panel[aria-busy=true] .tarjeta-panel{opacity:.6;transition:opacity .2s}
.panel-barra{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.panel h1{margin:0;font:400 34px/1.1 'Cormorant Garamond',serif}
.panel h2{margin:0;font:400 17px var(--ff-sans)}
.periodo{display:flex;border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;background:var(--niebla)}
.periodo button{border:0;background:transparent;padding:0 14px;min-height:38px;font:300 13px var(--ff-sans);color:var(--text-3);cursor:pointer}
.periodo button[aria-pressed=true]{background:#fff;color:var(--carbono)}
.panel .aviso{margin:0;color:#B3261E;font-size:13px;min-height:0}
.panel .aviso:empty{display:none}
.cifras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cifra{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:16px 18px;display:flex;flex-direction:column;gap:4px;min-width:0}
.cifra b{font:400 40px/1.05 'Cormorant Garamond',serif;color:var(--carbono)}
.cifra small{font-size:12px;color:var(--text-3)}
.panel-cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px;align-items:start}
.tarjeta-panel{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:18px 20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.tp-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tarjeta-panel .sub{margin:0;font-size:12px;color:var(--text-3)}
.alta{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;padding:14px;border:1px dashed var(--line-strong);border-radius:var(--radius);background:var(--papel)}
.alta label{display:flex;flex-direction:column;gap:6px}
.alta input,.filtro select{min-height:40px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--radius);background:#fff;font:300 14px var(--ff-sans);color:var(--carbono)}
.alta-acc{grid-column:1/-1;display:flex;gap:8px}
.alta .err{grid-column:1/-1}
.filtro{display:flex;align-items:center;gap:10px}
.btn.chico{min-height:32px;padding:0 10px;font-size:12px}
.pl-fila{display:grid;grid-template-columns:minmax(0,1.6fr) 64px 70px 80px minmax(0,1fr) 214px;gap:10px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line)}
.pl-cab,.act-cab{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.pl-nombre{border:0;background:none;padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer;min-width:0}
.pl-nombre b{display:block;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-nombre small{display:block;font-size:12px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-nombre:hover b{text-decoration:underline;text-underline-offset:3px}
.pl-fila.inactiva .pl-nombre b,.pl-fila.inactiva .num{color:var(--text-3)}
.pl-fila .num{font-variant-numeric:tabular-nums}
.pl-fila .sec,.act-fila .sec{font-size:13px;color:var(--text-3)}
.pl-acc{display:flex;gap:6px;justify-content:flex-end}
.estado{font-size:12px;padding:2px 8px;border-radius:99px;justify-self:start;border:1px solid var(--line-strong)}
.estado.si{color:#1F6B3A;border-color:#9CC8AA;background:#EEF6F0}
.estado.no{color:var(--text-3)}
.barras{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.barra-fila{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin-bottom:5px}
.barra-nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barra-num{font-variant-numeric:tabular-nums;color:var(--text-3)}
.barra-pista{height:8px;background:var(--niebla);border-radius:4px}
.barra-dato{height:8px;background:var(--dorado);border-radius:4px}
.barras li:hover .barra-dato{background:#6f5530}
.act-fila{display:grid;grid-template-columns:150px minmax(0,1fr) 100px minmax(0,1.6fr);gap:10px;align-items:center;padding:9px 4px;border-bottom:1px solid var(--line);font-size:14px}
.act-fila span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.accion.descarga{color:var(--carbono)}
.accion.vista,.accion.entrada{color:var(--text-3)}
.codigo-dlg{width:min(480px,92vw);border:1px solid var(--carbono);border-radius:var(--radius);padding:24px;background:#fff}
.codigo-dlg::backdrop{background:rgba(17,17,17,.55)}
.codigo-dlg h2{margin:4px 0 12px;font:400 22px var(--ff-sans)}
.codigo-dlg .codigo{margin:0 0 8px;font:400 26px/1.2 ui-monospace,Menlo,monospace;letter-spacing:.06em;padding:12px;background:var(--niebla);border-radius:var(--radius);text-align:center;user-select:all}
.codigo-dlg .sub{font-size:13px;color:var(--text-3);margin:0 0 12px}
.codigo-dlg textarea{width:100%;box-sizing:border-box;font:300 13px/1.5 var(--ff-sans);padding:10px;border:1px solid var(--line-strong);border-radius:var(--radius);resize:none;margin-bottom:14px}
.dlg-acc{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:1000px){.cifras{grid-template-columns:repeat(2,minmax(0,1fr))}.panel-cols{grid-template-columns:1fr}}
@media(max-width:760px){.panel-cab{padding:14px 16px}.panel{padding:20px 16px 40px}
  .pl-fila{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}.pl-cab{display:none}.pl-fila .num,.pl-fila .sec{display:none}.pl-acc{grid-column:1/-1;justify-content:flex-start}
  .act-fila{grid-template-columns:minmax(0,1fr) auto}.act-cab{display:none}.act-fila span:nth-child(1){grid-column:1/-1;font-size:12px}.act-fila span:nth-child(4){grid-column:1/-1}
  .alta{grid-template-columns:1fr}}