/* Identidad de máquina (js/componentes/monograma.js) y lo multi-MAD de la barra y la hoja de turnos
   (js/componentes/testigo.js, js/componentes/testigoResumen.js, js/componentes/testigoFilas.js). La tinta de cada Mac sale de
   la paleta --tipo-* de app.css, así que el tema claro y el oscuro salen solos: en oscuro
   las tintas son pastel y el monograma va con letra oscura; en claro, al revés. */

/* ── El monograma ───────────────────────────────────────────────────────── */
.mac-mono {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--mac, var(--tipo-cielo));
  color: var(--ground);
  font: 700 11px / 1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.02em;
}

.mac-mono.chico { width: 20px; height: 20px; border-radius: 50%; font-size: 9px; }

/* Anillo de estado: en línea, un aro fino del verde de «ok» separado por el fondo; en
   el tamaño chico (chips, menús) se omite para no ensuciar. Apagada: la tinta se lava,
   pero sigue siendo reconocible. */
.mac-mono.en-linea:not(.chico) { box-shadow: 0 0 0 2px var(--ground), 0 0 0 3.5px var(--ok); }
.mac-mono.off { filter: grayscale(0.85); opacity: 0.55; }

/* ── En la barra ────────────────────────────────────────────────────────── */
.testigo-mac { display: inline-flex; flex: 0 0 auto; }
.testigo-mac[hidden] { display: none; }

/* Varias Macs en el resumen: los sellos se pisan un poco, como una pila. */
.res-macs { display: inline-flex; flex: 0 0 auto; padding-right: 6px; }
.res-macs[hidden] { display: none; }
.res-macs .mac-mono { margin-right: -6px; box-shadow: 0 0 0 2px var(--panel); }

/* ── Secciones por Mac en la hoja ───────────────────────────────────────── */
.hoja-sec {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3) var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--ink);
}

.hoja-sec:first-child { padding-top: 0; }
.hoja-sec b { font-weight: 600; }

.hoja-sec-r {
  margin-left: auto;
  color: var(--faint);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.hoja-sec.apagada { opacity: 0.6; }

/* ── Un turno que espera autorización ───────────────────────────────────── */
.turno-fila.auth {
  align-items: flex-start;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
  cursor: pointer;
}

.turno-fila.auth .turno-sub { color: var(--ink); white-space: normal; }

.turno-auth-botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.turno-auth-botones .btn { min-height: 34px; padding: 4px 14px; }

/* ── Ámbito del encabezado (js/componentes/selectorAmbito.js) ───────────────────────── */
.ambito {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 9.5rem;
  padding: 3px 8px 3px 7px;
  border: 1px solid var(--mac, var(--border-hi));
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
}

.ambito[hidden] { display: none; }
.ambito-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ambito-flecha { color: var(--faint); font-size: 10px; }

.ambito-punto {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
}

.ambito-punto.parcial { background: var(--wait); }
.ambito-punto.off { background: var(--faint); }

.ambito-menu {
  position: fixed;
  z-index: var(--z-hoja);
  min-width: 13rem;
  max-width: calc(100vw - 16px);
  padding: var(--sp-1);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-md, 12px);
  background-color: var(--panel);
  background-image: var(--grad-superficie);
  backdrop-filter: var(--blur-vidrio);
  -webkit-backdrop-filter: var(--blur-vidrio);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
}

.ambito-op {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink);
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
}

.ambito-op.activa { background: var(--fill); font-weight: 600; }
.ambito-op > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ambito-op-r { margin-left: auto; flex-shrink: 0; color: var(--faint); font-size: var(--fs-xs); }
.mac-mono.todas { background: var(--fill); color: var(--ink); }

