/* css/propuesta.css — cómo se VE el documento de una propuesta.
   Pareja de js/propuesta-render.js: ese decide el marcado, este el aspecto.

   Lo usan dos pantallas —la página pública y la vista previa del editor— y por
   eso todo cuelga de .hoja: metido dentro de la app no puede pisarle un solo
   estilo. Las reglas de página (fondo verde, centrado) NO viven aquí; son de
   propuesta.html, que es la única que es una página completa. */

.hoja{
  --manila:#e9dcbe; --manila-alta:#f3e9d2; --manila-baja:#dccba6;
  --tinta:#33291c; --tinta-tenue:#6f6252;
  --raya:#c0ac82; --raya-roja:#a2503f;
  --pr-verde:#00925d; --pr-salmon:#9e5e51;
  --maquina:'Cutive Mono','Courier New',ui-monospace,monospace;

  max-width:760px; margin:0 auto; background:var(--manila);
  background-image:linear-gradient(178deg,var(--manila-alta) 0%,var(--manila) 26%,var(--manila-baja) 100%);
  border-radius:4px; overflow:hidden; position:relative;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
  color:var(--tinta); line-height:1.6; font-size:16px; text-align:left;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* La hoja se declara contenedor para poder medirse a SÍ MISMA. Dentro del
     editor va en una columna angosta aunque la pantalla sea de escritorio: si
     las reglas midieran la ventana, la vista previa mentiría sobre cómo se ve. */
  container-type:inline-size;
  container-name:hoja;
}
.hoja *{ box-sizing:border-box; }
.hoja .cuerpo{ padding:38px 34px 34px; }

.hoja .folio{
  display:flex; justify-content:flex-end; align-items:center; gap:16px;
  font-family:var(--maquina); font-size:11.5px; letter-spacing:.13em;
  color:var(--tinta-tenue); padding:14px 34px 0;
}

/* El logo. Tope duro de altura: aunque el navegador mande algo enorme, no
   puede empujar el resto del documento fuera de la primera pantalla. La imagen
   ya llega escalada, pero esto es lo que garantiza que no se rompa. */
.hoja .emisor .logo{
  max-height:60px; max-width:230px; width:auto; height:auto;
  object-fit:contain; margin:8px 0 0; display:inline-block;
}
.hoja .emisor .de{ font-family:var(--maquina); font-size:11px; letter-spacing:.14em; color:var(--tinta-tenue); }
.hoja .emisor h1{
  font-size:clamp(23px,4.4vw,30px); font-weight:800; line-height:1.15;
  letter-spacing:-.02em; color:#241d13; margin:4px 0 0;
}
/* A quién va dirigida. Va debajo del emisor y arriba del título: primero quién
   la manda, luego para quién es, y hasta entonces de qué se trata. */
