/* ============================================================
   Imprenta Norte — página pública y portal de clientes
   Identidad propia, separada del sistema interno.
   ============================================================ */

:root {
  --papel:    #f7f7f4;   /* blanco papel, apenas cálido */
  --papel-2:  #ffffff;
  --tinta:    #15171b;   /* negro tinta, no negro puro */
  --tinta-2:  #3a3f45;
  --gris:     #6e7378;   /* neutro con leve sesgo frío */
  --linea:    #dedcd6;
  --linea-2:  #ecebe6;

  --cian:     #0093ce;
  --magenta:  #d6006f;
  --amarillo: #ffce00;

  --ok:       #0a7d4b;
  --ok-luz:   #eaf6f0;
  --alerta:   #b4530a;
  --alerta-luz:#fdf3e9;
  --mal:      #c1272d;
  --mal-luz:  #fdeeee;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Courier New", monospace;

  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---- tipografía ---- */
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.035em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: .98; }
h2 { font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.1; }
h3 { font-size: 1.05rem; letter-spacing: -.015em; }
p { margin: 0 0 1rem; }
a { color: var(--cian); text-underline-offset: 3px; }

.rotulo {
  font-family: var(--mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--gris);
  font-weight: 500;
}
.dato { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tenue { color: var(--gris); }
.chico { font-size: .82rem; }

/* ---- barra de color de proceso: la firma visual ---- */
.tira { display: flex; height: 5px; }
.tira > i { flex: 1; }
.tira > i:nth-child(1) { background: var(--cian); }
.tira > i:nth-child(2) { background: var(--magenta); }
.tira > i:nth-child(3) { background: var(--amarillo); }
.tira > i:nth-child(4) { background: var(--tinta); }
.tira--fina { height: 3px; }

/* ============================ Estructura ============================ */

.envoltorio { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.barra {
  border-bottom: 1px solid var(--linea);
  background: var(--papel);
  position: sticky; top: 0; z-index: 30;
}
.barra__fila {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 0;
}
.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.marca__cuadro {
  width: 30px; height: 30px; border-radius: 3px;
  background: var(--tinta); position: relative; flex-shrink: 0;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  overflow: hidden;
}
.marca__cuadro i:nth-child(1) { background: var(--cian); }
.marca__cuadro i:nth-child(2) { background: var(--magenta); }
.marca__cuadro i:nth-child(3) { background: var(--amarillo); }
.marca__cuadro i:nth-child(4) { background: var(--tinta); }
.marca__txt strong { display: block; font-weight: 800; letter-spacing: -.03em; font-size: 1.05rem; line-height: 1.1; }
.marca__txt span { font-family: var(--mono); font-size: .65rem; letter-spacing: .16em; color: var(--gris); text-transform: uppercase; }
.barra__der { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* ============================ Hero ============================ */

.hero { padding: clamp(48px, 8vw, 92px) 0 clamp(40px, 6vw, 72px); }
.hero__grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 6vw, 72px);
  align-items: start;
}
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }

.hero__eyebrow { margin-bottom: 20px; }
.hero h1 { margin-bottom: 22px; }
.hero h1 em { font-style: normal; color: var(--cian); }
.hero__bajada { font-size: 1.08rem; color: var(--tinta-2); max-width: 46ch; }

.especialidades { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.especialidad {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .04em;
  padding: 5px 11px; border: 1px solid var(--linea); border-radius: 2px;
  background: var(--papel-2); color: var(--tinta-2);
}

/* ---- tarjeta de acceso ---- */
.acceso {
  background: var(--papel-2);
  border: 1px solid var(--linea);
  border-radius: 4px;
  overflow: hidden;
}
.acceso__cuerpo { padding: 26px; }
.acceso h2 { font-size: 1.25rem; margin-bottom: 6px; }

/* ============================ Formularios ============================ */

.campo { margin-bottom: 16px; }
.campo > label {
  display: block; font-family: var(--mono); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--gris);
  margin-bottom: 6px; font-weight: 700;
}
.campo__ayuda { font-size: .78rem; color: var(--gris); margin-top: 6px; line-height: 1.45; }
.campo__ayuda:empty { display: none; margin-top: 0; }
.campo__ayuda--error { color: var(--mal); }
.campo__ayuda--ok { color: var(--ok); }

