/* ==========================================================================
   grid.css — Estilos del grid virtual (GridView, public/js/grid/grid.js)
   Paleta y medidas SIEMPRE vía variables --xl-* de tokens.css (plan §2).
   ========================================================================== */

/* Contenedor raíz (#grid en index.html) */
#grid,
.xl-grid {
  position: relative;
  overflow: hidden;
  background: #fff;
  outline: none;              /* el foco se indica con la celda activa */
  user-select: none;
  -webkit-user-select: none;
}

/* --------------------------------------------------------------------------
   Esquina "Seleccionar todo"
   -------------------------------------------------------------------------- */
#grid .corner {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 35;
  box-sizing: border-box;
  background: var(--xl-header-bg);
  border-right: 1px solid var(--xl-header-border);
  border-bottom: 1px solid var(--xl-header-border);
  cursor: cell;
}
/* Triángulo gris de la esquina (se vuelve verde al pasar el ratón) */
#grid .corner::after {
  content: '';
  position: absolute;
  right: 2px;
  bottom: 2px;
  border-style: solid;
  border-width: 0 0 10px 10px;
  border-color: transparent transparent var(--xl-text-disabled) transparent;
}
#grid .corner:hover::after {
  border-color: transparent transparent var(--xl-accent) transparent;
}

/* --------------------------------------------------------------------------
   Bandas de encabezados (congeladas: no scrollean con el contenido)
   -------------------------------------------------------------------------- */
#grid .col-headers,
#grid .row-headers {
  position: absolute;
  overflow: hidden;
  z-index: 30;
  box-sizing: border-box;
  background: var(--xl-header-bg);
  font-family: var(--xl-font-ui);
  font-size: 11px;                    /* texto de encabezado 11 px */
  color: var(--xl-text-2);
}
#grid .col-headers { border-bottom: 1px solid var(--xl-header-border); }
#grid .row-headers { border-right: 1px solid var(--xl-header-border); }

/* Celda de encabezado de columna (texto centrado) */
#grid .col-header {
  position: absolute;
  top: 0;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--xl-header-border);
  background: var(--xl-header-bg);
}
/* Celda de encabezado de fila (texto centrado; line-height inline según alto) */
#grid .row-header {
  position: absolute;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  border-bottom: 1px solid var(--xl-header-border);
  background: var(--xl-header-bg);
}

/* Encabezado resaltado: su fila/columna interseca la selección */
#grid .col-header.sel {
  background: var(--xl-header-selected-bg);
  border-bottom: 2px solid var(--xl-accent);   /* subrayado verde */
  color: var(--xl-accent);
}
#grid .row-header.sel {
  background: var(--xl-header-selected-bg);
  border-right: 2px solid var(--xl-accent);    /* borde derecho verde */
  color: var(--xl-accent);
}
/* Fila/columna COMPLETA seleccionada: encabezado invertido */
#grid .col-header.full,
#grid .row-header.full {
  background: var(--xl-accent);
  color: #fff;
}

/* Cursores de redimensionado sobre los bordes de encabezado */
#grid .col-headers.col-resize-hover { cursor: col-resize; }
#grid .row-headers.row-resize-hover { cursor: row-resize; }
#grid.resizing-col,
#grid.resizing-col * { cursor: col-resize !important; }
#grid.resizing-row,
#grid.resizing-row * { cursor: row-resize !important; }

/* --------------------------------------------------------------------------
   Área de capas (plan §6 F1 tarea 8). Las capas del panel principal se
   desplazan con transform: scale(zoom) translate(-scroll); sus hijos usan
   coordenadas de contenido (sin zoom).
   -------------------------------------------------------------------------- */
#grid .grid-layers {
  position: absolute;
  overflow: hidden;
  background: #fff;
  cursor: cell;
}
#grid .layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  pointer-events: none;               /* el hit-testing es matemático (proxy) */
}
/* Orden de pintado (los z altos quedan además sobre el proxy z:40 para
   poder recibir eventos: charts, tirador de relleno y editor). */
