/* ============================================================
   OPERACIÓN EN VIVO · las medidas
   Salen de «Distribución y tarjetas» del lienzo, sección 1 y 4:

     márgenes de página 20 · entre bloques 20 · entre tarjetas 16
     indicadores 4 × 3 columnas · mínimo 200 de ancho
     plano 8 columnas · lista 4 columnas · máximo 5 filas
     fila de abajo: 4 + 4 + 4
     tarjeta: radio 20, borde 1, relleno 20, SIN SOMBRA en oscuro
     alerta crítica: 12 columnas, una a la vez, sólida, nunca vidrio
     contenido máximo 1600

   Tablet (600–1023): rejilla de 6, indicadores 2×2, márgenes 16.
   Celular (<600): una columna.
   ============================================================ */

#app .opv-cab { display: flex; flex-direction: column; gap: var(--e-1); margin: 0 0 var(--e-5) }
#app .opv-cab h2 { font: var(--t-pantalla); margin: 0; letter-spacing: -.01em }
#app .opv-cab h2::before { content: none }
#app .opv-grad {
  background-image: var(--marca-degradado-texto);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
#app .opv-sub { font: var(--t-cuerpo); color: var(--texto-2); margin: 0 }

#app .opv-zona:empty { display: none }

/* ── La alerta crítica ──
   Sólida y en rojo. El lienzo es explícito: «nunca lleva el color de la
   marca» y «nunca vidrio ni degradado». Una alerta que se parece a la
   marca deja de leerse como alerta. */
#app .opv-critica {
  display: flex; align-items: flex-start; gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-tarjeta);
  background: color-mix(in srgb, var(--record-rojo) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--record-rojo) 45%, transparent);
  margin: 0 0 var(--e-5);
}
#app .opv-critica .ico {
  width: 40px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-control);
  background: color-mix(in srgb, var(--record-rojo) 18%, transparent);
  color: var(--record-rojo); font-size: 20px;
}
#app .opv-critica .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e-1) }
#app .opv-critica .txt b { font: var(--t-cuerpo-f); color: var(--record-rojo) }
#app .opv-critica .txt span { font: var(--t-sec); color: var(--texto-2) }
#app .opv-critica .acc { display: flex; gap: var(--e-2); flex: none }

/* ── Los cuatro indicadores ── */
#app .opv-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  gap: var(--e-4);
  margin: 0 0 var(--e-5);
}
#app .opv-kpi {
  display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-5);
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  border: 1px solid var(--linea);
  min-width: 0;
}
#app .opv-kpi .lbl { font: var(--t-sec); color: var(--texto-2) }
#app .opv-kpi .cifra {
  font: var(--t-cifra); font-variant-numeric: tabular-nums;
  white-space: nowrap; letter-spacing: -.01em;
}
#app .opv-kpi .cifra small { font: var(--t-tarjeta); color: var(--texto-3); font-weight: 500 }
#app .opv-kpi .opv-nota { display: flex; align-items: center; gap: var(--e-2); font: var(--t-nota); color: var(--texto-3) }
#app .opv-kpi.cargando .cifra { color: var(--texto-3) }

#app .opv-punto { width: 8px; height: 8px; border-radius: var(--r-pildora); flex: none; display: inline-block }
#app .opv-punto.bien  { background: var(--record-verde) }
#app .opv-punto.medio { background: var(--record-ambar) }
#app .opv-punto.mal   { background: var(--record-rojo) }
#app .opv-punto.n     { background: var(--texto-3) }

/* ── Las tarjetas ── */
#app .opv-card {
  padding: var(--e-5);
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  border: 1px solid var(--linea);
  display: flex; flex-direction: column; gap: var(--e-3);
  min-width: 0;
}
#app .opv-head { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3) }
#app .opv-head h3 { font: var(--t-tarjeta); margin: 0 }
#app .opv-meta { font: var(--t-nota); color: var(--texto-3) }
#app .opv-insignia {
  font: var(--t-nota); padding: var(--e-1) var(--e-2);
  border-radius: var(--r-pildora); border: 1px solid var(--linea); color: var(--texto-2);
}
#app .opv-insignia.bien  { color: var(--record-verde); border-color: color-mix(in srgb, var(--record-verde) 45%, transparent) }
#app .opv-insignia.medio { color: var(--record-ambar); border-color: color-mix(in srgb, var(--record-ambar) 45%, transparent) }

/* ── El plano y las alertas · 8 y 4 columnas ── */
#app .opv-medio {
  display: grid; grid-template-columns: 2fr 1fr;
  gap: var(--e-4); margin: 0 0 var(--e-5);
}
#app .opv-sitios, #app .opv-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column }
#app .opv-sitios li, #app .opv-lista li {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 56px; border-top: 1px solid var(--linea);
}
#app .opv-sitios li:first-child, #app .opv-lista li:first-child { border-top: 0 }
#app .opv-sitios li .ti { color: var(--texto-3); font-size: 18px }
#app .opv-sitios li span { font: var(--t-cuerpo) }
#app .opv-lista .t { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
#app .opv-lista .t b { font: var(--t-cuerpo-f) }
#app .opv-lista .t em { font: var(--t-nota); color: var(--texto-3); font-style: normal }

