/* ==========================================================================
   Bancada — Panel de Presupuesto
   Papel de cuaderno de taller: las advertencias arriba, el detalle al medio,
   el número final pegado abajo. Sin un solo color literal: todo de tokens.css
   ========================================================================== */

.presu {
  /* El encabezado, el detalle y el total comparten el mismo margen lateral:
     en una pantalla ancha el contenido no se estira más de lo que se lee. */
  --gutter: max(var(--s6), calc((100% - 1180px) / 2));
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

/* ---- Encabezado pegado arriba -------------------------------------------- */
.presu__cab {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s5) var(--gutter) var(--s4);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  /* En 1024 el título, «Cargar mis datos» y el PDF no entran en un renglón: pasan al siguiente en vez de pisarse. */
  flex-wrap: wrap;
  row-gap: var(--s3);
}
.presu__titulos { min-width: 0; flex: 1 1 15rem; }
.presu__cab > .espacio { flex: 0 0 0; }
.presu__meta { flex-wrap: wrap; row-gap: 2px; }
.presu__meta > span:not(.presu__punto) { white-space: nowrap; }
.presu__h1 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 660;
  letter-spacing: -.018em;
  line-height: var(--lh-tight);
  margin: 0;
}
.presu__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.presu__punto {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--ink-4); opacity: .65; flex: none;
}

/* ---- Cuerpo --------------------------------------------------------------- */
.presu__cuerpo {
  flex: 1;
  padding: var(--s5) var(--gutter) var(--s7);
}
.presu__nada { padding: var(--s6) 0; }
.presu__nada .vacio { height: auto; }

.presu__avisos {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-bottom: var(--s5);
}

.presu__grilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 328px;
  gap: var(--s4);
  align-items: start;
}
@media (max-width: 1239px) {
  .presu__grilla { grid-template-columns: minmax(0, 1fr); }
}

.presu__rubros {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-width: 0;
}

/* ==========================================================================
   Barra de recotización — lo más valioso del programa
   ========================================================================== */
.recotizar {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--acc-line);
  border-left: 4px solid var(--acc);
  border-radius: var(--r);
  background: var(--acc-soft);
  box-shadow: var(--sh-1);
}
.recotizar__ico { color: var(--acc); flex: none; display: flex; }
.recotizar__texto { min-width: 0; }
.recotizar__titulo {
  font-size: var(--fs-md);
  font-weight: 620;
  color: var(--ink);
  line-height: var(--lh-snug);
}
.recotizar__texto .chiquito { margin-top: 2px; }
.recotizar__resumen {
  margin: var(--s4) 0 0;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  border: 1px solid var(--line);
  font-size: var(--fs-md);
  font-weight: 560;
}

/* ==========================================================================
   Rubros plegables
   ========================================================================== */
.rubro {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  overflow: hidden;
}

.rubro__cab {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 48px;
  padding: 10px var(--s4);
  border: 0;
  background: transparent;
  text-align: left;
  transition: background var(--t-fast) var(--ease);
}
.rubro__cab:hover { background: var(--paper-2); }
.rubro__cab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--acc); }

.rubro__flecha {
  display: flex;
  color: var(--ink-4);
  transform: rotate(90deg);
  transition: transform var(--t) var(--ease-out);
  flex: none;
}
.rubro--cerrado .rubro__flecha { transform: rotate(0deg); }

.rubro__ico {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink-3);
  flex: none;
}
.rubro--acero .rubro__ico {
  background: var(--steel-soft);
  border-color: var(--steel-line);
  color: var(--steel);
}