.hoja .para{ margin-top:10px; font-size:15px; color:#5b4f3e; }
.hoja .para .de{ font-family:var(--maquina); font-size:10.5px; letter-spacing:.14em; color:var(--tinta-tenue); }

.hoja .titulo{
  margin-top:22px; padding-top:20px; border-top:2px solid var(--raya-roja);
  font-size:clamp(20px,3.6vw,26px); font-weight:700; line-height:1.25; color:#241d13;
}

.hoja .bloque{ margin-top:28px; }
.hoja .bloque h2{
  font-family:var(--maquina); font-size:11.5px; letter-spacing:.14em;
  color:var(--tinta-tenue); margin:0 0 10px;
}
.hoja .bloque p{ white-space:pre-wrap; color:#443728; margin:0; }
.hoja .portada{ width:100%; display:block; border-radius:3px; }

/* Los conceptos, como el rayado de un talonario */
.hoja table{ width:100%; border-collapse:collapse; }
.hoja thead th{
  font-family:var(--maquina); font-size:10.5px; letter-spacing:.12em;
  color:var(--tinta-tenue); text-align:left; padding:0 0 8px; font-weight:400;
  border-bottom:1px solid var(--raya);
}
.hoja thead th.num{ text-align:right; }
.hoja tbody td{ padding:12px 0; border-bottom:1px solid var(--raya); vertical-align:top; font-size:15.5px; }
.hoja tbody td.num{ text-align:right; font-family:var(--maquina); white-space:nowrap; padding-left:12px; }

.hoja .total{
  display:flex; justify-content:flex-end; align-items:baseline; gap:14px;
  margin-top:18px; padding-top:14px; border-top:2px solid var(--raya-roja);
}
.hoja .total.izq{ justify-content:flex-start; }
.hoja .rot{ font-family:var(--maquina); font-size:11.5px; letter-spacing:.14em; color:var(--tinta-tenue); }
.hoja .cif{ font-family:var(--maquina); font-size:clamp(26px,5vw,34px); color:#241d13; line-height:1; }
.hoja .cif.chico{ font-size:17px; }

/* Con IVA son tres renglones. La línea roja va arriba del GRAN total, no del
   subtotal: es la que dice "esto es lo que vas a pagar". */
.hoja .sumas{ margin-top:18px; display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
.hoja .sumas.izq{ align-items:flex-start; }
.hoja .sumas > div{ display:flex; align-items:baseline; gap:14px; }
.hoja .sumas .granTotal{
  margin-top:6px; padding-top:12px; border-top:2px solid var(--raya-roja);
  width:100%; justify-content:flex-end;
}
.hoja .sumas.izq .granTotal{ justify-content:flex-start; }

.hoja .vigencia{
  margin-top:26px; font-family:var(--maquina); font-size:12.5px;
  letter-spacing:.06em; color:var(--tinta-tenue);
}

/* El sello, cuando ya hay respuesta */
.hoja .sello{
  position:absolute; top:26px; right:22px; z-index:3;
  font-family:var(--maquina); font-size:13px; letter-spacing:.16em;
  border:3px solid currentColor; border-radius:4px; padding:8px 14px;
  transform:rotate(-8deg); opacity:.85;
}
.hoja .sello.aceptada{ color:var(--pr-verde); }
.hoja .sello.rechazada{ color:var(--pr-salmon); }
.hoja .sello.con_dudas,
.hoja .sello.vencida{ color:var(--tinta-tenue); }

/* En un teléfono una tabla de conceptos NO cabe: se desborda y el importe —el
   dato que importa— es justo el que se corta. Aquí deja de ser tabla y cada
   concepto se vuelve un bloque. Nadie debería deslizar de lado para saber
   cuánto le van a cobrar.
   Se usa la anchura del CONTENEDOR, no la de la ventana: dentro del editor la
   hoja va en una columna angosta aunque la pantalla sea grande. */
@container hoja (max-width: 620px){
  .hoja thead{ display:none; }
  .hoja tbody tr{ display:block; border-bottom:1px solid var(--raya); padding:13px 0; }
  .hoja tbody td{ display:block; border:0; padding:0; }
  .hoja tbody td.desc{ font-size:15.5px; margin-bottom:5px; }
  .hoja tbody td.calc{ display:inline-block; text-align:left; font-size:13px; color:var(--tinta-tenue); padding:0; }
  .hoja tbody td.imp{ display:inline-block; float:right; font-size:16px; padding:0; }
  .hoja .cuerpo{ padding:26px 20px; }
  .hoja .folio{ padding:12px 20px 0; font-size:10.5px; }
  .hoja .sello{ top:16px; right:14px; font-size:11px; padding:6px 10px; }
}

/* Respaldo para navegadores sin consultas de contenedor: misma regla, medida
   contra la ventana. Sin esto, en un celular viejo la tabla se desborda. */
@supports not (container-type: inline-size){
  @media (max-width:640px){
    .hoja thead{ display:none; }
    .hoja tbody tr{ display:block; border-bottom:1px solid var(--raya); padding:13px 0; }
    .hoja tbody td{ display:block; border:0; padding:0; }
    .hoja tbody td.desc{ font-size:15.5px; margin-bottom:5px; }
    .hoja tbody td.calc{ display:inline-block; text-align:left; font-size:13px; color:var(--tinta-tenue); padding:0; }
    .hoja tbody td.imp{ display:inline-block; float:right; font-size:16px; padding:0; }
    .hoja .cuerpo{ padding:26px 20px; }
    .hoja .folio{ padding:12px 20px 0; font-size:10.5px; }
    .hoja .sello{ top:16px; right:14px; font-size:11px; padding:6px 10px; }
  }
}


/* ── Temas ──────────────────────────────────────────────────────────────────
   POR QUÉ CUATRO PAPELES Y NO UN SELECTOR DE COLOR
   La propuesta sale con el nombre del negocio del usuario hacia un prospecto
   suyo. Un color mal escogido —texto claro sobre papel claro— produce un
   documento ilegible del que salimos fiadores. Cada tema está armado para que
   el contraste aguante, y el usuario escoge el ACENTO, que es lo que de verdad
   lo hace suyo: la línea, el total y el botón de aceptar.
   El acento entra por --acento desde el marcado; si no viene, cae al verde. */
.hoja{ --acento:#00925d; }

/* El acento manda en TODOS los papeles, manila incluido. Antes manila ignoraba
   el acento por completo: el usuario apretaba un color y no pasaba nada, no
   porque fallara sino porque no había nada que pintar. Un control que no cambia
   lo que ves es peor que no tener el control. */
.hoja .granTotal .cif,
.hoja .total .cif{ color:var(--acento); }
.hoja .titulo,
.hoja .total,
.hoja .sumas .granTotal{ border-top-color:var(--acento); }

.hoja[data-tema="blanco"]{
  --manila:#ffffff; --manila-alta:#ffffff; --manila-baja:#f7f6f3;
  --tinta:#25262a; --tinta-tenue:#6d6f76; --raya:#e2e0da; --raya-roja:var(--acento);
}
.hoja[data-tema="lino"]{
  --manila:#f2efe9; --manila-alta:#f8f6f1; --manila-baja:#e7e3da;
  --tinta:#2e2c28; --tinta-tenue:#6f6a61; --raya:#d8d3c8; --raya-roja:var(--acento);
}
/* Papel oscuro: aquí el acento NO se usa para la línea —sobre negro casi
   ningún color de marca tiene contraste suficiente— y se queda en el total,
   que es texto grande. La línea va clara. */
.hoja[data-tema="carbon"]{
  --manila:#22242a; --manila-alta:#2a2d34; --manila-baja:#1c1e23;
  --tinta:#e8e6e1; --tinta-tenue:#9a9791; --raya:#3a3d45; --raya-roja:#4c5059;
}
.hoja[data-tema="carbon"] .emisor h1,
.hoja[data-tema="carbon"] .titulo,
.hoja[data-tema="carbon"] .cif{ color:#f4f2ee; }
.hoja[data-tema="carbon"] .bloque p{ color:#cfccc6; }
.hoja[data-tema="carbon"] .granTotal .cif{ color:var(--acento); }

/* En los papeles claros el gran total también toma el acento: es el número que
   la persona busca, y darle el color de la marca es lo que hace que el
   documento se sienta de ese negocio y no de una plantilla. */
.hoja[data-tema="blanco"] .granTotal .cif,
.hoja[data-tema="lino"] .granTotal .cif{ color:var(--acento); }


/* ── Guarda de contraste ────────────────────────────────────────────────────
   Ya NO vive aquí. Aquí había una mezcla fija (78% y 82% hacia la tinta) que
   no medía nada: un amarillo claro corregido con esa regla seguía dando 2.0:1
   sobre papel blanco, o sea seguía siendo ilegible pero PARECÍA resuelto.
   Ahora el acento llega ya corregido y medido desde `acentoLegible()` en
   js/propuesta-render.js, que es el mismo pintador de la vista previa y de la
   página pública. Un solo lugar, y con número. */
.hoja .sumas .granTotal{ border-top-width:2px; }