/*
 * spreadsheet.css — estilos del MOTOR 'spreadsheet' (Hoja de Cálculo) de las micro apps de Lumbre.
 *
 * Mobile-first y con los tokens de la plataforma (--surface, --ink, --line, --accent…), para que la hoja
 * se lea igual de bien en tema claro y oscuro. La cuadrícula es una tabla real con encabezados pegajosos:
 * se puede desplazar en ambos ejes sin que el usuario pierda de vista la columna o la fila activa.
 */

.ss-wrap { display: flex; flex-direction: column; gap: .7rem; }

/* ── Barra de acciones ── */
.ss-toolbar { display: flex; flex-wrap: wrap; gap: .45rem; }
.ss-toolbar .button { padding: .45rem .75rem; font-size: .88rem; }

/* ── Barra de fórmulas ── */
.ss-fx { display: flex; gap: .5rem; align-items: center; }
.ss-ref { flex: 0 0 auto; min-width: 58px; text-align: center; font-weight: 700; font-size: .85rem; padding: .35rem .5rem; border: 1px solid var(--line, rgba(0,0,0,.16)); border-radius: 8px; background: var(--surface); color: var(--ink); }
.ss-formula { flex: 1 1 auto; min-width: 0; padding: .45rem .6rem; border: 1px solid var(--line, rgba(0,0,0,.16)); border-radius: 9px; font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace; background: var(--surface); color: var(--ink); }

/* ── Cuadrícula ── */
.ss-gridbox {
    overflow: auto; max-height: min(62vh, 620px); border: 1px solid var(--line, rgba(0,0,0,.16));
    border-radius: 12px; background: var(--surface); overscroll-behavior: contain; touch-action: pan; }
.ss-grid { border-collapse: separate; border-spacing: 0; width: max-content; font-size: .85rem; }
.ss-grid th, .ss-grid td { border-right: 1px solid var(--line, rgba(0,0,0,.09)); border-bottom: 1px solid var(--line, rgba(0,0,0,.09)); }
.ss-grid .ss-head {
    position: sticky; z-index: 2; background: var(--surface, #fff); color: var(--muted, #556);
    font-weight: 600; font-size: .76rem; text-align: center; padding: .25rem .4rem; min-width: 34px; }
.ss-grid thead .ss-head { top: 0; height: 26px; }
.ss-grid tbody .ss-head { left: 0; width: 42px; min-width: 42px; height: 30px; }
.ss-corner { top: 0; left: 0; z-index: 3 !important; }
.ss-cell { min-width: 78px; max-width: 220px; width: 92px; height: 30px; padding: .18rem .4rem; background: var(--surface); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: cell; }
.ss-num { text-align: right; }
.ss-is-formula { background: linear-gradient(0deg, rgba(10,180,120,.06), rgba(10,180,120,.06)); }
.ss-cell-error { color: var(--danger, #b3261e); font-weight: 700; }
.ss-grid td.ss-selected { background: var(--accent-soft, rgba(10,180,120,.16)); }
.ss-grid td.ss-active { outline: 2px solid var(--accent, #0a6); outline-offset: -2px; }
@media (prefers-reduced-motion: no-preference) { .ss-grid td.ss-active { transition: outline-color .12s ease; } }

/* ── Pestañas de hoja ── */
.ss-tabs { display: flex; flex-wrap: wrap; gap: .3rem; }
.ss-tab { border: 1px solid var(--line, rgba(0,0,0,.16)); border-radius: 8px 8px 0 0; padding: .3rem .7rem; background: transparent; color: var(--muted, #556); cursor: pointer; font: inherit; font-size: .85rem; }
.ss-tab-on { background: var(--surface); color: var(--ink); font-weight: 600; border-bottom-color: var(--surface); }

/* ── Estado y ayuda ── */
.ss-status { margin: 0; font-variant-numeric: tabular-nums; }
.ss-msg { margin: 0; min-height: 1.2em; color: var(--accent, #0a6); font-weight: 600; }
.ss-help { border: 1px solid var(--line, rgba(0,0,0,.12)); border-radius: 12px; padding: .7rem .9rem; background: var(--surface); }
.ss-help summary { cursor: pointer; font-weight: 600; }
.ss-help-list { margin: .5rem 0; padding-left: 1.2rem; display: grid; gap: .25rem; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .84rem; }

/* Móvil: celdas más anchas al tacto y menos columnas visibles de golpe. */
@media (max-width: 600px) {
    .ss-cell { min-width: 96px; width: 110px; height: 36px; font-size: .9rem; }
    .ss-gridbox { max-height: 54vh; }
    .ss-toolbar .button { flex: 1 1 44%; justify-content: center; }
}