/* Etiquetas Trujillo — pensado para las PC de tienda: 1024×768 en adelante,
   contraste alto, objetivos grandes, todo alcanzable con teclado. */

:root {
  --tinta:      #242424;
  --tinta-2:    #424242;
  --tinta-3:    #616161;
  --fondo:      #f5f5f5;
  --superficie: #ffffff;
  --linea:      #e1dfdd;
  /* El rojo a sangre de la marca. No es el #ee2a24 del logo: acá va
     como RELLENO con texto blanco encima —botones—, y con el tono del
     logo el blanco daba 4,2 y no llegaba al mínimo legible. El logo
     puede usar el suyo: un logotipo no es texto. */
  --acento:     #b0100b;
  --acento-claro:#fdecea;
  --error:      #a93226;
  --error-claro:#fae9e6;
  --alerta:     #8a6410;
  --alerta-claro:#faf0dc;
  --ok:         #15803d;   /* el verde de "Entregado": uno solo para todo lo vivo */
  --ok-claro:   #f0fdf4;

  /* Estos existen porque había colores escritos a mano que en tono
     oscuro quedaban al revés: texto blanco sobre un botón claro, o un
     aviso claro sobre fondo claro. */
  --campo-fondo:   #ffffff;   /* dentro de inputs y selects */
  --sobre-acento:  #ffffff;   /* texto encima del color de acento */
  --mensaje-fondo: #14171d;   /* el aviso flotante va al revés del fondo */
  --mensaje-texto: #ffffff;
  --tablero-a:     #f2f4f7;   /* el damero detrás de la etiqueta */
  --tablero-b:     #e8ebef;

  --radio: 2px;
  color-scheme: light;
}

/* ── Tono oscuro ────────────────────────────────────────────
   Se define una sola vez y se aplica en dos casos: cuando el sistema
   está en oscuro y el usuario no eligió otra cosa, o cuando lo eligió
   a mano. Las dos reglas comparten el mismo bloque de valores.

   OJO: la vista previa de la etiqueta NO se invierte. Ahí se está
   mirando papel blanco con tinta negra, que es lo que sale de la
   impresora. Si se pone en oscuro deja de servir para lo que es. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --tinta:       #e6e9ef;
    --tinta-2:     #b8c0cf;
    --tinta-3:     #8d96a8;
    --fondo:       #0f1319;
    --superficie:  #1a1f28;
    --linea:       #2f3746;
    --acento:      #ff6b5e;
    --acento-claro:#2d1613;
    --error:       #f2887c;
    --error-claro: #3a201d;
    --alerta:      #e6b45c;
    --alerta-claro:#332a16;
    --ok:          #34d058;
    --ok-claro:    #13251a;
    --campo-fondo:   #131820;
    --sobre-acento:  #0b1220;
    --mensaje-fondo: #e6e9ef;
    --mensaje-texto: #12161d;
    --tablero-a:     #202632;
    --tablero-b:     #1a1f29;
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --tinta:       #e6e9ef;
  --tinta-2:     #b8c0cf;
  --tinta-3:     #8d96a8;
  --fondo:       #0f1319;
  --superficie:  #1a1f28;
  --linea:       #2f3746;
  --acento:      #ff6b5e;
  --acento-claro:#2d1613;
  --error:       #f2887c;
  --error-claro: #3a201d;
  --alerta:      #e6b45c;
  --alerta-claro:#332a16;
  --ok:          #34d058;
  --ok-claro:    #13251a;
  --campo-fondo:   #131820;
  --sobre-acento:  #0b1220;
  --mensaje-fondo: #e6e9ef;
  --mensaje-texto: #12161d;
  --tablero-a:     #202632;
  --tablero-b:     #1a1f29;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Los campos NO heredan el color del texto: usan el del navegador. Sin
   esto, en tono oscuro quedaba tinta negra sobre fondo casi negro
   (1,18:1, ilegible). */
input, select, textarea, button { color: var(--tinta); }
::placeholder { color: var(--tinta-3); opacity: 1; }

body {
  margin: 0;
  font: 14px/1.5 "Segoe UI", "Segoe UI Web (West European)", system-ui,
        -apple-system, Roboto, "Helvetica Neue", sans-serif;
  color: var(--tinta);
  background: var(--fondo);
  /* Alto completo: el lateral y cada panel manejan su propio scroll.
     Así no queda media pantalla de gris vacío debajo de las tarjetas. */
  height: 100vh; display: flex; flex-direction: column; overflow: hidden;
}

/* El navegador aplica [hidden] con menos fuerza que cualquier regla de
   autor, así que un .campo oculto se seguía viendo. */
[hidden] { display: none !important; }

/* ── Barra de comando ───────────────────────────────────────
   Fondo claro con el logo a la izquierda; a la derecha el estado, el
   tono, quién entró y la salida. Dejó de ser la barra azul de Dynamics:
   con el logo rojo encima, un fondo de color competía con la marca. */
