/* ============================================================================
   ZIBA · css/integracion.css
   Lo poco que agregó el armado final y no pertenece a ningún módulo:
   la pantalla de entrada, la de configuración inicial y dos utilidades.
   Todo usa los tokens de css/tokens.css: no hay un solo color escrito a mano.
   ========================================================================== */

/* ── Un botón que se lee como un enlace (dentro de un párrafo) ───────────── */
.zb-enlace {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--acento);
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.zb-enlace:hover { color: var(--txt-1); }

/* ── Elegir el aparato en la pantalla de ingreso ─────────────────────────── */
.zb-aparato {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; min-height: var(--alto-control); padding: var(--sp-4);
  background: var(--sup-2); color: var(--txt-1);
  border: 1px solid var(--linea); border-radius: var(--r-2);
  cursor: pointer; text-align: left;
  transition: border-color var(--mv-rapido) var(--mv-curva),
              background var(--mv-rapido) var(--mv-curva);
}
.zb-aparato:hover,
.zb-aparato:focus-visible { border-color: var(--acento); background: var(--sup-3); }
.zb-aparato__icono {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: var(--r-full);
  background: var(--acento-tenue); color: var(--acento);
}
.zb-aparato__titulo { display: block; font-size: var(--ts-base); }
.zb-aparato__detalle { display: block; font-size: var(--ts-mini); color: var(--txt-3); margin-top: 2px; }

/* ── Ajustes: tarjetas de sección ────────────────────────────────────────── */
.zb-aj-grilla {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.zb-aj-clave {
  font-family: var(--ff-num); font-size: var(--ts-mini);
  word-break: break-all; color: var(--txt-3);
}
.zb-aj-paso {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--linea-suave);
}
.zb-aj-paso:last-child { border-bottom: 0; }
.zb-aj-paso__n {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: var(--r-full);
  background: var(--acento-tenue); color: var(--acento);
  font-family: var(--ff-num); font-size: var(--ts-mini);
}
.zb-aj-paso.esta-hecho .zb-aj-paso__n { background: var(--ok); color: var(--fondo); }

/* La tabla del asistente de carga tiene que poder scrollear sola en el iPad. */
.zb-aj-tabla { overflow-x: auto; }

/* ── La marca de verdad ───────────────────────────────────────────────────
   El logo lo mandaron Fernanda y Laura: ZIBÁ con acento, sans-serif, no la
   Didot que se venía usando en el wordmark escrito a mano. Va como imagen
   (dos versiones, una por tema) para que salga exacto en los dos fondos.   */
.zb-logo {
  width: min(150px, 78%);
  aspect-ratio: 1846 / 1125;
  margin: 0 auto;
  background: url('../img/logo-blanco.png') center / contain no-repeat;
}
:root[data-tema="light"] .zb-logo,
:root[data-tema="claro"] .zb-logo { background-image: url('../img/logo-carbon.png'); }
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) .zb-logo { background-image: url('../img/logo-carbon.png'); }
}

/* En la pantalla de ingreso el logo va más grande y con aire. */
.zb-logo--login { width: min(200px, 70%); margin-bottom: var(--sp-5); }

/* En el celular una palabra larga como "DEMOSTRACIÓN" no se puede partir al
   medio: queda ilegible. Los banners envuelven por palabra, no por letra. */
.banner__texto { overflow-wrap: break-word; word-break: normal; hyphens: none; }

/* ══════════════════════════════════════════════════════════════════════════
   🧨 ARRANQUE LIMPIO
   La única pantalla del sistema que borra datos sin vuelta atrás. Tiene que
   verse DISTINTA del resto de Ajustes desde el primer vistazo: nadie puede
   creer que está en "Números del negocio" mientras borra los cierres de caja.

   Se apoya en los tokens que ya existen (--peligro, --peligro-tenue): no
   inventa colores nuevos, usa el que el sistema ya reserva para lo que duele.
   ══════════════════════════════════════════════════════════════════════════ */

/* La cabecera de advertencia: franja diagonal, para que no se confunda con
   una tarjeta común aunque se mire de reojo. */
.zb-peligro {
  background-image:
    repeating-linear-gradient(135deg,
      var(--peligro-tenue) 0 14px,
      transparent 14px 28px);
  background-size: auto;
}
.zb-peligro .tarjeta__cab { border-bottom-color: var(--peligro-tenue); }

/* Cada paso del procedimiento, numerado y en fila. */
.zb-paso-peligro { margin-top: var(--sp-4); border-left: 3px solid var(--peligro-tenue); }
.zb-paso-peligro.esta-hecho { border-left-color: var(--ok); }
.zb-paso-peligro .tarjeta__titulo {
  display: flex; align-items: center; gap: var(--sp-2);
}

/* El número del paso: gris mientras está pendiente, verde cuando se hizo. */
.zb-paso-peligro__n {
  flex: none;
  display: inline-grid; place-items: center;
  width: 1.6em; height: 1.6em;
  border-radius: 50%;
  background: var(--sup-3); color: var(--txt-2);
  font-size: var(--ts-mini); font-variant-numeric: tabular-nums;
}
.zb-paso-peligro__n.esta-hecho { background: var(--ok); color: var(--fondo); }

/* La solapa del arranque limpio se pinta en rojo también en la barra de
   solapas: se ve que está ahí antes de entrar. */
.tabs__btn[aria-selected="true"].zb-tab-peligro,
.tabs__btn.zb-tab-peligro { color: var(--peligro); }