/* El generador de presupuesto — spec 0455.
 *
 * Reproduce el diseño aprobado en Claude Design con los tokens del sistema.
 * Cero hex (regla 1.3): si el diseño y un token no coinciden, manda el token.
 * Los controles son los de components.css; acá sólo va la disposición de la
 * página, la hoja del presupuesto y la impresión.
 */

/* El reinicio de caja. Las otras páginas públicas lo reciben de styles.css
 * (`* { box-sizing: border-box }`), que esta página no carga: sin él, el relleno
 * y el borde de cada campo se SUMAN a su ancho y los campos se pasaban 25 px del
 * borde de la tarjeta — medido. Va acotado a la página, como `.login-page *` en
 * styles.css, en vez de traer 1.445 líneas de estilos de otras páginas. */
.pp-page *, .pp-page *::before, .pp-page *::after { box-sizing: border-box; }

.pp-page {
  margin: 0;
  background: var(--tc-bg);
  color: var(--tc-text);
  font-family: var(--tc-font-family);
  font-size: var(--tc-fs-body);
  line-height: var(--tc-lh-body);
}

/* ── Barra superior y encabezado ─────────────────────────────── */

.pp-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--tc-space-16) var(--tc-space-32);
  background: var(--tc-surface);
  border-bottom: 1px solid var(--tc-border);
}
.pp-marca {
  display: inline-flex; align-items: center; gap: var(--tc-space-12);
  color: var(--tc-text); text-decoration: none;
  font-weight: var(--tc-weight-600); font-size: var(--tc-fs-h3);
}
.pp-top-enlace { color: var(--tc-text-muted); font-size: var(--tc-fs-sm); text-decoration: none; }
.pp-top-enlace:hover { color: var(--tc-primary-text); }

.pp-hero {
  max-width: 1200px; margin: 0 auto;
  padding: var(--tc-space-48) var(--tc-space-32) var(--tc-space-32);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--tc-space-16);
}
.pp-titulo {
  margin: 0; max-width: 24ch;
  /* El diseño lo dibujó más grande; manda el token (regla 1.3 y 1.9). */
  font-size: var(--tc-fs-display); line-height: 1.15; letter-spacing: -0.02em;
  font-weight: var(--tc-weight-600); color: var(--tc-text);
}
.pp-bajada { margin: 0; max-width: 56ch; font-size: var(--tc-fs-h2); color: var(--tc-text-muted); }
.pp-bajada--chica { font-size: var(--tc-fs-sm); }
.pp-noscript { margin: 0; }

/* ── Dos columnas: formulario y vista previa ─────────────────── */

.pp-main {
  max-width: 1200px; margin: 0 auto;
  padding: 0 var(--tc-space-32) var(--tc-space-64);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--tc-space-32);
  align-items: start;
}
.pp-form { display: flex; flex-direction: column; gap: var(--tc-space-16); min-width: 0; }
.pp-card-titulo { margin: 0; font-size: var(--tc-fs-h3); font-weight: var(--tc-weight-600); }
.pp-opcional { color: var(--tc-text-muted); font-weight: var(--tc-weight-400); }

.pp-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--tc-space-12); }
.pp-fila--angosta { grid-template-columns: minmax(0, 120px) minmax(0, 1fr); }

/* ── Líneas ──────────────────────────────────────────────────── */

.pp-lineas-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--tc-space-16); }
.pp-moneda { min-width: 200px; }

/* Encabezado y filas comparten plantilla de columnas (regla 1.8): la
 * descripción es la que identifica la fila y se lleva el espacio flexible. */
.pp-lineas-encabezado,
.pp-linea {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 104px 104px var(--tc-control-md);
  gap: var(--tc-space-8);
  align-items: center;
}
.pp-lineas-encabezado {
  font-size: var(--tc-fs-overline); font-weight: var(--tc-weight-600);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--tc-text-muted);
  padding-bottom: var(--tc-space-8); border-bottom: 1px solid var(--tc-border);
}
.pp-lineas-encabezado span:nth-child(n+2):nth-child(-n+4) { text-align: right; }
.pp-lineas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tc-space-8); }
/* Un <input> tiene ancho mínimo propio y, como elemento de grilla, no se achica
 * por debajo de él: en 375 px el precio tapaba la cantidad y se salía de la
 * tarjeta. Medido en el navegador, no lo agarraba la medición de desborde de la
 * página porque el problema estaba ADENTRO de la tarjeta. */