.rubro__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 640;
  color: var(--ink);
  letter-spacing: -.008em;
  white-space: nowrap;
}
.rubro__resumen {
  font-size: var(--fs-sm);
  color: var(--ink-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.rubro__subtotal {
  font-size: var(--fs-md);
  font-weight: 660;
  color: var(--ink);
  white-space: nowrap;
}

.rubro__cuerpo { border-top: 1px solid var(--line); }
.rubro--cerrado .rubro__cuerpo { display: none; }

.rubro__pie {
  display: flex;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.rubro__vacio {
  padding: var(--s4);
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: var(--lh-base);
}

/* ==========================================================================
   Tabla de renglones
   ========================================================================== */
.presu__tabla { table-layout: auto; }
.presu__tabla th {
  position: static;              /* el pegado de `.tabla` pelea con el encabezado */
  background: var(--surface-2);
  padding: 8px var(--s4);
}
.presu__tabla td {
  padding: 8px var(--s4);
  font-size: var(--fs-base);
}
.presu__tabla tbody tr:last-child td { border-bottom: 0; }

.presu__renglon { font-weight: 560; color: var(--ink); line-height: var(--lh-snug); }
.presu__detalle { font-size: var(--fs-xs); color: var(--ink-4); margin-top: 1px; }

.presu__precio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
.presu__sufijo {
  font-size: var(--fs-xs);
  color: var(--ink-4);
  width: 42px;
  text-align: left;
}

.presu__sub { font-weight: 620; color: var(--ink); white-space: nowrap; }
.presu__sub-caja {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  justify-content: flex-end;
}
.presu__quitar { opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.presu__tabla tr:hover .presu__quitar,
.presu__tabla tr:focus-within .presu__quitar { opacity: 1; }

.presu__nombre { max-width: 320px; }
.presu__fila-total td {
  background: var(--paper-2);
  font-weight: 660;
  border-top: 1px solid var(--line-2);
}

/* ---- Campo de plata ------------------------------------------------------- */
.plata {
  position: relative;
  display: inline-block;
  width: 122px;
}
.plata::before {
  content: "$";
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-sm);
  color: var(--ink-4);
  pointer-events: none;
}
.plata .input { padding-left: 21px; }
/* Cotizar en cero es regalar el trabajo: se marca, y además queda vacío */
.plata--cero .input {
  border-color: var(--warn-line);
  background: var(--warn-soft);
}
.presu__plata { font-weight: 560; }

/* ==========================================================================
   Cierre del trabajo
   ========================================================================== */
.cierre {
  position: sticky;
  top: 96px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
@media (max-width: 1239px) { .cierre { position: static; } }

.cierre__bloque { padding: var(--s4); border-bottom: 1px solid var(--line); }
.cierre__bloque:last-child { border-bottom: 0; background: var(--surface-2); }

.cierre__titulo {
  font-size: var(--fs-xs);
  font-weight: 680;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0 0 var(--s3);
}

/* ---- Los cuatro modos ----------------------------------------------------- */
.modos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 3px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.modo {
  height: 36px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 5px;
  font-size: var(--fs-sm);
  font-weight: 560;
  color: var(--ink-3);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.modo:hover { color: var(--ink); background: var(--paper-3); }
.modo[aria-pressed="true"] {
  background: var(--surface);
  border-color: var(--line-2);
  color: var(--ink);
  font-weight: 640;
  box-shadow: var(--sh-1), var(--sh-inset);
}
.modo:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--acc); }

.cierre__campos {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-top: var(--s3);
}

.cierre__resultado {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--ink-3);
}
.cierre__resultado .num {
  font-size: var(--fs-lg);
  font-weight: 660;
  color: var(--ink);
}

/* ---- Desperdicio / ganancia / IVA ----------------------------------------- */
.cierre__ajuste {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px;
  gap: var(--s2) var(--s3);
  align-items: center;
  padding: var(--s3) 0;
  border-bottom: 1px dashed var(--line);
}
.cierre__ajuste:last-child { border-bottom: 0; padding-bottom: 0; }
.cierre__ajuste:first-of-type { padding-top: 0; }
.cierre__ajuste-txt { min-width: 0; }
.cierre__ajuste-lab {
  display: block;
  font-size: var(--fs-base);
  font-weight: 580;
  color: var(--ink);
  line-height: var(--lh-snug);
}
.cierre__ajuste-inp { width: 82px; }
.cierre__ajuste-efecto {
  grid-column: 1 / -1;
  text-align: right;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  margin-top: -6px;
}

/* ---- Cómo se arma el número ----------------------------------------------- */
.cierre__linea {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  padding: 4px 0;
  font-size: var(--fs-sm);
  color: var(--ink-3);
}
.cierre__linea .num { color: var(--ink-2); font-weight: 560; }
.cierre__linea--fuerte {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line-2);
  color: var(--ink);
  font-weight: 640;
}
.cierre__linea--fuerte .num { color: var(--ink); font-weight: 680; font-size: var(--fs-md); }

/* ---- Interruptores de la salida: pegados al botón de exportar ------------- */
.presu__exportar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: none;
}
.presu__switch {
  display: flex;
  align-items: center;
  gap: var(--s2);
  cursor: pointer;
  max-width: 190px;
}
.presu__switch-txt {
  font-size: var(--fs-xs);
  line-height: 1.25;
  color: var(--ink-3);
  font-weight: 560;
}
.presu__switch:hover .presu__switch-txt { color: var(--ink-2); }

