/* GALERÍA · el lector de documentos (lo comparten el panel y el cliente). El documento es papel: va siempre
   en blanco, sobre una mesa oscura, sin importar el tema de quien lo mira. Abajo flota su cápsula de vidrio. */
.doc-lector{ position:relative; width:100%; height:100%; min-height:0; display:flex; flex-direction:column; color:#EADFCE; }
.doc-mesa{ position:relative; flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.doc-mesa::-webkit-scrollbar{ width:0; height:0; }
.doc-aviso{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:10px; text-align:center; color:rgba(234,223,206,.78); padding:40px 20px; }
.doc-aviso p{ margin:0; font-size:14px; }
.doc-aviso .doc-ext{ font-family:Marcellus, Georgia, serif; font-size:60px; line-height:1; letter-spacing:.08em; color:#9CCFD9; }
.doc-cargando{ width:120px; height:2px; border-radius:2px; background:linear-gradient(90deg, transparent, #9CCFD9, transparent) 0 0 / 50% 100% no-repeat, rgba(234,223,206,.12);
  animation:docCarga 1.2s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes docCarga{ from{ background-position:-60px 0, 0 0; } to{ background-position:180px 0, 0 0; } }

/* PDF: hojas blancas, centradas, con su sombra; se dibujan al acercarse a la pantalla */
.doc-hojas-pdf{ display:flex; flex-direction:column; align-items:center; gap:22px; margin:0 auto; padding:28px 0 110px; max-width:none; }
.doc-hoja{ position:relative; width:100%; background:#FFFFFF; box-shadow:0 2px 6px rgba(0,0,0,.25), 0 24px 60px -24px rgba(0,0,0,.75); flex:none; }
.doc-hoja::before{ content:''; position:absolute; inset:0; background:linear-gradient(100deg, #F4F1EC 30%, #FFFFFF 50%, #F4F1EC 70%) 0 0 / 300% 100%; animation:docBrillo 1.6s linear infinite; }
.doc-hoja.lista::before{ display:none; }
@keyframes docBrillo{ from{ background-position:100% 0; } to{ background-position:-100% 0; } }
.doc-hoja canvas{ position:relative; display:block; width:100%; height:100%; animation:docAparece .35s cubic-bezier(.2,.8,.2,1); }
@keyframes docAparece{ from{ opacity:0; } }

/* WORD: las páginas como las armó Word */
.doc-word{ width:max-content; min-width:100%; padding:28px 0 110px; }
.doc-word .docx-wrapper{ background:transparent !important; padding:0 24px !important; display:flex; flex-direction:column; align-items:center; gap:22px; }
.doc-word .docx-wrapper > section.docx{ margin:0 !important; box-shadow:0 2px 6px rgba(0,0,0,.25), 0 24px 60px -24px rgba(0,0,0,.75) !important; }

/* EXCEL: una hoja de cálculo, con letras de columna y números de fila fijos y sus hojas abajo */
.doc-planilla{ position:absolute; inset:16px 16px 92px; margin:0 auto; width:fit-content; max-width:calc(100% - 32px); display:flex; flex-direction:column; background:#FFFFFF; color:#1A2633; overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.25), 0 24px 60px -24px rgba(0,0,0,.75); }
.doc-celdas{ flex:1; min-height:0; overflow:auto; scrollbar-width:none; }
.doc-celdas::-webkit-scrollbar{ width:0; height:0; }
.doc-celdas table{ border-collapse:separate; border-spacing:0; font-family:Figtree, system-ui, sans-serif; font-size:13px; font-variant-numeric:tabular-nums; }
.doc-celdas th{ position:sticky; z-index:1; background:#F3EFE8; color:#66717C; font-weight:500; font-size:11px; padding:5px 10px; border-right:1px solid #E2D9CA; border-bottom:1px solid #E2D9CA; }
.doc-celdas thead th{ top:0; text-align:center; min-width:72px; }
.doc-celdas tbody th{ left:0; text-align:right; min-width:44px; }
.doc-celdas thead th.doc-esquina{ left:0; z-index:2; min-width:44px; }
.doc-celdas td{ padding:6px 10px; border-right:1px solid #EEE8DE; border-bottom:1px solid #EEE8DE; white-space:nowrap; vertical-align:top; max-width:420px; overflow:hidden; text-overflow:ellipsis; }
.doc-celdas td.n{ text-align:right; }
.doc-celdas tbody tr:hover td{ background:#F8F5F0; }
.doc-tope{ margin:12px 16px; font-size:12px; color:#66717C; }
.doc-pestanas{ flex:none; display:flex; gap:4px; overflow-x:auto; padding:6px 8px; background:#F3EFE8; border-top:1px solid #E2D9CA; scrollbar-width:none; }
.doc-pestanas::-webkit-scrollbar{ height:0; }
.doc-pestanas button{ flex:none; border:0; background:transparent; padding:6px 14px; border-radius:99px; font:inherit; font-size:12.5px; color:#4A5663; cursor:pointer; white-space:nowrap; }
.doc-pestanas button:hover{ background:#E9E3D8; }
.doc-pestanas button[aria-selected="true"]{ background:#005565; color:#FFFFFF; }

/* Office en línea, a toda la mesa */
.doc-office{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#FFFFFF; }

/* LA CÁPSULA: páginas, acercamiento y Office en línea, flotando abajo al centro */
.doc-capsula{ position:absolute; left:50%; bottom:18px; z-index:3; transform:translateX(-50%); display:flex; align-items:center; gap:6px; padding:5px;
  border-radius:99px; background:rgba(13,20,27,.78); border:1px solid rgba(234,223,206,.16); box-shadow:0 18px 40px -16px rgba(0,0,0,.8);
  backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3); white-space:nowrap; animation:docSube .45s cubic-bezier(.16,1,.3,1); }
@keyframes docSube{ from{ opacity:0; transform:translate(-50%, 12px); } }
.doc-grupo{ display:flex; align-items:center; gap:2px; }
.doc-grupo + .doc-grupo{ padding-left:6px; border-left:1px solid rgba(234,223,206,.14); }
.doc-bt, .doc-zoom{ height:34px; min-width:34px; padding:0; border:0; border-radius:99px; background:none; color:rgba(234,223,206,.86); display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer;
  font:500 12.5px/1 Figtree, system-ui, sans-serif; transition:background .2s, color .2s; }
.doc-bt:hover:not(:disabled), .doc-zoom:hover{ background:rgba(234,223,206,.12); color:#FFFFFF; }
.doc-bt:disabled{ opacity:.35; cursor:default; }
.doc-bt .material-icons-outlined{ font-size:19px; }
.doc-bt--texto{ padding:0 14px 0 11px; }
.doc-bt--texto .material-icons-outlined{ font-size:16px; }
.doc-zoom{ min-width:58px; padding:0 6px; }
.doc-pag{ min-width:64px; text-align:center; font:500 12.5px/1 Figtree, system-ui, sans-serif; color:#EADFCE; }
@media (max-width:640px){
  .doc-capsula{ bottom:12px; gap:2px; }
  .doc-bt--texto span:not(.material-icons-outlined){ display:none; }
  .doc-bt--texto{ padding:0; width:34px; }
  .doc-planilla{ inset:8px 8px 76px; }
  .doc-hojas-pdf, .doc-word{ padding-top:14px; }
}