/* pedidos.cl — sistema visual: el talonario sobre la mesa (talón = formulario; hoja con copia de color y perforación;
   recuadro de R.U.T., tipo y N°). Capa de app: la herramienta parte de inmediato, panel con cabecera y acciones, selector
   en cápsula, chip de estado vivo y barra de herramientas sobre la hoja. Formularios en bloques con leyenda.
   Contenido 1200 + 20 por lado, lectura 750, cortes 921 y 544 (margen 16). Escala de 4 px. */

@font-face {
  font-family: 'Radio Canada';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('/fuentes/radio-canada.woff2') format('woff2');
}

:root {
  --contenido: 1200px;
  --margen: 20px;
  --lectura: 750px;

  --fondo: #edf0ec;
  --superficie: #ffffff;
  --tinta: #17201b;
  --tinta-2: #47524c;
  --tinta-3: #5f6a64;
  --linea: #d3dad5;
  --linea-2: #85918a; /* bordes de campos: 3,2:1 sobre blanco (WCAG 1.4.11) */

  /* La mesa: verde grisáceo de escritorio de oficina (ni paño ni modo oscuro). */
  --mesa: #4d5c54;
  --mesa-2: #36423c;
  --mesa-texto: #f1f5f2;
  --mesa-texto-2: #d3ddd6;

  /* Un color de marca (verde talonario). El rojo queda solo para errores. */
  --marca: #1d5a41;
  --marca-2: #123d2b;
  --marca-suave: #e4efe8;
  --error: #b42318;
  --error-suave: #fdeceb;

  /* Copias del talonario, una por documento. */
  --copia-oc: #d3e2ec;
  --copia-cot: #ece2c2;
  --copia-np: #d4e6d8;

  --radio: 6px;
  --sombra-caja: 0 1px 2px rgba(16, 24, 20, .08), 0 8px 20px -10px rgba(16, 24, 20, .28);
  --sombra-panel: 0 1px 1px rgba(0, 0, 0, .2), 0 4px 10px rgba(0, 0, 0, .16), 0 20px 36px -14px rgba(0, 0, 0, .55);
  --sombra-hoja: 0 1px 1px rgba(0, 0, 0, .22), 0 3px 8px rgba(0, 0, 0, .18), 0 22px 40px -12px rgba(0, 0, 0, .6);

  --letra: 'Radio Canada', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
@media (max-width: 544px) { :root { --margen: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--letra); font-size: 16px; line-height: 1.5; font-variant-numeric: tabular-nums; }
img, svg { display: block; max-width: 100%; }
a { color: var(--marca); text-underline-offset: 3px; }
a:hover { color: var(--marca-2); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }
[hidden] { display: none !important; }
.nw { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: -9999px; top: 8px; z-index: 10; padding: 8px 12px; background: #fff; }
.saltar:focus { left: 8px; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.contenedor { max-width: calc(var(--contenido) + 2 * var(--margen)); margin: 0 auto; padding: 0 var(--margen); }

/* ---------- Cabecera ---------- */
.cabecera { position: relative; z-index: 2; background: var(--superficie); border-bottom: 1px solid var(--linea); }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; }
.logo { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta); text-decoration: none; font-size: 21px; letter-spacing: -.01em; }
.logo:hover { color: var(--tinta); }
.logo svg { width: 30px; height: 30px; color: var(--marca); }
.logo b { font-weight: 700; }
.logo span { color: var(--tinta-3); font-weight: 500; }
.menu { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.menu a { display: block; padding: 8px 12px; border-radius: var(--radio); color: var(--tinta-2); text-decoration: none; font-weight: 500; font-size: 15px; white-space: nowrap; }
.menu a:hover { background: var(--fondo); color: var(--tinta); }
.menu a[aria-current="page"] { color: var(--marca); box-shadow: inset 0 -2px 0 var(--marca); border-radius: 0; }
/* Corte medido: los cuatro rótulos no caben con el logo bajo ~760 px; ahí el selector de la herramienta hace de menú. */
@media (max-width: 760px) { .menu .menu-doc { display: none; } }

/* ---------- La mesa: franja de borde a borde donde se trabaja ---------- */
.mesa { background: var(--mesa); padding: 16px 0 40px; box-shadow: inset 0 12px 16px -12px rgba(0, 0, 0, .45); }
.barra-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 16px; }
.titulo-texto { min-width: 0; }
.titulo-texto h1 { margin: 0; color: #fff; font-size: clamp(24px, .8vw + 18px, 30px); line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }
.titulo-texto p { margin: 4px 0 0; color: var(--mesa-texto-2); font-size: 15px; }
.selector { display: inline-flex; padding: 4px; border-radius: 10px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
.selector a { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 7px; color: var(--mesa-texto); font-weight: 600; font-size: 15px; text-decoration: none; text-align: center; line-height: 1.15; }
.selector a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.selector a[aria-current="page"] { background: #fff; color: var(--tinta); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.selector a:focus-visible { outline-color: #fff; }
@media (max-width: 921px) {
  .barra-titulo { align-items: stretch; }
  .selector { display: flex; width: 100%; }
  .selector a { flex: 1 1 0; padding: 0 8px; }
}
@media (max-width: 400px) { .selector a { font-size: 14px; padding: 0 4px; } }

.generador { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 921px) { .generador { grid-template-columns: minmax(0, 1fr); } .mesa { padding-bottom: 32px; } }

/* ---------- El panel del formulario ---------- */
.panel { background: var(--superficie); border-radius: 8px; box-shadow: var(--sombra-panel); container-type: inline-size; }
.panel-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--linea); border-radius: 8px 8px 0 0; background: #f6f8f6; }
.panel-cabeza h2 { margin: 0; font-size: 16px; font-weight: 700; }
.panel-acciones { display: flex; gap: 8px; }
.panel-nota { margin: 0; padding: 12px 16px 0; font-size: 13px; color: var(--tinta-3); }
.panel-nota .btn-texto { padding: 0 4px; min-height: 0; font-size: 13px; }
.req { color: var(--marca); font-weight: 700; }

/* Pasos: cinco círculos unidos por una línea; el actual en verde lleno, el listo con visto, el que tiene un error en rojo.
   Se puede ir a cualquiera (quien repite solo cambia proveedor y productos). */
.pasos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 12px 8px 0; list-style: none; }
.pasos li { position: relative; min-width: 0; }
.pasos li + li::before { content: ""; position: absolute; z-index: 0; top: 16px; right: 50%; width: 100%; height: 2px; background: var(--linea); }
.paso { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--tinta-3); font: inherit; cursor: pointer; }
.paso-n { display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--linea-2); border-radius: 50%; background: #fff; font-size: 14px; font-weight: 700; line-height: 1; }
.paso-visto { display: none; width: 18px; height: 18px; stroke-width: 2.4; }
.paso-t { max-width: 100%; font-size: 12px; font-weight: 600; font-stretch: 88%; line-height: 1.2; text-align: center; }
.paso:hover .paso-n { border-color: var(--marca); }
.paso:hover .paso-t { color: var(--tinta); }
.paso--ok .paso-n { border-color: var(--marca); background: var(--marca-suave); color: var(--marca); }
.paso--ok .paso-num { display: none; }
.paso--ok .paso-visto { display: block; }
.paso--mal .paso-n { border-color: var(--error); background: #fff; color: var(--error); }
.paso[aria-current="step"] .paso-n { border-color: var(--marca-2); background: var(--marca); color: #fff; box-shadow: 0 0 0 3px var(--marca-suave); }
.paso[aria-current="step"] .paso-num { display: block; }
.paso[aria-current="step"] .paso-visto { display: none; }
.paso[aria-current="step"] .paso-t { color: var(--tinta); }
.paso:focus-visible { outline: none; }
.paso:focus-visible .paso-n { outline: 3px solid var(--marca); outline-offset: 2px; }
.paso-actual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bloque:focus { outline: none; }
.pasos-nav { display: flex; flex: 1 1 100%; gap: 12px; }
.pasos-nav [data-mover="1"], .pasos-nav [data-fin] { margin-left: auto; }
.opcional { font-weight: 400; color: var(--tinta-3); }

.bloque { min-width: 0; margin: 16px; padding: 8px 16px 16px; border: 1px solid var(--linea); border-radius: var(--radio); }
.bloque legend { padding: 0 8px; margin-left: -8px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--marca); }
.bloque legend .opcional { text-transform: none; letter-spacing: 0; }
.bloque-ayuda { margin: 4px 0 8px; font-size: 14px; color: var(--tinta-3); }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.campos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo--ancho { grid-column: 1 / -1; }
.campo > label, .etq-campo { font-size: 14px; font-weight: 600; color: var(--tinta-2); }
input[type="text"], input[type="email"], input:not([type]), select, textarea {
  width: 100%; min-width: 0; height: 44px; padding: 0 12px;
  border: 1px solid var(--linea-2); border-radius: var(--radio);
  background: #fbfcfb; color: var(--tinta); font-size: 16px;
  box-shadow: inset 0 1px 2px rgba(16, 24, 20, .08);
}
textarea { height: auto; min-height: 64px; padding: 8px 12px; resize: vertical; line-height: 1.4; }
select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2347524c' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
input::placeholder, textarea::placeholder { color: #6f7973; }
input:hover, select:hover, textarea:hover { border-color: #5f6a64; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px rgba(29, 90, 65, .28); background: #fff; }
input[aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); background: #fff; }
input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px rgba(180, 35, 24, .25); }
.casilla { display: flex; align-items: flex-start; gap: 8px; min-height: 24px; font-size: 14px; color: var(--tinta-2); cursor: pointer; }
.casilla input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--marca); }

/* Aviso bajo el campo. El del RUT tiene su espacio reservado: el mensaje no mueve nada. */
.estado { display: flex; align-items: center; gap: 4px; min-height: 20px; margin: 0; font-size: 13px; line-height: 1.3; color: var(--tinta-3); }
.estado--plegable { min-height: 0; }
.estado .ico { width: 16px; height: 16px; }
.estado.ok { color: var(--marca); }
.estado.mal { color: var(--error); font-weight: 600; }

.logo-carga { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.archivo { position: relative; }
.archivo input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.archivo:focus-within { outline: 3px solid var(--marca); outline-offset: 2px; border-radius: var(--radio); }

/* Botones (sólidos, con un escalón abajo; nada se anima) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--radio); font-weight: 600; font-size: 15px; text-decoration: none; }
.btn-chico { min-height: 36px; padding: 0 12px; font-size: 14px; }
@media (max-width: 921px) { .btn-chico { min-height: 44px; } }
.btn-pri { background: var(--marca); color: #fff; border-color: var(--marca-2); box-shadow: 0 2px 0 var(--marca-2); }
.btn-pri:hover { background: #18503a; color: #fff; }
.btn-pri .ico { color: #fff; }
.btn-sec { background: #fff; color: var(--tinta); border-color: var(--linea-2); box-shadow: 0 2px 0 var(--linea); }
.btn-sec:hover { border-color: #5f6a64; background: #f7f9f7; color: var(--tinta); }
.btn-pri:active, .btn-sec:active { box-shadow: none; transform: translateY(2px); }
.btn-texto { padding: 8px 4px; min-height: 40px; border: 0; background: none; color: var(--marca); font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.btn-texto:hover { color: var(--marca-2); }
.btn-icono { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid transparent; border-radius: var(--radio); background: none; color: var(--tinta-3); }
.btn-icono:hover { background: var(--fondo); color: var(--tinta); border-color: var(--linea); }

/* Líneas de productos o servicios */
.items { list-style: none; margin: 4px 0 0; padding: 0; counter-reset: linea; }
.item { display: grid; grid-template-columns: 68px 104px minmax(0, 1fr) auto; grid-template-areas: "cabeza cabeza cabeza cabeza" "cant uni pu exento"; gap: 8px; align-items: end; padding: 12px 0; border-bottom: 1px dashed var(--linea-2); counter-increment: linea; }
.item:first-child { padding-top: 4px; }
.item-cabeza { grid-area: cabeza; display: flex; align-items: center; gap: 4px; min-width: 0; }
.item-cabeza .item-desc { flex: 1 1 auto; }
.item-desc { position: relative; }
.item-desc::before { content: counter(linea); position: absolute; left: 0; top: 0; bottom: 0; width: 32px; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--linea); color: var(--tinta-3); font-size: 14px; font-weight: 700; pointer-events: none; }
.item-desc input { padding-left: 44px; }
.item-cant { grid-area: cant; }
.item-uni { grid-area: uni; }
.item-pu { grid-area: pu; }
.item .campo > label { font-size: 13px; }
.item-cant input { text-align: right; }
.item-exento { grid-area: exento; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 1px solid var(--linea-2); border-radius: var(--radio); background: #fff; color: var(--tinta-2); font-size: 15px; font-weight: 500; cursor: pointer; user-select: none; }
.item-exento:hover { border-color: #5f6a64; }
.item-exento input { width: 18px; height: 18px; margin: 0; accent-color: var(--marca); }
.item-exento:has(input:checked) { border-color: var(--marca); background: var(--marca-suave); color: var(--marca-2); }
.item-exento:has(input:focus-visible) { outline: 3px solid var(--marca); outline-offset: 2px; }
.con-signo { position: relative; }
.con-signo span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); pointer-events: none; }
.con-signo input { padding-left: 28px; text-align: right; }
.agregar { width: 100%; margin-top: 12px; border-style: dashed; box-shadow: none; color: var(--marca); }
.agregar .ico { width: 18px; height: 18px; }
.ayuda-iva { margin: 12px 0 0; font-size: 14px; color: var(--tinta-3); }

.panel-pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px; border-top: 1px solid var(--linea); border-radius: 0 0 8px 8px; background: #f6f8f6; }
.panel-pie p { flex: 1 1 100%; margin: 0; font-size: 14px; color: var(--tinta-3); }
.panel-pie .btn-texto { display: inline-block; min-height: 24px; padding: 2px 0; font-size: 14px; line-height: 20px; }

@container (max-width: 420px) {
  .campos--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "cabeza cabeza cabeza" "cant uni uni" "pu pu exento"; }
}
@container (max-width: 340px) {
  .paso-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .paso-actual { position: static; width: auto; height: auto; clip: auto; margin: 0; padding: 8px 12px 0; font-size: 14px; font-weight: 600; color: var(--tinta-2); text-align: center; }
  .campos { grid-template-columns: minmax(0, 1fr); }
  .bloque { margin: 12px; padding: 8px 12px 12px; }
  .panel-cabeza, .panel-pie { padding-left: 12px; padding-right: 12px; }
}

