/* Compras Sebigus — lo que agrega la planilla de compras a la hoja de la preventa
   (estilo.css, copiada tal cual para que se vea igual). */

/* LA PALETA DE COMPRAS: celeste / turquesa (Ezequiel, 19/10/2026: «que tenga de base un celeste /
   turquesa»). Pisa la de la preventa (violeta) variable por variable, así toda la hoja —que es la
   de la preventa, copiada— cambia sin tocarla. Tres colores con un papel cada uno:
     · turquesa (--marca): la marca de la app, la cabecera, lo activo;
     · azul (--compra-*): lo que se compra, para que no se confunda con la marca;
     · verde (--sel): la selección, como en Excel.
   Contraste del blanco sobre el turquesa: 4,9:1 (claro) y 3,9:1 (oscuro). */
:root {
  --marca: #0e7c86; --marca-claro: #1fa3b4; --marca-suave: #e2f4f6;
  --canvas: #edf5f7; --hoja: #ffffff; --hoja-2: #f6fafb; --hoja-3: #e8f1f4;
  --linea: #d5e3e7; --linea-fuerte: #b9ccd2;
  --tinta: #13262b; --tinta-2: #4a6067; --tinta-3: #6c8188;
  --dato-t: #155e8a; --dato-f: #e6f1f8;
  --compra-t: #1d5fae; --compra-f: #e8f0fb; --compra-b: #b6cdee;
  --sel: #1e8a4c; --sel-f: rgba(30,138,76,.10);
  --barra-fondo: linear-gradient(100deg, #0b6f7a 0%, #0e7c86 45%, #1683aa 100%);
  --sombra: 0 1px 2px rgba(10,40,48,.06), 0 4px 12px rgba(10,40,48,.05);
}
:root[data-piel="oscuro"] {
  --marca: #168f9c; --marca-claro: #5fd9e6; --marca-suave: #15333a;
  --canvas: #0e191d; --hoja: #14232a; --hoja-2: #192b32; --hoja-3: #1e333b;
  --linea: #284149; --linea-fuerte: #36565f;
  --tinta: #e3f0f3; --tinta-2: #a2bbc2; --tinta-3: #738f97;
  --dato-t: #8cc8ef; --dato-f: #16293a;
  --compra-t: #8db9ff; --compra-f: #172539; --compra-b: #2d4a74;
  --sel: #4cc782; --sel-f: rgba(76,199,130,.16);
  --barra-fondo: linear-gradient(100deg, #0d4f57 0%, #11606b 50%, #14587a 100%);
}
header.barra { background: var(--barra-fondo); }
.mc.destacado { background: linear-gradient(135deg, var(--marca) 0%, #1683aa 100%); }
:root[data-piel="oscuro"] .mc.destacado { background: linear-gradient(135deg, #11606b 0%, #14587a 100%); }

/* ---------------------------------------------------------------- la grilla */
.grid:focus { outline: none; }
.grid { user-select: none; -webkit-user-select: none; }

/* el número de fila, como en Excel */
.gut, .gut-tit {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  background: var(--hoja-3); color: var(--tinta-3); font-size: calc(12px * var(--z));
  font-variant-numeric: tabular-nums; border-right: 1px solid var(--linea-fuerte);
  cursor: grab; position: relative;
}
.gut:hover { color: var(--marca); background: var(--marca-suave); }
.gut.en-sel { background: var(--sel); color: #fff; }
.gut-tit { cursor: pointer; font-weight: 700; }
.fprod { cursor: default; }
.fprod.manual { background: var(--compra-f); }
.fprod.manual.franja { background: var(--compra-f); }
.fprod.fuera { opacity: .55; }
.fprod.oculta, .celda.oculta {
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(120,110,130,.10) 6px 12px) !important;
}

/* un grupo: la fila título que contrae lo de abajo */
.fprod.fgrupo { background: var(--marca-suave); border-bottom: 2px solid var(--marca); }
.fgrupo .grupo-tit {
  flex: 1; display: flex; align-items: center; gap: calc(10px * var(--z)); padding: 0 calc(10px * var(--z));
  font-size: calc(15px * var(--z)); color: var(--marca); cursor: default; overflow: hidden; white-space: nowrap;
}
.fgrupo .grupo-tit b { font-weight: 750; letter-spacing: .03em; text-transform: uppercase; }
.fgrupo .toggle {
  border: 1px solid var(--marca); background: var(--hoja); color: var(--marca); border-radius: 6px;
  width: calc(26px * var(--z)); height: calc(26px * var(--z)); cursor: pointer; font-size: calc(13px * var(--z));
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.fgrupo .toggle:hover { background: var(--marca); color: #fff; }
.celda-grupo { position: absolute; left: 0; background: var(--marca-suave); border-bottom: 2px solid var(--marca); }

/* las celdas que se escriben */
.fprod .cel.txt { white-space: normal; line-height: 1.25; font-size: calc(14px * var(--z)); }
.fprod .cel.err { color: var(--mal-t); font-weight: 700; }
.fprod .cel.calc { color: var(--compra-t); background: var(--compra-f); font-weight: 750; }
.fprod .cel.col-total_compra { justify-content: center; font-size: calc(17px * var(--z)); }
.fprod .manual-item, .fprod .fuera-item {
  display: block; width: fit-content; margin: 0; padding: calc(1px * var(--z)) calc(7px * var(--z));
  border-radius: calc(4px * var(--z)); font-size: calc(11px * var(--z)); font-weight: 700; letter-spacing: .06em;
  line-height: 1.5; -webkit-line-clamp: unset; overflow: visible;
}
.fprod .manual-item { background: var(--compra-b); color: var(--compra-t); }
.fprod .fuera-item { background: var(--mal-f); color: var(--mal-t); }

.celda { cursor: cell; }
.celda.hay { background: var(--compra-f); color: var(--compra-t); }
.celda.hay.franja { background: var(--compra-f); }
.celda.hay.hallada { background: var(--compra-f); }

/* la selección: un velo azul y la celda activa con su borde, como en Excel */
.fprod .cel.en-sel, .celda.en-sel { box-shadow: inset 0 0 0 9999px var(--sel-f); }
.fprod .cel.activa, .celda.activa, .atrib.activa {
  outline: 2px solid var(--sel); outline-offset: -2px; position: relative; z-index: 2;
}
.hprod span.en-sel, .hcol.en-sel { background: var(--sel-f); color: var(--sel); box-shadow: inset 0 -3px 0 var(--sel); }

/* títulos: se arrastran y se ancharan del borde */
.hprod span { position: relative; cursor: grab; }
.hprod span.dato { }
.hprod span.formula { color: var(--dato-t); }
.hprod span.formula::before { content: "ƒ "; font-style: italic; margin-right: 2px; }
.hprod span.ordenada, .hcol.ordenada { color: var(--marca); text-decoration: underline; }
.redim { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 3; }
.redim:hover { background: var(--sel); opacity: .5; }
.hcol { cursor: grab; flex-direction: column; }
.hcol .cli { color: var(--compra-t); }
.hcol .prov { display: block; margin-top: calc(3px * var(--z)); font-size: calc(11px * var(--z)); font-weight: 600; color: var(--tinta-2); }
.hcol.oculta, .hprod span.oculta, .atrib-col.oculta { opacity: .55; font-style: italic; }
.hcol.hmas { cursor: pointer; border: 2px dashed var(--compra-b); background: transparent; }
.hcol.hmas .cli { color: var(--compra-t); font-size: calc(14px * var(--z)); }
.hcol.hmas:hover { background: var(--compra-f); }
.atrib-col.mas { background: transparent; border-right: 0; }
.atrib-col { cursor: default; }
.atrib { cursor: cell; }
.atrib.calc { color: var(--compra-t); background: var(--compra-f); }
.atrib-rotulos .rot { cursor: context-menu; }
.atrib-rotulos .rot.calc { color: var(--compra-t); }
.atrib-rotulos .rot.oculta { opacity: .55; font-style: italic; }

body.arrastrando-ancho, body.arrastrando-ancho * { cursor: col-resize !important; }
body.arrastrando-col, body.arrastrando-col * { cursor: grabbing !important; }
body.arrastrando-fila, body.arrastrando-fila * { cursor: grabbing !important; }
.marca-arrastre { position: fixed; z-index: 300; background: var(--sel); border-radius: 2px; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(47,111,214,.25); }

/* las tarjetas de compra en la esquina */
.mc.compra b { color: var(--compra-t); }
.mc.falta b { color: var(--mal-t); }

/* ---------------------------------------------------------------- el editor */
.editor-celda {
  position: fixed; z-index: 250; margin: 0; padding: 6px 9px; resize: none; overflow: hidden;
  border: 2px solid var(--sel); border-radius: 2px; background: var(--hoja); color: var(--tinta);
  font: inherit; line-height: 1.3; box-shadow: 0 6px 22px rgba(20,15,40,.25); outline: none;
}
.editor-celda.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- la barra */
.chip.chip-compra { border-color: var(--compra-t); color: var(--compra-t); }
.chip.chip-compra:hover { background: var(--compra-f); }
.sinc { font-size: 12px; color: var(--tinta-3); min-width: 80px; text-align: right; }
.sinc.guardando { color: var(--avi-t); }
.sinc.ok { color: var(--ok-t); }
.sinc.error { color: var(--mal-t); font-weight: 700; }
.leyenda { font-size: 12.5px; color: var(--tinta-2); }
.planilla-barra .chip b { font-weight: 700; }
.pie-sel { margin-left: 16px; color: var(--sel); }
.pie-sel b { color: var(--sel) !important; }

/* ---------------------------------------------------------------- menú del botón derecho */
.menu-ctx {
  position: fixed; z-index: 400; min-width: 230px; max-width: 360px; padding: 5px;
  background: var(--hoja); border: 1px solid var(--linea); border-radius: 10px;
  box-shadow: 0 12px 34px rgba(20,15,25,.22); font-size: 13.5px; user-select: none;
  animation: nav-menu-entra .12s ease-out;
}
.menu-ctx .mc-item {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 0; background: none;
  border-radius: 7px; cursor: pointer; text-align: left; color: var(--tinta);
}
.menu-ctx .mc-item:hover:not(:disabled) { background: var(--marca-suave); color: var(--marca); }
.menu-ctx .mc-item:disabled { opacity: .4; cursor: default; }
.menu-ctx .mc-item.peligro { color: var(--mal-t); }
.menu-ctx .mc-item.peligro:hover:not(:disabled) { background: var(--mal-f); color: var(--mal-t); }
.menu-ctx .mc-ic { width: 0; }
.menu-ctx .mc-t { flex: 1; }
.menu-ctx kbd { font-family: var(--mono); font-size: 11px; color: var(--tinta-3); }
.menu-ctx .mc-raya { height: 1px; background: var(--linea); margin: 4px 6px; }
.menu-ctx .mc-titulo { padding: 6px 10px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- diálogos */
.o-dialogo-caja.ancho { width: min(760px, 100%); }
.o-dialogo-cuerpo textarea {
  display: block; width: 100%; margin-top: 5px; padding: 9px 11px; border: 1px solid var(--linea-fuerte);
  border-radius: 8px; background: var(--hoja); color: var(--tinta); font-family: var(--mono); font-size: 14px;
  text-transform: none; letter-spacing: 0; resize: vertical;
}
.o-dialogo-cuerpo h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-2); margin: 14px 0 6px; }
.chip.acti.peligro { background: var(--mal-t); border-color: var(--mal-t); }
.dlg-texto { margin: 0; line-height: 1.5; }
.fx-prueba { margin: -6px 0 12px; font-size: 13px; font-family: var(--mono); }
.fx-prueba.ok { color: var(--ok-t); }
.fx-prueba.mal { color: var(--mal-t); }
.fx-cols { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 8px; }
.fx-col { border: 1px solid var(--linea-fuerte); background: var(--hoja-2); border-radius: 6px; padding: 3px 7px;
  font-family: var(--mono); font-size: 12px; cursor: pointer; color: var(--tinta-2); }
.fx-col:hover { border-color: var(--marca); color: var(--marca); }
.borrados .borr-item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--linea); }
.historial { max-height: 60vh; overflow: auto; }
.form-linea { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 14px; border-top: 1px solid var(--linea); }
.form-linea input, .form-linea select { padding: 6px 10px; border: 1px solid var(--linea-fuerte); border-radius: 7px;
  background: var(--hoja); color: var(--tinta); }

/* ---------------------------------------------------------------- ambiente */
.franja-ambiente {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 500; padding: 3px 10px; text-align: center;
  background: repeating-linear-gradient(135deg, #f5c518 0 14px, #ffd84a 14px 28px); color: #3a2c00;
  font-size: 11.5px; font-weight: 800; letter-spacing: .08em; pointer-events: none;
}

/* ---------------------------------------------------------------- draft order */
/* El total de cada columna, debajo de su título: la fila de totales del draft. */
.hprod span { flex-direction: column; gap: calc(3px * var(--z)); }
.hprod span .tit-txt { display: block; }
.hprod span .tot {
  display: block; font-style: normal; text-transform: none; letter-spacing: 0;
  font-size: calc(12.5px * var(--z)); font-weight: 750; color: var(--compra-t);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fprod .cel.centrado { justify-content: center; }
.fprod .cel-foto .sin-foto { font-size: calc(10.5px * var(--z)); letter-spacing: .08em; color: var(--tinta-3); font-weight: 700; }
.fprod .cel.col-nuevo { padding: 0 calc(4px * var(--z)); }
.fprod .cel.col-nuevo .nuevo-item { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  font-size: calc(10px * var(--z)); padding: calc(1px * var(--z)) calc(5px * var(--z)); letter-spacing: .03em; }
.tarjeta.vacia { padding: 28px; text-align: center; }
.tarjeta.vacia h2 { border: 0; justify-content: center; }
.tarjeta.vacia p { color: var(--tinta-2); max-width: 560px; margin: 8px auto 18px; line-height: 1.5; }

/* ---------------------------------------------------------------- importar */
.imp-cab { display: grid; grid-template-columns: 1fr 120px 1fr; gap: 10px; }
.imp-resumen { margin: 4px 0 8px; font-size: 13.5px; color: var(--tinta-2); }
.imp-resumen b { color: var(--tinta); }
.o-dialogo-cuerpo .casilla.imp-crear { border: 1px solid var(--linea); border-radius: 8px; margin-bottom: 10px; }
.imp-tabla { max-height: 46vh; overflow: auto; border: 1px solid var(--linea); border-radius: 8px; }
.imp-tabla table.datos td { padding: 6px 9px; }
.imp-tabla select { margin: 0 !important; padding: 6px 8px !important; font-size: 13px !important; }

/* ---------------------------------------------------------------- cadenas */
.o-dialogo-cuerpo .cad-buscar { margin-top: 6px; }
.cad-elegidas { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.cad-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 99px;
  background: var(--marca-suave); color: var(--marca); font-size: 12.5px; font-weight: 650; border: 1px solid var(--marca); }
.cad-chip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; }