/* ===========================================================================
   V2 — Zoom Geográfico
   "En México tengo 10 bloqueados. Me meto ahí, me da un zoom y me dice:
    uno de Pesquería, dos de Revestidos… ah, es Palacios, por permanencia."
   La navegación es literalmente ese zoom, en tres niveles con migas.
   Solo layout: los átomos vienen de shared/ternium.css.
   =========================================================================== */

.v2-main { padding: 20px; max-width: 1560px; margin: 0 auto; }

/* --- Migas de nivel: el eje de esta versión ------------------------------ */
.v2-crumbs {
  display: flex; align-items: center; gap: 0;
  background: var(--color-bg-panel);
  border-bottom: 1px solid var(--color-border);
  padding: 0 20px;
  overflow-x: auto;
}
.v2-crumb {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 12px 0;
  font-family: inherit; font-size: 13px; text-transform: uppercase;
  color: var(--color-text-light); cursor: pointer; white-space: nowrap;
}
.v2-crumb[aria-current="true"] { color: var(--color-text-main); font-weight: 600; }
.v2-crumb:disabled { cursor: default; }
.v2-crumb .n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
  font-size: 11px; font-weight: 700; color: var(--color-text-main);
}
.v2-crumb[aria-current="true"] .n { background: var(--color-brand-orange-2); border-color: var(--color-brand-orange-2); color: #fff; }
.v2-sep { padding: 0 14px; color: var(--color-status-neutral); font-size: 11px; }

/* --- Nivel 1: mosaico de plantas ----------------------------------------- */
.v2-planta { text-align: left; }
.v2-planta .tx-tile__body { padding: 20px 10px; }
.v2-planta__title { font-size: 22px; font-weight: 700; line-height: 1.05; padding-right: 52px; }
.v2-planta__sub { font-size: 12px; font-weight: 300; color: var(--color-text-light); margin-top: 2px; }

/* Tabla con semáforo dentro del tile (Manual p.48) */
.v2-semaforo { width: 100%; border-collapse: collapse; margin-top: 12px; }
.v2-semaforo td { padding: 6px 0; border-bottom: 1px solid var(--color-border); font-size: 12px; font-weight: 300; }
.v2-semaforo tr:last-child td { border-bottom: 0; }
.v2-semaforo td.n { text-align: right; font-weight: 600; }
.v2-semaforo td.s { width: 12px; }
.v2-semaforo td.s + td { padding-left: 8px; }
.v2-semaforo td.s span { display: block; width: 12px; height: 12px; border-radius: 50%; }

/* --- Nivel 2: maestro + detalle ------------------------------------------ */
.v2-split { display: grid; grid-template-columns: minmax(0, 1fr) var(--pricelist-w); gap: 15px; align-items: start; }
.v2-lista { max-height: 620px; }

/* --- Nivel 3: ficha de la persona ---------------------------------------- */
.v2-ficha { background: var(--color-bg-panel); border: 1px solid var(--color-border); }
.v2-ficha__body { padding: 20px; }

.v2-hint {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--color-text-light);
}

@media (max-width: 1100px) {
  .v2-split { grid-template-columns: 1fr; }
  .v2-split .tx-pl { width: 100%; }
}
@media (max-width: 720px) {
  .v2-main { padding: 12px; }
}