/* ── La fila de abajo · 4 + 4 + 4 ── */
#app .opv-abajo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4) }

#app .opv-escalera { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-3) }
#app .opv-escalera li { display: flex; align-items: center; gap: var(--e-3) }
#app .opv-escalera .n {
  width: 28px; height: 28px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pildora);
  border: 1px solid var(--linea); background: var(--superficie-2);
  font: var(--t-sec); font-weight: 600;
}
#app .opv-escalera .l { flex: 1; min-width: 0; font: var(--t-cuerpo); color: var(--texto-2) }
#app .opv-escalera .e { font: var(--t-nota); color: var(--texto-3) }

#app .opv-par { display: flex; align-items: baseline; gap: var(--e-2) }
#app .opv-par b { font: var(--t-cifra); font-variant-numeric: tabular-nums }
#app .opv-par span { font: var(--t-nota); color: var(--texto-3) }

/* ── El estado vacío · uno de los tres obligatorios ── */
#app .opv-vacio {
  display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-5) 0; color: var(--texto-3);
}
#app .opv-vacio .ti { font-size: 24px }
#app .opv-vacio b { font: var(--t-cuerpo-f); color: var(--texto-2) }
#app .opv-vacio span { font: var(--t-nota) }

/* ── Tablet: rejilla de 6, indicadores 2 × 2 ── */
@media (max-width: 1023px) {
  #app .opv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  #app .opv-medio { grid-template-columns: 1fr }
  #app .opv-abajo { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

/* ── Celular: una columna, y la cifra a la medida del teléfono ── */
@media (max-width: 768px) {
  #app .opv-cab h2 { font: var(--t-pantalla) }
  #app .opv-kpis, #app .opv-abajo { grid-template-columns: 1fr; gap: var(--e-3) }
  #app .opv-kpi { padding: var(--e-4) }
  #app .opv-kpi .cifra { font-size: 28px; line-height: 34px }
  #app .opv-card { padding: var(--e-4) }
  #app .opv-critica { flex-direction: column; padding: var(--e-4) }
  #app .opv-critica .acc { width: 100% }
  #app .opv-critica .acc .btn { flex: 1 }
}

/* ════════════════════════════════════════════════════════════════
   LA BARRA DE HERRAMIENTAS · medidas de la mesa
   pegajosa a 20 · relleno 12 12 12 20 · radio 20 · SÓLIDA
   buscador 300 de ancho y 40 de alto · campana 44 · botón 44

   EL VIDRIO SE FUE · anexo del 27-oct. Llevaba `data-vidrio`, que es
   el atributo que enciende el desenfoque. La barra va pegajosa sobre
   la página --no flota sobre un plano con contenido rico-- así que el
   desenfoque no refractaba nada: era un gris con un filtro caro.

   El fondo pasa a `--superficie` con su línea, que es lo que el vidrio
   acababa pareciendo. Sin esto la barra se quedaba transparente y el
   contenido se le veía debajo al desplazarse.
   ════════════════════════════════════════════════════════════════ */
#app .opv-barra {
  position: sticky; top: var(--e-5); z-index: 4;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-3) var(--e-3) var(--e-5);
  border-radius: var(--r-tarjeta);
  border: 1px solid var(--linea);
  background: var(--superficie);
  margin: 0 0 var(--e-5);
}
#app .opv-barra .miga { font: var(--t-sec); color: var(--texto-2) }
#app .opv-barra .miga i { color: var(--texto-3); font-style: normal }
#app .opv-barra .miga b { color: var(--texto); font-weight: 600 }
#app .opv-barra .hueco { flex: 1 1 40px }
#app .opv-barra input[type="search"] {
  flex: 0 1 300px; min-width: 160px; height: 40px; box-sizing: border-box;
  padding: 0 var(--e-4);
  border-radius: var(--r-control);
  border: 1px solid var(--linea);
  background: var(--control);
  color: var(--texto);
  font: var(--t-cuerpo);
}
#app .opv-barra .icon-btn {
  width: var(--toque); height: var(--toque); flex: none;
  border-radius: var(--r-control);
  border: 1px solid var(--linea);
  background: var(--control);
  color: var(--texto);
  display: flex; align-items: center; justify-content: center;
  /* Nunca vidrio sobre vidrio: dentro de la barra, relleno simple. */
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
#app .opv-barra .btn { height: var(--toque); padding: 0 var(--e-5); flex: none }
#app .oculto-visual {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── El plano · área de 340 a sangre ── */
#app .opv-plano { padding: var(--e-4) 0 var(--e-4); overflow: hidden }
#app .opv-plano .opv-head { padding: 0 var(--e-5) }
#app .opv-lienzo {
  position: relative;
  min-height: 340px;
  display: flex; align-items: center; justify-content: center;
  padding: var(--e-10) var(--e-5) var(--e-5);
  background: var(--superficie-2);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