/* ---- Quién corta: el interruptor con la plata al lado -------------------- */
.cierre__nota {
  margin: var(--s2) 0 0;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--ink-3);
}
.cierre__comparar {
  margin-top: var(--s3);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.cierre__comparar-cab {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  font-size: var(--fs-xs);
  font-weight: 640;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--line);
}
.cierre__comparar-cab span:not(.espacio),
.cierre__linea--comparar .num { width: 84px; text-align: right; flex: none; }
.cierre__linea--comparar { padding: 3px 0; font-size: var(--fs-xs); }
.cierre__elegido { color: var(--ink); font-weight: 680; }

/* ==========================================================================
   El total — pegado abajo, imposible de no ver
   ========================================================================== */
.presu__total {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--s5);
  padding: var(--s3) var(--gutter);
  background: var(--surface);
  border-top: 1px solid var(--line-2);
  box-shadow: var(--sh-2);
}
.presu__total:empty { display: none; }

.total__desglose {
  display: flex;
  align-items: center;
  gap: var(--s6);
  flex-wrap: wrap;
  min-width: 0;
}
.total__dato { display: flex; flex-direction: column; gap: 1px; }
.total__dato-lab {
  font-size: var(--fs-xs);
  font-weight: 620;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.total__dato-val { font-size: var(--fs-md); font-weight: 620; color: var(--ink-2); }
.total__dato-extra { font-size: var(--fs-xs); color: var(--ink-4); }

.total__caja { text-align: right; }
.total__rotulo {
  font-size: var(--fs-xs);
  font-weight: 680;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.total__cifra {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.total__simbolo {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--ink-3);
  margin-right: 2px;
}
.total__pie { color: var(--ink-4); margin-top: 1px; }
.total__acciones {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.total__acciones .presu__switch { max-width: none; justify-content: flex-end; }

@media (max-width: 900px) {
  .total__desglose { gap: var(--s4); }
  .total__dato-val { font-size: var(--fs-base); }
}

/* ==========================================================================
   Diálogo de datos del taller
   ========================================================================== */
.taller__cab {
  display: flex;
  align-items: flex-start;
  gap: var(--s5);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
}
.taller__cab-txt { min-width: 0; padding-top: 2px; }
.taller__cab-txt p { line-height: var(--lh-base); }

.taller__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  flex: none;
  width: 190px;
}
.taller__img {
  max-width: 180px;
  max-height: 78px;
  object-fit: contain;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 6px;
}
.taller__hueco {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 180px;
  height: 78px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-4);
}
.taller__logo-btns { display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: center; }

/* ==========================================================================
   Impresión de la pantalla (el PDF lindo lo arma exportar.js aparte)
   ========================================================================== */
@media print {
  .presu__cab, .presu__total, .cierre { position: static; box-shadow: none; }
  .rubro--cerrado .rubro__cuerpo { display: table-row-group; }
  .presu__quitar, .total__acciones { display: none; }
}