/* ════════════════════════════════════════════════════════════
   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 {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  color: var(--vtx2);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s var(--ease-apple);
}
.hoj-item:hover { background: var(--vag); color: var(--vtx); }
.hoj-item.hoj-item-activa { background: var(--vag2); color: var(--va); border-color: var(--vbor2); }
.hoj-item i { flex-shrink: 0; font-size: 15px; }
.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: 8px;
  color: var(--vtx3);
  font-size: 14px;
}
.hoj-vacio-workspace i { font-size: 40px; opacity: 0.4; }

/* 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); }
.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); }

/* ── Explorador (tabla estilo Drive) ── */
.hoj-explorador-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 10px 24px;
  flex-shrink: 0;
}

.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:hover { background: var(--vag); color: var(--vtx); }

/* Tarjeta exterior — mismo marco que .vit-sidebar (vitrina.css): borde,
   esquinas redondeadas y sombra. Adentro (cuerpo + ruta de abajo) todo
   sigue pegado sin margen; "overflow:hidden" recorta esas piezas
   cuadradas prolijo contra las esquinas redondeadas de este marco. */
.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;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  background: var(--vb);
}

/* 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: 10px 14px;
  border-bottom: 1px solid var(--vbor2);
  font-weight: 600;
  font-size: 12px;
}

.hoj-explorador-tabla tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--vbor);
  color: var(--vtx2);
}
.hoj-explorador-tabla tbody tr { cursor: pointer; user-select: none; }
.hoj-explorador-tabla tbody tr:hover td { background: var(--vag); }
.hoj-explorador-tabla tbody tr.hoj-fila-seleccionada td { background: var(--vag2); }
.hoj-explorador-tabla tbody tr:last-child td { border-bottom: none; }

.hoj-fila-nombre {
  color: var(--vtx);
  font-weight: 500;
  white-space: nowrap;
}
.hoj-fila-nombre i { color: var(--va); margin-right: 4px; }

/* ── 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;
  background: var(--vs);
  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: transparent;
  color: var(--vtx3);
  cursor: pointer;
}
.hoj-preview-cerrar:hover { background: var(--vag); 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(--vs2);
  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: var(--vs2);
  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;
}