/* ===========================================================================
   LabDemo · TEMAS DE COLORES, «APARIENCIA» Y ETIQUETA CON CÓDIGO DE BARRAS
   Solo en la copia del demo (labdemo/tools/preparar-demo.mjs la copia a
   salida/app/). La app de la clínica no la lleva.

   CÓMO FUNCIONAN LOS TEMAS
   preparar-demo reescribe, en la COPIA de estilo.css, cada azul y turquesa de
   la marca (unos 120 tonos escritos a mano y los tokens --primary,
   --secondary…) como «ese mismo color girado al tono del tema»:
       #1d4f86  →  hsl(from #1d4f86 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)))
   Cada tema solo dice cuánto girar el tono, cuánto saturar y cuánto aclarar
   la familia principal (-p) y la de acento (-a). Con todo a 0 / 1 / 0 (el
   Clásico) cada color sale exactamente igual que en la clínica.
   Los colores que AVISAN no se tocan en ningún tema: pendiente, retraso,
   divisas (verde), regular (azul), caja, peligro, éxito, aviso, información.
   =========================================================================== */

:root {
  --giro-p: 0; --sat-p: 1; --luz-p: 0;
  --giro-a: 0; --sat-a: 1; --luz-a: 0;
}
:root[data-tema="esmeralda"] { --giro-p: -52; --sat-p: .86; --luz-p: 1;  --giro-a: -86;  --sat-a: .92; --luz-a: -3; }
:root[data-tema="vino"]      { --giro-p: 128; --sat-p: .78; --luz-p: 1;  --giro-a: -139; --sat-a: 1.18; --luz-a: 2; }
:root[data-tema="grafito"]   { --giro-p: 6;   --sat-p: .16; --luz-p: 1;  --giro-a: 12;   --sat-a: 1.3;  --luz-a: -3; }
:root[data-tema="oceano"]    { --giro-p: -13; --sat-p: 1.04; --luz-p: 7; --giro-a: -22;  --sat-a: 1.1;  --luz-a: -2; }
/* «Tu color»: demo-extra.js escribe los seis valores en el propio :root */

/* El logo del cliente en el lugar del monograma */
.cf.con-logo { background: #fff !important; overflow: hidden; padding: 3px; }
.cf.con-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* La selección de texto y la barra de desplazamiento, del color del tema */
::selection { background: color-mix(in srgb, var(--secondary) 35%, transparent); color: inherit; }

/* ---------------------------------------------------------------------------
   CONFIGURACIÓN → APARIENCIA
   --------------------------------------------------------------------------- */
.apa { display: grid; gap: 18px; }
.apa .bloque-titulo { margin-bottom: 4px; }
.apa-nota { color: var(--muted); font-size: .88rem; max-width: 68ch; margin: 0; }
.apa-nota b { color: var(--ink); }

/* Las muestras de tema: una ventanita del programa con sus colores */
/* Seis muestras (cinco temas y «Tu color»): seis en fila, o tres y tres, o dos */
.apa-temas {
  display: grid; gap: 14px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 14px;
}
@media (max-width: 1180px) { .apa-temas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .apa-temas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.apa-tema {
  appearance: none; border: 0; padding: 0; background: none; cursor: pointer;
  display: grid; gap: 8px; text-align: left; font: inherit; color: var(--ink);
  border-radius: 14px;
}
.apa-tema:focus-visible { outline: 3px solid var(--secondary); outline-offset: 3px; }
.apa-ventana {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 10; border-radius: 12px;
  background: var(--m-fondo);
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 8px 18px -12px rgba(15, 30, 50, .45);
  outline: 1px solid rgba(15, 30, 50, .08);
  transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s;
}
.apa-tema:hover .apa-ventana { transform: translateY(-2px); box-shadow: 0 14px 24px -14px rgba(15, 30, 50, .55); }
.apa-ventana .v-barra {
  position: absolute; inset: 0 0 auto 0; height: 22%;
  background: linear-gradient(100deg, var(--m-hondo) 0%, var(--m-p) 60%, var(--m-p2) 100%);
  box-shadow: inset 0 -1.5px 0 var(--m-a);
}
.apa-ventana .v-mono {
  position: absolute; top: 5%; left: 6%; width: 12%; aspect-ratio: 1; border-radius: 50%;
  background: var(--m-a);
}
.apa-ventana .v-raya { position: absolute; top: 9%; left: 22%; height: 4%; width: 26%; border-radius: 9px; background: rgba(255,255,255,.75); }
.apa-ventana .v-tarjeta {
  position: absolute; left: 7%; right: 7%; top: 32%; height: 38%;
  border-radius: 8px; background: #fff;
  box-shadow: 0 4px 10px -8px rgba(15, 30, 50, .6);
}
.apa-ventana .v-tarjeta::before { content: ""; position: absolute; left: 8%; top: 22%; width: 42%; height: 13%; border-radius: 6px; background: var(--m-tinta); opacity: .8; }
.apa-ventana .v-tarjeta::after  { content: ""; position: absolute; left: 8%; top: 52%; width: 64%; height: 10%; border-radius: 6px; background: var(--m-suave); }
.apa-ventana .v-boton { position: absolute; right: 7%; bottom: 9%; width: 30%; height: 13%; border-radius: 99px; background: var(--m-p); }
.apa-ventana .v-punto { position: absolute; left: 7%; bottom: 11%; width: 9%; height: 9%; border-radius: 99px; background: var(--m-a); }

.apa-tema-pie { display: flex; align-items: flex-start; gap: 8px; padding: 0 2px; line-height: 1.35; }
.apa-tema-pie b { font-family: var(--display); font-weight: 700; font-size: .95rem; }
.apa-tema-pie small { color: var(--muted); font-size: .8rem; }
.apa-tema .apa-check {
  margin-left: auto; width: 22px; height: 22px; border-radius: 99px; flex: none;
  display: grid; place-items: center; color: #fff; background: var(--primary);
  transform: scale(0); transition: transform .22s cubic-bezier(.16, 1, .3, 1);
}
.apa-tema .apa-check svg { width: 13px; height: 13px; }
.apa-tema[aria-pressed="true"] .apa-check { transform: scale(1); }
.apa-tema[aria-pressed="true"] .apa-ventana { outline: 2px solid var(--primary); outline-offset: 3px; }

/* «Tu color» */
.apa-propio {
  display: grid; gap: 14px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end;
}
.apa-propio h4 { grid-column: 1 / -1; margin: 0; font-family: var(--display); font-size: 1rem; color: var(--ink); }
.apa-color { display: grid; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--muted); }
.apa-color-fila {
  display: flex; align-items: center; gap: 10px;
  background: var(--field-bg); border: 1px solid var(--field-border); border-radius: var(--radius-sm);
  padding: 6px 10px 6px 6px;
}
.apa-color input[type="color"] {
  width: 38px; height: 30px; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 8px;
}
.apa-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.apa-color input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 8px; }
.apa-color code { font-family: var(--cifra); font-size: .85rem; color: var(--ink); letter-spacing: .02em; }
.apa-contraste { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: .85rem; margin: 0; }
.apa-contraste .apa-pastilla {
  font-family: var(--cifra); font-weight: 600; font-size: .8rem;
  padding: 2px 9px; border-radius: 99px;
}
.apa-contraste.bien .apa-pastilla { background: var(--success-soft); color: var(--success); }
.apa-contraste.mal  .apa-pastilla { background: var(--danger-soft);  color: var(--danger); }