.comando {
  flex: none; height: 64px; display: flex; align-items: center; gap: .9rem;
  padding: 0 1.1rem;
  background: var(--superficie); color: var(--tinta);
  border-bottom: 1px solid var(--linea);
}
.comando-logo { display: block; height: 40px; width: auto; }
.comando-raya { width: 1px; height: 26px; background: var(--linea); flex: none; }
.comando-titulo {
  font-family: 'Arial Rounded MT', 'Century Gothic', 'Trebuchet MS', system-ui, sans-serif;
  font-size: 1.12rem; font-weight: 700; letter-spacing: -.005em;
}
.comando-der { margin-left: auto; display: flex; align-items: center; gap: .9rem; }

/* Verde con punto: se lee de un vistazo desde lejos, que es como se
   mira una barra de estado en una caja. */
.estado {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .8rem; font-weight: 600; padding: .3rem .75rem; border-radius: 999px;
  background: var(--ok-claro); color: var(--ok); border: 1px solid var(--ok);
}
.estado::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.estado.falla { background: var(--error-claro); color: var(--error); border-color: #f3c9c3; }

/* El interruptor de tono: sol, palanca, luna. */
.tono { display: inline-flex; align-items: center; gap: .5rem; }
.tono-ico { display: grid; place-items: center; color: var(--tinta-3); }
.palanca {
  width: 40px; height: 22px; padding: 0; border-radius: 999px; border: 0;
  background: #d3d7de; box-shadow: none; cursor: pointer; position: relative;
  transition: background .15s;
}
.palanca:hover:not(:disabled) { filter: none; background: #c2c7d0; }
.perilla {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: transform .15s;
  box-shadow: 0 1px 3px rgba(16,24,40,.3);
}
:root[data-tema="oscuro"] .palanca { background: var(--acento); }
:root[data-tema="oscuro"] .perilla { transform: translateX(18px); }

.quien-caja { display: inline-flex; align-items: center; gap: .45rem; color: var(--tinta-2); }
.quien-caja .ico { display: grid; place-items: center; color: var(--tinta-3); }
.quien { font-size: .88rem; }

.btn-salir {
  background: transparent; color: var(--error); font-weight: 600; font-size: .85rem;
  padding: .4rem 1rem; border-radius: 8px; box-shadow: inset 0 0 0 1px currentColor;
}
.btn-salir:hover:not(:disabled) { background: var(--error-claro); filter: none; }


.tablero { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1rem; }

/* ── Panel de navegación ───────────────────────────────────────────────
   Es mobiliario, no protagonista: acá se elige con qué se trabaja y
   se entra a la configuración, un par de veces por turno. Por eso va
   claro y callado — en azul saturado era lo más pesado de la pantalla
   y contenía lo menos importante. */
.lateral {
  flex: 0 0 14rem; width: 14rem;
  display: flex; flex-direction: column; gap: 1.35rem;
  padding: .85rem .5rem;
  background: var(--superficie); border-right: 1px solid var(--linea);
  overflow-y: auto;
}

.lat-grupo { display: flex; flex-direction: column; gap: .65rem; }
/* Se separa de la zona de trabajo con una línea: tiene que quedar claro
   que de acá para abajo es otra cosa. */
.lat-admin { border-top: 1px solid var(--linea); padding-top: 1rem; }
.lat-titulo {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--tinta-2); font-weight: 700; margin-bottom: -.15rem;
}

.campo { display: flex; flex-direction: column; gap: .22rem; }
/* Estas etiquetas son de 10 px: en --tinta-3 sobre blanco dan 3,97:1 de
   contraste y en un monitor de tienda no se leen. --tinta-2 da 8,08:1. */
.campo > span {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tinta-2); font-weight: 600;
}
.campo select {
  font: inherit; width: 100%; padding: .42rem .5rem;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--campo-fondo); color: var(--tinta);
}
.campo select:hover { border-color: var(--tinta-3); }
#tienda-fija b { font-size: .92rem; }

/* Las acciones NO pueden verse como los selectores de arriba, o se leen
   como un campo más del formulario en vez de como algo que se aprieta. */
/* Los enlaces del panel van en azul, como en Dynamics: se leen como
   navegación y no como texto suelto. */
.lat-btn {
  background: transparent; color: var(--acento); box-shadow: none;
  text-align: left; font-weight: 400; padding: .45rem .6rem; border-radius: 2px;
}
.lat-btn:hover:not(:disabled) { background: var(--acento-claro); color: var(--acento); filter: none; }
/* El módulo en el que estás parado. La barra a la izquierda dice
   "acá estás" sin depender solo del color de fondo. */
.lat-btn.activo {
  background: var(--acento-claro); color: var(--acento); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--acento);
}