#app .opv-lienzo .opv-vacio { max-width: 420px; text-align: center; align-items: center; padding: 0 }

/* Los controles van SOBRE el plano, y sólidos. Aquí vivía «el único
   vidrio permitido fuera de la navegación»; el anexo del 27-oct lo
   retiró y dejó este control como la FORMA de referencia de todo
   segmentado de la consola: contenedor de radio 14, borde de 1, fondo
   `--superficie` y relleno 4. */
#app .opv-filtro {
  position: absolute; top: var(--e-3); left: var(--e-3);
  display: flex; gap: var(--e-1); padding: var(--e-1);
  border-radius: var(--r-control-g);
  border: 1px solid var(--linea);
  background: var(--superficie);
}
#app .opv-filtro button {
  /* 36, no 32 · anexo del 27-oct. Con el relleno de 4 del contenedor,
     4 + 36 + 4 = 44, que es el área de toque que pide el sistema. Era
     32, y el control entero medía 40. */
  min-height: 36px; padding: 0 var(--e-3);
  border-radius: var(--r-control); border: 0; background: transparent;
  color: var(--texto-2); font: var(--t-nota); cursor: pointer;
}
#app .opv-filtro button.act {
  background: color-mix(in srgb, var(--marca-principal) 16%, transparent);
  color: var(--marca-principal-texto);
}

#app .opv-leyenda {
  list-style: none; margin: 0; padding: var(--e-3) var(--e-5) 0;
  display: flex; flex-wrap: wrap; gap: var(--e-4);
  font: var(--t-nota); color: var(--texto-3);
}
#app .opv-leyenda li { display: flex; align-items: center; gap: var(--e-2) }
#app .opv-plano .opv-sitios { padding: 0 var(--e-5) }

@media (max-width: 768px) {
  /* ── LA BARRA EN EL TELEFONO SE QUEDA EN UNA FILA ──

     Tenía razón: en el teléfono la barra se partía en TRES renglones
     --miga y campana, el botón, y el buscador-- y se comía casi un
     tercio de la pantalla antes de enseñar un solo dato. En iPad no
     pasa, porque ahí los cuatro caben en una fila.

     Qué se queda y por qué:
       · el buscador, que es lo que de verdad se usa con el pulgar;
       · la acción, reducida a su icono --sigue a un toque de distancia
         y pasa de ocupar un renglón entero a 44 de ancho.
     Qué se va, y no se pierde nada:
       · la miga, porque el título de la pantalla está justo debajo;
       · la campana, porque el teléfono ya tiene la suya en la barra de
         arriba del panel. Tenerla dos veces era tenerla mal. */
  #app .opv-barra {
    padding: var(--e-2);
    gap: var(--e-2);
    flex-wrap: nowrap;
    margin-bottom: var(--e-4);
  }
  #app .opv-barra .miga,
  #app .opv-barra .hueco,
  #app .opv-barra [data-opv="avisos"] { display: none }
  #app .opv-barra input[type="search"] { flex: 1 1 auto; min-width: 0; order: 1 }
/* ── EL ICONO NO SE PINTA CON UN CÓDIGO A MANO ──
   Había escrito `content: "\ea6a"` creyendo que era el más de Tabler.
   No lo es: salía un círculo con una equis, que en un botón de crear
   se lee como «cancelar» --justo lo contrario de lo que hace--. Los
   códigos de una fuente de iconos cambian entre versiones y no hay
   forma de comprobarlos leyendo el CSS.

   Se usa el icono que el botón ya trae en su marcado, y se esconde
   sólo el RÓTULO. `font-size: 0` en el botón apagaba también el
   icono, porque un icono de Tabler es texto. */
  #app .opv-barra .btn {
    order: 2; flex: none;
    width: var(--toque); padding: 0; gap: 0;
    display: flex; align-items: center; justify-content: center;
  }
  /* el texto suelto del botón se va; el icono se queda */
  #app .opv-barra .btn { font-size: 0 }
  #app .opv-barra .btn > .ti { font-size: 20px; line-height: 1 }
  #app .opv-lienzo { min-height: 240px; padding: var(--e-10) var(--e-4) var(--e-4) }
}

/* En escritorio el botón enseña icono y rótulo con su hueco; en el
   teléfono el rótulo se esconde y queda el icono solo. */
#app .opv-barra .btn > .ti { font-size: 18px }
#app .opv-barra .btn { gap: var(--e-2) }
@media (max-width: 768px) {
  #app .opv-barra .btn > span { display: none }
  #app .opv-barra .btn { gap: 0 }
}