#grid .layer-gridlines { z-index: 1; }
#grid .layer-cf        { z-index: 2; }
#grid .layer-cells     { z-index: 3; }
#grid .layer-selection { z-index: 6; }
#grid .layer-charts    { z-index: 45; }
#grid .layer-active    { z-index: 50; }
#grid .layer-charts > * { pointer-events: auto; }

/* Capa del editor: SIN transform (usa cellRect en px de pantalla) */
#grid .layer-editor {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 60;
  pointer-events: none;
}
#grid .layer-editor > * { pointer-events: auto; }

/* --------------------------------------------------------------------------
   Proxy de scroll: barras nativas sobre el área de celdas. Su hijo .scroll-sizer
   mide el tamaño virtual (limitado a 4M px; ver grid.js).
   -------------------------------------------------------------------------- */
#grid .scroll-proxy {
  position: absolute;
  overflow: auto;
  z-index: 40;
  cursor: cell;                        /* cursor de cruz blanca sobre el grid */
  background: transparent;
}
#grid .scroll-sizer {
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Celdas (nodos reciclados)
   -------------------------------------------------------------------------- */
#grid .cell {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 3px;
  display: flex;                       /* alineación h/v vía flex */
  align-items: flex-end;               /* Excel alinea abajo por defecto */
  justify-content: flex-start;
  white-space: pre;
  font-family: var(--xl-font-cell);
  font-size: var(--xl-fontsize-cell);  /* 11 pt */
  line-height: 1.25;                   /* ≈ alto de fila por defecto (20 px) */
  color: var(--xl-text);
}
#grid .cell.wrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Gridlines: gradiente CSS (.gl-bg) cuando el tramo es uniforme; divs de
   línea (.gl-v/.gl-h) cuando hay tamaños personalizados u ocultos.
   -------------------------------------------------------------------------- */
#grid .gl-bg { position: absolute; }
#grid .gl-v {
  position: absolute;
  width: 1px;
  background: var(--xl-gridline);
}
#grid .gl-h {
  position: absolute;
  height: 1px;
  background: var(--xl-gridline);
}

/* --------------------------------------------------------------------------
   Selección
   -------------------------------------------------------------------------- */
#grid .sel-range {
  position: absolute;
  background: var(--xl-range-fill);    /* azul translúcido de Excel */
}
#grid .sel-border {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid var(--xl-range-border);
}
/* Celda activa: borde verde 2 px */
#grid .active-cell {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid var(--xl-active-border);
  background: transparent;
}
/* Tirador de relleno: cuadrado verde 8 px con borde blanco */
#grid .fill-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  background: var(--xl-accent);
  border: 1px solid #fff;
  cursor: crosshair;
  pointer-events: auto;                /* interactivo (fillhandle.js, F7) */
}

/* --------------------------------------------------------------------------
   Paneles congelados (freeze, F17) y líneas separadoras
   -------------------------------------------------------------------------- */
#grid .freeze-pane {
  position: absolute;
  overflow: hidden;
  z-index: 15;                         /* sobre el panel principal */
  background: #fff;
  display: none;
}
#grid .fp-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
}
#grid .fp-gridlines,
#grid .fp-cells,
#grid .fp-selection {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#grid .freeze-line {
  position: absolute;
  display: none;
  z-index: 16;
  background: var(--xl-text-secondary); /* línea gris de separación */
}
#grid .freeze-line-v { top: 0; bottom: 0; width: 1px; }
#grid .freeze-line-h { left: 0; right: 0; height: 1px; }

/* --------------------------------------------------------------------------
   Guías de redimensionado (línea discontinua al arrastrar un borde)
   -------------------------------------------------------------------------- */
#grid .resize-guide {
  position: absolute;
  display: none;
  z-index: 70;
  pointer-events: none;
}
#grid .resize-guide-v {
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed var(--xl-text-secondary);
}
#grid .resize-guide-h {
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed var(--xl-text-secondary);
}