/* ── Botones ────────────────────────────────────────────── */
button {
  font: inherit; font-weight: 600; cursor: pointer;
  padding: .55rem 1.1rem; border: 0; border-radius: var(--radio);
  background: var(--acento); color: var(--sobre-acento);
}
button:hover:not(:disabled) { filter: brightness(1.12); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.secundario { background: transparent; color: var(--acento); box-shadow: inset 0 0 0 1px var(--linea); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }


/* ── Distribución ───────────────────────────────────────── */
main {
  flex: 1; min-width: 0;
  display: flex; padding: 1rem 1.25rem;
  overflow: hidden;
}

/* Cada botón del lateral lleva a un módulo. Se ve uno por vez: son
   pantallas, no ventanitas encima de la pantalla. */
.modulo { flex: 1; min-width: 0; display: flex; }

/* Imprimir se arma en dos partes: arriba con qué se trabaja (tienda,
   impresora, plantilla) y abajo el trabajo. Los selectores vivían en el
   lateral y dejaban al módulo dependiendo de algo de afuera. */


/* ── Barra de contexto ──────────────────────────────────────
   Tres bloques con su ícono: dónde estoy, por dónde sale y con qué
   diseño. La tienda va con candado porque no se elige. */
.contexto {
  display: flex; align-items: center; gap: 0; flex-wrap: wrap; flex: none;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: 12px; padding: .9rem 1.1rem;
}
.ctx {
  display: flex; align-items: center; gap: .8rem;
  flex: 1 1 15rem; min-width: 13rem; max-width: 26rem;
  padding: 0 1.4rem;
}
/* La raya divisoria se dibuja con el borde del siguiente, así no hace
   falta un elemento vacío por cada separación. */
.ctx + .ctx { border-left: 1px solid var(--linea); }
.ctx:first-child { padding-left: 0; }

.ctx-ico { display: grid; place-items: center; color: var(--acento); flex: none; }
.ctx-cuerpo { display: flex; flex-direction: column; gap: .3rem; min-width: 0; flex: 1; }
.ctx-cuerpo small {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-3); font-weight: 700;
}
.ctx-cuerpo select {
  width: 100%; padding: .55rem .7rem; font: inherit;
  border: 1px solid var(--linea); border-radius: 8px; background: var(--campo-fondo);
}
.ctx-cuerpo select:focus { border-color: var(--acento); outline: none;
  box-shadow: 0 0 0 3px var(--acento-claro); }

/* La tienda: mismo alto que un select, pero sin poder tocarse. */
.ctx .fijo {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .7rem; border-radius: 8px;
  background: var(--fondo); border: 1px solid var(--linea);
}
.ctx .fijo .candado { color: var(--tinta-3); flex: none; }
.ctx .fijo b { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.trabajo {
  flex: 1; min-height: 0;
  display: grid; gap: 1rem;
  /* La columna derecha no baja de 22.5rem (360 px): a 76,2 mm la
     etiqueta mide 288 px y tiene que verse a escala real. Hay que
     sumarle el borde del panel (2), su padding (32) y el del lienzo
     (32) = 354 px, con un poco de aire. De ahí para arriba el espacio
     sobrante se lo lleva la búsqueda, que es donde se trabaja. */
  grid-template-columns: minmax(0, 1fr) clamp(22.5rem, 26%, 24rem);
}

/* Los módulos de configuración son una hoja que se lee de arriba abajo.
   No se estiran a todo el ancho: a 1920 px una línea de texto de punta a
   punta es imposible de leer. */
.hoja { overflow-y: auto; display: block; }
.hoja > .panel { max-width: 48rem; }

/* El diseñador se apila: cabecera, caja de nombre y taller. Sin esto
   hereda el flex en fila de .modulo y los tres quedan lado a lado. */
#mod-disenar {
  display: grid; gap: 1rem;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
}
.dis-lista { overflow-y: auto; }
.dis-lista h3 {
  margin: 0 0 .6rem; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-2);
}
.dis-taller { overflow-y: auto; }
.dis-taller .taller { flex: 1; min-height: 0; }

/* Una fila = elegir (todo el ancho) + archivar (al costado). El botón de
   archivar no se esconde detrás de un hover: en una pantalla táctil de
   tienda no hay hover que valga. */
.plantilla-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; border-bottom: 1px solid var(--linea);
}
.plantilla-fila .elegir {
  display: flex; flex-direction: column; gap: .1rem; align-items: flex-start;
  background: transparent; color: var(--tinta); box-shadow: none;
  text-align: left; font-weight: 600; padding: .5rem .45rem; width: 100%;
}
.plantilla-fila .elegir:hover:not(:disabled) { background: var(--acento-claro); filter: none; }
.plantilla-fila .elegir .d {
  font-size: .72rem; font-weight: 400; color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}
.plantilla-fila.abierta .elegir { color: var(--acento); }
.plantilla-fila.abierta { box-shadow: inset 3px 0 0 var(--acento); }
.plantilla-fila .archivar {
  background: transparent; color: var(--tinta-3); box-shadow: none;
  padding: .3rem .5rem; font-size: 1.05rem; line-height: 1;
}
.plantilla-fila .archivar:hover:not(:disabled) { color: var(--error); background: var(--error-claro); }

@media (max-width: 60rem) {
  #mod-disenar { grid-template-columns: 1fr; }
}
/* Va con .modulo delante a propósito: dentro de un panel, ".panel h2"
   tiene la misma especificidad y le ganaba, así que el título del módulo
   salía del mismo tamaño que sus propios subtítulos. */