/* ── A qué Mac va el composer (destinoMac en js/componentes/monograma.js) ───────────── */
.composer-mac {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 2px 8px 2px 6px;
  border-radius: var(--r-pill);
  background: var(--fill);
  color: var(--muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.composer-mac-txt { color: var(--ink); font-weight: 600; }
.composer-mac-flecha { color: var(--faint); }

/* ── Prompt de autorización con varias Macs ─────────────────────────────── */
.auth-hoja.multi { border-top: 3px solid var(--mac); }
.auth-cola { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.auth-cola[hidden] { display: none; }

.auth-mac {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.auth-mac b { color: var(--ink); font-weight: 600; }

/* Pantalla Máquinas (mock «Máquinas», teléfono 4): tarjeta compacta por Mac, con su
   tinta, un anillo de estado y las acciones en pills chicas. */
.maq-lista { display: flex; flex-direction: column; gap: var(--sp-3); }
.maq { display: flex; flex-direction: column; gap: var(--sp-3); border-left: 3px solid var(--mac); }
.maq.off { border-left-color: var(--border-hi); opacity: 0.6; cursor: pointer; }
.maq-top { display: flex; align-items: center; gap: var(--sp-3); }
/* El monograma grande sigue circular, como el chico de `.mac-mono` (js/componentes/monograma.js);
   el anillo marca en línea/sin señal. */
.maq-top .mac-mono {
  width: 34px; height: 34px; border-radius: 50%; font-size: 12px;
  box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--ok);
}
.maq-top .mac-mono.off { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--border-hi); }
.maq-id { display: flex; flex-direction: column; min-width: 0; }
.maq-nombre { font-size: var(--fs-lg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Estado + versión + turnos van en un solo renglón gris (mock: "En línea · MAD 1.4.8 ·
   2 en curso"), sin cortarse si no entra. */
.maq-sub { color: var(--faint); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maq-tintas { display: flex; gap: var(--sp-2); margin-top: calc(-1 * var(--sp-1)); }
.maq-tintas[hidden] { display: none; }
.maq-tinta {
  width: 30px; height: 30px; border-radius: 50%; padding: 0; cursor: pointer;
  background: var(--mac); border: 0;
}
.maq-tinta[aria-checked="true"] { outline: 2px solid var(--mac); outline-offset: 3px; }
.maq-acciones { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.maq-acciones[hidden] { display: none; }
/* Pills chicas de contorno, como en el mock: sin relleno, borde fino, texto apagado. */
.maq-acciones .btn.mini {
  border-radius: var(--r-pill);
  background: none;
  border-color: var(--border);
  color: var(--muted);
  font-weight: 500;
}
.maq-acciones .btn.mini.peligro { background: none; }

/* ── «+ Agregar Mac» (js/componentes/codigoMac.js) ──────────────────────────────────── */
.maq-agregar { border: 1.5px dashed var(--border-hi); text-align: center; cursor: text; }
.maq-agregar-tit { color: var(--accent); font-size: var(--fs-md); font-weight: 700; }
.maq-agregar-sub { color: var(--faint); font-size: var(--fs-xs); margin-top: 2px; }

/* Código de 8: un input real transparente (acepta pegar «ABCD-EFGH» entero) + 8 celdas
   reflejo, agrupadas 4 + 4. Mismo mecanismo que /pair/celdas.js, con sus propias clases
   para no heredar layout de esa pantalla. */
.maq-codigo { position: relative; margin: var(--sp-3) auto 0; max-width: 300px; }
.maq-codigo::after {
  content: '·'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -65%);
  color: var(--faint); font-weight: 700; font-size: 18px; pointer-events: none;
}
.maq-codigo-input {
  position: absolute; inset: 0; width: 100%; opacity: 0; font-size: 16px;
  border: 0; padding: 0; color: transparent; caret-color: transparent;
}
.maq-codigo-fila { display: grid; grid-template-columns: repeat(4, 1fr) 4px repeat(4, 1fr); gap: 6px; pointer-events: none; }
.maq-codigo-fila span:nth-child(5) { grid-column: 6; }
.maq-codigo-fila span {
  height: 40px; border-radius: var(--r-sm); border: 1px solid var(--border-ctl);
  background: var(--ground); display: grid; place-items: center;
  font: 600 15px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink);
}
.maq-codigo-fila span.activa { border-color: var(--accent); box-shadow: 0 0 0 2px var(--glow-accent); }
.maq-codigo-fila span.llena { border-color: var(--border-hi); }
.maq-codigo.mal .maq-codigo-fila span { border-color: var(--conflict); }

/* Lo del teléfono (huella, tema, app, token): sigue andando igual, pero más discreto
   después de la tarjeta de agregar Mac. */
.maq-discreto { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-6);
  padding-top: var(--sp-4); border-top: 1px solid var(--border); opacity: 0.85; }

/* El título de la pantalla en el ámbar de la marca, como en el mock. */
.pantalla .titulo.maq-titulo { color: var(--accent); }