input[type=text], input[type=password], input[type=number], input[type=date], select, textarea {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--linea); border-radius: 3px;
  background: var(--papel-2); color: var(--tinta);
  font-family: inherit; font-size: .95rem;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 0; border-color: var(--cian);
  box-shadow: 0 0 0 3px rgba(0,147,206,.16);
}
button:focus-visible, a:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }
textarea { resize: vertical; min-height: 84px; }
select { cursor: pointer; }
input[readonly] { background: var(--papel); color: var(--tinta-2); cursor: default; }
input[type=text]:disabled, input[type=number]:disabled, select:disabled {
  background: var(--papel); color: var(--gris); cursor: not-allowed; opacity: .7;
}
input[type=file] {
  width: 100%; font-family: var(--mono); font-size: .8rem;
  padding: 11px; border: 1px dashed var(--linea); border-radius: 3px;
  background: var(--papel); cursor: pointer;
}
.fila { display: grid; gap: 16px; }
.fila--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .fila--2 { grid-template-columns: 1fr; } }

.medidaCorte { display: flex; align-items: center; gap: 8px; }
.medidaCorte input { flex: 1; min-width: 0; }
.medidaCorte__x { color: var(--gris); font-family: var(--mono); flex-shrink: 0; }

/* ---- botones "Medida de corte": 1/2, 1/3, 1/4 o Personalizado — ver
   Portal.elegirDisposicion. Personalizado despliega los campos de siempre. ---- */