/* Tu marca */
.apa-marca { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 12px; }
.apa-vista-barra {
  width: 270px; height: 64px; border-radius: 12px;
  background: linear-gradient(100deg, hsl(from #0A1F38 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))) 0%, var(--primary) 60%);
  display: flex; align-items: center; gap: 10px; padding: 0 16px;
  box-shadow: inset 0 -2px 0 var(--secondary);
}
.apa-campos { display: grid; gap: 12px; max-width: 460px; }
.apa-campos .campo span { font-size: .82rem; font-weight: 600; color: var(--muted); }
.apa-botones { display: flex; flex-wrap: wrap; gap: 10px; }
.apa-subir { position: relative; overflow: hidden; }
.apa-subir input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* La etiqueta del tubo: tres formas, con su etiqueta de verdad a escala */
.apa-etiquetas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-top: 14px; }
.apa-etq {
  appearance: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  display: grid; gap: 10px; padding: 14px; border-radius: 14px;
  background: #fff; border: 1px solid var(--line);
  transition: border-color .15s, box-shadow .15s;
}
.apa-etq:hover { border-color: var(--field-border); box-shadow: 0 10px 20px -16px rgba(15, 30, 50, .5); }
.apa-etq:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; }
.apa-etq[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.apa-etq-titulo { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; }
.apa-etq-titulo .apa-check { margin-left: auto; width: 20px; height: 20px; border-radius: 99px; display: grid; place-items: center; color: #fff; background: var(--primary); opacity: 0; }
.apa-etq-titulo .apa-check svg { width: 12px; height: 12px; }
.apa-etq[aria-pressed="true"] .apa-check { opacity: 1; }
.apa-etq small { color: var(--muted); font-size: .8rem; line-height: 1.35; }
/* La etiqueta en miniatura: 57 × 27 mm dibujada a 3,6 px/mm */
.apa-etq .etiqueta {
  --et-ancho: 205px; --et-alto: 97px;
  margin: 0 auto; background: #fff;
  outline: 1px dashed #b9c4d0; outline-offset: 0;
  zoom: 1; page: auto; break-after: auto;
}
.apa-pistola {
  display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 0; padding: 12px 14px;
  border-radius: 12px; background: var(--secondary-soft); color: var(--ink); font-size: .88rem;
}
.apa-pistola svg { flex: none; width: 22px; height: 22px; color: var(--secondary-dark); margin-top: 1px; }

@media (max-width: 720px) {
  .apa-propio { grid-template-columns: 1fr; }
  .apa-marca { grid-template-columns: 1fr; }
  .apa-vista-barra { width: 100%; }
}

/* ---------------------------------------------------------------------------
   LA ETIQUETA CON CÓDIGO DE BARRAS O CON EL NÚMERO GRANDE
   (la de solo texto es la de siempre, de impreso.css)
   --------------------------------------------------------------------------- */
.etiqueta.et-barras { justify-content: flex-start; gap: .6mm; padding-top: 1.2mm; padding-bottom: 1mm; }
.etiqueta.et-barras .et-texto { flex: 0 0 auto; justify-content: flex-start; line-height: 1.12; }
.etiqueta.et-barras .et-linea1 { font-size: 7.5pt; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etiqueta.et-barras .et-pedidos { font-size: 6.6pt; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etiqueta.et-barras .et-orden { display: none; }
.et-codigo { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; }
.et-codigo svg { display: block; width: 86%; height: 100%; min-height: 0; }
.et-codigo span { font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 7pt; letter-spacing: .6pt; line-height: 1; margin-top: .3mm; }

.etiqueta.et-grande .et-orden { font-size: 15pt; letter-spacing: .5pt; line-height: 1.05; }
.etiqueta.et-grande .et-orden small { display: block; font-size: 6.5pt; letter-spacing: 0; font-weight: bold; color: #000; }
/* En papel, la etiqueta es siempre negro sobre blanco, sea cual sea el tema */
.etiqueta, .etiqueta * { color: #000; }
.etiqueta.et-grande .et-pedidos { font-size: 7pt; }