/* ════════════════════════════════════════════════════════════
   HOJAS LIBRES — hojas.js
   ════════════════════════════════════════════════════════════ */

/* ── Lista en el sidebar (Mis hojas / Compartidas) ── */
.hoj-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 12px;
}

/* .hoj-item ya no define nada propio — 100% .nav-item-pill (utilidades.css)
   + .activo para el estado seleccionado, exactamente igual que
   .vit-sb-section-btn (sidebar del catálogo) y .admin-tab (Admin): así
   los tres sidebars de la app se ven idénticos, sin variantes propias
   (ni fondo/franja de acento propios, ni ícono siempre teñido). */

/* Título de sección sobre la lista ("UBICACIONES") — mismo patrón que
   "Favoritos"/"Ubicaciones" en el sidebar del Finder: mayúsculas,
   chico, apagado. */
.hoj-sidebar-caption {
  padding: 4px 22px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vtx3);
}
.hoj-item-nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hoj-vacio {
  padding: 8px 10px;
  color: var(--vtx3);
  font-size: 12px;
  font-style: italic;
}

/* ── Modal "Nueva hoja": a diferencia de los demás usos de
   .vit-carrito-dropdown (que cuelgan de un botón del navbar y se
   posicionan relativos a ese wrapper), este vive dentro del sidebar —
   se centra en la pantalla con position:fixed en vez de heredar el
   "top:calc(100% + 12px); right:0" pensado para un dropdown de navbar. ── */
#modal-nueva-hoja.vit-carrito-dropdown {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
}
/* ── Radios de visibilidad (modal nueva hoja) ── */
.hoj-visibilidad-radios {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--vtx2);
}
.hoj-visibilidad-radios label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* ── Workspace (pestañas + grilla) ── */
.hoj-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.hoj-vacio-workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--vtx3);
  font-size: 14px;
  font-weight: 500;
}
.hoj-vacio-workspace i { font-size: 48px; opacity: 0.35; }

/* Contenedor del contenido de la pestaña activa (tabla de ventas o
   grilla de una hoja, ver _regfRenderWorkspace en planilla.js) — crece
   para llenar el espacio que deja .hoj-tabs arriba. */
#regf-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.hoj-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 24px 0;
  flex-shrink: 0;
  overflow-x: auto;
}

.hoj-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 14px;
  border-radius: 10px 10px 0 0;
  background: var(--vag);
  color: var(--vtx3);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s var(--ease-apple);
}
.hoj-tab:hover { color: var(--vtx2); background: var(--vag2); }
.hoj-tab i { color: var(--va); opacity: 0.85; }
.hoj-tab.hoj-tab-activa { background: var(--vs); color: var(--vtx); box-shadow: inset 0 1px 0 var(--vbor2); }
.hoj-tab button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 11px;
}
.hoj-tab button:hover { background: rgba(255,255,255,0.15); }

.hoj-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  background: var(--vs);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.hoj-toolbar-nombre {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.hoj-nombre-input {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--vtx);
  font-size: 15px;
  font-weight: 600;
  padding: 4px 8px;
  min-width: 0;
  outline: none;
}
.hoj-nombre-input:hover, .hoj-nombre-input:focus { border-color: var(--vbor2); background: var(--vs2); }

.hoj-badge-vis {
  font-size: 11px;
  color: var(--vtx3);
  white-space: nowrap;
}

.hoj-toolbar-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hoj-btn-borrar:hover { color: var(--vred); border-color: var(--vred); background: rgba(248,113,113,0.12); }

.hoj-grilla-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin: 0 24px 16px;
  border: 1px solid var(--vbor);
  border-radius: var(--rl);
}

.hoj-grilla {
  border-collapse: collapse;
  font-size: 13px;
}

.hoj-grilla th, .hoj-grilla td {
  border: 1px solid var(--vbor);
  min-width: 90px;
  height: 30px;
  padding: 0 8px;
}

.hoj-grilla thead th {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--vs2);
  color: var(--vtx3);
  font-weight: 600;
  font-size: 11px;
  text-align: center;
}

.hoj-th-esquina {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 7;
  background: var(--vs2);
  min-width: 44px !important;
}

