/* Panel del operador: Cajas, Sistema, cuentas de un negocio, zona delicada y búsqueda global. Se carga después de operador-tema.css. */

/* ---- búsqueda global en la barra de arriba ---- */
body.op .busca-global { position: relative; flex: 0 1 380px; min-width: 0; margin: 0 14px; }
body.op .busca-global input { width: 100%; min-height: 40px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: #fff; }
body.op .busca-global input::placeholder { color: rgba(255, 255, 255, .6); }
body.op .busca-res { position: absolute; left: 0; right: 0; top: 46px; z-index: 30; max-height: 60vh; overflow: auto; background: var(--blanco); color: var(--tinta); border: 1px solid var(--regla); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); padding: 6px; }
body.op .busca-res button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 48px; padding: 8px 12px; border: 0; background: none; color: inherit; text-align: left; border-radius: 8px; cursor: pointer; }
body.op .busca-res button:hover, body.op .busca-res button:focus-visible { background: var(--activo-bg); }
body.op .busca-res small { color: var(--tinta-suave); }
body.op .busca-res .vacio { padding: 12px; margin: 0; }
@media (max-width: 760px) { body.op .busca-global { margin: 0 8px; flex-basis: 150px; } body.op .marca strong { display: none; } }
@media (max-width: 420px) { body.op .busca-global { flex-basis: 110px; margin: 0 4px; } body.op .busca-global input { padding-inline: 8px; } }

/* ---- cajas y tablas con letra chica debajo ---- */
body.op .cajas-tabla td small, body.op .tabla td.version small { display: block; color: var(--tinta-suave); margin-top: 2px; }
body.op .cajas-tabla td.version { min-width: 150px; }
body.op .cajas-tabla a { color: var(--etiqueta-osc); font-weight: 600; text-decoration: none; }
body.op .cajas-tabla a:hover { text-decoration: underline; }
body.op .tabla tr.apagado { opacity: .6; }
body.op .tabla-envoltura { overflow-x: auto; max-width: 100%; }
body.op .franja .cifra.chica { font-size: 1.35rem; }
body.op .franja small.suave { display: block; margin-top: 2px; }
body.op .rojo { color: var(--jitomate); }

/* ---- cuentas del negocio (Soporte) ---- */
body.op .cuenta-acciones { white-space: normal; text-align: right; }
body.op .cuenta-acciones .btn { margin: 2px 0 2px 6px; }
@media (max-width: 560px) { body.op .cuenta-acciones { text-align: left; } body.op .cuenta-acciones .btn { margin: 2px 6px 2px 0; } }

/* ---- zona delicada ---- */
body.op .zona-peligro { border: 1px solid color-mix(in srgb, var(--jitomate) 40%, var(--regla)); border-radius: var(--radio); background: color-mix(in srgb, var(--jitomate-fondo) 35%, var(--blanco)); padding: 16px 18px; margin-top: 18px; }
body.op .zona-peligro h3 { color: var(--jitomate); margin-top: 0; }
body.op .cero-lista { max-height: 38vh; overflow: auto; border: 1px solid var(--regla); border-radius: 8px; margin: 6px 0 10px; }
body.op .cero-lista .tabla { margin: 0; }

/* Listas separadas por cliente (Cajas, Códigos de activación, Bitácora): un bloque por cliente con su nombre arriba */
body.op .grupo-cliente { margin: 0 0 22px; }
body.op .grupo-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 8px; padding: 0 0 6px; border-bottom: 1px solid var(--regla); font-size: 1.08rem; font-weight: 800; }
body.op .grupo-cab a { color: var(--tinta, inherit); text-decoration: none; }
body.op .grupo-cab a:hover { text-decoration: underline; }
body.op .grupo-cab small { font-size: .85rem; font-weight: 600; color: var(--tinta-suave); }
/* las tablas de cada cliente miden lo mismo (si no, cada bloque acomoda sus columnas distinto y se ve disparejo) */
@media (min-width: 700px) {
  body.op .grupo-cliente .cajas-tabla { table-layout: fixed; width: 100%; }
  body.op .grupo-cliente .cajas-tabla th:nth-child(1) { width: 18%; } body.op .grupo-cliente .cajas-tabla th:nth-child(2) { width: 22%; }
  body.op .grupo-cliente .cajas-tabla th:nth-child(3) { width: 26%; } body.op .grupo-cliente .cajas-tabla th:nth-child(4) { width: 18%; } body.op .grupo-cliente .cajas-tabla th:nth-child(5) { width: 16%; }
}