.pp-linea .tc-input { width: 100%; min-width: 0; }
.pp-linea-cant, .pp-linea-precio { text-align: right; }
.pp-linea-subtotal {
  text-align: right; font-weight: var(--tc-weight-600);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pp-linea-error { grid-column: 1 / -1; margin: 0; }
.pp-agregar { align-self: flex-start; }

.pp-total {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: var(--tc-space-4) var(--tc-space-16);
  padding-top: var(--tc-space-16); border-top: 1px solid var(--tc-border);
}
.pp-total-etiqueta { color: var(--tc-text-strong); font-weight: var(--tc-weight-500); }
.pp-total-monto { font-size: var(--tc-fs-total); font-weight: var(--tc-weight-600); font-variant-numeric: tabular-nums; }
.pp-aviso { margin: 0; }

.pp-descargar-ayuda { margin: 0; text-align: center; }
.pp-promo { background: var(--tc-surface-soft); box-shadow: none; }
.pp-promo p { margin: 0; }
.pp-promo-boton { align-self: flex-start; }

/* ── Vista previa y hoja ─────────────────────────────────────── */

.pp-previa { position: sticky; top: var(--tc-space-24); min-width: 0; }
.pp-previa-cabecera { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--tc-space-8); }
.pp-previa-titulo {
  margin: 0; font-size: var(--tc-fs-overline); font-weight: var(--tc-weight-600);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--tc-text-muted);
}

.pp-hoja {
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-surface);
  box-shadow: var(--tc-shadow-card);
  padding: var(--tc-space-32);
  display: flex; flex-direction: column; gap: var(--tc-space-20);
  font-size: var(--tc-fs-sm);
}
.pp-hoja p { margin: 0; }
.pp-hoja-cabecera {
  display: flex; justify-content: space-between; gap: var(--tc-space-16);
  padding-bottom: var(--tc-space-16); border-bottom: 2px solid var(--tc-text);
}
/* El nombre del taller es lo más visible del encabezado: el presupuesto es del
 * taller, no de TCellApp (spec 0455). */
.pp-hoja-taller { font-size: var(--tc-fs-h1); font-weight: var(--tc-weight-600); color: var(--tc-text); line-height: 1.2; overflow-wrap: anywhere; }
.pp-hoja-doc { text-align: right; flex: none; }
.pp-hoja-numero { font-size: var(--tc-fs-h2); font-weight: var(--tc-weight-600); }
.pp-hoja .pp-hoja-rotulo {
  font-size: var(--tc-fs-overline); font-weight: var(--tc-weight-600);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--tc-text-muted);
  margin-bottom: var(--tc-space-4);
}
.pp-hoja-dato { color: var(--tc-text-muted); }
.pp-hoja-fuerte { font-weight: var(--tc-weight-600); color: var(--tc-text); }
.pp-hoja-texto { color: var(--tc-text-strong); white-space: pre-line; overflow-wrap: anywhere; }
.pp-hoja-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--tc-space-16); }
.pp-hoja .es-guia { color: var(--tc-text-decor); font-style: italic; }

.pp-hoja-tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pp-hoja-tabla th {
  font-size: var(--tc-fs-overline); font-weight: var(--tc-weight-600);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--tc-text-muted);
  text-align: right; padding: var(--tc-space-8); border-bottom: 1px solid var(--tc-border-strong);
}
.pp-hoja-tabla th:first-child, .pp-hoja-tabla td:first-child { text-align: left; padding-left: 0; }
.pp-hoja-tabla td { padding: var(--tc-space-8); border-bottom: 1px solid var(--tc-border); text-align: right; overflow-wrap: anywhere; }
.pp-hoja-tabla td:last-child, .pp-hoja-tabla th:last-child { padding-right: 0; }
.pp-hoja-tabla tr { break-inside: avoid; }
.pp-hoja-guia td { color: var(--tc-text-decor); font-style: italic; text-align: left; }

.pp-hoja-total {
  display: flex; justify-content: flex-end; align-items: baseline; gap: var(--tc-space-16);
  padding: var(--tc-space-12) var(--tc-space-16);
  background: var(--tc-surface-soft); border-radius: var(--tc-radius-control);
}
.pp-hoja-total span { font-size: var(--tc-fs-overline); font-weight: var(--tc-weight-600); text-transform: uppercase; color: var(--tc-text-muted); }
.pp-hoja-total strong { font-size: var(--tc-fs-h1); font-weight: var(--tc-weight-600); font-variant-numeric: tabular-nums; }