.dispBotones { display: flex; gap: 8px; }
.dispBoton {
  flex: 1 1 auto; padding: 11px 15px; text-align: center;
  border: 1px solid var(--linea); border-radius: 3px; background: var(--papel-2);
  color: var(--tinta-2); font-family: inherit; font-size: .95rem; line-height: normal; cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.dispBoton:hover { border-color: var(--gris); }
.dispBoton--activo { border-color: var(--cian); background: rgba(0,147,206,.07); color: var(--tinta); font-weight: 600; }
#bloqueCortePersonalizado { margin-top: 10px; }

/* ---- vista previa de corte: mismo motor que la calculadora interna ---- */
.vistaCorte {
  border: 1px solid var(--linea); border-radius: 3px; background: var(--papel-2); overflow: hidden;
}
.vistaCorte__canvas { display: block; width: 100%; height: 260px; }
.vistaCorte__datos {
  padding: 10px 14px; font-size: .8rem; color: var(--tinta-2);
  border-top: 1px solid var(--linea-2);
}

/* ---- pestañas: modo de armado del pedido (una sola opción a la vez) ----
   Siguen siendo <input type="radio"> del mismo grupo por debajo —
   ver elegirModo/chkModoExperto/chkModoAsistido en landing.js—, sólo que
   acá se les da forma de pestaña de navegador en vez de casillero: la
   pestaña activa se "funde" con el panel__cuerpo de abajo (mismo fondo,
   y su borde inferior tapa el de la tira .pestanias en ese tramo), las
   demás quedan con el fondo gris de la tira, como pestañas de fondo. */
.pestanias {
  display: flex; gap: 4px; padding: 10px 20px 0;
  border-bottom: 1px solid var(--linea); background: var(--papel);
}
.pestania {
  flex: 0 0 auto; position: relative;
  display: flex; align-items: center; white-space: nowrap;
  padding: 8px 16px; margin-bottom: -1px; cursor: pointer;
  border: 1px solid var(--linea); border-radius: 6px 6px 0 0;
  background: var(--papel); color: var(--gris); font-size: .82rem; line-height: 1.35;
  transition: background .12s, color .12s, border-color .12s;
}
.pestania:hover { color: var(--tinta-2); }
/* El radio real queda invisible pero clickeable y enfocable (tabulable,
   navegable con las flechas dentro del grupo): lo que se ve es la
   pestaña entera, no un círculo. El foco por teclado se marca en la
   pestaña, no en el radio invisible. */
.pestania input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.pestania:has(input:focus-visible) { outline: 2px solid var(--cian); outline-offset: 2px; }
.pestania--activa {
  background: var(--papel-2); border-color: var(--linea); border-bottom-color: var(--papel-2);
  color: var(--tinta); font-weight: 600;
}

/* ---- colores CMYK a usar, cuando el tipo de impresión es de menos de 4 ---- */
.coloresCMYK { display: flex; flex-wrap: wrap; gap: 14px; }
.coloresCMYK__op {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: .88rem; color: var(--tinta-2);
}
.coloresCMYK__op input { width: 16px; height: 16px; accent-color: var(--cian); }
.coloresCMYK__op:has(input:disabled) { color: var(--gris); opacity: .5; cursor: not-allowed; }

/* ---- color del papel por copia de talonario (Formularios) — una
   ficha por copia que reparte el ancho completo en partes iguales
   (grid-template-columns se arma en JS según la cantidad — ver
   actualizarColoresTalonarioFormulario: 1 copia = 100%, 2 = 50% y 50%,
   3 = 33% cada una...), no fichas de ancho fijo apretadas una al lado
   de la otra. En mobile no alcanza el ancho para reparto parejo con
   varias copias, así que se fuerza a 2 columnas sin importar cuántas
   sean (con !important porque si no el inline-style de JS gana). */
.coloresPapel { display: grid; grid-template-columns: 1fr; gap: 18px 16px; }
.coloresPapel__item { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.coloresPapel__etiqueta {
  font-size: .74rem; color: var(--gris); text-transform: uppercase; letter-spacing: .05em;
}
.coloresPapel__select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 4px;
  background: var(--papel-2); font-size: .88rem; font-family: inherit; color: var(--tinta);
}
.coloresPapel__select:disabled { color: var(--gris); background: var(--papel); }
.coloresPapel__mini {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: .74rem; color: var(--tinta-2);
}
.coloresPapel__mini input { width: 14px; height: 14px; accent-color: var(--cian); }
@media (max-width: 700px) {
  .coloresPapel { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---- ubicación del troquelado/emblocado (Formularios): el cliente
   elige con un click entre representaciones visuales de la hoja en vez
   de un desplegable de texto — ver
   Portal.elegirUbicacionTroqueladoFormulario. La hoja se dibuja sólo con
   CSS (un rectángulo con proporción vertical u horizontal, unas líneas
   adentro simulando el comprobante impreso para que no quede en blanco)
   y la línea punteada marca dónde va el troquel/emblocado. "Personalizado"
   (sólo para troquelado, no emblocado — ver actualizarTerminacionFormulario)
   no tiene un borde fijo: se marca con un recuadro punteado con "?" y el
   cliente lo describe en un campo de texto aparte. */
.ubicacionTroquel { display: flex; gap: 14px; flex-wrap: wrap; }
.ubicacionTroquel__opcion {
  flex: 1 1 170px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 14px; border: 1px solid var(--linea); border-radius: 3px; background: var(--papel-2);
  font-family: inherit; cursor: pointer; transition: border-color .12s, background .12s;
}
.ubicacionTroquel__opcion:hover { border-color: var(--gris); }
.ubicacionTroquel__opcion--activa { border-color: var(--cian); background: rgba(0,147,206,.07); }
.ubicacionTroquel__hoja {
  position: relative; background: var(--papel-2); border: 1px solid var(--linea-2);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.ubicacionTroquel__hoja--vertical { width: 62px; height: 86px; }
.ubicacionTroquel__hoja--horizontal { width: 86px; height: 62px; }
.ubicacionTroquel__linea--cabecera {
  position: absolute; top: 9px; left: 6px; right: 6px; border-top: 2px dashed var(--magenta);
}
.ubicacionTroquel__linea--lateral {
  position: absolute; top: 6px; bottom: 6px; left: 9px; border-left: 2px dashed var(--magenta);
}
.ubicacionTroquel__texto { font-size: .82rem; color: var(--tinta-2); text-align: center; }

/* Simulación del comprobante impreso adentro de la hoja: un renglón más
   marcado arriba (título) y unas líneas de texto abajo. Deja margen
   arriba para no pisar la línea punteada de cabecera; la variante
   --lateral deja el margen a la izquierda en vez de arriba. */
.ubicacionTroquel__comprobante {
  position: absolute; inset: 16px 7px 7px; display: flex; flex-direction: column; gap: 5px;
}
.ubicacionTroquel__comprobante--lateral { inset: 7px 7px 7px 16px; }
.ubicacionTroquel__linea-txt { height: 3px; border-radius: 1px; background: var(--linea); width: 100%; }
.ubicacionTroquel__linea-txt--ancha { height: 5px; background: var(--gris); opacity: .55; margin-bottom: 2px; }
.ubicacionTroquel__linea-txt--corta { width: 55%; }
.ubicacionTroquel__marca {
  position: absolute; bottom: 10px; right: 5px; transform: rotate(-8deg);
  width: 24px; height: 16px; display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--magenta); border-radius: 3px; background: rgba(255,255,255,.75);
  font-size: .7rem; font-weight: 700; color: var(--magenta); line-height: 1;
}

/* Variante para emblocado: la línea va pegada al borde real de la hoja
   (el propio border del recuadro se vuelve punteado en ese lado) en vez
   de un trazo con margen adentro como en troquel — así se ve el pliegue/
   abrochado contra el borde del papel. Al no haber un trazo interno que
   ocupar, el contenido del comprobante no necesita el margen extra de
   16px que sí llevan las variantes de troquel. */
.ubicacionTroquel__hoja--bordeCabecera { border-top: 2px dashed var(--magenta); }
.ubicacionTroquel__hoja--bordeLateral { border-left: 2px dashed var(--magenta); }
.ubicacionTroquel__comprobante--bordeCabecera { inset: 9px 7px 7px; }
.ubicacionTroquel__comprobante--bordeLateral { inset: 7px 7px 7px 9px; }

/* ---- casilla suelta tipo "¿va abrochado?" (Formularios) ---- */
.campoCheck {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: .92rem; color: var(--tinta);
}
.campoCheck input { width: 16px; height: 16px; accent-color: var(--cian); cursor: pointer; }

/* ---- pantonera: el cliente elige el Pantone en vez de escribirlo ---- */
.pantonera {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px;
  margin-bottom: 4px;
  max-height: 320px; overflow-y: auto; padding: 3px;
  border: 1px solid var(--linea-2); border-radius: 3px;
}
.pantonera__item {
  display: flex; flex-direction: column; align-items: stretch;
  border: 1px solid var(--linea); border-radius: 3px; background: var(--papel-2);
  padding: 0; overflow: hidden; cursor: pointer; font-family: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.pantonera__item:hover { border-color: var(--gris); }
.pantonera__color { display: block; height: 34px; }
.pantonera__cod {
  font-family: var(--mono); font-size: .68rem; color: var(--tinta-2);
  padding: 5px 6px; text-align: center; letter-spacing: -.01em;
}
.pantonera__item--activo {
  border-color: var(--cian); box-shadow: 0 0 0 2px rgba(0,147,206,.22);
}
.pantonera__item--activo .pantonera__cod { color: var(--tinta); font-weight: 700; }
.pantonera__item:disabled {
  opacity: .35; cursor: not-allowed; pointer-events: none;
}
.pantonera__item:disabled.pantonera__item--activo { opacity: 1; pointer-events: auto; }

.pantonera__cab { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.pantonera__cab span { flex: 1; }
.pantonera__cerrar {
  flex-shrink: 0; width: 30px; height: 30px; border: 1px solid var(--linea); border-radius: 3px;
  background: var(--papel-2); color: var(--gris); cursor: pointer; font-size: .9rem;
  transition: border-color .12s, color .12s, background .12s;
}
.pantonera__cerrar:hover { border-color: var(--mal); color: var(--mal); background: var(--mal-luz); }

/* ---- buscador de pantone: por defecto se escribe el código ---- */
.pantoneBuscador { position: relative; }
.pantoneSugerencias {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 10;
  background: var(--papel-2); border: 1px solid var(--linea); border-radius: 3px;
  box-shadow: 0 8px 22px rgba(21,23,27,.1); max-height: 280px; overflow-y: auto;
}
.pantoneSugerencias__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: 0; border-bottom: 1px solid var(--linea-2);
  background: var(--papel-2); cursor: pointer; font-family: var(--mono); font-size: .84rem;
  color: var(--tinta); text-align: left;
}
.pantoneSugerencias__item:last-child { border-bottom: 0; }
.pantoneSugerencias__item:hover { background: var(--papel); }
.pantoneSugerencias__item:disabled { opacity: .4; cursor: not-allowed; background: var(--papel-2); }
.pantoneSugerencias__color { width: 20px; height: 20px; border-radius: 3px; flex-shrink: 0; }
.pantoneSugerencias__vacio { padding: 12px; font-size: .8rem; color: var(--gris); }

.enlacePantonera {
  display: inline-block; margin-top: 18px;
  font-size: .82rem; color: var(--cian); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color .12s;
}
.enlacePantonera:hover { border-bottom-color: var(--cian); }

/* ---- frente / dorso: dos módulos de color independientes cuando el
   tipo de impresión imprime los dos lados ---- */
.ladoColor {
  border: 1px solid var(--linea); border-radius: 4px;
  padding: 16px; background: var(--papel-2);
}
.ladoColor + .ladoColor { margin-top: 20px; }
.ladoColor__titulo { margin-bottom: 12px; }
.ladoColor .campo:last-child { margin-bottom: 0; }

#colorUnico, #colorFrenteDorso { margin-bottom: 16px; }

/* ---- modo asistido: todas las secciones a la vista, una abajo de la
   otra (igual que "Sé armarlo") — cada una suma su propia intro/
   explicación para guiar sin necesidad de ir clickeando "Siguiente".
   Una línea sutil entre secciones (no antes de la primera) para que se
   note dónde termina una y arranca la otra, sin invadir tanto el
   espacio como un separador grueso. Sólo en "Necesito ayuda"
   (#formPedido.modo-asistido, ver elegirModo): "Sé armarlo" ya se
   distingue por sus propios campos crudos y no la necesita. Angosta
   (88% del ancho, centrada) y con degradé en las puntas en vez de un
   borde sólido de punta a punta, para que se sienta más un respiro que
   una línea divisoria dura. */
#formPedido.modo-asistido #pasosPedido > .paso + .paso { margin-top: 26px; padding-top: 26px; position: relative; }
#formPedido.modo-asistido #pasosPedido > .paso + .paso::before {
  content: ''; position: absolute; top: 0; left: 6%; width: 88%; height: 1px;
  background: linear-gradient(to right, transparent, var(--linea-2) 25%, var(--linea-2) 75%, transparent);
}
.paso__intro { margin-bottom: 18px; }
.paso__numero {
  font-size: .74rem; color: var(--gris); text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 4px;
}
.paso__intro h3 { margin-bottom: 6px; }
.paso__intro p { margin-bottom: 0; }
.paso__subtitulo { margin: 22px 0 14px; }

/* ---- modo asistido: resultado que calculó Portal.calcularAsistido — es
   una confirmación, no una lista para elegir: qué pliego usar lo decide la
   imprenta, no el cliente (ver calcularAsistido/aplicarOpcionCalculada) ---- */
.opcionPapel {
  position: relative;
  border: 1px solid var(--linea); border-radius: 4px;
  padding: 14px 16px; background: var(--papel-2);
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
}
.opcionPapel--recomendada { border-color: var(--cian); box-shadow: 0 0 0 2px rgba(0,147,206,.14); }
.opcionPapel__nombre { font-weight: 700; font-size: .95rem; }
.opcionPapel__datos { font-size: .8rem; color: var(--tinta-2); }
.opcionPapel__ejemplares { display: flex; flex-direction: column; gap: 2px; margin: 2px 0; }

/* ---- dibujo de cómo quedan los diseños dentro de un pliego, uno por
   tirada (ver Portal.dibujarPostura) — misma idea que .vistaCorte del modo
   experto, pero coloreando cada pieza según a qué diseño pertenece ---- */
.opcionPapel__dibujo {
  width: 100%; border: 1px solid var(--linea); border-radius: 3px;
  background: var(--papel-2); overflow: hidden; margin: 2px 0 4px;
}
.opcionPapel__canvas { display: block; width: 100%; height: 230px; }
.opcionPapel__color {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  margin-right: 5px; vertical-align: middle; flex-shrink: 0;
}

/* ---- una "postura" combina varios diseños en la misma plancha; si hace
   falta más de una (no entraron todos juntos), cada una se separa así ---- */
.opcionPapel__postura { width: 100%; border-top: 1px dashed var(--linea); padding-top: 8px; margin-top: 6px; }
.opcionPapel__postura:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.opcionPapel__posturaTitulo { font-weight: 600; font-size: .8rem; color: var(--tinta); margin-bottom: 2px; }

/* ---- modo asistido: uno o varios "ejemplares" (piezas distintas en el
   mismo papel) que arma Portal.agregarEjemplar/quitarEjemplar ---- */
#listaEjemplares { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.ejemplar {
  position: relative;
  border: 1px solid var(--linea); border-radius: 4px;
  padding: 16px; background: var(--papel-2);
}
.ejemplar .campo:last-child { margin-bottom: 0; }
.ejemplarCheck {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: .85rem; color: var(--tinta-2); margin: -6px 0 14px;
}
.ejemplarCheck input { width: 16px; height: 16px; accent-color: var(--cian); flex-shrink: 0; margin: 0; }
.ejemplar__quitar {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px; border: 1px solid var(--linea); border-radius: 50%;
  background: var(--papel-2); color: var(--gris); cursor: pointer; font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .12s, color .12s, background .12s;
}
.ejemplar__quitar:hover { border-color: var(--mal); color: var(--mal); background: var(--mal-luz); }

/* ---- chips: pantones ya elegidos, con opción de quitar ---- */
#pantoneSeleccionados { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
#pantoneSeleccionados:empty { display: none; margin-bottom: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--linea); border-radius: 20px; background: var(--papel-2);
  padding: 4px 6px 4px 4px; font-family: var(--mono); font-size: .76rem; color: var(--tinta-2);
}
.chip__color { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }
.chip button {
  border: 0; background: var(--linea-2); color: var(--tinta-2); cursor: pointer;
  width: 17px; height: 17px; border-radius: 50%; font-size: .68rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .12s, color .12s;
}
.chip button:hover { background: var(--mal); color: #fff; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 3px; border: 1px solid var(--tinta);
  background: var(--tinta); color: var(--papel);
  font-family: inherit; font-size: .92rem; font-weight: 600;
  cursor: pointer; transition: background .14s, border-color .14s, color .14s;
}
.boton:hover { background: var(--cian); border-color: var(--cian); }
.boton--fantasma { background: none; color: var(--tinta); }
.boton--fantasma:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.boton--ancho { width: 100%; }
.boton--ch { padding: 7px 13px; font-size: .82rem; }
.boton:disabled { opacity: .4; cursor: not-allowed; }
.boton:disabled:hover { background: var(--tinta); border-color: var(--tinta); }

/* variante para eliminar — sólo aparece sobre pedidos Pendiente, ver
   listaPedidos/detallePedidoHtml/eliminarPedido. Siempre en modo "hueco"
   (fondo vacío), tenga o no combinada .boton--fantasma, para no terminar
   con texto rojo sobre el fondo oscuro sólido de .boton. */
.boton--peligro { background: none; border-color: var(--mal); color: var(--mal); }
.boton--peligro:hover { background: var(--mal); border-color: var(--mal); color: var(--papel-2); }

/* ============================ Mensajes ============================ */

.msj {
  display: flex; gap: 10px; padding: 12px 14px; border-radius: 3px;
  font-size: .88rem; line-height: 1.5; border: 1px solid; margin-bottom: 16px;
}
.msj--mal    { background: var(--mal-luz);    border-color: #f2c9c9; color: #8f1d22; }
.msj--ok     { background: var(--ok-luz);     border-color: #bfe3d2; color: #06603a; }
.msj--alerta { background: var(--alerta-luz); border-color: #f0d5b6; color: #8a3f08; }
.msj--info   { background: #eaf5fb;           border-color: #c3e2f1; color: #0a5c80; }
.msj b { font-weight: 700; }

/* ---- Notificaciones (toast), arriba a la derecha — ver #notificaciones
   en landing.html y Portal.mostrarMensaje. Mismos colores que .msj de
   arriba (son la misma idea, sólo que temporal y flotante en vez de fija
   arriba de todo). El contenedor no bloquea clics (pointer-events:none)
   para no taparle nada al cliente; cada notificación sí los recibe, para
   poder cerrarla a mano. */
.notificaciones {
  position: fixed; top: 16px; right: 16px; z-index: 300;
  display: flex; flex-direction: column; gap: 10px;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}
.notificacion {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px; border-radius: 4px; border: 1px solid;
  font-size: .88rem; line-height: 1.5;
  box-shadow: 0 8px 24px rgba(21,23,27,.14);
  pointer-events: auto;
  animation: notificacionEntra .22s ease-out;
}
.notificacion--saliendo { animation: notificacionSale .18s ease-in forwards; }
.notificacion b { font-weight: 700; }
.notificacion__texto { flex: 1; }
.notificacion__cerrar {
  background: none; border: none; cursor: pointer; flex-shrink: 0;
  font-size: 1rem; line-height: 1; color: inherit; opacity: .55; padding: 0;
}
.notificacion__cerrar:hover { opacity: 1; }
.notificacion--mal    { background: var(--mal-luz);    border-color: #f2c9c9; color: #8f1d22; }
.notificacion--ok     { background: var(--ok-luz);     border-color: #bfe3d2; color: #06603a; }
.notificacion--alerta { background: var(--alerta-luz); border-color: #f0d5b6; color: #8a3f08; }
.notificacion--info   { background: #eaf5fb;           border-color: #c3e2f1; color: #0a5c80; }

@keyframes notificacionEntra {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes notificacionSale {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(24px); }
}
@media (max-width: 480px) {
  .notificaciones { left: 16px; right: 16px; width: auto; }
}

/* ============================ Franja de datos ============================ */

.franja { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); background: var(--papel-2); }
.franja__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--linea-2);
}
@media (max-width: 800px) { .franja__grid { grid-template-columns: repeat(2, 1fr); } }
.franja__celda { background: var(--papel-2); padding: 22px 20px; }
.franja__celda strong { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.franja__celda span { font-size: .82rem; color: var(--gris); }

/* ============================ Sub-navbar del portal ============================ */

/* Franja chica y discreta pegada justo debajo de la línea del header
   (position: sticky, así que ésta se le suma abajo). Mismo fondo que el
   resto de la página. Cada botón cambia de pantalla por DOM directo, sin
   rutas reales. */
.subnav {
  background: var(--papel); border-bottom: 1px solid var(--linea);
  position: sticky; top: 77px; z-index: 20;
}
.subnav__fila { display: flex; justify-content: center; gap: 36px; padding: 12px 0; }
.subnav__link {
  background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--gris); padding: 6px 2px;
  transition: color .15s ease;
}
.subnav__link:hover { color: var(--tinta-2); }
.subnav__link--activo { color: var(--tinta); font-weight: 700; }

/* ============================ Portal ============================ */

.portal { padding: 40px 0 72px; }

/* Una sola columna centrada: lo primero que se ve es "Nuevo pedido". "Tus
   pedidos" queda como panel aparte, cerrado hasta que se pide desde el
   sub-navbar de arriba. */
.portal__grid { display: flex; flex-direction: column; gap: 20px; max-width: 980px; margin: 0 auto; }

.panel {
  background: var(--papel-2); border: 1px solid var(--linea);
  border-radius: 4px; overflow: hidden;
}
.panel__cab {
  padding: 16px 20px; border-bottom: 1px solid var(--linea);
  display: flex; align-items: center; gap: 12px;
}
.panel__cab h2 { font-size: 1.1rem; flex: 1; }
.panel__cuerpo { padding: 20px; }

/* Mismo ancho centrado que .portal__grid, para que el saludo quede alineado
   con el panel de abajo en vez de pegado al borde izquierdo. */
.saludo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; max-width: 980px; margin: 0 auto 26px; }
.portal .msj { max-width: 980px; margin-left: auto; margin-right: auto; }
.saludo h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }

/* lista de pedidos */
.pedidosAviso { padding: 12px 20px; border-bottom: 1px solid var(--linea-2); line-height: 1.5; }

.pedido {
  padding: 14px 20px; border-bottom: 1px solid var(--linea-2);
}
.pedido:last-child { border-bottom: 0; }
.pedido__cab { display: flex; align-items: baseline; gap: 10px; }
.pedido__cab strong { flex: 1; font-size: .95rem; }
.pedido__meta { font-size: .8rem; color: var(--gris); margin-top: 4px; }
.pedido__acciones { margin-top: 10px; display: flex; gap: 8px; }

.estado {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .1em; padding: 3px 8px; border-radius: 2px; white-space: nowrap;
}
.estado--pendiente { background: var(--alerta-luz); color: var(--alerta); }
.estado--aceptada  { background: var(--ok-luz);     color: var(--ok); }
.estado--rechazada { background: var(--mal-luz);    color: var(--mal); }

.vacio { padding: 34px 20px; text-align: center; color: var(--gris); font-size: .88rem; }

/* archivos elegidos */
.archivos { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.archivo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: .78rem;
  padding: 7px 10px; background: var(--papel); border: 1px solid var(--linea-2); border-radius: 2px;
}
.archivo span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archivos__error {
  margin-top: 8px; padding: 8px 10px; border-radius: 2px;
  background: var(--mal-luz); border: 1px solid #f2c9c9; color: #8f1d22;
  font-size: .78rem; line-height: 1.5;
}

/* ---- "Ver detalle": todo el pedido tal como se cargó, de sólo lectura —
   ver Portal.verDetallePedido/detallePedidoHtml. Se cierra con la ✕ o
   haciendo clic afuera: no hay nada que se pueda perder, no es una ventana
   donde el cliente esté escribiendo (a diferencia de otras del sistema). ---- */
.modalFondo {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(21,23,27,.5);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto;
}
.modalDetalle {
  width: 100%; max-width: 640px; background: var(--papel-2);
  border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

/* ---- confirmación propia ("¿eliminar este pedido?"), en vez del confirm()
   nativo del navegador — ver Portal.pedirConfirmacion. Se apila arriba del
   modal de detalle si hace falta (z-index más alto), centrada en vez de
   pegada arriba: es chica, no hay nada que scrollear. ---- */
.modalFondo--confirmar { z-index: 101; align-items: center; }
.modalConfirmar {
  width: 100%; max-width: 400px; background: var(--papel-2);
  border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: 22px;
}
.modalConfirmar h3 { margin-bottom: 10px; }
.modalConfirmar__acciones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

.modalDetalle__cab {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; background: var(--papel-2); border-radius: 4px 4px 0 0;
}
.modalDetalle__cab h2 { font-size: 1.1rem; flex: 1; }
.modalDetalle__cerrar {
  border: 1px solid var(--linea); border-radius: 3px; background: none;
  width: 32px; height: 32px; font-size: 1rem; line-height: 1; cursor: pointer; color: var(--tinta-2);
}
.modalDetalle__cerrar:hover { background: var(--papel); border-color: var(--gris); }
.modalDetalle__cuerpo { padding: 20px 22px 26px; }

.detalleCab { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.detalleCab h3 { flex: 1; }

.detalleGrupo { margin-top: 20px; }
.detalleGrupo__titulo {
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--gris); margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--linea-2);
}
.detalleFila { display: grid; grid-template-columns: 40% 1fr; gap: 10px; padding: 5px 0; font-size: .88rem; }
.detalleFila__etiqueta { color: var(--gris); }
.detalleFila__valor { color: var(--tinta); }
@media (max-width: 480px) { .detalleFila { grid-template-columns: 1fr; gap: 2px; } }

.detalleAcciones { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linea); }

/* ---- "Revisá tu pedido antes de enviarlo": el mismo cuerpo que el detalle
   —a propósito, para que el cliente reconozca después lo que confirmó acá—
   con las acciones siempre visibles al pie. Ver Portal.revisarPedido.

   A diferencia del detalle, la ventana entera entra en pantalla y lo que
   scrollea es el cuerpo: así "Confirmar y enviar" está siempre a la vista,
   por largo que sea el resumen. Es la única ventana del portal donde el
   botón principal decide algo que no se puede deshacer.

   Tampoco se cierra haciendo clic afuera (ver CLAUDE.md): atrás quedó un
   formulario largo lleno de datos y un clic distraído no puede dar la
   sensación de haberlo perdido. ---- */
.modalFondo--revisar { z-index: 102; overflow: hidden; }
.modalDetalle--revisar {
  max-width: 620px;
  display: flex;
  flex-direction: column;
  /* el 80 son los 40px de padding del overlay, arriba y abajo. dvh y no vh:
     en el celular la barra del navegador se recoge al scrollear y con vh la
     ventana quedaría más alta que la pantalla */
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);
}
.modalDetalle--revisar .modalDetalle__cuerpo { flex: 1 1 auto; overflow-y: auto; }

.modalRevisar__pie {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 22px;
  background: var(--papel-2);
  border-top: 1px solid var(--linea);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 -10px 20px -14px rgba(21,23,27,.25);
}
.modalRevisar__botones { display: flex; gap: 10px; margin-left: auto; }

.modalRevisar__intro {
  margin: 12px 0 0; padding: 10px 13px;
  background: var(--papel);
  border-left: 2px solid var(--cian);
  border-radius: 0 2px 2px 0;
  font-size: .84rem; line-height: 1.55; color: var(--tinta-2);
}

/* Todavía no existe como pedido, así que no le corresponde ninguno de los
   estados reales (Pendiente / Aceptada / Rechazada): gris neutro, para que
   no se confunda con uno ya enviado. */
.estado--borrador { background: var(--linea-2); color: var(--tinta-2); }

@media (max-width: 520px) {
  .modalFondo--revisar { padding: 16px 12px; }
  .modalDetalle--revisar { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
  .modalRevisar__pie { padding: 12px 16px; }
  /* Los dos botones enteros no entran en una fila sin partir el texto. En
     columna quedan además con área de toque cómoda; el principal arriba,
     donde el pulgar no llega de casualidad. */
  .modalRevisar__aviso { display: none; }
  .modalRevisar__botones { width: 100%; margin-left: 0; flex-direction: column-reverse; }
}

/* ============================ Pie ============================ */

.pie { border-top: 1px solid var(--linea); padding: 30px 0 40px; margin-top: 40px; }
.pie__fila { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; font-size: .82rem; color: var(--gris); }
.pie__fila > :last-child { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================ En el celular ============================

   Dos cosas que sólo se rompen en pantalla angosta. Igual que en el
   sistema, TODO acá adentro vive en un @media: en escritorio no cambia
   un píxel.
   --------------------------------------------------------------------- */
@media (max-width: 700px) {

  /* El encabezado quedaba PEGADO al borde de la pantalla: .barra__fila
     pisa el `padding: 0 24px` del .envoltorio con su `16px 0`, y en una
     pantalla ancha no se nota porque el contenedor está centrado y le
     sobra aire a los costados. En 375px, el logo y el botón "Salir"
     terminaban tocando el vidrio. */
  .barra__fila { padding: 14px 16px; }

  /* Las tres solapas del pedido (Sé armarlo · Necesito ayuda ·
     Formularios) no entran en una fila: `flex: 0 0 auto` + `nowrap` las
     deja salirse de la tarjeta y "Formularios" quedaba cortada al medio.
     Que pasen a dos renglones es mejor que esconder una opción. */
  .pestanias { flex-wrap: wrap; padding-left: 12px; padding-right: 12px; }

  /* "OFFSET · TROQUELADO" no entra al lado del logo y del link, y se
     partía en dos renglones: el encabezado quedaba de 99px —casi un
     octavo de la pantalla del teléfono— con el cuadrado CMYK descolgado
     al costado. La marca se sostiene con el cuadrado y el nombre; el
     subtítulo es decoración y en escritorio sigue estando. */
  .marca__txt span { display: none; }

  /* LA FRANJA DE NAVEGACIÓN DEL PORTAL, despegada del encabezado.
     `.subnav` es sticky con `top: 77px`, que es lo que mide el
     encabezado EN ESCRITORIO. Acá mide 60, así que al desplazarse la
     franja se clavaba 17px más abajo y por ese hueco se veía pasar el
     contenido: parecía una barra suelta flotando.

     Va un número y no una variable por la misma razón que el 77 de
     arriba: son dos alturas fijas y conocidas. Pero quedan atadas — si
     alguna vez se cambia el alto del encabezado en el celular (el
     padding de .barra__fila, acá nomás), hay que mover este 60 también,
     o vuelve el hueco. */
  .subnav { top: 60px; }

  /* Los tres rótulos no entran en una fila y se partían en dos renglones
     cada uno ("NUEVO / PEDIDO"), dejando una franja de tres pisos. Con
     la letra y el espaciado un poco más chicos entran los tres enteros. */
  .subnav__fila { gap: 14px; padding: 9px 0; }
  .subnav__link { font-size: .62rem; letter-spacing: .05em; white-space: nowrap; }
}