/* Visores de archivos: estilos compartidos por las páginas visor-(formato). */

.visor{--visor-alto:clamp(440px,74vh,880px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  background:var(--surface);border-radius:var(--r-lg);overflow:hidden;min-width:0;position:relative}
.visor:fullscreen{--visor-alto:100%;border-radius:0;height:100vh}
.visor:fullscreen .visor-cuerpo{height:auto}

/* barra superior */
.visor-barra{display:flex;align-items:center;gap:6px;min-height:56px;padding:8px 10px 8px 16px;flex-wrap:wrap}
.visor-arch{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 220px}
.visor-arch .ti{font-size:22px;color:var(--accent);flex:none}
.visor-arch strong{font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.visor-arch span{color:var(--text-muted);font-size:.875rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.visor[data-estado="vacio"] .visor-arch strong{color:var(--text-muted);font-weight:500}
.visor-herr{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.visor-herr .sep{width:1px;height:22px;background:var(--line);margin:0 6px}
.visor-herr .btn-icono{width:38px;min-height:38px;border-radius:var(--r)}
.visor-herr .btn-icono[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
.visor-herr .btn-icono[disabled]{opacity:.35;pointer-events:none}
.visor-herr .btn-chico{min-height:38px}
.visor-zoom{min-width:58px;text-align:center;font-family:var(--f-mono);font-size:.8125rem;color:var(--text-body);
  background:none;border:0;cursor:pointer;border-radius:var(--r);height:38px;padding:0 6px}
.visor-zoom:hover{background:var(--surface-2);color:var(--text)}
.visor-pag{display:flex;align-items:center;gap:6px;font-size:.875rem;color:var(--text-body);font-variant-numeric:tabular-nums}
.visor-pag input{width:52px;height:34px;text-align:center;border:1px solid var(--line-strong);border-radius:8px;
  background:var(--surface);color:var(--text);font:inherit}

/* cuerpo: lateral + escena */
.visor-cuerpo{display:grid;grid-template-columns:minmax(0,1fr);height:var(--visor-alto);min-height:0}
.visor.con-lado .visor-cuerpo{grid-template-columns:220px minmax(0,1fr)}
.visor-lado{background:var(--surface);overflow:auto;padding:4px 10px 14px;min-height:0;overscroll-behavior:contain}
.visor-lado[hidden]{display:none}
.visor-lado h3{font-family:var(--f-body);font-size:.8125rem;font-weight:600;color:var(--text-muted);margin:10px 6px 8px}
.visor-escena{position:relative;background:var(--bg-alt);overflow:auto;min-width:0;min-height:0;overscroll-behavior:contain}
.visor-escena.sin-scroll{overflow:hidden;touch-action:none;cursor:grab}
.visor-escena.sin-scroll.arrastrando{cursor:grabbing}
.visor-escena.oscura{background:#14181a;color-scheme:dark}
.visor-escena.cuadricula{background-color:#14181a;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:24px 24px}
.visor-escena.cuadricula.clara{background-color:#f4f5f2;
  background-image:linear-gradient(rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.06) 1px,transparent 1px)}
.visor-escena.ajedrez{background-color:#e9e9e6;
  background-image:linear-gradient(45deg,#d6d6d2 25%,transparent 25%,transparent 75%,#d6d6d2 75%),linear-gradient(45deg,#d6d6d2 25%,transparent 25%,transparent 75%,#d6d6d2 75%);
  background-size:20px 20px;background-position:0 0,10px 10px}
:root[data-tema="oscuro"] .visor-escena.ajedrez{background-color:#232826;
  background-image:linear-gradient(45deg,#2c3230 25%,transparent 25%,transparent 75%,#2c3230 75%),linear-gradient(45deg,#2c3230 25%,transparent 25%,transparent 75%,#2c3230 75%)}
.visor-lienzo{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.visor-lienzo > img,.visor-lienzo > svg,.visor-lienzo > canvas{display:block;max-width:none}

/* pie de estado */
.visor-pie{display:flex;align-items:center;gap:16px;min-height:36px;padding:6px 16px;font-size:.8125rem;color:var(--text-muted);
  font-variant-numeric:tabular-nums;flex-wrap:wrap}
.visor-pie .mono{font-size:.78rem}
.visor-pie .der{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap}

/* estado vacío: la escena entera es la zona para soltar */
.visor-soltar{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:18px;padding:28px 20px;text-align:center;
  cursor:pointer;transition:background var(--t) var(--ease)}
.visor-soltar:focus-visible{outline:2px solid var(--accent);outline-offset:-6px}
.visor-exts{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 18px;max-width:720px;font-family:var(--f-display);
  font-size:clamp(2rem,5.4vw,4.25rem);font-weight:650;line-height:1.05;letter-spacing:-.02em;color:var(--line-strong);
  transition:color var(--t) var(--ease)}
.visor-exts span{transition:color var(--t) var(--ease),transform var(--t) var(--ease-out)}
.visor-soltar:hover .visor-exts,.visor.encima .visor-exts{color:var(--text-muted)}
.visor.encima .visor-soltar{background:var(--accent-soft)}
.visor.encima .visor-exts span{color:var(--accent)}
.visor-soltar p{color:var(--text-body);max-width:420px}
.visor-soltar p strong{color:var(--text)}
.visor-soltar .btn{pointer-events:none}
.visor.encima .visor-soltar .btn{background:var(--accent);color:var(--accent-on)}

/* cargando y error */
.visor-aviso{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;padding:24px;text-align:center;color:var(--text-body)}
.visor-aviso .ti{font-size:34px;color:var(--text-muted)}
.visor-aviso h3{font-family:var(--f-body);font-size:1.0625rem;font-weight:600;color:var(--text)}
.visor-aviso p{max-width:440px}
.visor-aviso.error .ti{color:var(--bad)}
.visor-barra-progreso{width:min(260px,70%);height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.visor-barra-progreso i{display:block;height:100%;width:35%;background:var(--accent);border-radius:4px;animation:visorCarga 1.1s var(--ease) infinite}
@keyframes visorCarga{from{transform:translateX(-100%)}to{transform:translateX(290%)}}
.visor-clave{display:flex;gap:8px;width:min(340px,100%)}
.visor-clave .entrada{flex:1}

/* listas del lateral (miniaturas, hojas, capas) */
.visor-mini{display:grid;gap:6px;justify-items:center;width:100%;padding:8px 6px;border-radius:var(--r);background:none;border:0;cursor:pointer;
  color:var(--text-muted);font:inherit;font-size:.75rem;font-variant-numeric:tabular-nums}
.visor-mini:hover{background:var(--surface-2)}
.visor-mini.activa{background:var(--accent-soft);color:var(--accent)}
.visor-mini canvas,.visor-mini img{max-width:100%;height:auto;background:#fff;border-radius:3px}
.visor-capa{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border-radius:8px;background:none;border:0;cursor:pointer;
  color:var(--text-body);font:inherit;font-size:.8125rem;text-align:left}
.visor-capa:hover{background:var(--surface-2)}
.visor-capa .ti{font-size:17px;flex:none;color:var(--text-muted)}
.visor-capa span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.visor-capa.oculta{color:var(--text-muted)}
.visor-capa.oculta span{text-decoration:line-through;text-decoration-color:var(--line-strong)}
.visor-capa i.muestra{width:12px;height:12px;border-radius:3px;flex:none;box-shadow:inset 0 0 0 1px var(--line-strong)}
.visor-capa img{width:28px;height:28px;object-fit:contain;flex:none;border-radius:4px;background:#d9d9d4}

/* documentos: hojas de papel */
.visor-hojas{display:grid;justify-items:center;align-content:safe center;gap:16px;padding:20px 16px 28px;min-width:fit-content;min-height:100%}
.visor-hoja{background:#fff;position:relative;flex:none}
.visor-hoja canvas{display:block}
.visor-hoja .num{position:absolute;right:-2px;bottom:-22px;font-size:.75rem;color:var(--text-muted)}

/* hojas de cálculo */
.visor-planilla{position:absolute;inset:0;overflow:auto}
.visor-planilla table{border-collapse:separate;border-spacing:0;font-size:.8125rem;background:var(--surface);color:var(--text);min-width:100%}
.visor-planilla th,.visor-planilla td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px 8px;white-space:nowrap;
  max-width:340px;overflow:hidden;text-overflow:ellipsis;height:26px;vertical-align:bottom}
.visor-planilla thead th{position:sticky;top:0;z-index:2;background:var(--surface-2);font-weight:500;color:var(--text-muted);text-align:center;font-size:.75rem}
.visor-planilla tbody th{position:sticky;left:0;z-index:1;background:var(--surface-2);font-weight:500;color:var(--text-muted);text-align:right;font-size:.75rem;min-width:44px}
.visor-planilla thead th:first-child{left:0;z-index:3}
.visor-planilla td.n{text-align:right;font-variant-numeric:tabular-nums}
.visor-planilla td.sel{outline:2px solid var(--accent);outline-offset:-2px}
.visor-planilla td{cursor:cell}
.visor-hojas-tabs{display:flex;gap:2px;overflow-x:auto;padding:0 8px;min-height:40px;align-items:stretch;background:var(--surface)}
.visor-hojas-tabs button{background:none;border:0;padding:0 14px;font:inherit;font-size:.8125rem;color:var(--text-muted);cursor:pointer;white-space:nowrap;
  border-radius:0 0 8px 8px}
.visor-hojas-tabs button:hover{color:var(--text);background:var(--surface-2)}
.visor-hojas-tabs button[aria-selected="true"]{color:var(--accent);background:var(--accent-soft);font-weight:600}
.visor-formula{display:flex;align-items:center;gap:0;min-height:36px;background:var(--surface);font-size:.8125rem}
.visor-formula b{min-width:72px;padding:0 12px;font-family:var(--f-mono);font-weight:500;color:var(--text-muted)}
.visor-formula span{flex:1;padding:0 12px;font-family:var(--f-mono);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Word y PowerPoint: contenido que la librería dibuja */
.visor-doc{padding:20px 12px 28px;transform-origin:top center}
.visor-doc .docx-wrapper{background:transparent!important;padding:0!important;gap:16px;display:flex;flex-flow:column;align-items:center}
.visor-doc .docx-wrapper > section.docx{box-shadow:none!important;margin:0!important;flex:none}
.visor-ppt{padding:20px 20px 8px}
.visor-ppt > div{width:100%;min-width:0}
.visor-ppt > div > div > div{box-shadow:none!important}

/* 3D */
.visor-3d canvas{display:block;width:100%!important;height:100%!important;touch-action:none}
.visor-ayuda-gestos{position:absolute;left:12px;bottom:12px;font-size:.75rem;color:rgba(255,255,255,.6);pointer-events:none;
  background:rgba(0,0,0,.35);padding:5px 9px;border-radius:6px}

/* formatos aceptados bajo el visor */
.visor-formatos{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;font-size:.875rem;color:var(--text-muted)}
.visor-formatos code{font-family:var(--f-mono);font-size:.8125rem;background:var(--surface);padding:3px 8px;border-radius:6px;color:var(--text-body)}

@media (max-width:760px){
  .visor{--visor-alto:min(72vh,640px)}
  .visor.con-lado .visor-cuerpo{grid-template-columns:minmax(0,1fr)}
  .visor-lado{display:none}
  .visor.lado-movil .visor-lado{display:block;position:absolute;z-index:5;left:0;top:56px;bottom:36px;width:min(260px,80%);box-shadow:var(--pop)}
  .visor-barra{padding-left:12px}
  .visor-arch{flex-basis:100%}
  .visor-barra{flex-wrap:wrap;row-gap:4px}
  .visor-herr[data-propias]{flex:1 1 0;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .visor-herr[data-propias]::-webkit-scrollbar{display:none}
  .visor-herr[data-propias] > *{flex:none}
  .visor-herr[data-comunes]{flex-wrap:nowrap}
  .visor-herr[data-comunes]{margin-left:auto}
  .visor-herr .visor-txt{display:none}
  .visor-herr .btn-chico{width:38px;padding:0}
  .visor-herr .solo-ancho{display:none}
  .visor-pie{gap:10px}
}
@media (prefers-reduced-motion:reduce){.visor-barra-progreso i{animation-duration:3s}}