.pp-hoja-firmas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tc-space-32); padding-top: var(--tc-space-32); }
.pp-hoja-firmas span { border-top: 1px solid var(--tc-border-strong); padding-top: var(--tc-space-4); color: var(--tc-text-muted); font-size: var(--tc-fs-overline); }
.pp-hoja-pie { text-align: center; color: var(--tc-text-muted); font-size: var(--tc-fs-overline); padding-top: var(--tc-space-12); border-top: 1px solid var(--tc-border); }

/* ── Barra fija del teléfono ─────────────────────────────────── */

.pp-barra { display: none; }

@media (max-width: 900px) {
  .pp-top { padding: var(--tc-space-12) var(--tc-space-16); }
  .pp-hero { padding: var(--tc-space-32) var(--tc-space-16) var(--tc-space-24); }
  .pp-bajada { font-size: var(--tc-fs-body); }
  .pp-main { grid-template-columns: minmax(0, 1fr); padding: 0 var(--tc-space-16) 120px; gap: var(--tc-space-24); }
  .pp-previa { position: static; }
  .pp-hoja { padding: var(--tc-space-20); }

  /* En el teléfono la barra es LA acción principal (regla 1.6). */
  .pp-descargar, .pp-descargar-ayuda { display: none; }
  .pp-barra {
    display: flex; align-items: center; justify-content: space-between; gap: var(--tc-space-16);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    padding: var(--tc-space-12) var(--tc-space-16);
    background: var(--tc-surface); border-top: 1px solid var(--tc-border);
    box-shadow: var(--tc-shadow-overlay);
  }
  .pp-barra-etiqueta { display: block; font-size: var(--tc-fs-overline); color: var(--tc-text-muted); text-transform: uppercase; }
  .pp-barra-monto { font-size: var(--tc-fs-h2); font-variant-numeric: tabular-nums; }
  .pp-barra .tc-btn { height: 44px; }
}

@media (max-width: 560px) {
  .pp-fila, .pp-fila--angosta, .pp-hoja-dos { grid-template-columns: minmax(0, 1fr); }
  .pp-lineas-cabecera { flex-direction: column; align-items: stretch; }
  .pp-moneda { min-width: 0; }
  .pp-lineas-encabezado { display: none; }

  /* Cada línea es una tarjeta: descripción arriba; cantidad y precio en una
   * fila; subtotal y borrar abajo. Mismo marcado que en escritorio. */
  .pp-linea {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "desc desc" "cant precio" "sub borrar" "error error";
    padding: var(--tc-space-12);
    border: 1px solid var(--tc-border); border-radius: var(--tc-radius-surface);
    background: var(--tc-surface-soft);
  }
  .pp-linea-desc { grid-area: desc; }
  .pp-linea-cant { grid-area: cant; }
  .pp-linea-precio { grid-area: precio; }
  .pp-linea-subtotal { grid-area: sub; text-align: left; }
  .pp-linea-borrar { grid-area: borrar; justify-self: end; width: 44px; height: 44px; }
  .pp-linea-error { grid-area: error; }
  .pp-agregar { height: 44px; }
  .pp-hoja-cabecera { flex-direction: column; }
  .pp-hoja-doc { text-align: left; }
}

/* ── Impresión: sólo la hoja ─────────────────────────────────── */

@page { size: A4; margin: 14mm; }

@media print {
  .pp-page { background: none; }
  /* Sin !important: este bloque va último y gana por orden. Ojo que el ancho de
   * una A4 cae dentro de max-width: 900px, así que la barra del teléfono se
   * pisa acá y no se imprime. */
  .pp-top, .pp-hero, .pp-form, .pp-barra, .pp-previa-cabecera { display: none; }
  .pp-main { display: block; max-width: none; padding: 0; }
  .pp-previa { position: static; }
  .pp-hoja { border: 0; box-shadow: none; border-radius: 0; padding: 0; font-size: var(--tc-fs-body); }
  .pp-hoja .es-guia { visibility: hidden; }
  /* Una falla sin completar dejaba en el PDF el título con un hueco debajo. En
   * algo que el taller le manda a su cliente eso se lee descuidado: sin texto,
   * no va el bloque. */
  .pp-hoja-bloque:has(> .es-guia) { display: none; }
  .pp-hoja-guia { display: none; }
  .pp-hoja-firmas, .pp-hoja-total, .pp-hoja-dos { break-inside: avoid; }
}