.hoj-th-fila {
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--vs2);
  color: var(--vtx3);
  font-size: 11px;
  text-align: center;
  min-width: 44px !important;
}

.hoj-celda {
  color: var(--vtx2);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  transition: background 0.1s var(--ease-apple);
}
.hoj-celda:hover { background: var(--vag); box-shadow: inset 0 0 0 1px var(--vbor2); }

.hoj-input-edicion {
  width: 100%;
  height: 100%;
  background: var(--vs3);
  border: 1px solid var(--va);
  border-radius: 4px;
  color: var(--vtx);
  padding: 0 6px;
  font-size: 13px;
  outline: none;
}

/* ── Menú "Nuevo" (dentro del explorador, ver _hojRenderExplorador) —
   mismo patrón que .plan-descargar-wrap/menu en planilla.css (dropdown
   flotante con clase .oculto). ── */
.hoj-nuevo-wrap { position: relative; }

.hoj-nuevo-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  z-index: 30;
  background: var(--vs);
  border: 1px solid var(--vbor2);
  border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hoj-nuevo-menu.oculto { display: none; }
.hoj-nuevo-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--vtx2);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s var(--ease-apple), color 0.15s var(--ease-apple);
}
.hoj-nuevo-menu button:hover { background: var(--vag); color: var(--vtx); }
/* Mismo código de color que la lista de archivos (carpeta azul, hoja
   con acento, subir archivo neutro) — así el menú "anticipa" con qué
   color va a aparecer lo que crees. */
.hoj-nuevo-menu button i.ti-folder-plus { color: #64b5f6; }
.hoj-nuevo-menu button i.ti-table-plus  { color: var(--va); }
.hoj-nuevo-menu button i.ti-upload      { color: var(--vtx3); }

/* ── Explorador (tabla estilo Drive) ──
   La toolbar vive DENTRO de .hoj-explorador-marco (ver _hojRenderExplorador
   en hojas.js) — es la primera fila del mismo marco, como la barra de
   herramientas de una ventana del Finder: pegada al resto de la ventana,
   separada del contenido de abajo solo por una línea fina, nunca por un
   hueco. El fondo es EXACTAMENTE el mismo que la pestaña activa de
   arriba (.hoj-tab-activa) y que el resto del marco, para que no se note
   la costura entre la pestaña y la ventana que "cuelga" de ella. */
.hoj-explorador-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 10px 16px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--vbor);
  /* Vidrio esmerilado — el toolbar de una ventana macOS (Big Sur en
     adelante) es translúcido y deja ver un blur del contenido detrás. */
  background: color-mix(in srgb, var(--vs) 88%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.hoj-volver {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  background: transparent;
  border: none;
  color: var(--vtx2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s var(--ease-apple), color 0.15s var(--ease-apple);
}
.hoj-volver i { color: var(--va); }
.hoj-volver:hover { background: var(--vag); color: var(--vtx); }

/* Tarjeta exterior — mismo marco que .vit-sidebar (vitrina.css): borde,
   esquinas redondeadas y sombra. Adentro (toolbar + cuerpo + ruta de
   abajo) todo sigue pegado sin margen; "overflow:hidden" recorta esas
   piezas cuadradas prolijo contra las esquinas redondeadas de este
   marco — exactamente como una ventana del Finder: toolbar, lista y
   path bar son UNA sola pieza, nunca paneles sueltos con aire entre
   medio. El fondo (--vs) es el mismo que la pestaña activa de arriba,
   para que top de la ventana y la pestaña se vean como una unidad
   continua. Sin margen superior: queda pegada a las pestañas.
   margin-top: 0 (implícito) es lo que logra ese "pegado". */
.hoj-explorador-marco {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0 24px 16px;
  border: 1px solid var(--vbor);
  border-radius: 18px;
  overflow: hidden;
  /* Sombra de elevación + un filo clarito arriba, adentro — el borde
     "vidrioso" de arriba que tienen las ventanas de macOS. */
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
  background: var(--vs);
}

/* Fila (lista) + panel de vista previa, lado a lado — como el Finder
   con "Show Preview" activado (View > Show Preview / Cmd+Shift+P). */
.hoj-explorador-cuerpo {
  flex: 1;
  min-height: 0;
  display: flex;
}

.hoj-explorador-lista {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Pegado al sidebar de la izquierda, al panel de vista previa de la
   derecha y a la barra de ruta de abajo — sin margen ni esquinas
   redondeadas, como la lista de archivos del Finder (que es un
   rectángulo raso, no una tarjeta flotando con aire alrededor). Un
   borde fino como el único separador visual. */
.hoj-explorador-tabla-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin: 0;
  border: none;
  border-right: 1px solid var(--vbor);
  background: var(--vs);
}
.hoj-explorador-tabla-wrap-vacio { display: flex; flex-direction: column; }

.hoj-explorador-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.hoj-explorador-tabla thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--vs2);
  color: var(--vtx3);
  text-align: left;
  padding: 8px 14px;
  border-bottom: 1px solid var(--vbor2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
  font-size: 12px;
}

.hoj-explorador-tabla tbody td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--vbor);
  color: var(--vtx2);
}
.hoj-explorador-tabla tbody tr { cursor: pointer; user-select: none; }
/* Rayado sutil fila-por-medio — igual que la vista en lista del Finder
   con "Alternar colores de fila" activado (View > Show View Options).
   Va ANTES de hover/seleccionada en el archivo para que esas dos
   sigan ganando el empate de especificidad. */