.modulo h2.titulo-modulo {
  margin: 0 0 1rem; font-size: 1.15rem; font-weight: 700;
  text-transform: none; letter-spacing: normal; color: var(--tinta);
  display: block;
}
.columna { display: flex; flex-direction: column; gap: 1rem; min-height: 0; }
.columna .previa { flex: 0 0 auto; }
.columna .lote   { flex: 1; min-height: 0; }

/* Pantallas chicas: se apila y vuelve el scroll normal de la página. */
@media (max-width: 1000px) {
  /* El body sigue en columna (la barra de comando arriba), pero el
     contenedor de abajo deja de ser dos columnas: el panel se convierte
     en una fila de enlaces y el contenido va debajo. Sin esto el panel
     se ponía AL LADO del contenido y lo dejaba en 369 px. */
  body { height: auto; overflow: visible; }
  .comando { position: sticky; top: 0; z-index: 5; }
  .cuerpo { display: block; }
  .lateral {
    width: auto; flex: none; flex-direction: row; flex-wrap: wrap;
    align-items: flex-end; gap: .8rem;
    border-right: 0; border-bottom: 1px solid var(--linea);
  }
  .lateral .lat-grupo { flex-direction: row; align-items: flex-end; }
  .lateral .lat-titulo { display: none; }
  main { overflow: visible; padding-bottom: 3rem; }
  .trabajo { grid-template-columns: 1fr; }
  .modulo { display: block; }
  #mod-imprimir { display: flex; }
  .panel, .resultados, .carrito { max-height: none; }
}

.panel {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: 12px; padding: 1.15rem 1.25rem;
  display: flex; flex-direction: column; min-height: 0;
}
/* El título deja de ser un rótulo chico en versalitas y pasa a ser un
   encabezado con su ícono: en una caja hay que ubicarse de un vistazo. */
.panel h2 {
  margin: 0 0 .9rem; flex: none; font-size: 1.05rem; font-weight: 700;
  letter-spacing: -.01em; color: var(--tinta);
  display: flex; align-items: center; gap: .6rem;
}
.panel h2 .h-ico { display: grid; place-items: center; color: var(--acento); flex: none; }
.ayuda { margin: .5rem 0 0; font-size: .82rem; color: var(--tinta-3); }
.nota  { margin: 1rem 0 0; font-size: .8rem; color: var(--tinta-2); line-height: 1.55; }

/* ── Buscar ─────────────────────────────────────────────── */
#form-buscar { display: flex; gap: .6rem; flex: none; }
/* El ícono de barras va DENTRO del campo: dice qué se espera acá sin
   gastar una línea de texto. */
.caja-busqueda {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem;
  padding: 0 .8rem; background: var(--campo-fondo);
  border: 1px solid var(--linea); border-radius: 9px;
}
.caja-busqueda:focus-within {
  border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-claro);
}
.ico-barras { display: grid; place-items: center; color: var(--tinta-3); flex: none; }
#q {
  flex: 1; min-width: 0; font: inherit; padding: .72rem 0;
  border: 0; background: transparent; color: var(--tinta);
}
#q:focus { outline: none; }
#form-buscar button { padding: .72rem 1.5rem; border-radius: 9px; font-weight: 700; }

.resultados { margin-top: .9rem; flex: 1; min-height: 0; overflow-y: auto; }

/* Sin resultados: una ilustración y una frase que dice qué hacer. Antes
   quedaba un vacío gris que parecía que la pantalla no había cargado. */