/* ---------- La vista: barra de herramientas + hoja ---------- */
.vista { min-width: 0; }
/* En escritorio la hoja baja con la página hasta mostrar su final y ahí se queda (el JS calcula el top). */
@media (min-width: 922px) { .vista { position: sticky; top: var(--pegar, 12px); } }
.herramientas { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 0 8px 16px 0; padding: 8px 8px 8px 12px; border-radius: 8px; background: var(--superficie); box-shadow: var(--sombra-panel); }
.herr-opciones { display: flex; flex: 1 1 100%; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--linea); }
.fondo-casilla { align-items: center; min-height: 32px; font-weight: 600; }
.fondo-casilla input { margin: 0; }
.chip { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin: 0; padding: 4px 12px 4px 8px; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.2; }
.chip .ico { width: 18px; height: 18px; }
.chip--ok { background: var(--marca-suave); color: var(--marca-2); }
.chip--falta { background: #eef1ee; color: var(--tinta-2); }
.chip--mal { background: var(--error-suave); color: var(--error); }
.segmento { display: inline-flex; padding: 2px; border-radius: 8px; background: #e7ebe8; box-shadow: inset 0 1px 2px rgba(16, 24, 20, .12); }
.segmento label { position: relative; }
.segmento input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.segmento span { display: flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--radio); color: var(--tinta-2); font-size: 14px; font-weight: 600; }
.segmento input:checked + span { background: #fff; color: var(--tinta); box-shadow: 0 1px 2px rgba(16, 24, 20, .25); }
.segmento input:focus-visible + span { outline: 3px solid var(--marca); outline-offset: 1px; }
.tintas { display: flex; gap: 8px; }
.tinta { position: relative; width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--linea-2); cursor: pointer; }
.tinta input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.tinta:has(input:checked) { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tinta); }
.tinta:has(input:focus-visible) { outline: 3px solid var(--marca); outline-offset: 4px; }
.tinta--roja { background: #c8102e; }
.tinta--negra { background: #1d211f; }
.tinta--azul { background: #0f4c81; }
@media (max-width: 921px) { .segmento span { min-height: 40px; } .tinta { width: 32px; height: 32px; } }

/* ---------- La hoja (lo que se imprime) ---------- */
.pliego { position: relative; margin-right: 8px; }
.pliego::before { /* la copia del talonario, asomada debajo */
  content: ""; position: absolute; inset: 8px -8px -8px 8px; border-radius: 2px;
  background: var(--copia, var(--copia-oc)); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6);
}
.generador[data-doc="cot"] { --copia: var(--copia-cot); }
.generador[data-doc="np"] { --copia: var(--copia-np); }

.hoja {
  --doc: #252a27; /* tinta roja por defecto, como la factura chilena: el recuadro en rojo y el resto en grafito */
  --recuadro: #c8102e;
  position: relative; padding: 40px 40px 48px 56px; border-radius: 2px; background: #fff; color: #1d211f;
  aspect-ratio: var(--proporcion, 8.5 / 11); box-shadow: var(--sombra-hoja);
  font-size: 14px; line-height: 1.4; container-type: inline-size; overflow-wrap: anywhere;
}
.hoja[data-tinta="negra"] { --doc: #1d211f; --recuadro: #1d211f; }
.hoja[data-tinta="azul"] { --doc: #0f4c81; --recuadro: #0f4c81; }
/* Fondo de seguridad: celeste suave con el nombre de la empresa repetido (app.js pone el color y la imagen desde datos.js). */
.hoja[data-fondo] { background-color: var(--fondo-papel); background-image: var(--marca-agua, none); background-repeat: repeat; }
.hoja::before { /* perforación del talonario */
  content: ""; position: absolute; left: 20px; top: 12px; bottom: 12px; width: 8px;
  background: radial-gradient(circle at 4px 4px, var(--copia, var(--copia-oc)) 2.4px, #b9c2bd 2.9px, transparent 3.3px) 0 0 / 8px 12px repeat-y;
}
.hoja p { margin: 0; }
.etq { color: #59605c; font-size: 12px; font-stretch: 78%; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.vacio { color: #8a928e; font-weight: 400; }

.doc-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: start; }
.doc-logo { width: auto; max-width: 200px; max-height: 56px; margin-bottom: 8px; object-fit: contain; }
.doc-razon { margin-bottom: 4px !important; color: #111412; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -.005em; }
.doc-emisor p:not(.doc-razon) { color: #3e4441; font-size: 13px; }
.recuadro { min-width: 208px; padding: 12px 16px; border: 2px solid var(--recuadro, var(--doc)); color: var(--recuadro, var(--doc)); text-align: center; font-weight: 700; line-height: 1.3; }
.r-rut { font-size: 15px; }
.r-tipo { margin: 4px 0 !important; font-size: 17px; font-stretch: 84%; letter-spacing: .03em; text-transform: uppercase; }
.r-num { font-size: 16px; }
.doc-lugar { min-height: 18px; margin: 16px 0 12px !important; color: #3e4441; font-size: 13px; text-align: right; }
/* Formato en blanco: renglones para escribir a mano el membrete y el lugar y fecha. */
.renglon { display: flex; align-items: flex-end; height: 28px; padding-bottom: 2px; border-bottom: 1px solid #b9c1bc; }
.doc-lugar .renglon-corto { display: inline-block; width: 240px; height: 18px; margin-left: 8px; border-bottom: 1px solid #b9c1bc; vertical-align: bottom; }
.doc-ref { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; padding: 6px 12px; border: 1px solid #b9c1bc; border-radius: 2px; background: #fff; }
.doc-ref .etq { flex: none; color: var(--doc); font-weight: 700; }
.doc-ref .renglon-corto { display: inline-block; width: 120px; height: 16px; border-bottom: 1px solid #b9c1bc; vertical-align: bottom; }
.doc-leyenda { margin: 16px 0 0 !important; color: #59605c; font-size: 12px; text-align: center; letter-spacing: .02em; }

/* Las líneas internas son el espacio de 1 px de la grilla: siempre parejas, con 1, 2 o 3 columnas. */
.doc-partes, .doc-cond { display: grid; gap: 1px; overflow: hidden; border: 1px solid #b9c1bc; border-radius: 2px; background: #dfe4e1; }
.doc-partes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.doc-partes-titulo { grid-column: 1 / -1; padding: 4px 12px; background: #f4f6f5; color: var(--doc); font-size: 12px; font-stretch: 78%; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.doc-partes .dato { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 4px 12px; background: #fff; min-height: 28px; }
.doc-partes .dato--ancho { grid-column: 1 / -1; }
.doc-partes .dato--ancho span:last-child { font-weight: 700; }
.doc-cond { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; }
.doc-cond > div { display: flex; flex-direction: column; gap: 4px; min-height: 48px; padding: 4px 12px; background: #fff; }

.doc-tabla { width: 100%; margin-top: 16px; border-collapse: collapse; }
.doc-tabla th { padding: 8px; border-top: 2px solid var(--doc); border-bottom: 1px solid var(--doc); color: var(--doc); font-size: 12px; font-stretch: 78%; font-weight: 600; letter-spacing: .05em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.doc-tabla td { padding: 8px; border-bottom: 1px solid #e2e6e3; vertical-align: top; }
.doc-tabla td:not(.desc) { overflow-wrap: normal; white-space: nowrap; }
.doc-tabla .n { width: 32px; color: #6a716d; }
.doc-tabla .num, .doc-tabla th.num { text-align: right; }
.doc-tabla .uni { color: #3e4441; }
.doc-tabla thead th:nth-child(2) { width: 56px; }
.doc-tabla thead th:nth-child(3) { width: 76px; }
.doc-tabla thead th:nth-child(5), .doc-tabla thead th:nth-child(6) { width: 92px; }
.doc-tabla .exe { display: inline-block; margin-left: 8px; padding: 0 4px; border: 1px solid var(--doc); border-radius: 2px; color: var(--doc); font-size: 12px; font-stretch: 80%; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }
.doc-tabla .sin-items td { padding: 20px 8px; color: #8a928e; text-align: center; }
.doc-tabla .linea-vacia { display: none; }
.doc-tabla .linea-vacia td { height: 30px; }

.doc-pie { display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 24px; align-items: start; margin-top: 16px; }
.doc-notas { display: flex; flex-direction: column; gap: 4px; }
.doc-notas .etq + p { margin-bottom: 8px !important; }
.doc-totales { width: 100%; border-collapse: collapse; }
.doc-totales th { padding: 4px 12px; color: #3e4441; font-weight: 500; text-align: left; }
.doc-totales td { padding: 4px 12px; text-align: right; white-space: nowrap; }
.doc-totales .t-total th, .doc-totales .t-total td { padding: 8px 12px; border: 2px solid var(--doc); color: #111412; font-size: 17px; font-weight: 700; }
.doc-totales .t-total th { border-right: 0; }
.doc-totales .t-total td { border-left: 0; }

.doc-firmas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 72px; }
.doc-firmas--blanco { margin-top: 56px; }
.doc-firmas > div { min-height: 48px; padding-top: 8px; border-top: 1px solid #4a514d; font-size: 13px; }
.doc-firmas p:first-child { font-weight: 600; }
.doc-firmas p + p { color: #3e4441; }
.firma-timbre { position: relative; }
.doc-firmas .timbre { /* el timbre de goma que marca el ejemplo, donde va el timbre */
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%) rotate(-6deg);
  margin: 0; padding: 4px 12px; border: 3px double var(--doc); border-radius: 4px; color: var(--doc);
  font-size: 22px; font-weight: 700; font-stretch: 80%; letter-spacing: .22em; line-height: 1.3; text-transform: uppercase;
  white-space: nowrap; opacity: .5; pointer-events: none;
}

/* Hoja angosta (celular): la misma información, apilada. Al imprimir vuelve a la hoja completa. */
@container (max-width: 520px) {
  .doc-cabeza { grid-template-columns: minmax(0, 1fr); }
  .recuadro { order: -1; min-width: 0; }
  .doc-lugar { text-align: left; }
  .doc-partes, .doc-cond { grid-template-columns: minmax(0, 1fr); }
  .doc-partes .dato { grid-template-columns: 76px minmax(0, 1fr); }
  .doc-tabla thead { display: none; }
  .doc-tabla tbody { display: block; border-top: 2px solid var(--doc); }
  .doc-tabla tr { display: grid; grid-template-columns: 24px auto auto minmax(0, 1fr) auto; grid-template-areas: "n desc desc desc desc" ". cant uni pu tot"; gap: 4px 8px; padding: 8px 0; border-bottom: 1px solid #e2e6e3; }
  .doc-tabla td { padding: 0; border: 0; }
  .doc-tabla .n { grid-area: n; width: auto; }
  .doc-tabla .desc { grid-area: desc; font-weight: 600; }
  .doc-tabla .cant { grid-area: cant; text-align: left; }
  .doc-tabla .uni { grid-area: uni; }
  .doc-tabla .pu { grid-area: pu; color: #3e4441; text-align: left; }
  .doc-tabla .pu::before { content: "× $"; }
  .doc-tabla .tot { grid-area: tot; font-weight: 600; }
  .doc-tabla .tot::before { content: "$"; }
  .doc-tabla .sin-items { display: block; }
  .doc-tabla .linea-vacia { display: none; }
  .doc-pie { grid-template-columns: minmax(0, 1fr); }
  .doc-firmas { grid-template-columns: minmax(0, 1fr); gap: 72px; margin-top: 72px; }
  .doc-firmas .timbre { font-size: 18px; }
}
/* En una columna la hoja va al mismo ancho que el formulario y la copia asoma solo por abajo. */
@media (max-width: 921px) {
  .pliego { margin-right: 0; }
  .pliego::before { inset: 8px 8px -8px 8px; }
  .herramientas { margin-right: 0; }
}
@media (max-width: 544px) {
  .hoja { padding: 24px 16px 32px 32px; aspect-ratio: auto; }
  .hoja::before { left: 10px; }
}

/* Celular: barra fija con el total y el salto entre formulario y hoja. */
.barra-total { display: none; }
@media (max-width: 921px) and (min-height: 421px) {
  .barra-total { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px var(--margen) calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); background: #fff; box-shadow: 0 -6px 20px -8px rgba(16, 24, 20, .3); }
  .barra-total p { display: flex; flex-direction: column; margin: 0; color: var(--tinta-2); font-size: 13px; line-height: 1.2; }
  .barra-total strong { color: var(--tinta); font-size: 22px; }
  body.con-herramienta { padding-bottom: 72px; }
}

/* ---------- Texto bajo la herramienta (formato de lectura) ---------- */
.contenido { padding: 40px 0 56px; }
.contenido--pagina { padding-top: 24px; }
.contenido .contenedor { display: grid; grid-template-columns: minmax(0, var(--lectura)) minmax(0, 1fr); gap: 32px 48px; align-items: start; }
.migas { margin: 0 0 8px; color: var(--tinta-3); font-size: 14px; }
.migas a { color: var(--tinta-2); }
.migas span { margin: 0 4px; }
.texto h1 { margin: 0 0 8px; font-size: clamp(26px, 1.4vw + 16px, 34px); line-height: 1.15; letter-spacing: -.012em; }
.entradilla { margin: 0 0 24px; color: var(--tinta-2); font-size: 18px; line-height: 1.45; }
.texto h2 { margin: 32px 0 8px; font-size: 24px; line-height: 1.2; letter-spacing: -.01em; }
.texto > h2:first-child { margin-top: 0; }
.texto p, .texto li { font-size: 17px; line-height: 1.6; }
.texto p { margin: 0 0 12px; }
.texto ul, .texto ol { margin: 0 0 16px; padding-left: 24px; }
.texto li { margin-bottom: 4px; }
.texto li::marker { color: var(--marca); font-weight: 700; }
.texto blockquote { margin: 0 0 12px; padding: 8px 16px; border-left: 4px solid var(--linea-2); background: var(--superficie); border-radius: 0 var(--radio) var(--radio) 0; }
.texto blockquote p { margin: 0; color: var(--tinta-2); font-size: 16px; }
.formula { margin: 12px 0 16px; padding: 16px 20px; border: 1px solid var(--linea); border-left: 4px solid var(--marca); border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra-caja); }
.formula p { margin: 0 0 4px; }
.formula p:last-child { margin: 0; }
.fuentes { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--linea); color: var(--tinta-2); }
.fuentes h2 { margin: 0 0 8px; font-size: 19px; }
.fuentes li, .fuentes p { font-size: 15px; }

.lateral { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.ficha { overflow: hidden; border: 1px solid var(--linea); border-radius: 8px; background: var(--superficie); box-shadow: var(--sombra-caja); }
.ficha h2 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--linea); font-size: 18px; }
.ficha h2 .ico { color: var(--marca); }
.ficha dl { margin: 0; }
.ficha dl > div { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 12px; padding: 12px 20px; border-top: 1px solid var(--linea); font-size: 15px; }
.ficha dl > div:first-child { border-top: 0; }
.ficha dt { color: var(--tinta-3); }
.ficha dd { margin: 0; font-weight: 600; }
.ficha ul { margin: 0; padding: 16px 20px 16px 40px; font-size: 15px; }
.ficha li { margin-bottom: 4px; }
.ficha-pie { margin: 0; padding: 12px 20px; border-top: 1px solid var(--linea); background: var(--fondo); color: var(--tinta-2); font-size: 14px; }
.pv { padding: 16px 20px; border: 1px solid var(--linea); border-left: 4px solid var(--marca); border-radius: 8px; background: var(--superficie); box-shadow: var(--sombra-caja); font-size: 15px; }
.pv p { margin: 0 0 8px; }
.pv-rol { color: var(--tinta-3); font-size: 13px; font-weight: 700; }
.pv-nombre { font-weight: 700; }
.pv-nombre span { display: block; color: var(--tinta-3); font-size: 14px; font-weight: 500; }
.pv-enlaces { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 !important; }
.texto .pv { margin-top: 32px; }
@media (max-width: 921px) {
  .contenido .contenedor { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; }
}
@media (max-width: 544px) { .contenido { padding: 32px 0 48px; } .contenido--pagina { padding-top: 16px; } .texto h2 { font-size: 22px; } .entradilla { font-size: 17px; } }

/* Contacto */
.contacto-form { display: flex; flex-direction: column; gap: 16px; margin: 0 0 16px; padding: 20px; box-shadow: var(--sombra-caja); border: 1px solid var(--linea); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contacto-acciones { display: flex; gap: 12px; }
.suggest-status { --suggest-error: var(--error); min-height: 24px; margin: 0; color: var(--tinta-2); font-size: 15px; }
.suggest-done { padding: 16px 20px; border-radius: 8px; background: var(--marca-suave); color: var(--marca-2); font-weight: 600; }

/* ---------- Pie ---------- */
.pie { padding: 24px 0 28px; background: var(--mesa-2); color: var(--mesa-texto-2); font-size: 15px; }
.pie .contenedor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.pie p { margin: 0; }
.pie strong { color: var(--mesa-texto); }
.pie nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.pie a { display: inline-block; padding: 8px 0; color: var(--mesa-texto); }
.pie a:hover { color: #fff; }

/* ---------- Impresión: solo la hoja ----------
   @page va con margen 0 (lo pone el JS con el tamaño del papel) para que el navegador no agregue fecha, título ni
   dirección; el margen lo da la hoja y se repite en cada página. */
@media print {
  html, body { background: #fff !important; }
  body { padding: 0 !important; font-size: 10.5pt; }
  .saltar, .cabecera, .barra-titulo, .contenido, .pie, .panel, .herramientas, .barra-total { display: none !important; }
  .mesa { padding: 0; background: none; box-shadow: none; }
  .contenedor { max-width: none; margin: 0; padding: 0; }
  .generador { display: block; }
  .vista { position: static; }
  .pliego { max-width: var(--ancho-papel, 215.9mm); margin: 0 auto; }
  .pliego::before, .hoja::before { display: none; }
  .hoja { aspect-ratio: auto; padding: 14mm 15mm; border-radius: 0; box-shadow: none; font-size: 10.5pt; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .recuadro { min-width: 62mm; max-width: 80mm; max-height: 40mm; padding: 3mm 4mm; border-width: .9mm; }
  .r-rut { font-size: 11pt; } .r-tipo { font-size: 12pt; } .r-num { font-size: 12pt; }
  /* Espacios algo más justos en papel: la orden de ejemplo, con referencia y leyenda, cabe en una carta. */
  .doc-lugar { margin: 12px 0 8px !important; }
  .doc-ref { padding: 4px 12px; }
  .doc-tabla, .doc-pie { margin-top: 12px; }
  .doc-firmas { margin-top: 60px; }
  .doc-leyenda { margin-top: 10px !important; font-size: 8pt; line-height: 1.2; }
  /* Con fondo de seguridad, el celeste cubre la hoja entera (si el documento ocupa una sola página). */
  .hoja[data-fondo] { min-height: calc(var(--alto-papel, 279.4mm) - 1mm); }
  .vacio, .doc-tabla .sin-items { display: none; }
  .doc-tabla .linea-vacia { display: table-row; }
  .doc-tabla thead { display: table-header-group; }
  .doc-tabla tr, .doc-pie, .doc-firmas, .doc-cabeza, .doc-partes, .doc-cond { break-inside: avoid; }
  /* Formato en blanco: mide exactamente un papel; los renglones llenan lo que dejan el membrete y las firmas
     (los que no caben se cortan), así las firmas nunca pasan a otra hoja. */
  .hoja.en-blanco { display: flex; flex-direction: column; height: calc(var(--alto-papel, 279.4mm) - 1mm); overflow: hidden; }
  .hoja.en-blanco > * { flex: none; }
  .hoja.en-blanco > .doc-renglones { flex: 1 1 0; min-height: 0; overflow: hidden; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}