.hoj-explorador-tabla tbody tr:nth-child(even) td { background: rgba(255,255,255,0.015); }
.hoj-explorador-tabla tbody tr:hover td { background: var(--vag); }
.hoj-explorador-tabla tbody tr.hoj-fila-seleccionada td { background: var(--vag2); color: var(--vtx); box-shadow: inset 3px 0 0 var(--va); }
.hoj-explorador-tabla tbody tr:last-child td { border-bottom: none; }

/* Tamaño alineado a la derecha — convención del Finder para columnas
   numéricas (los bytes más grandes quedan alineados entre sí). */
.hoj-explorador-tabla thead th:nth-child(3),
.hoj-explorador-tabla tbody td:nth-child(3) { text-align: right; }

.hoj-fila-nombre {
  color: var(--vtx);
  font-weight: 500;
  white-space: nowrap;
}
.hoj-fila-nombre i { margin-right: 4px; color: var(--va); }
/* Cada tipo de archivo con su propio color — como el Finder (carpetas
   azules, PDFs rojos, imágenes cálidas, planillas verdes) en vez de un
   solo tono de acento para todo. */
.hoj-fila-nombre i.ti-folder-filled { color: #64b5f6; }
.hoj-fila-nombre i.ti-file-type-pdf { color: #ff6b6b; }
.hoj-fila-nombre i.ti-photo        { color: #ffb74d; }
.hoj-fila-nombre i.ti-file-spreadsheet { color: #66bb6a; }
.hoj-fila-nombre i.ti-file         { color: var(--vtx3); }

/* ── Panel de vista previa (a la derecha, como el Finder con "Show
   Preview") — ver _hojRenderPreview en hojas.js. ── */
/* Mismo criterio que .hoj-explorador-tabla-wrap — pegado, sin margen
   ni esquinas, como el panel de vista previa lateral del Finder. */
.hoj-preview-panel {
  position: relative;
  width: 280px;
  flex-shrink: 0;
  overflow-y: auto;
  margin: 0;
  padding: 20px 16px;
  border: none;
  /* Un pelo más claro que la lista — misma separación tonal que usa
     el Finder entre la lista de archivos y el panel de vista previa. */
  background: var(--vs2);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Estado vacío — el panel queda siempre a la vista, como el Finder con
   "Show Preview" activado, no solo cuando hay algo seleccionado. */
.hoj-preview-vacio {
  justify-content: center;
  gap: 10px;
  color: var(--vtx3);
  font-size: 13px;
}
.hoj-preview-vacio i { font-size: 36px; opacity: 0.4; }

.hoj-preview-cerrar {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--vag);
  color: var(--vtx3);
  cursor: pointer;
  transition: background 0.15s var(--ease-apple), color 0.15s var(--ease-apple);
}
.hoj-preview-cerrar:hover { background: var(--vag2); color: var(--vtx); }

.hoj-preview-imagen {
  max-width: 100%;
  max-height: 180px;
  object-fit: contain;
  border-radius: var(--r);
  background: var(--vs2);
  margin-bottom: 14px;
}

.hoj-preview-pdf {
  width: 100%;
  height: 200px;
  border: 1px solid var(--vbor);
  border-radius: var(--r);
  margin-bottom: 14px;
  background: #fff;
}

.hoj-preview-icono {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r);
  background: var(--vs3, var(--vs));
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  margin-bottom: 14px;
}
.hoj-preview-icono i { font-size: 56px; color: var(--va); opacity: 0.8; }

.hoj-preview-nombre {
  font-size: 15px;
  font-weight: 600;
  color: var(--vtx);
  word-break: break-word;
}

.hoj-preview-tipo {
  font-size: 12px;
  color: var(--vtx3);
  margin-top: 2px;
}

.hoj-preview-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 16px 0;
}
.hoj-preview-acciones .plan-btn { font-size: 12px; padding: 6px 10px; }

.hoj-preview-meta {
  width: 100%;
  text-align: left;
  border-top: 1px solid var(--vbor);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hoj-preview-meta div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 13px;
  color: var(--vtx2);
}
.hoj-preview-meta span {
  font-size: 11px;
  color: var(--vtx3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Barra de ruta abajo (path bar), como el Finder — ver
   _hojRenderRutaAbajo en hojas.js. ── */
.hoj-ruta-abajo {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 6px 24px;
  border-top: 1px solid var(--vbor);
  background: color-mix(in srgb, var(--vs2) 90%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-size: 12px;
  color: var(--vtx3);
  overflow-x: auto;
  white-space: nowrap;
}
.hoj-ruta-abajo button {
  background: transparent;
  border: none;
  color: var(--vtx3);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hoj-ruta-abajo button:hover:not(:disabled) { background: var(--vag); color: var(--vtx); }
.hoj-ruta-abajo button:disabled { color: var(--vtx2); cursor: default; }
.hoj-ruta-abajo i { font-size: 11px; opacity: 0.6; }

/* ── Editor de .xlsx/.csv (Jspreadsheet CE + SheetJS, ver visor-archivos.js) ── */
.hoj-xlsx-aviso {
  margin: 0 24px 10px;
  padding: 8px 12px;
  border-radius: var(--r);
  background: var(--vag);
  color: var(--vtx3);
  font-size: 12px;
}

.hoj-xlsx-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  margin: 0 24px 16px;
  border: 1px solid var(--vbor);
  border-radius: var(--rl);
  background: #fff;

  /* Jspreadsheet v5 pone su clase "jss_spreadsheet" directamente sobre
     este mismo div (el contenedor que se le pasa), no en un hijo — por
     eso el flex va acá y no en una regla descendiente ".jss_spreadsheet". */
  display: flex;
  flex-direction: column;

  /* jspreadsheet.themes.css (v5) trae por defecto una paleta ya
     bastante clara, pero se ajusta acá a los tonos exactos de
     Sheets (azul #1a73e8 de acento en vez del gris genérico). */
  --header_color: #444;
  --header_color_highlighted: #fff;
  --header_background: #f1f3f4;
  --header_background_highlighted: #1a73e8;
  --content_color: #202124;
  --content_color_highlighted: #202124;
  --content_background: #ffffff;
  --content_background_highlighted: #e8f0fe;
  --border_color: #e0e0e0;
  --border_color_highlighted: #1a73e8;
  --selection: rgba(26, 115, 232, 0.08);
  --cursor: #e8f0fe;

  /* Arial en vez de la tipografía del resto de la app — se ve más
     parecido a Excel/Sheets, que no usan una fuente "de diseño". */
  font-family: Arial, Helvetica, sans-serif;
}

/* v5 arma internamente, como hijos directos de este mismo div:
   [pestañas de hoja] [toolbar] [contenido] [menú contextual] — se
   reordena con flex "order" para que las pestañas queden ABAJO (como
   Sheets/Excel) en vez del orden de fábrica; el contenido es lo único
   que debe scrollear, toolbar y pestañas quedan fijos sin necesitar
   ningún hack de position:sticky. */
.hoj-xlsx-wrap > .jss_toolbar { order: 1; }
.hoj-xlsx-wrap > .jtabs-content {
  order: 2;
  flex: 1;
  min-height: 0;
}
.hoj-xlsx-wrap > .jtabs-headers-container {
  order: 3;
  flex-shrink: 0;
}
/* Solo .jss_content debe scrollear — .jss_container es apenas un
   wrapper (display:inline-block) en el CSS de la propia librería.
   Antes los dos tenían overflow:auto: quedaba un scroll adentro de
   otro scroll, y por eso se sentía trabado/no fluido al mover la
   rueda del mouse (el evento de scroll rebotaba entre los dos). */
.hoj-xlsx-wrap .jss_container {
  height: 100%;
  overflow: hidden;
  display: block;
}
.hoj-xlsx-wrap .jss_content {
  height: 100%;
  overflow: auto;
}

/* La regla "tr:hover" de utilidades.css (pensada para las otras tablas
   de la app) ahora excluye explícitamente ".jss_worksheet" en su propio
   selector (ver utilidades.css, sección TABLA COMPARTIDA) — ya no hace
   falta neutralizarla acá con un !important de este lado. */

/* Reset explícito de las pestañas — sin esto heredaban tamaño/color de
   texto del resto de la app (letras enormes y blancas, ilegibles sobre
   el fondo claro del editor). Se fuerza con !important porque el CSS
   de la app es más específico que las reglas por defecto de jsuites. */
.hoj-xlsx-wrap .jtabs-headers-container {
  display: flex !important;
  background: #f8f9fa;
  border-top: 1px solid #e0e0e0;
}
.hoj-xlsx-wrap .jtabs-headers {
  display: flex !important;
}
.hoj-xlsx-wrap .jtabs-headers > div:not(.jtabs-border) {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #5f6368 !important;
  background: transparent !important;
  text-transform: none !important;
  white-space: nowrap;
}
.hoj-xlsx-wrap .jtabs-headers > div.jtabs-selected {
  color: #1a73e8 !important;
  font-weight: 600 !important;
  background: #e8f0fe !important;
  border-radius: 6px;
}
.hoj-xlsx-wrap .jtabs-headers > div > div {
  color: inherit !important;
  font-size: inherit !important;
}
.hoj-xlsx-wrap .jtabs-border {
  background-color: #1a73e8 !important;
}

/* Mismo reset que las pestañas, pero para la barra de herramientas —
   sin esto los botones/selects heredaban el tamaño y color de texto
   del resto de la app y quedaban amontonados e ilegibles. */
.hoj-xlsx-wrap .jss_toolbar {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  background: #f8f9fa !important;
  min-height: 40px;
}
.hoj-xlsx-wrap .jss_toolbar,
.hoj-xlsx-wrap .jss_toolbar * {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.hoj-xlsx-wrap .jss_toolbar .jtoolbar-item,
.hoj-xlsx-wrap .jss_toolbar select {
  color: #444 !important;
  background: transparent !important;
}
.hoj-xlsx-wrap .jss_toolbar .jtoolbar-item i.material-icons {
  color: #444 !important;
  font-size: 20px !important;
}
.hoj-xlsx-wrap .jss_toolbar .jtoolbar-item:hover {
  background-color: #e8eaed !important;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — "Mi unidad" en mobile
   ════════════════════════════════════════════════════════════
   .hoj-explorador-cuerpo (fila) tenía la lista de archivos a flex:1
   compitiendo contra .hoj-preview-panel a width:280px fijo — en una
   pantalla angosta (~335-375px) eso dejaba casi todo el ancho para el
   panel fijo y apretaba la lista a una tira de ~50-90px, con los
   nombres de archivo partidos letra por letra. Se apilan verticalmente:
   lista arriba con una altura razonable, panel de vista previa abajo a
   ancho completo. */
@media (max-width: 700px) {
  .hoj-explorador-cuerpo {
    flex-direction: column;
    overflow-y: auto;
  }
  .hoj-explorador-lista {
    flex: none;
    min-height: 280px;
  }
  .hoj-explorador-tabla-wrap {
    border-right: none;
    border-bottom: 1px solid var(--vbor);
  }
  .hoj-preview-panel {
    width: 100%;
    flex-shrink: 0;
  }
}