.sin-nada {
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .4rem; padding: 1rem 0 2rem;
}
.sin-nada img { display: block; max-width: 300px; width: 60%; height: auto; }
.sin-nada p {
  margin: 0; text-align: center; color: var(--tinta-2);
  font-size: 1rem; line-height: 1.5;
}
.fila {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem;
  padding: .6rem .55rem; border-radius: var(--radio); cursor: pointer;
  border-bottom: 1px solid var(--linea);
}
.fila:hover, .fila:focus-visible { background: var(--acento-claro); }
.fila .desc { font-weight: 600; }
.fila .meta { grid-column: 1; font-size: .78rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
/* Ojo con grid-row sin grid-column: CSS Grid coloca PRIMERO los elementos
   con fila fija, así que este se quedaba con la columna 1 y empujaba a la
   descripción a la 2 — la fila salía al revés. Hay que decir la columna. */
/* El precio y el stock van juntos a la derecha, apilados. Antes el
   precio ocupaba solo las dos filas de la grilla; ahora ese lugar lo
   ocupa el bloque y el precio se acomoda adentro.
   Ojo con grid-row sin grid-column: CSS Grid coloca PRIMERO los
   elementos con fila fija, así que sin decir la columna este se quedaba
   con la 1 y empujaba la descripción a la 2 — la fila salía al revés. */
.fila .lado {
  grid-row: 1 / 3; grid-column: 2; align-self: center;
  display: flex; flex-direction: column; align-items: flex-end; gap: .15rem;
}
.fila .precio {
  font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

.fila .sin-barra { color: var(--alerta); }

/* ── Lote ───────────────────────────────────────────────── */
.contador {
  margin-left: auto; background: var(--acento-claro); color: var(--acento);
  min-width: 1.6rem; text-align: center; font-weight: 700;
  padding: .15rem .55rem; border-radius: 999px; font-size: .82rem; letter-spacing: 0;
}
/* Con algo adentro pasa a sólido: el número deja de ser un dato y pasa
   a ser algo que hay que atender. */
.contador.hay { background: var(--acento); color: var(--sobre-acento); }
.carrito { flex: 1; min-height: 0; overflow-y: auto; }
.vacio { color: var(--tinta-3); font-size: .9rem; margin: .5rem 0; }
.item {
  display: grid; grid-template-columns: 1fr auto auto; gap: .3rem .6rem;
  align-items: center; padding: .55rem .4rem; border-bottom: 1px solid var(--linea);
}
.item .desc { font-size: .92rem; font-weight: 600; }
.item .meta { grid-column: 1; font-size: .76rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.item input {
  grid-row: 1 / 3; grid-column: 2; width: 4.2rem; font: inherit; text-align: center;
  padding: .35rem; border: 1px solid var(--linea); border-radius: var(--radio);
  font-variant-numeric: tabular-nums;
}
.item .quitar {
  grid-row: 1 / 3; grid-column: 3; background: transparent; color: var(--tinta-3);
  padding: .3rem .5rem; font-size: 1.1rem; line-height: 1;
}
.item .quitar:hover { color: var(--error); }

.acciones { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1rem; flex: none; }

/* ── Avisos ─────────────────────────────────────────────── */
.avisos:empty { display: none; }
.avisos { margin-top: .85rem; flex: none; display: flex; flex-direction: column; gap: .4rem; }
.aviso {
  font-size: .84rem; padding: .5rem .7rem; border-radius: var(--radio);
  background: var(--alerta-claro); color: var(--alerta);
  border-left: 3px solid currentColor;
}
.aviso.error { background: var(--error-claro); color: var(--error); }

/* ── Vista previa ───────────────────────────────────────── */
.medida {
  margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none;
  font-size: .84rem; color: var(--tinta-3);
}
.lienzo {
  display: grid; place-items: center; min-height: 10rem; padding: 1rem;
  background: repeating-conic-gradient(var(--tablero-a) 0% 25%, var(--tablero-b) 0% 50%) 0 0 / 14px 14px;
  border-radius: var(--radio);
}
/* El #fff se queda a propósito: eso es el papel de la etiqueta, no
   parte de la interfaz. Invertirlo sería mostrar algo que la impresora
   no va a imprimir. */
.lienzo svg { box-shadow: 0 1px 5px rgba(0,0,0,.22); background: #fff; max-width: 100%; height: auto; }

/* ── Formularios de los módulos ─────────────────────────── */
.grilla { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 1.1rem 0; }
.grilla label { display: flex; flex-direction: column; gap: .25rem; font-size: .84rem; color: var(--tinta-2); }
.grilla input {
  font: inherit; padding: .5rem; border: 1px solid var(--linea);
  border-radius: var(--radio); font-variant-numeric: tabular-nums;
}

/* Reemplazar una plantilla la cambia en todas las tiendas, así que el
   botón no puede verse igual que el de guardar una copia. */
button.peligro { color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
button.peligro:hover:not(:disabled) { background: var(--error-claro); filter: none; }

.caja-nombre {
  display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap;
  margin: 0 0 1rem; padding: .85rem;
  background: var(--acento-claro); border-radius: var(--radio);
}
.caja-nombre label {
  flex: 1; min-width: 14rem; display: flex; flex-direction: column; gap: .25rem;
  font-size: .82rem; color: var(--tinta-2);
}
.caja-nombre input {
  font: inherit; padding: .5rem .6rem;
  border: 1px solid var(--linea); border-radius: var(--radio); background: var(--campo-fondo);
}

/* ── Mensaje flotante ───────────────────────────────────── */
.mensaje {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  background: var(--mensaje-fondo); color: var(--mensaje-texto); padding: .7rem 1.2rem;
  border-radius: var(--radio); box-shadow: 0 6px 24px rgba(0,0,0,.3);
  font-size: .9rem; z-index: 20; max-width: min(90vw, 36rem);
}
.mensaje.error { background: var(--error); }
.mensaje.ok    { background: var(--ok); }

/* ── Antigüedad del precio ──────────────────────────────────
   dbo.Consulta guarda el precio con el que el producto se imprimió la
   última vez, no el de hoy. Se muestra la fecha para que el operador
   sepa de qué se está fiando. */
.edad {
  display: inline-block; margin-left: .35rem;
  font-size: .72rem; font-weight: 600; padding: .05rem .4rem;
  border-radius: 999px; white-space: nowrap; vertical-align: .05em;
}
.edad.fresco { background: var(--acento-claro); color: var(--acento); }
.edad.dudoso { background: var(--alerta-claro); color: var(--alerta); }
.edad.viejo  { background: var(--error-claro);  color: var(--error); }
.aviso b { font-weight: 700; }

/* ── Módulo del complemento ─────────────────────────────── */
.descarga {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .85rem 1rem; margin: .6rem 0;
  background: var(--acento-claro); border-radius: var(--radio);
}
.descarga-datos { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 12rem; }
/* Un <a> que se ve y se comporta como botón: la descarga la hace el
   navegador, no hace falta JavaScript de por medio. */
.boton {
  display: inline-block; text-decoration: none; font-weight: 600;
  padding: .55rem 1.1rem; border-radius: var(--radio);
  background: var(--acento); color: var(--sobre-acento);
}
.boton:hover { filter: brightness(1.12); }

.fila-agente { display: flex; gap: .7rem; align-items: flex-end; flex-wrap: wrap; margin: .6rem 0; }
.fila-agente label { display: flex; flex-direction: column; gap: .25rem; flex: 1; min-width: 12rem;
                     font-size: .82rem; color: var(--tinta-2); }
.fila-agente input {
  font: inherit; padding: .5rem .6rem;
  border: 1px solid var(--linea); border-radius: var(--radio); background: var(--campo-fondo);
}

.caja-token {
  margin: .8rem 0; padding: .9rem;
  border: 1px solid var(--alerta); border-radius: var(--radio);
  background: var(--alerta-claro);
}
.caja-token pre {
  margin: .5rem 0; padding: .7rem; overflow-x: auto;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
  font: 12px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: var(--tinta); white-space: pre-wrap; word-break: break-all;
}
.caja-token .aviso { margin-top: .6rem; }
#mod-complemento h3 {
  margin: 1.5rem 0 .5rem; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-2);
}
#mod-complemento a:not(.boton) { color: var(--acento); }

/* ── Módulo de impresoras ───────────────────────────────── */
/* Dos columnas: a la izquierda las que ya están y el alta; a la derecha
   lo que encontró la búsqueda, a todo el alto. Antes los hallazgos
   entraban apretados en 15rem con scroll mientras sobraba media
   pantalla al costado. */
#mod-impresoras {
  display: grid; gap: 1rem;
  /* La izquierda se encoge cuando falta lugar: los hallazgos traen
     cadenas largas (el modelo que reporta SNMP) y son los que necesitan
     el ancho. Con un ancho fijo a la izquierda, a 1024 px la lista
     quedaba en 328 px mientras el alta tenía 432. */
  grid-template-columns: clamp(18rem, 34%, 27rem) minmax(0, 1fr);
}
.imp-izq { overflow-y: auto; }
/* En una columna angosta, dos campos por fila no entran. */
.imp-izq .grilla { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
/* Con el alta por cable no hay hallazgos que mostrar: la izquierda se
   queda con el espacio en vez de dejar la mitad en blanco. */
#mod-impresoras.sin-hallazgos { grid-template-columns: minmax(0, 48rem); }
.imp-der .hallazgos { flex: 1; min-height: 0; max-height: none; margin-top: .75rem; }
.imp-der .hallazgos:empty { display: block; }
.imp-der .filtro, .imp-der #buscado-en { flex: none; }
@media (max-width: 60rem) {
  #mod-impresoras { grid-template-columns: 1fr; }
  .imp-der .hallazgos { max-height: 22rem; }
}

#mod-impresoras h3 {
  margin: 1.6rem 0 .6rem; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-2);
}
.lista-imp { display: flex; flex-direction: column; }
.lista-imp .nada { color: var(--tinta-3); font-size: .9rem; padding: .6rem 0; }
.imp {
  display: grid; grid-template-columns: 1fr auto; gap: .15rem .8rem;
  align-items: center; padding: .6rem .1rem; border-bottom: 1px solid var(--linea);
}
.imp .n { font-weight: 600; }
.imp .d { grid-column: 1; font-size: .78rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.imp button { grid-row: 1 / 3; grid-column: 2; background: transparent; color: var(--tinta-3); padding: .3rem .55rem; }
.imp button:hover { color: var(--error); }

.pestanas { display: flex; gap: .3rem; border-bottom: 1px solid var(--linea); margin-bottom: 1rem; }
.pest {
  background: transparent; color: var(--tinta-3); border-radius: 0;
  padding: .5rem .9rem; box-shadow: none; font-weight: 600;
}
.pest.activa { color: var(--acento); box-shadow: inset 0 -2px 0 var(--acento); }

#form-buscar-red { display: flex; gap: .5rem; margin: .8rem 0; }
#rango {
  flex: 1; font: inherit; padding: .55rem .7rem;
  border: 1px solid var(--linea); border-radius: var(--radio);
}
.hallazgos:empty { display: none; }
.hallazgos { margin-top: .5rem; max-height: 15rem; overflow-y: auto; }
.hallazgo {
  display: grid; grid-template-columns: 1fr auto; gap: .15rem .8rem;
  align-items: center; padding: .55rem .1rem; border-bottom: 1px solid var(--linea);
}
.hallazgo .n { font-weight: 600; font-family: ui-monospace, monospace; font-size: .9rem; }
.hallazgo .d { grid-column: 1; font-size: .78rem; color: var(--tinta-3); }
.hallazgo .confirmada { color: var(--ok); font-weight: 600; }
.hallazgo .desconocida { color: var(--alerta); }
.hallazgo button { grid-row: 1 / 3; grid-column: 2; padding: .38rem .8rem; font-size: .85rem; }

/* ── Ingreso ────────────────────────────────────────────── */
/* ── Pantalla de ingreso ────────────────────────────────────
 *
 * Siempre en claro, pase lo que pase con el tono: es la cara del
 * sistema, la ve gente que recién llega, y el logo es rojo sobre
 * blanco. Por eso acá los colores van escritos y no salen de las
 * variables, que cambian con el tema.
 */
.ingreso {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 1.5rem;
  color-scheme: light;
  /* La ilustración va arriba; los dos halos quedan DEBAJO como respaldo.
     Si el archivo no está, el navegador simplemente no pinta esa capa y
     se ve el degradado: nunca queda un fondo roto ni un icono de imagen
     faltante. */
  background:
    image-set(url('/fondo-ingreso.webp') type('image/webp'),
              url('/fondo-ingreso.jpg')  type('image/jpeg'))
      center / cover no-repeat,
    radial-gradient(1100px 620px at 88% -8%, #ffe9e6 0%, transparent 62%),
    radial-gradient(760px 520px at 6% 104%, #fff6e0 0%, transparent 58%),
    #f7f8fa;
}
.ingreso[hidden] { display: none; }

.tarjeta-ingreso {
  background: #fff; border-radius: 16px; padding: 2.4rem 2.2rem 2rem;
  width: min(25rem, 100%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 2px 6px rgba(16,24,40,.06), 0 26px 60px -14px rgba(16,24,40,.28);
  display: flex; flex-direction: column; gap: .95rem;
}

.logo-ingreso {
  display: block; width: 190px; height: auto;
  margin: 0 auto .6rem;   /* centrado dentro de la tarjeta */
}

.titulo-ingreso { margin-bottom: .5rem; text-align: center; }   /* acompaña al logo, que va centrado */
.titulo-ingreso h1 {
  margin: 0; color: #16181d;
  /* Redondeada, para acompañar al logo. Arial Rounded viene con Office;
     si esa caja no la tiene, Century Gothic; y si tampoco, Trebuchet,
     que está en todos los Windows y es lo más suave que trae de fábrica. */
  /* El navegador reconoce la familia como "Arial Rounded MT": el "Bold"
     del nombre de Windows es el estilo, no la familia, y poniéndolo
     entero la fuente no matcheaba y caía a la siguiente. */
  font-family: 'Arial Rounded MT', 'Century Gothic', 'Trebuchet MS',
               system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  /* En mayúsculas conviene bajar el cuerpo y abrir el interletrado: si
     no, se lee como un bloque. Espacio sobra: el texto ocupa poco más de
     200 px de los 330 útiles de la tarjeta. */
  font-size: 1.15rem;
  letter-spacing: .08em;
}

.campo-v { display: flex; flex-direction: column; gap: .35rem; }
.campo-v span {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: #616875;
}
.campo-v input, .campo-v select {
  font: inherit; padding: .72rem .8rem; color: #16181d;
  border: 1px solid #aeb4bf; border-radius: 9px; background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
.campo-v input::placeholder { color: #9aa1ad; }
.campo-v input:hover, .campo-v select:hover { border-color: #8b919c; }
.campo-v input:focus, .campo-v select:focus {
  border-color: #b0100b; outline: none; box-shadow: 0 0 0 3px rgba(176,16,11,.16);
}

#in-entrar {
  margin-top: .7rem; padding: .8rem; font-size: 1rem; font-weight: 700;
  /* Rojo a sangre, mas oscuro que el #ee2a24 del logo: con el del logo el blanco
     encima da 4,2 y no llega al minimo legible. El logo puede usar el
     rojo de marca —no es texto—, el boton no. */
  color: #fff; background: #b0100b; border: 0; border-radius: 9px;
  cursor: pointer; box-shadow: 0 1px 2px rgba(16,24,40,.06);
  transition: background .12s;
}
#in-entrar:hover:not(:disabled) { background: #8f0d09; }
#in-entrar:focus-visible { outline: 3px solid rgba(176,16,11,.45); outline-offset: 2px; }
#in-entrar:disabled { opacity: .6; cursor: progress; }

.error-ingreso {
  margin: 0; font-size: .86rem; padding: .6rem .75rem; border-radius: 9px;
  background: #fdecea; color: #971c14; border-left: 3px solid currentColor;
}
.error-ingreso[hidden] { display: none; }

#tienda-fija { justify-content: center; }
#tienda-fija b { font-size: .95rem; }
#tienda-fija[hidden] { display: none; }

/* ── Buscar impresoras ──────────────────────────────────── */
.buscar-solo { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; margin-bottom: .5rem; }
.buscar-solo button { padding: .6rem 1.3rem; }
.buscar-solo .ayuda { margin: 0; }
.ayuda.mini { font-size: .76rem; line-height: 1.5; }
.ayuda.mini[hidden] { display: none; }
.avanzado { margin-top: 1.2rem; border-top: 1px solid var(--linea); padding-top: .8rem; }
.avanzado summary {
  cursor: pointer; font-size: .82rem; color: var(--tinta-3);
  font-weight: 600; list-style-position: outside;
}
.avanzado summary:hover { color: var(--acento); }
.avanzado #form-buscar-red { margin-top: .6rem; }

/* Veredicto de cada hallazgo */
.hallazgo .d { line-height: 1.5; }
.hallazgo .d i { color: var(--tinta-3); font-style: normal; font-size: .72rem; }
.hallazgo .no-termica { color: var(--tinta-3); }
.hallazgo button.secundario { font-weight: 500; }

/* Filtro de hallazgos */
.filtro {
  display: flex; align-items: center; gap: .5rem; cursor: pointer;
  font-size: .86rem; margin: .9rem 0 .4rem; user-select: none;
}
.filtro[hidden] { display: none; }
.filtro input { width: 1rem; height: 1rem; accent-color: var(--acento); cursor: pointer; }
.filtro b { color: var(--tinta-3); font-weight: 400; font-size: .8rem; }

/* Estados de compatibilidad */
.hallazgo .si          { color: var(--ok); }
.hallazgo .todavia-no  { color: var(--alerta); }
.hallazgo .no          { color: var(--tinta-3); }
.hallazgo .no-se       { color: var(--alerta); }
.hallazgo.descartada   { opacity: .62; }

/* Vista previa sin producto elegido: es un molde, no una etiqueta */
.lienzo.molde svg { opacity: .45; filter: grayscale(1); }

/* ── Diseñador de etiquetas ─────────────────────────────── */
.cab-disenar {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--linea); padding-bottom: .9rem;
}
.cab-disenar h2 { margin: 0; }
.cab-disenar .acciones { margin: 0; }

/* La columna de la previa no baja de 22.5rem para que la etiqueta se
   siga viendo a escala real, igual que en el módulo de imprimir. */
.taller {
  display: grid; gap: 1.4rem; align-items: start;
  grid-template-columns: minmax(0, 1fr) clamp(22.5rem, 30%, 26rem);
}
/* Tres columnas —lista de plantillas, campos y previa— necesitan unos
   1210 px. Por debajo, el editor de campos quedaba en 89 px: se apila la
   previa abajo y los campos se quedan con todo el ancho. */
@media (max-width: 76rem) { .taller { grid-template-columns: 1fr; } }
.taller-campos { min-height: 0; padding-right: .4rem; }
.taller-previa .pegado { position: sticky; top: 0; }

.fila-taller { display: flex; gap: .8rem; align-items: flex-end; margin-bottom: .9rem; }
.fila-taller label { display: flex; flex-direction: column; gap: .25rem; flex: 1; font-size: .8rem; color: var(--tinta-2); }
.fila-taller input {
  font: inherit; padding: .45rem .6rem;
  border: 1px solid var(--linea); border-radius: var(--radio);
}

.elem {
  border: 1px solid var(--linea); border-radius: var(--radio);
  padding: .7rem .8rem; margin-bottom: .6rem; background: var(--superficie);
}
.elem-cab {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem;
}
.elem-cab select { font: inherit; font-weight: 600; padding: .25rem .4rem;
  border: 1px solid var(--linea); border-radius: var(--radio); }
.elem-cab .mover { margin-left: auto; display: flex; gap: .15rem; }
.elem-cab button {
  background: transparent; color: var(--tinta-3); padding: .2rem .45rem;
  font-size: .95rem; line-height: 1;
}
.elem-cab button:hover { color: var(--acento); }
.elem-cab button.quitar:hover { color: var(--error); }

.elem-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: .5rem; }
.elem-campos label { display: flex; flex-direction: column; gap: .2rem; font-size: .72rem; color: var(--tinta-3); }
.elem-campos input[type="number"], .elem-campos input[type="text"], .elem-campos select {
  font: inherit; font-size: .85rem; padding: .35rem .45rem;
  border: 1px solid var(--linea); border-radius: var(--radio);
}
.elem-campos label.casilla { flex-direction: row; align-items: center; gap: .4rem; font-size: .8rem; }
.elem-campos label.casilla input { width: 1rem; height: 1rem; accent-color: var(--acento); }

/* El stock, debajo del precio. Gris salvo cuando está en cero, que es
   justo el caso que conviene mirar antes de imprimir. */
.fila .stock { font-size: .74rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.fila .stock.nada { color: var(--error); font-weight: 600; }
.fila .stock.sin-precio { color: var(--error); font-weight: 600; }
/* La fila que no se puede imprimir: apagada, pero legible. No se
   esconde —la cajera necesita ver que el producto existe y por que no
   sale—, solo deja de invitar al clic. */
.fila.sin-servir { cursor: not-allowed; }
.fila.sin-servir .desc, .fila.sin-servir .precio { opacity: .55; }
.fila.sin-servir:hover { background: var(--error-claro); }