/* ====================================================================
   Terrano — sistema visual v2
   Disenado sobre los mockups: filas con separador, secciones con
   etiqueta, y color reservado para lo que pide atencion.
   ==================================================================== */

:root {
  /* #1E1E1E es el color de la aplicacion. Las bandas de etiqueta van
     un punto por debajo para separar secciones sin dibujar cajas. */
  --fondo:       #1E1E1E;
  --banda:       #1A1A1A;
  --superficie:  #1E1E1E;
  --superficie2: #272727;
  /* Separadores de un pixel real, no bloques de color: en el diseno
     apenas se ven. */
  --linea:       rgba(255,255,255,.075);
  --linea-fuerte: rgba(255,255,255,.12);
  --texto:       #F2F2F2;
  --texto2:      #9A9A9A;
  --texto3:      #6E6E6E;

  --azul:        #2E7FE8;
  --azul-claro:  #59A0F5;
  --azul-fondo:  #0F2947;

  --verde:       #3FBF5F;
  --verde-fondo: #0F2A17;
  --ambar:       #E8A33D;
  --ambar-fondo: #2B2110;
  --rojo:        #E5484D;
  --rojo-fondo:  #2A1214;

  /* Grises de relleno: barras vacias, interruptores apagados, casillas.
     Van en variable porque en el tema claro tienen que invertirse. */
  --relleno:     #3A3A3A;
  --relleno2:    #333333;
  --borde-tenue: #4A4A4A;
  --lienzo:      #0B0B0B;

  --radio: 12px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.oculto { display: none !important; }

button, input, select { font-family: inherit; }

/* Muchos elementos de lista son <button> para que respondan al teclado.
   Sin este reset traen el borde por defecto del navegador y cada fila
   aparece encajonada, que es justo lo contrario del diseno. */
button { border: none; background: none; color: inherit; }

/* Tema azul: mismas formas, otra piel. */
/* Tema claro. Mismos valores que la web publica, para que pasar del
   sitio a la aplicacion no sea un salto visual. */
#app[data-tema="claro"] {
  --fondo:       #FFFFFF;
  --banda:       #F7F9FC;
  --superficie:  #FFFFFF;
  --superficie2: #F1F5F9;
  --linea:       rgba(11,23,41,.09);
  --linea-fuerte: rgba(11,23,41,.16);
  --texto:       #0B1729;
  --texto2:      #64748B;
  --texto3:      #94A3B8;

  --relleno:     #E2E8F0;
  --relleno2:    #E2E8F0;
  --borde-tenue: #CBD5E1;
  --lienzo:      #0F172A;      /* el video sigue sobre oscuro */

  --azul:        #2563EB;
  --azul-claro:  #1D4ED8;
  --azul-fondo:  #EFF5FF;

  --verde:       #16A34A;
  --verde-fondo: #F0FDF4;
  --ambar:       #D97706;
  --ambar-fondo: #FFFBEB;
  --rojo:        #DC2626;
  --rojo-fondo:  #FEF2F2;
}

/* ====================================================================
   ACCESO — login y activacion
   ==================================================================== */

.acceso { min-height: 100dvh; display: flex; flex-direction: column;
          background: var(--fondo); }

.acc-barra {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-bottom: 1px solid var(--linea);
  min-height: 56px;
}
.acc-barra h2 { font-size: 19px; font-weight: 600; margin: 0; }

.atras {
  background: none; border: none; color: var(--texto); cursor: pointer;
  font-size: 22px; line-height: 1; padding: 2px 4px; flex: none;
}
.atras:hover { color: var(--azul-claro); }

.acc-cuerpo { flex: 1; padding: 24px 22px; max-width: 460px;
              width: 100%; margin: 0 auto; }

.marca { display: flex; align-items: center; gap: 14px; margin: 44px 0 34px; }
.marca-icono {
  width: 54px; height: 54px; border-radius: 15px; flex: none;
  background: var(--azul);
  display: flex; align-items: center; justify-content: center;
}
.marca-nombre { font-size: 27px; font-weight: 600; margin: 0;
                letter-spacing: -.01em; }

.acc-titulo { font-size: 29px; font-weight: 600; margin: 0 0 6px;
              letter-spacing: -.02em; }
.acc-sub { color: var(--texto2); font-size: 15px; margin: 0 0 26px; }

.campo { margin-bottom: 17px; }
.campo-cab { display: flex; align-items: baseline; margin-bottom: 7px; }
.campo-cab label { font-size: 14.5px; color: var(--texto); }
.campo-cab .enlace { margin-left: auto; }

.campo input {
  width: 100%; background: var(--superficie2);
  border: 1px solid var(--linea); border-radius: 10px;
  color: var(--texto); font-size: 16px; padding: 13px 14px;
}
.campo input::placeholder { color: var(--texto3); }
.campo input:focus { outline: none; border-color: var(--azul); }

.campo-clave { position: relative; }
.campo-clave input { padding-right: 46px; }
.ojo {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--texto2); cursor: pointer;
  font-size: 16px; padding: 8px;
}
.ojo:hover { color: var(--texto); }

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.enlace {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--azul-claro); font-size: 14px; text-decoration: none;
}
.enlace:hover { text-decoration: underline; }

/* Casilla dibujada a mano: la nativa no se puede pintar de azul en
   todos los navegadores. */
.casilla { display: flex; align-items: flex-start; gap: 12px;
           cursor: pointer; margin: 20px 0; font-size: 14.5px; }
.casilla input { position: absolute; opacity: 0; width: 0; height: 0; }
.casilla .marca-check {
  width: 24px; height: 24px; border-radius: 7px; flex: none;
  border: 1.5px solid var(--linea-fuerte); background: var(--superficie2);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: transparent; margin-top: 1px;
}
.casilla input:checked + .marca-check {
  background: var(--azul); border-color: var(--azul); color: #fff;
}

.boton-principal {
  width: 100%; padding: 15px; border: none; border-radius: 11px;
  background: var(--azul); color: #fff; font-size: 16.5px; font-weight: 500;
  cursor: pointer;
}
.boton-principal:hover { filter: brightness(1.08); }
.boton-principal:active { transform: translateY(1px); }
.boton-principal:disabled { opacity: .5; cursor: default; }

.separador { height: 1px; background: var(--linea); margin: 28px 0 20px; }

.tarjeta-nota {
  background: var(--superficie2); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 18px 20px;
}
.tarjeta-nota p { margin: 0 0 8px; font-size: 15px; }

.acc-pie { text-align: center; color: var(--texto3); font-size: 13px;
           padding: 24px 0 18px; }

.pista { display: flex; align-items: flex-start; gap: 8px;
         color: var(--texto2); font-size: 13.5px; margin: 8px 0 0; }

/* Validacion de la licencia */
.licencia-ok {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--verde-fondo); border: 1px solid rgba(63,191,95,.3);
  border-radius: 11px; padding: 15px 17px; margin: 20px 0 26px;
}
.licencia-ok .icono { color: var(--verde); font-size: 17px; line-height: 1.2; }
.licencia-ok .lineas { display: flex; flex-direction: column; gap: 2px; }
.licencia-ok .l1 { color: var(--verde); font-size: 15.5px; font-weight: 500; }
.licencia-ok .l2 { color: var(--verde); opacity: .8; font-size: 14px; }

.licencia-mal {
  background: var(--rojo-fondo); border: 1px solid rgba(229,72,77,.3);
  border-radius: 11px; padding: 14px 17px; margin: 20px 0 26px;
  color: var(--rojo); font-size: 14.5px;
}

#al-codigo, #li-codigo {
  font-family: ui-monospace, monospace; font-size: 17px;
  letter-spacing: .09em;
}

.etiqueta-grupo { color: var(--texto2); font-size: 14px;
                  margin: 26px 0 12px; }

/* Fuerza de la contrasena */
.fuerza { display: grid; grid-template-columns: repeat(4, 1fr);
          gap: 5px; margin-top: 9px; }
.fuerza span { height: 3px; border-radius: 2px; background: var(--relleno); }
.fuerza span.on1 { background: var(--rojo); }
.fuerza span.on2 { background: var(--ambar); }
.fuerza span.on3, .fuerza span.on4 { background: var(--verde); }
.fuerza-txt { color: var(--texto3); font-size: 13px; margin: 7px 0 0; }

.aviso {
  display: none; background: var(--rojo-fondo);
  border: 1px solid rgba(229,72,77,.3); border-radius: 10px;
  color: var(--rojo); font-size: 14px; padding: 12px 14px; margin: 16px 0;
}
.aviso.visible { display: block; }

.centro { text-align: center; }
.acc-cuerpo .centro { margin-top: 20px; font-size: 14.5px;
                      color: var(--texto2); }

/* ====================================================================
   APLICACION
   ==================================================================== */

#app { min-height: 100dvh; background: var(--fondo);
       color: var(--texto);
       display: flex; flex-direction: column; }

.cabecera { position: sticky; top: 0; z-index: 30;
            background: var(--fondo); }

.cab-fila {
  display: flex; align-items: center; gap: 11px; padding: 13px 16px 11px;
}
.cab-marca { font-size: 21px; font-weight: 600; letter-spacing: -.01em; }

.senal {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--verde-fondo); border-radius: 999px;
  padding: 3px 11px 3px 9px; font-size: 13px; color: var(--verde);
}
.senal.ko { background: var(--rojo-fondo); color: var(--rojo); }

.led { width: 7px; height: 7px; border-radius: 50%; flex: none;
       background: currentColor; animation: brasa 2.4s ease-in-out infinite; }
.senal.ko .led { animation: alarma 1.1s ease-in-out infinite; }

@keyframes brasa {
  0%,100% { box-shadow: 0 0 3px 1px currentColor; opacity: .85; }
  50%     { box-shadow: 0 0 8px 2px currentColor; opacity: 1; }
}
@keyframes alarma {
  0%,100% { opacity: 1; box-shadow: 0 0 6px 2px currentColor; }
  55%     { opacity: .18; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .led { animation: none !important; } }

.hueco { flex: 1; }

.icono-cab {
  position: relative; background: none; border: none; cursor: pointer;
  color: var(--texto2); font-size: 20px; line-height: 1;
  padding: 5px; border-radius: 9px; flex: none;
}
.icono-cab:hover { color: var(--texto); background: var(--superficie2); }
.icono-cab svg { display: block; }

.globo-num {
  position: absolute; top: -1px; right: -2px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: var(--azul); color: #fff;
  font-size: 10.5px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.icono-cab.con-avisos { color: var(--texto); }
.icono-cab.con-avisos .globo-num { background: var(--ambar); color: #241B08; }
.icono-cab.sin-avisos .globo-num { background: var(--relleno2);
                                   color: var(--texto3); }

.avatar {
  border-radius: 50%; flex: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--azul-fondo); color: var(--azul-claro);
  font-weight: 600; letter-spacing: .01em;
  width: 34px; height: 34px; font-size: 12.5px;
}
.avatar:hover { filter: brightness(1.2); }

/* ---------- barra del rack ---------- */

/* Barra plana: sin fondo, sin borde y sin lineas. Es la cabecera del
   rack, no una tarjeta mas; compitiendo con las de los equipos y las del
   feed cargaba la pantalla de recuadros.

   `width` explicito: sin el, los margenes automaticos la encogerian al
   tamano de su contenido y quedaria flotando en el centro.

   El padding de 16 px la alinea con la marca de arriba y con la lista de
   equipos de abajo. */
.rack-barra {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 16px; border: none; background: none;
  width: 100%; text-align: left; margin: 0 auto;
  color: var(--texto); cursor: pointer;
}
.rack-barra:hover .rack-nombre { color: var(--azul-claro); }
.rack-icono {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  background: var(--azul-fondo); color: var(--azul-claro);
  display: flex; align-items: center; justify-content: center;
}
/* Dos lineas: el nombre del rack arriba y sus datos debajo. Sin el
   display:block los dos span fluian en el mismo renglon. */
.rack-txt { flex: 1; min-width: 0; display: flex;
            flex-direction: column; gap: 1px; }
.rack-nom { display: block; font-size: 17px; font-weight: 600;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rack-meta { display: block; color: var(--texto2); font-size: 13.5px;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rack-flecha { color: var(--texto3); font-size: 15px; flex: none; }

/* ---------- pestanas ---------- */

.pestanas { display: flex; align-items: center; gap: 4px;
            padding: 0 16px; }
.pestanas button.tab {
  background: none; border: none; cursor: pointer;
  color: var(--texto2); font-size: 16px; padding: 13px 8px 12px;
  border-bottom: 2px solid transparent; margin-right: 14px;
}
.pestanas button.tab:hover { color: var(--texto); }
.pestanas button.tab.on { color: var(--texto); font-weight: 500;
                          border-bottom-color: var(--azul); }
.pestanas .acciones { margin-left: auto; display: flex; gap: 2px; }

main { flex: 1; }
.vista { display: none; }
.vista.on { display: block; }

/* ---------- filtros ---------- */

.filtros { display: flex; gap: 9px; padding: 14px 16px 12px;
           overflow-x: auto; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.chip {
  background: none; border: 1px solid var(--linea-fuerte); border-radius: 999px;
  color: var(--texto2); font-size: 14px; padding: 7px 17px;
  cursor: pointer; white-space: nowrap; flex: none;
}
.chip:hover { color: var(--texto); }
.chip.on { background: var(--superficie2); border-color: var(--superficie2);
           color: var(--texto); }
.chip.alerta { border-color: rgba(229,72,77,.55); color: var(--rojo); }
.chip.alerta.on { background: rgba(229,72,77,.14); border-color: var(--rojo); }

/* ====================================================================
   PANEL — filas de equipo
   ==================================================================== */

/* Lista de equipos: tarjetas, no filas con rayas.
   Las lineas de separacion cruzaban de lado a lado y, con la lista mas
   corta que la pantalla, la ultima quedaba colgando sobre un hueco
   vacio. Con tarjetas cada equipo se lee como una unidad y el espacio
   que sobra no dibuja nada. */
/* 24 px a la izquierda, los mismos que la marca y la barra del rack:
   asi las tres cosas arrancan en la misma vertical. */
.equipos { padding: 2px 24px 16px; display: grid; gap: 8px; }

.equipo {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 13px; cursor: pointer;
  /* Fondo y borde SIEMPRE, no solo al pasar por encima: cada equipo
     tiene que leerse como una tarjeta desde el primer vistazo, igual
     que la del rack y las del feed. */
  border-radius: 12px; border: 1px solid var(--linea);
  background: var(--superficie2);
  transition: border-color .12s ease;
}
.equipo:hover { border-color: var(--linea-fuerte); }

.equipo.apagado .eq-datos { opacity: .6; }

.punto { width: 8px; height: 8px; border-radius: 50%; flex: none;
         align-self: center; }
.p-verde { background: var(--verde); }
.p-ambar { background: var(--ambar); }
.p-rojo  { background: var(--rojo); }
.p-gris  { background: var(--texto3); }

.eq-datos { flex: 1; min-width: 0; }
.eq-nombre {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 15px; margin-bottom: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eq-linea { display: flex; align-items: center; gap: 9px;
            font-size: 13.5px; color: var(--texto2); }
.eq-off { color: var(--texto3); font-size: 13.5px; }

/* Barra de bateria: se lee de un vistazo, sin tener que fijarse en el
   numero. */
.bat { width: 46px; height: 4px; border-radius: 2px;
       background: var(--relleno); flex: none; overflow: hidden; }
.bat span { display: block; height: 100%; border-radius: 2px;
            background: var(--verde); }
.bat.media span { background: var(--ambar); }
.bat.baja span  { background: var(--rojo); }
.bat-num { color: var(--texto); font-size: 13.5px; flex: none; }

/* Barras de cobertura */
.senal-barras { display: flex; align-items: flex-end; gap: 2px;
                height: 12px; flex: none; }
.senal-barras i { width: 3px; border-radius: 1px; background: var(--borde-tenue);
                  display: block; }
.senal-barras i:nth-child(1) { height: 4px; }
.senal-barras i:nth-child(2) { height: 6.5px; }
.senal-barras i:nth-child(3) { height: 9px; }
.senal-barras i:nth-child(4) { height: 12px; }
.senal-barras i.on { background: var(--texto); }

.operador { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operador.malo { color: var(--ambar); }

.eq-lado { display: flex; flex-direction: column; align-items: flex-end;
           gap: 5px; flex: none; }
.eq-badge {
  min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px;
  background: var(--azul); color: #fff; font-size: 11.5px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.temp { display: inline-flex; align-items: center; gap: 4px;
        font-size: 13px; color: var(--texto2); }
.temp.caliente { color: var(--ambar); }
.eq-chevron { color: var(--texto3); font-size: 17px; flex: none;
              margin-left: 2px; }
.eq-hace { color: var(--ambar); font-size: 13px; }

.vacio { color: var(--texto2); text-align: center; padding: 54px 24px;
         font-size: 14.5px; }

/* ====================================================================
   PANTALLAS DE DETALLE (ajustes, perfil, admin)
   ==================================================================== */

.hoja { max-width: 620px; margin: 0 auto; }

.hoja-cab {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; background: var(--fondo); z-index: 20;
}
.hoja-cab h2 { font-size: 19px; font-weight: 600; margin: 0; flex: 1; }

.seccion-lbl { color: var(--texto2); font-size: 14px;
               padding: 18px 16px 9px; background: var(--banda); }
.seccion-lbl .der { float: right; color: var(--texto2); }

.bloque { border-top: 1px solid var(--linea);
          border-bottom: 1px solid var(--linea); }
.bloque + .bloque { border-top: none; }

.fila {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 16px;
  border: none; border-bottom: 1px solid var(--linea);
  background: none; width: 100%; text-align: left;
  color: var(--texto); font-size: 15.5px;
}
.fila:last-child { border-bottom: none; }
button.fila { cursor: pointer; }
button.fila:hover { background: var(--superficie2); }

.fila-icono { color: var(--texto2); flex: none; width: 22px;
              display: flex; justify-content: center; }
/* Titulo arriba y detalle debajo. Sin el display:block los dos span
   fluyen en el mismo renglon y la version sale pegada al nombre. */
.fila-txt { flex: 1; min-width: 0; }
.fila-titulo { display: block; }
.fila-sub { display: block; }
.fila-val { color: var(--texto2); font-size: 14.5px; flex: none; }
.fila-chevron { color: var(--texto3); font-size: 17px; flex: none; }
.fila-sub { color: var(--texto2); font-size: 13.5px; margin-top: 2px; }

.fila-titulo { font-size: 17px; font-weight: 600; }
.fila.columna { flex-direction: column; align-items: stretch; gap: 11px; }
.fila-cab { display: flex; align-items: baseline; gap: 10px; }
.fila-cab .der { margin-left: auto; color: var(--texto2); font-size: 14px; }
.ayuda { color: var(--texto2); font-size: 13.5px; margin: 0; line-height: 1.5; }
.ayuda.err { color: var(--rojo); }

.pie-nota { text-align: center; color: var(--texto3); font-size: 13px;
            padding: 22px 16px 30px; line-height: 1.6; }

/* Segmentado Miniatura | Alta */
.segmentado { display: grid; grid-template-columns: 1fr 1fr; gap: 0;
              border: 1px solid var(--linea-fuerte); border-radius: 11px;
              overflow: hidden; background: var(--banda); }
.segmentado button {
  background: none; border: none; cursor: pointer;
  color: var(--texto2); font-size: 15.5px; padding: 13px 8px;
}
.segmentado button.on { background: var(--superficie2); color: var(--texto);
                        font-weight: 500; }

/* Interruptor */
.interruptor { width: 50px; height: 30px; border-radius: 999px; flex: none;
               background: var(--relleno); position: relative;
               border: none; cursor: pointer; transition: background .18s; }
.interruptor::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  transition: transform .18s;
}
.interruptor.on { background: var(--azul); }
.interruptor.on::after { transform: translateX(20px); }

/* Lista de apps */
.buscar {
  width: 100%; background: var(--superficie2); border: 1px solid var(--linea);
  border-radius: 10px; color: var(--texto);
  font-size: 15px; padding: 12px 14px;
}
.buscar::placeholder { color: var(--texto3); }
.buscar:focus { outline: none; border-color: var(--azul); }

.app-fila {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 16px; border-bottom: 1px solid var(--linea);
  cursor: pointer; font-family: ui-monospace, monospace; font-size: 14.5px;
}
.app-fila:last-child { border-bottom: none; }
.app-fila:hover { background: var(--superficie2); }
.app-fila.marcada { background: var(--azul-fondo); }
.app-fila input { position: absolute; opacity: 0; width: 0; height: 0; }
.app-fila .marca-check {
  width: 23px; height: 23px; border-radius: 6px; flex: none;
  border: 1.5px solid var(--borde-tenue); background: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: transparent;
}
.app-fila input:checked + .marca-check {
  background: var(--azul); border-color: var(--azul); color: #fff;
}
.app-fila span.txt { overflow: hidden; text-overflow: ellipsis;
                     white-space: nowrap; }

.ver-mas {
  width: 100%; background: none; border: none; cursor: pointer;
  color: var(--azul-claro); font-size: 15px; padding: 15px 16px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.ver-mas:hover { background: var(--superficie2); }

/* Versiones */
.versiones { background: var(--banda); display: grid; grid-template-columns: repeat(3, 1fr);
             gap: 10px; padding: 16px; }
.ver-item .k { color: var(--texto2); font-size: 13.5px; }
.ver-item .v { font-family: ui-monospace, monospace; font-size: 14.5px;
               margin-top: 2px; }

/* ====================================================================
   PERFIL
   ==================================================================== */

.perfil-cab { display: flex; align-items: center; gap: 18px;
               padding: 22px 16px 24px; }

.avatar-envoltura { position: relative; flex: none; }
.avatar-grande {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--azul-fondo); color: var(--azul-claro);
  display: flex; align-items: center; justify-content: center;
  font-size: 27px; font-weight: 600;
}
/* Camarita para la foto de perfil, como en el diseno. */
.camara {
  position: absolute; right: -1px; bottom: 2px;
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--superficie2); border: 2px solid var(--fondo);
  color: var(--texto2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.camara:hover { color: var(--texto); background: var(--relleno2); }
.perfil-datos { min-width: 0; }
.perfil-nombre { font-size: 23px; font-weight: 600; letter-spacing: -.01em; }
.perfil-rol { color: var(--texto2); font-size: 15px; margin-top: 1px; }
.insignia {
  display: inline-block; margin-top: 10px; padding: 5px 14px;
  border-radius: 999px; background: var(--azul-fondo);
  color: var(--azul-claro); font-size: 13.5px;
}

/* Discreta: marca lo que aun no funciona sin robar atencion a la fila. */
.proximamente { font-size: 11px; text-transform: uppercase;
                letter-spacing: .05em; }

.fila-salir { display: flex; align-items: center; justify-content: center;
              gap: 10px; color: var(--rojo);
              border: 1px solid rgba(229,72,77,.35); border-radius: 11px;
              margin: 26px 16px 0; padding: 15px; background: none;
              cursor: pointer; font-size: 16px; width: calc(100% - 32px); }
.fila-salir:hover { background: var(--rojo-fondo); }

/* Lo que aun no tiene backend se marca, para no prometer de mas. */
.proximamente { color: var(--texto3); font-size: 12.5px;
                border: 1px solid var(--linea-fuerte); border-radius: 999px;
                padding: 2px 9px; flex: none; }

/* ====================================================================
   USUARIOS Y ACTIVIDAD
   ==================================================================== */

.usuario { display: flex; align-items: center; gap: 13px;
           padding: 13px 16px; border-bottom: 1px solid var(--linea); }
.usuario:last-child { border-bottom: none; }
.avatar-lista { width: 42px; height: 42px; font-size: 14px; }
.usuario-datos { flex: 1; min-width: 0; }
.usuario-nombre { font-size: 16.5px; font-weight: 600; }
.usuario-tu { color: var(--texto2); font-weight: 400; font-size: 15px; }
.usuario-rol { color: var(--texto2); font-size: 14px; margin-top: 1px; }
.punto-online { width: 9px; height: 9px; border-radius: 50%;
                background: var(--verde); flex: none; }

.invitacion .avatar-lista { background: none;
                            border: 1px solid var(--linea-fuerte);
                            color: var(--texto2); font-size: 16px; }
.invitacion .usuario-nombre { font-weight: 500; }
.invitacion .usuario-rol { color: var(--ambar); }

.sel-dias {
  background: var(--superficie2); border: 1px solid var(--linea);
  border-radius: 999px; color: var(--texto);
  font-size: 14px; padding: 7px 13px; cursor: pointer;
}
.sel-dias:focus { outline: none; border-color: var(--azul); }

.eventos { border-top: 1px solid var(--linea); }
.ev {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 16px; border-bottom: 1px solid var(--linea);
  font-size: 15px;
}
.ev:last-child { border-bottom: none; }
.ev-punto { width: 8px; height: 8px; border-radius: 50%; flex: none;
            margin-top: 6px; background: var(--azul); }
.ev-ok    .ev-punto { background: var(--verde); }
.ev-aviso .ev-punto { background: var(--ambar); }
.ev-malo  .ev-punto { background: var(--rojo); }
.ev-hora { color: var(--texto2); font-size: 14px; flex: none;
           font-family: ui-monospace, monospace; margin-top: 1px; }
.ev-texto { flex: 1; min-width: 0; }
.ev-texto strong { font-weight: 600; }
.ev.mala { background: var(--rojo-fondo); }
.ev.mala .ev-texto { color: var(--rojo); }
.txt-mono { font-family: ui-monospace, monospace; font-size: 14px; }

.cargar-mas {
  width: 100%; background: none; border: none; cursor: pointer;
  color: var(--azul-claro); font-size: 15px; padding: 15px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  border-bottom: 1px solid var(--linea) !important;
}
.cargar-mas:hover { background: var(--superficie2); }
.cargar-mas:disabled { opacity: .5; cursor: default; }

.boton-csv { margin: 22px 16px 0; width: calc(100% - 32px);
             display: flex; align-items: center; justify-content: center;
             gap: 10px; }

/* ====================================================================
   DISPLAY
   ==================================================================== */

.feed { display: grid; gap: 16px; padding: 16px;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.pantalla { border: 1px solid var(--linea); border-radius: var(--radio);
            overflow: hidden; background: var(--superficie2);
            scroll-margin-top: 130px; }
.pantalla.enfocada { border-color: var(--azul); }
.pantalla.apagado { opacity: .55; }

.cab-pantalla { display: flex; align-items: center; gap: 9px;
                padding: 10px 13px; border-bottom: 1px solid var(--linea);
                font-size: 14.5px; }
.cab-pantalla .tit { font-weight: 500; overflow: hidden;
                     text-overflow: ellipsis; white-space: nowrap; }
.cab-pantalla .met { margin-left: auto; display: flex; align-items: center;
                     gap: 9px; font-size: 13px; color: var(--texto2);
                     flex: none; }
.globo { display: inline-flex; align-items: center; gap: 4px;
         background: var(--ambar-fondo); color: var(--ambar);
         border: 1px solid rgba(232,163,61,.35);
         min-width: 20px; height: 21px; border-radius: 999px;
         padding: 0 7px; font-size: 11.5px; font-weight: 600; }
.sobre { animation: sobre-late 1.6s ease-in-out infinite; }
@keyframes sobre-late { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .sobre { animation: none; } }

.lienzo-envoltura { position: relative; background: var(--lienzo); min-height: 120px; }
.pantalla canvas { width: 100%; display: block; }
.cargando { position: absolute; inset: 0; display: flex;
            align-items: center; justify-content: center;
            font-size: 13px; color: var(--texto2); pointer-events: none; }
.cargando.err { color: var(--rojo); }
.pantalla.apagado .lienzo-envoltura::after {
  content: "offline"; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-size: 13px; color: var(--texto3);
}

.acciones-pantalla { display: flex; gap: 6px; flex-wrap: wrap;
                     padding: 10px 13px; border-top: 1px solid var(--linea); }
.acc { background: var(--superficie2); border: 1px solid var(--linea-fuerte);
       border-radius: 8px; color: var(--texto2); cursor: pointer;
       font-size: 13px; padding: 7px 12px; }
.acc:hover { color: var(--texto); border-color: var(--texto3); }
.acc.on { background: var(--azul-fondo); border-color: var(--azul);
          color: var(--texto); }
.pantalla.controlando { touch-action: none; }
.pantalla.controlando canvas { cursor: crosshair; }

.teclado { display: flex; gap: 7px; align-items: center;
           padding: 0 13px 11px; }
.teclado input { flex: 1; min-width: 0; background: var(--banda);
                 border: 1px solid var(--linea); border-radius: 8px;
                 color: var(--texto); font-family: ui-monospace, monospace;
                 font-size: 15px; letter-spacing: .16em; padding: 8px 11px; }
.teclado input:focus { outline: none; border-color: var(--azul); }

@media (min-width: 720px) {
  .cab-fila, .pestanas, .rack-barra, .filtros { padding-left: 24px;
                                                padding-right: 24px; }
  .equipo, .fila, .usuario, .ev, .app-fila { padding-left: 24px;
                                             padding-right: 24px; }
  .seccion-lbl { padding-left: 24px; padding-right: 24px; }
}

/* El modo tactil solo tiene sentido con dedo: con raton el arrastre ya
   se distingue del scroll. */
.solo-tactil { display: none; }
@media (hover: none) and (pointer: coarse) {
  .solo-tactil { display: inline-block; }
}


/* ====================================================================
   PANTALLAS GRANDES
   Movil primero. A partir de tablet el contenido se centra, y en
   escritorio el panel y las pantallas conviven en dos columnas: con
   raton no tiene sentido esconder la mitad detras de una pestana.
   ==================================================================== */

/* ====================================================================
   PANTALLAS GRANDES
   ====================================================================

   Un ancho comun para todo. Antes la cabecera se limitaba a 1100 y el
   contenido a 1500, asi que en un monitor no quedaban alineados: la
   barra del rack empezaba 100 px antes que la lista de equipos.

   `--ancho-util` lo fija en un sitio y lo usan todas las franjas.
   ==================================================================== */

:root { --ancho-util: 100%; }

.cab-fila, .pestanas, .filtros, .barra-fallos {
  max-width: var(--ancho-util); margin-left: auto; margin-right: auto;
}
.rack-barra { max-width: var(--ancho-util); }

@media (min-width: 700px) {
  body { font-size: 15.5px; }

  :root { --ancho-util: 1100px; }
  .vista { max-width: var(--ancho-util); margin: 0 auto; }
  .hoja-cab { border-radius: 0; }
}

@media (min-width: 1080px) {
  /* Dos columnas: la lista a la izquierda, las pantallas a la derecha.
     Las pestanas desaparecen porque ya no hay nada que alternar. */
  :root { --ancho-util: 1500px; }

  #app.doble .pestanas .tab { display: none; }
  #app.doble main {
    display: grid; grid-template-columns: 380px minmax(0, 1fr);
    /* width:100% es imprescindible. Sin el, `margin: 0 auto` sobre un
       elemento flex lo encoge al tamano de su contenido en vez de
       estirarlo: en un monitor de 1920 el contenido ocupaba 886 px con
       500 px de hueco a cada lado. */
    width: 100%; max-width: var(--ancho-util); margin: 0 auto;
    align-items: start;
  }
  /* `margin: 0 auto` tambien encoge un elemento de rejilla al tamano de
     su contenido, igual que en flex. Hay que anularlo en las dos
     columnas o el feed se queda en 446 px dentro de un hueco de 1540. */
  #app.doble #vista-panel,
  #app.doble #vista-display {
    display: block; max-width: none; width: 100%; margin: 0;
  }
  #app.doble #vista-panel {
    /* Sin borde vertical: la lista es mas corta que la pantalla, asi que
       la linea se cortaba a media altura y quedaba colgando. Separa
       mejor el propio hueco entre columnas. */
    position: sticky; top: 0; max-height: calc(100dvh - 165px);
    overflow-y: auto; padding-right: 6px;
  }
  #app.doble #vista-display { padding-left: 6px; }

  /* Las hojas de detalle ocupan todo: son de lectura, no de trabajo
     simultaneo. */
  #app.doble.en-hoja main { display: block; }
  #app.doble.en-hoja #vista-panel,
  #app.doble.en-hoja #vista-display { display: none; }
}

/* Cuanto mas ancho, mas telefonos a la vez. Es lo que se compra: ver
   veinte moviles de un vistazo, no uno grande. */
@media (min-width: 1080px) {
  .feed { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
}
@media (min-width: 1500px) {
  :root { --ancho-util: 1760px; }
  #app.doble main { grid-template-columns: 400px minmax(0, 1fr); }
}
@media (min-width: 1900px) {
  :root { --ancho-util: 2100px; }
  .feed { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* ---------- hojas de detalle ---------- */

/* Perfil, Ajustes y el registro de fallos se leen en columna. Estirarlos
   a 2000 px daria lineas imposibles de seguir, asi que se quedan
   centrados; lo que se gana en pantalla grande es respirar, no ancho. */
@media (min-width: 700px) {
  .hoja { max-width: 720px; padding-bottom: 40px; }
  .hoja-cab { padding-top: 22px; padding-bottom: 18px; }
}
@media (min-width: 1080px) {
  .hoja {
    max-width: 760px; margin-top: 22px; margin-bottom: 40px;
    border: 1px solid var(--linea); border-radius: 16px;
    overflow: hidden; background: var(--superficie);
  }
  /* Con la hoja convertida en tarjeta, su cabecera ya no necesita
     borde propio ni pegarse arriba. */
  .hoja-cab { position: static; border-radius: 16px 16px 0 0; }
}

/* ---------- renombrar el rack en Ajustes ---------- */

.fila-rack .fila-txt { display: flex; align-items: center; gap: 8px; }
.lapiz {
  background: none; border: none; cursor: pointer; flex: none;
  color: var(--azul-claro); padding: 3px; border-radius: 6px;
  display: flex; align-items: center;
}
.lapiz:hover { background: var(--superficie2); }
.campo-inline {
  flex: 1; min-width: 0;
  background: var(--superficie2); border: 1px solid var(--azul);
  border-radius: 8px; color: var(--texto);
  font-size: 17px; font-weight: 600; padding: 5px 10px; margin: -5px 0;
}
.campo-inline:focus { outline: none; }
.fila-titulo.fallo { color: var(--rojo); }

/* ---------- avatares con foto ---------- */

.avatar.con-foto, .avatar img { padding: 0; overflow: hidden; }
.avatar img, img.avatar {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  display: block;
}
img.avatar-lista { width: 42px; height: 42px; }
img.avatar-grande { width: 84px; height: 84px; }
#tab-perfil.con-foto { padding: 0; overflow: hidden; }

/* ---------- dialogo de operador ---------- */

.dlg-fondo {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.6); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.dlg {
  width: 100%; max-width: 440px; max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--superficie2); border: 1px solid var(--linea-fuerte);
  border-radius: 14px; overflow: hidden;
}
.dlg-cab { display: flex; align-items: center; gap: 10px;
           padding: 15px 18px; border-bottom: 1px solid var(--linea); }
.dlg-cab h3 { font-size: 17px; font-weight: 600; margin: 0; flex: 1; }
.dlg-cuerpo { padding: 16px 18px; overflow-y: auto; flex: 1; }
.dlg-pie { display: flex; align-items: center; gap: 8px;
           padding: 13px 18px; border-top: 1px solid var(--linea); }
.boton-principal.estrecho { width: auto; padding: 10px 20px;
                            font-size: 15px; }

/* Roles: cada uno con lo que puede hacer, para no elegir a ciegas. */
.opcion-rol {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; margin-bottom: 8px; cursor: pointer;
  background: var(--banda); border: 1px solid var(--linea);
  border-radius: 10px;
}
.opcion-rol:hover { border-color: var(--linea-fuerte); }
.opcion-rol.on { border-color: var(--azul); background: var(--azul-fondo); }
.opcion-rol input { accent-color: var(--azul); margin-top: 2px;
                    width: 17px; height: 17px; flex: none; }
.opcion-rol span { display: flex; flex-direction: column; gap: 2px; }
.opcion-rol strong { font-size: 15px; font-weight: 500; }
.opcion-rol small { font-size: 13px; color: var(--texto2); }

.usuario.editable { cursor: pointer; }
.usuario.editable:hover { background: var(--superficie2); }
.usuario.inactivo .usuario-datos { opacity: .55; }
.usuario-baja { font-size: 12px; color: var(--ambar); flex: none; }

/* ---------- pantalla de sistema ---------- */

.caja-info {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 14px 16px; padding: 16px 18px; border-radius: 12px;
  background: var(--azul-fondo); border: 1px solid rgba(46,127,232,.3);
}
.caja-icono { color: var(--azul-claro); flex: none; margin-top: 1px; }
.caja-t1 { display: block; color: var(--azul-claro); font-size: 16px;
           font-weight: 500; line-height: 1.3; }
.caja-t2 { display: block; color: var(--azul-claro); opacity: .8;
           font-size: 13.5px; margin-top: 3px; }

/* Aviso de lo que implica actualizar. En ambar: no es un fallo, pero
   hay que leerlo antes de pulsar. */
.nota-aviso {
  margin: 14px 16px; padding: 15px 17px; border-radius: 11px;
  background: var(--ambar-fondo); border: 1px solid rgba(232,163,61,.28);
  color: var(--ambar); font-size: 14.5px; line-height: 1.5;
}

.pastilla-ok {
  flex: none; font-size: 13px; padding: 5px 13px; border-radius: 999px;
  background: var(--verde-fondo); color: var(--verde);
  border: 1px solid rgba(63,191,95,.28);
}
.boton-borde {
  flex: none; background: none; cursor: pointer;
  border: 1px solid var(--azul); border-radius: 9px;
  color: var(--azul-claro); font-size: 14.5px; padding: 8px 16px;
}
.boton-borde:hover { background: var(--azul-fondo); }

.fila-sub.mono { font-family: ui-monospace, monospace; font-size: 13px; }

/* ---------- lapicero en las filas del panel ---------- */

.eq-nombre { display: flex; align-items: center; gap: 7px; }
.eq-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-txt.fallo { color: var(--rojo); }
.lapiz-eq { opacity: 0; transition: opacity .14s ease; padding: 2px; }
.equipo:hover .lapiz-eq { opacity: 1; }
@media (hover: none) { .lapiz-eq { opacity: .65; } }
.campo-eq { font-size: 15px; font-weight: 400;
            font-family: ui-monospace, monospace; padding: 3px 8px; }

/* ---------- reglas de contrasena ---------- */

.reglas { list-style: none; margin: 9px 0 0; padding: 0;
          display: flex; flex-wrap: wrap; gap: 4px 16px; }
.reglas li { display: flex; align-items: center; gap: 6px;
             font-size: 13px; color: var(--texto3); }
.reglas li.ok { color: var(--verde); }
.reglas .tic { font-size: 12px; width: 12px; }

.acc.peligro { color: var(--rojo); border-color: rgba(229,72,77,.4); }
.acc.peligro:hover { background: var(--rojo-fondo); }
.acc.peligro.confirmando { background: var(--rojo-fondo);
                           border-color: var(--rojo); font-size: 12px; }

/* ---------- buscador del panel ---------- */

.caja-buscar { display: flex; align-items: center; gap: 8px;
               padding: 12px 16px 0; }
.caja-buscar .buscar { flex: 1; }
.cerrar-buscar {
  background: none; border: none; cursor: pointer; flex: none;
  color: var(--texto2); font-size: 22px; line-height: 1;
  padding: 4px 8px; border-radius: 8px;
}
.cerrar-buscar:hover { color: var(--texto); background: var(--superficie2); }

/* El acceso va siempre en claro, como la web publica: entrar en la
   aplicacion no debe ser un salto de un sitio blanco a uno negro. Y
   antes de entrar no se sabe de quien es la preferencia; mostrar el tema
   del ultimo que uso el equipo delata que alguien lo uso. */
#acceso {
  --fondo:       #FFFFFF;
  --banda:       #F7F9FC;
  --superficie:  #FFFFFF;
  --superficie2: #F7F9FC;
  --linea:       rgba(11,23,41,.09);
  --linea-fuerte: rgba(11,23,41,.16);
  --texto:       #0B1729;
  --texto2:      #64748B;
  --texto3:      #94A3B8;
  --relleno:     #E2E8F0;
  --borde-tenue: #CBD5E1;
  --azul:        #2563EB;
  --azul-claro:  #1D4ED8;
  --azul-fondo:  #EFF5FF;
  --verde:       #16A34A;
  --verde-fondo: #F0FDF4;
  --rojo:        #DC2626;
  --rojo-fondo:  #FEF2F2;
}

/* ---------- registro de fallos ---------- */

.ayuda.pad { padding: 12px 16px 0; }
.hoja-cab .der { margin-left: auto; flex: none; }
.ev-extra { display: block; color: var(--texto2); font-size: 13px;
            margin-top: 2px; }

/* ---------- lapiceros ---------- */

/* Aparecen al pasar por encima, igual en Ajustes que en el panel: fijos
   destacan mas que el propio nombre, que es lo que hay que leer. */
.lapiz, .lapiz-eq {
  opacity: 0; transition: opacity .14s ease; padding: 2px;
  background: none; border: none; cursor: pointer; flex: none;
  color: var(--azul-claro); display: flex; align-items: center;
  border-radius: 6px;
}
.fila-rack:hover .lapiz,
.equipo:hover .lapiz-eq { opacity: 1; }
.lapiz:focus-visible, .lapiz-eq:focus-visible { opacity: 1; }
.lapiz:hover, .lapiz-eq:hover { background: var(--superficie2); }

/* En tactil no hay "pasar por encima": se dejan visibles pero tenues. */
@media (hover: none) {
  .lapiz, .lapiz-eq { opacity: .55; }
}

/* La pantalla con el foco del teclado se marca: hay que saber en cual
   se va a escribir. */
.pantalla.con-foco { border-color: var(--azul); }
.pantalla canvas:focus { outline: none; }

/* Mientras se saca la captura: el boton solo se apagaba y no se veia
   que estuviera pasando algo. */
.pantalla.capturando .lienzo-envoltura::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: rgba(46,127,232,.14);
  animation: latido 1.1s ease-in-out infinite;
}
@keyframes latido { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pantalla.capturando .lienzo-envoltura::before { animation: none; }
}

/* ====================================================================
   REGISTRO DE FALLOS
   ==================================================================== */

.hoja-cab-alta { align-items: flex-start; padding-top: 15px; }
.hoja-cab-alta .cab-txt { flex: 1; min-width: 0; }
.hoja-cab-alta h2 { margin: 0; }
.cab-sub { display: block; color: var(--texto2); font-size: 14px;
           margin-top: 2px; }

/* Separador de dia: banda tenue con la fecha en mayusculas. */
.dia-sep {
  padding: 10px 16px; background: var(--banda);
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  color: var(--texto2); font-size: 12.5px;
  letter-spacing: .06em; font-weight: 500;
}

.fallo {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 13px 16px; border-bottom: 1px solid var(--linea);
}
.fallo-ico { flex: none; margin-top: 1px; }
.ic-rojo  { color: var(--rojo); }
.ic-ambar { color: var(--ambar); }
.ic-azul  { color: var(--azul-claro); }

.fallo-cuerpo { flex: 1; min-width: 0; }
.fallo-cab { display: flex; align-items: baseline; gap: 10px; }
.fallo-quien { font-size: 15px; flex: 1; min-width: 0;
               overflow: hidden; text-overflow: ellipsis;
               white-space: nowrap; }
.fallo-hora { color: var(--texto2); font-size: 13.5px; flex: none; }
.fallo-txt { display: block; color: var(--texto2); font-size: 14px;
             line-height: 1.45; margin-top: 3px; }
.fallo-txt strong { color: var(--texto); font-weight: 500; }

/* Pie con retencion a la izquierda y descargas a la derecha. */
.pie-barra {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px 26px; border-top: 1px solid var(--linea);
  font-size: 13.5px;
}
.pie-barra .dim { color: var(--texto3); flex: 1; }
.pie-acciones { display: flex; align-items: center; gap: 16px; flex: none; }
.enlace-icono {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; cursor: pointer;
  color: var(--azul-claro); font-size: 14.5px; padding: 0;
}
.enlace-icono:hover { text-decoration: underline; }
.enlace-icono:disabled { opacity: .5; cursor: default; }

/* ====================================================================
   ACTIVIDAD DE USUARIOS
   ==================================================================== */

.actividad { border-top: 1px solid var(--linea); }
.act {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--linea);
  font-size: 15px; line-height: 1.4;
}
.act-punto { width: 8px; height: 8px; border-radius: 50%; flex: none;
             margin-top: 6px; }
.p-azul  { background: var(--azul); }
.p-verde { background: var(--verde); }
.p-ambar { background: var(--ambar); }
.p-rojo  { background: var(--rojo); }

.act-hora { color: var(--texto2); font-size: 14px; flex: none;
            margin-top: 1px; }
.act-txt { flex: 1; min-width: 0; }
.act-txt strong { font-weight: 600; }

/* La fila de acceso denegado se lee de un vistazo: es lo unico de esta
   pantalla que exige una decision. */
.act-mala { background: rgba(229,72,77,.11); }
.act-mala .act-txt, .act-mala .act-txt strong { color: var(--rojo); }
.act-mala .act-hora { color: rgba(229,72,77,.75); }

@media (min-width: 720px) {
  .fallo, .act, .dia-sep, .pie-barra { padding-left: 24px;
                                       padding-right: 24px; }
}


/* ====================================================================
   ACCESO — mismo lenguaje que la web publica
   ==================================================================== */

.acceso { background: var(--fondo); color: var(--texto); }

/* Fondo tenue detras del formulario, igual que la portada del sitio. */
.acc-cuerpo { position: relative; }
.acc-cuerpo::before {
  content: ""; position: absolute; inset: -10% -40% 55% -40%; z-index: -1;
  background: radial-gradient(closest-side, rgba(37,99,235,.09), transparent 70%);
}

.acc-barra { border-bottom: 1px solid var(--linea); }
.acc-barra h2 { font-size: 18.5px; font-weight: 700; letter-spacing: -.02em; }

.marca-icono { box-shadow: 0 2px 8px rgba(37,99,235,.28); }
.marca-nombre { font-weight: 700; letter-spacing: -.02em; }

.acc-titulo { font-size: 31px; font-weight: 700; letter-spacing: -.03em; }
.acc-sub { color: var(--texto2); }

.campo-cab label { font-weight: 600; font-size: 14px; color: var(--texto); }
.campo input, .campo select, .campo textarea {
  /* `background: var(--blanco, #fff)` con el color SIN declarar.
     `--blanco` no existe, asi que siempre caia al #fff fijo, y el texto
     heredaba el del tema: en modo oscuro, blanco sobre blanco.
     Los campos del dialogo de alta se veian vacios.
     Las dos propiedades tienen que salir del tema, no una sola. */
  width: 100%;
  background: var(--superficie2); color: var(--texto);
  border: 1px solid var(--linea-fuerte);
  border-radius: 10px; padding: 13px 14px; font-size: 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo select { appearance: none; padding-right: 34px; }
.campo input::placeholder, .campo textarea::placeholder {
  color: var(--texto3);
}
.campo input:hover, .campo select:hover, .campo textarea:hover {
  border-color: var(--texto3);
}
.campo input:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}

.enlace { font-weight: 600; }

.casilla .marca-check {
  border-color: var(--borde-tenue); background: #fff;
  transition: background-color .14s ease, border-color .14s ease;
}
.casilla:hover .marca-check { border-color: var(--azul); }

.boton-principal {
  border-radius: 11px; font-weight: 600;
  box-shadow: 0 1px 2px rgba(37,99,235,.28);
  transition: background-color .16s ease, transform .12s ease,
              box-shadow .16s ease;
}
.boton-principal:hover:not(:disabled) {
  background: var(--azul-claro); transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(37,99,235,.26);
}
.boton-principal:active:not(:disabled) { transform: none; }

.tarjeta-nota {
  background: var(--banda); border: 1px solid var(--linea);
  border-radius: 12px;
}

.licencia-ok {
  background: var(--verde-fondo); border-color: rgba(22,163,74,.28);
}
.licencia-ok .l1, .licencia-ok .l2, .licencia-ok .icono { color: var(--verde); }

.aviso {
  background: var(--rojo-fondo); border-color: rgba(220,38,38,.25);
  color: var(--rojo); border-radius: 10px; font-weight: 500;
}

.fuerza span { background: var(--relleno); }
.pista { color: var(--texto2); }
.acc-pie { color: var(--texto3); }
.etiqueta-grupo {
  color: var(--azul); font-size: 12.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}

/* Entrada suave del formulario, como las secciones de la web. */
@keyframes acc-entra { from { opacity: 0; transform: translateY(14px); }
                       to   { opacity: 1; transform: none; } }
#vista-login, #vista-alta {
  animation: acc-entra .42s cubic-bezier(.22,.9,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  #vista-login, #vista-alta { animation: none; }
}


/* La marca es un enlace a la home, pero no debe verse como tal. */
#acceso .marca, #acceso .marca:hover {
  color: var(--texto); text-decoration: none;
}
#acceso .marca-nombre { color: var(--texto); }

/* ---------- cabecera del registro de fallos ---------- */

.barra-fallos {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 4px;
}

.buscador { position: relative; flex: 1; min-width: 0; }
.buscador .lupa {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; fill: none; stroke: var(--texto3);
  stroke-width: 1.9; stroke-linecap: round; pointer-events: none;
}
.buscador input {
  width: 100%; background: var(--superficie2);
  border: 1px solid var(--linea); border-radius: 999px;
  color: var(--texto); font-family: inherit; font-size: 15px;
  padding: 11px 16px 11px 42px;
}
.buscador input::placeholder { color: var(--texto3); }
.buscador input:focus { outline: none; border-color: var(--azul);
                        background: var(--fondo); }
.buscador input::-webkit-search-cancel-button { filter: grayscale(1); }

/* Pastilla de periodo con su panel flotante. */
.periodo-caja { position: relative; flex: none; }
.pastilla-periodo {
  display: flex; align-items: center; gap: 8px;
  background: var(--superficie2); border: 1px solid var(--linea);
  border-radius: 999px; color: var(--texto); cursor: pointer;
  font-family: inherit; font-size: 14.5px; padding: 10px 15px;
}
.pastilla-periodo:hover { border-color: var(--linea-fuerte); }
.pastilla-periodo svg { width: 17px; height: 17px; fill: none;
                        stroke: currentColor; stroke-width: 1.8;
                        stroke-linecap: round; flex: none; }
.pastilla-periodo .flecha { width: 14px; height: 14px; stroke-width: 2.2;
                            color: var(--texto3); }

.periodo-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  min-width: 232px; padding: 8px;
  background: var(--superficie); border: 1px solid var(--linea-fuerte);
  border-radius: 13px; display: none;
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
}
.periodo-menu.abierto { display: block; }
#app[data-tema="claro"] .periodo-menu {
  box-shadow: 0 12px 34px rgba(11,23,41,.14);
}

.periodo-op {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: none; border-radius: 8px;
  color: var(--texto); font-family: inherit; font-size: 14.5px;
  padding: 9px 12px;
}
.periodo-op:hover { background: var(--superficie2); }
.periodo-op.on { background: var(--azul-fondo); color: var(--azul-claro);
                 font-weight: 600; }

.periodo-sep { height: 1px; background: var(--linea); margin: 8px 4px; }
.periodo-fechas { display: grid; gap: 9px; padding: 4px 8px 6px; }
.periodo-fechas label { display: grid; gap: 5px;
                        font-size: 12.5px; color: var(--texto2); }
.periodo-fechas input {
  background: var(--superficie2); border: 1px solid var(--linea-fuerte);
  border-radius: 9px; color: var(--texto);
  font-family: inherit; font-size: 14px; padding: 8px 11px;
}
.periodo-fechas input:focus { outline: none; border-color: var(--azul); }
#app[data-tema="oscuro"] .periodo-fechas input::-webkit-calendar-picker-indicator {
  filter: invert(.75);
}

/* Segundo boton de descarga, para el registro completo. */
.boton-secundario {
  background: none; border: 1px solid var(--linea-fuerte);
  color: var(--texto); border-radius: 11px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; padding: 13px 20px;
}
.boton-secundario:hover { border-color: var(--azul); color: var(--azul-claro); }
.boton-secundario:disabled { opacity: .5; cursor: default; }
.boton-csv + .boton-csv { margin-top: 10px; }

/* La hora lleva milesimas: necesita sitio y no debe partirse. */
.fallo-hora { font-family: ui-monospace, "SF Mono", Menlo, monospace;
              font-size: 12.5px; white-space: nowrap; }

@media (min-width: 720px) { .barra-fallos { padding-left: 24px;
                                            padding-right: 24px; } }
/* Ni en movil se apilan: el diseno pide buscador y periodo en la misma
   fila, y a 360 px siguen cabiendo si la pastilla se aprieta. */
@media (max-width: 520px) {
  .pastilla-periodo { padding: 10px 11px; font-size: 14px; gap: 6px; }
  .pastilla-periodo .flecha { display: none; }
  .buscador input { font-size: 14.5px; padding-left: 38px; }
  .periodo-menu { right: 0; min-width: 210px; }
}


/* ====================================================================
   DISPLAY DE UN MÓVIL
   ====================================================================

   Ya no hay rejilla: se abre un teléfono, se trabaja con él y se
   cierra. El vídeo lo pinta un <video> por GPU, no un lienzo, así que
   no consume el hilo principal.
   ==================================================================== */

/* El vídeo a todo el ancho.
   Antes había 16 px de margen a cada lado y en un móvil de 390 eso son
   32 px menos de pantalla, que se notan. La cabecera y la botonera sí
   los mantienen: son texto y botones, y pegados al borde se leen y se
   pulsan peor. */
.display-uno {
  max-width: 520px; margin: 0 auto; padding: 0 0 20px;
}
.display-uno .cab-display,
.display-uno .acciones-pantalla,
.display-uno .teclado { padding-left: 14px; padding-right: 14px; }

/* ====================================================================
   CONTROLES SOBRE EL VÍDEO
   ====================================================================
   Antes iban encima y debajo del vídeo, y se llevaban unos 130 px de
   alto. Como el marco mantiene la forma del teléfono, perder alto era
   perder ancho: de ahí los márgenes a los lados.

   Superpuestos, el vídeo se lleva toda la pantalla.
   ==================================================================== */

.capa-arriba {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  /* La capa NO captura toques: cubre una franja del vídeo y si los
     interceptara, el dedo no llegaría al móvil ahí. Los botones sí,
     con `pointer-events` propio. */
  pointer-events: none;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px 22px;
  /* Degradado y no un bloque opaco: se lee el texto sin tapar la
     pantalla del móvil, que es lo que se ha venido a ver. */
  background: linear-gradient(to bottom,
              rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 55%, transparent 100%);
  color: #fff;
}

.capa-arriba .atras,
.capa-arriba .hd { pointer-events: auto; }

.capa-arriba .atras {
  width: 32px; height: 32px; flex: none;
  border: 0; border-radius: 9px; font-size: 19px; line-height: 1;
  background: rgba(255,255,255,.16); color: #fff; cursor: pointer;
}
.capa-arriba .atras:hover { background: rgba(255,255,255,.26); }

.capa-arriba .ident { flex: 1; min-width: 0; padding-top: 1px; }
.capa-arriba .nombre {
  display: block; font-weight: 650; font-size: 15px;
  font-family: ui-monospace, Menlo, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.capa-arriba .modelo {
  display: block; font-size: 11.5px; color: rgba(255,255,255,.72);
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.capa-arriba .diag {
  display: block; font-size: 10px; color: rgba(255,255,255,.6);
  font-family: ui-monospace, Menlo, monospace; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
.capa-arriba .diag.aviso-relevo { color: var(--ambar); }
.capa-arriba .diag.quieto { opacity: .6; }

.capa-arriba .hd {
  flex: none; min-width: 44px; padding: 7px 10px;
  border: 0; border-radius: 9px; font-weight: 600; font-size: 12.5px;
  font-family: ui-monospace, Menlo, monospace;
  background: rgba(255,255,255,.16); color: #fff; cursor: pointer;
}
.capa-arriba .hd.on { background: var(--azul); }

.marco {
  position: relative;
  background: #000; overflow: hidden;
  /* Sin bordes ni esquinas redondeadas: el negro va de lado a lado,
     como en el diseño. */
  border: 0; border-radius: 0;

  /* El marco tiene la forma del teléfono: así no hay franjas negras a
     los lados, solo el vídeo. Se le da todo el alto disponible, y el
     ancho sale de ahí — cuanto menos ocupen cabecera y botonera, más
     grande se ve el móvil. */
  aspect-ratio: 9 / 19.5;
  width: auto; max-width: 100%;
  /* El alto lo pone display.js midiendo el hueco real entre la
     cabecera y la botonera. Un número fijo aquí no puede acertar: la
     cabecera cambia de alto según haya modelo o no, la botonera salta
     de línea, y en escritorio está además la barra de la aplicación.
     Cuando se restaba de más, el vídeo se encogía y dejaba hueco a los
     lados: eso eran los "márgenes". */
  margin: 0 auto;
}

/* En pantalla estrecha la cabecera ocupa mas alto, asi que hay que
   descontar mas para que los botones sigan a la vista. */
@media (max-width: 720px) {
  /* El marco pega a los bordes: 12 px de página a cada lado son 24 px
     de vídeo perdidos, y en un teléfono se notan. */
  .display-uno { padding: 0 0 14px; }
}
.pantalla-video {
  width: 100%; height: 100%;
  display: block; background: #000;

  /* `contain` y no `cover`: recortar la imagen dejaría fuera parte de
     la pantalla del móvil, y además rompería el táctil — las
     coordenadas del dedo se calculan sobre este elemento, así que lo
     que se ve y lo que se toca tienen que coincidir.
     Las franjas negras se evitan dando al marco la forma del teléfono,
     no recortando. */
  object-fit: contain;
}

/* El dedo maneja el móvil, siempre. Ya no hay modo que activar: con un
   solo teléfono a pantalla completa no hay nada por lo que hacer scroll,
   así que el botón de control sobraba. */
.pantalla-video { touch-action: none; cursor: crosshair; }

.marco .aviso {
  position: absolute; inset: 0;
  /* No debe tragarse los toques: cubre todo el vídeo, y si captura
     eventos el dedo deja de llegar al móvil mientras haya cualquier
     mensaje en pantalla. */
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center;
  color: var(--texto2); font-size: 14px;
  background: rgba(0, 0, 0, .55);
}
.marco .aviso.malo { color: var(--rojo); }

/* «Sin cambios» NO tapa la imagen.
   Con la pantalla del móvil quieta, la última imagen sigue siendo lo
   que hay en el teléfono: es información válida, no un error. Cubrirla
   con un velo negro hace creer que el vídeo se ha cortado.

   Se queda como una nota discreta arriba, sin fondo y sin estorbar. */
.marco .aviso.leve {
  background: none;
  align-items: flex-start; justify-content: flex-end;
  padding: 8px 12px;
  font-size: 10.5px; color: rgba(255, 255, 255, .5);
  font-family: ui-monospace, Menlo, monospace;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

/* Botonera: se reparten a partes iguales y saltan de línea cuando no
   caben, en vez de quedar de anchos distintos. */
/* Los cuatro botones en UNA línea, siempre.
   Con `auto-fit` y un mínimo de 96 px, en pantalla estrecha el cuarto
   saltaba abajo y quedaba una fila coja. Cuatro columnas iguales y el
   texto se encoge si hace falta. */
/* Lengüeta para sacar los botones.
   Pequeña y pegada al borde: los botones tapaban la barra de navegación
   de Android —atrás, inicio, recientes—, que es lo que más se usa. */
/* Lengüeta en el LATERAL DERECHO, a media altura.
   Abajo en el centro caía justo sobre el botón de inicio de Android, y
   al ir a pulsarlo salían los controles. El lateral está libre en
   cualquier teléfono. */
.lengueta {
  position: absolute; right: 0; top: 50%; z-index: 4;
  transform: translateY(-50%);
  width: 26px; height: 74px; border: 0; cursor: pointer;
  border-radius: 10px 0 0 10px; padding: 0;
  background: rgba(0, 0, 0, .42);
  display: grid; place-items: center;
}
.lengueta .raya {
  width: 4px; height: 34px; border-radius: 99px;
  background: rgba(255,255,255,.6);
}
.lengueta.on { background: var(--azul); }
.lengueta.on .raya { background: #fff; }
.lengueta:hover { background: rgba(0,0,0,.6); }

.acciones-pantalla {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
  display: grid; gap: 6px;
  grid-template-columns: repeat(4, 1fr);
  padding: 26px 8px 14px;
  background: linear-gradient(to top,
              rgba(0,0,0,.72) 0%, rgba(0,0,0,.42) 55%, transparent 100%);
}
.acciones-pantalla .acc {
  pointer-events: auto;
  /* Letra pequeña y poco relleno: "Screenshot" es la palabra más larga
     y tiene que caber en un cuarto de un móvil estrecho. */
  padding: 10px 2px; font-size: 11.5px; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 0; border-radius: 9px;
  background: rgba(255,255,255,.18); color: #fff;
  backdrop-filter: blur(6px);
}
.acciones-pantalla .acc:hover { background: rgba(255,255,255,.28); }
.acciones-pantalla .acc:disabled { opacity: .45; }

/* Ocultos: fuera de la pantalla, no solo invisibles. Así no estorban
   al dedo aunque estén ahí. */
.acciones-pantalla.oculta {
  transform: translateY(100%); opacity: 0; pointer-events: none;
}
.acciones-pantalla.oculta .acc { pointer-events: none; }

/* En el lateral no hace falta moverla: los botones salen por abajo y no
   la tapan. */

.capturando .marco { outline: 2px solid var(--azul); }


/* ====================================================================
   ESTADO DEL RACK
   ====================================================================
   Para responder rapido cuando un cliente dice "no me funciona".
   ==================================================================== */

.diag-rack{background:var(--sup);border:1px solid var(--linea);
  border-radius:14px;padding:16px;margin-bottom:14px}

.diag-cab{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.diag-tit{font-weight:650;font-size:16px}
.diag-sub{color:var(--texto2);font-size:12.5px;flex:1}

.diag-rejilla{display:grid;gap:9px;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin-bottom:14px}
.diag-med{padding:11px 13px;border:1px solid var(--linea);border-radius:11px}
.diag-med .et{font-size:11.5px;color:var(--texto2);margin-bottom:3px}
.diag-med .va{font-size:17px;font-weight:600;
  font-family:ui-monospace,Menlo,monospace}
.diag-med.aviso{border-color:var(--ambar)}
.diag-med.aviso .va{color:var(--ambar)}
.diag-med.mal{border-color:var(--rojo)}
.diag-med.mal .va{color:var(--rojo)}

.diag-avisos{margin-bottom:14px}
.diag-aviso{background:var(--ambar-fondo);border:1px solid var(--ambar);
  border-radius:10px;padding:9px 12px;margin-bottom:6px;
  font-size:13.5px;color:var(--ambar)}

.diag-seccion{margin-top:14px}
.diag-seccion h4{font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--texto2);margin:0 0 8px;font-weight:700}

/* Una linea por dispositivo. En rojo el que no llega a 480 Mbps: por
   debajo de eso ADB no da para video, y es el fallo mas comun. */
.diag-usb{display:flex;gap:10px;align-items:center;padding:7px 11px;
  border:1px solid var(--linea);border-radius:9px;margin-bottom:5px;
  font-size:13px}
.diag-usb .ruta{font-family:ui-monospace,Menlo,monospace;
  color:var(--texto2);font-size:12px;min-width:62px}
.diag-usb .prod{flex:1;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.diag-usb .vel{font-family:ui-monospace,Menlo,monospace;font-size:12.5px}
.diag-usb.malo{border-color:var(--rojo);background:var(--rojo-fondo)}
.diag-usb.malo .vel{color:var(--rojo);font-weight:600}

.diag-nota{font-size:12.5px;color:var(--texto2);padding:7px 0;line-height:1.5}
.diag-linea{font-family:ui-monospace,Menlo,monospace;font-size:11px;
  color:var(--texto3);padding:3px 0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

@media (max-width:720px){
  .diag-rejilla{grid-template-columns:repeat(2,1fr)}
  .diag-usb .ruta{min-width:52px}
}


/* Resumen en la fila plegada de Sistema: si hay avisos se ven sin
   desplegar nada. */
.fila-val.con-aviso{color:var(--ambar);font-weight:600}

/* El cuerpo del diagnostico, dentro del bloque de Sistema. */
#sis-diag-cuerpo{padding:4px 0 2px}
#sis-diag-cuerpo .diag-rack{border:0;padding:8px 0;margin:0;background:none}


/* "sin cambios": el vídeo está vivo pero la pantalla del móvil no se
   mueve. No es un fallo, así que se marca en gris y no en rojo. */


/* Segunda línea de cada medida: el porcentaje manda y el dato absoluto
   queda debajo, más pequeño. Un "18 %" se lee de un vistazo; un
   "357 / 1960 MB" hay que pensarlo. */
.diag-med .pie{font-size:11px;color:var(--texto3);margin-top:2px}
.diag-med.aviso .pie{color:var(--ambar)}
.diag-med.mal .pie{color:var(--rojo)}

/* Aviso grave: se distingue del resto porque exige actuar, no solo
   mirar. */
.diag-aviso.grave{background:var(--rojo-fondo);border-color:var(--rojo);
  color:var(--rojo);font-weight:600}


/* ====================================================================
   CABECERA DE RACK EN EL PANEL
   ====================================================================
   Con varios racks, cada grupo lleva la suya. Antes se aplanaba todo en
   una lista y un cliente con dos racks no sabía de cuál era cada
   teléfono.
   ==================================================================== */

/* Mismo aspecto que la cabecera de arriba: los racks siguientes se
   leen como lo que son, otra cabecera igual. */
.rack-cab{display:flex;align-items:center;gap:14px;
  padding:14px 2px 12px}

.rack-ico{width:44px;height:44px;border-radius:13px;flex:none;
  display:grid;place-items:center;
  background:var(--azul-fondo);color:var(--azul)}

.rack-txt{min-width:0}
.rack-nom{display:block;font-weight:700;font-size:19px;
  letter-spacing:-.015em}
.rack-sub{display:block;font-size:13.5px;color:var(--texto2);margin-top:2px}

/* Mucho aire entre grupos, como en el diseño.
   Sin él, el último equipo de un rack y la cabecera del siguiente se
   leen como una sola cosa. Y sin línea divisoria: el espacio ya separa,
   y una raya más solo añade ruido. */
.equipos + .rack-cab{margin-top:46px}


/* Las pestañas Panel/Display sobran.
   El display se abre tocando un equipo y se vuelve con su flecha: la
   pestaña no llevaba a ningún sitio al que no se llegue ya. El diseño
   tampoco las tiene.

   La barra se queda, porque ahí viven la lupa y el refrescar. */
.pestanas .tab { display: none; }

/* La barra de acciones se funde con los filtros: sin las pestañas
   quedaba una fila casi vacía con la lupa a un lado, y los filtros
   debajo. Ahora van en la misma línea. */
.pestanas {
  padding: 0 16px; min-height: 0; border: 0;
  margin-top: -46px;          /* sube a la fila de los filtros */
  position: relative; z-index: 2; pointer-events: none;
}
.pestanas .acciones { margin-left: auto; pointer-events: auto; }

/* Sitio a la derecha para que los filtros no pasen por debajo de los
   iconos. */
.filtros { padding-right: 92px; }


/* Sin desplazamiento mientras se ve un móvil.
   La pantalla ocupa justo la ventana y no hay nada debajo que mirar. Y
   evita que el cálculo del alto entre en bucle: al desplazarse cambiaba
   la medida, el marco crecía, empujaba más, y así. */
body.sin-scroll { overflow: hidden; overscroll-behavior: none; }


/* Botón de medidas, junto al de calidad. Discreto: es para depurar. */
.capa-arriba .medir {
  flex: none; min-width: 34px; padding: 7px 8px;
  border: 0; border-radius: 9px; font-size: 14px;
  background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .75);
  cursor: pointer; pointer-events: auto;
}
.capa-arriba .medir:hover { background: rgba(255, 255, 255, .24); }


/* Botón de reintentar, centrado sobre el vídeo.
   Solo sale cuando el rack dice que ese fallo NO se recupera solo. */
.marco .reintentar {
  position: absolute; left: 50%; top: 58%; z-index: 4;
  transform: translateX(-50%);
  padding: 10px 22px; border: 0; border-radius: 10px;
  background: var(--azul); color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer;
  pointer-events: auto;
}
.marco .reintentar.oculto { display: none; }


/* ====================================================================
   AVISOS DE PREPARACIÓN
   ====================================================================
   Lo que le falta a un móvil para poder usarse. Va junto al teléfono
   en el panel, con lo que hay que activar: un teléfono mal preparado
   no da un error, da una pantalla muerta, y sin esto es
   indistinguible de una avería. */

.eq-avisos { display: block; margin-top: 8px; }

.eq-aviso {
  display: block;
  border-left: 3px solid var(--ambar, #f5a524);
  background: rgba(245, 165, 36, .07);
  border-radius: 0 8px 8px 0;
  padding: 8px 12px; margin-top: 6px;
}
.eq-aviso.grave {
  border-left-color: var(--rojo, #e5484d);
  background: rgba(229, 72, 77, .07);
}

/* Qué pasa: corto y en primer plano. */
.eq-aviso-que {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--texto, #e7e7e9);
}

/* Y qué hacer: es lo que de verdad resuelve, pero no debe gritar. */
.eq-aviso-como {
  display: block; font-size: 12.5px; line-height: 1.5;
  color: var(--texto2, #9b9ba3); margin-top: 3px;
}

/* --- Cambiar contrasena ------------------------------------------- */
.cl-cuerpo { padding: 0 18px 28px; }
.cl-intro { margin: 4px 0 22px; }
/* Las tres partes van separadas: actual arriba, nueva y su repeticion
   juntas en un bloque, y el aviso aparte. Sin el respiro de en medio
   las etiquetas se pegan al campo anterior y parecen su continuacion. */
.cl-bloque { margin-top: 26px; }
.cl-bloque .reglas { margin: 10px 0 20px; }
.cl-aviso { margin: 22px 0 4px; }
.cl-guardar { width: 100%; margin-top: 18px; }

/* El ojo dentro del campo.
 *
 * ACOTADO a `.campo` a proposito. Ya hay un `.ojo` para el formulario
 * de acceso (linea ~147) y alli el `.campo-clave` contiene SOLO el
 * input, sin etiqueta: por eso se centra con `top: 50%`.
 *
 * Aqui el `.campo-clave` incluye tambien la etiqueta encima, asi que
 * centrar en vertical lo dejaria a la altura del texto. Se ancla abajo,
 * que es donde esta el input.
 *
 * Sin acotar, esta regla pisaba la del acceso y descolocaba su ojo. */
.campo.campo-clave { position: relative; }
.campo.campo-clave .ojo {
  /* `right: 6px` lo dejaba a ras del marco: centrado en vertical, pero
     apretado contra el borde. El input tiene 14px de margen interno a
     la izquierda, asi que el icono necesita un aire parecido al otro
     lado para no parecer descolocado. */
  position: absolute; right: 10px; bottom: 5px; top: auto;
  transform: none;
  width: 36px; height: 36px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  color: var(--texto3); border-radius: 8px;
}
.campo.campo-clave .ojo:hover {
  color: var(--texto); background: var(--superficie2);
}
.campo.campo-clave .ojo.on { color: var(--azul); }
.campo.campo-clave input { padding-right: 52px; }

/* Confirmacion tras el cambio */
.cl-exito { padding: 48px 24px; text-align: center; }
.cl-exito h2 { margin: 18px 0 8px; }
.cl-exito p {
  color: var(--texto2); font-size: 15px; line-height: 1.55;
  margin: 0 auto 26px; max-width: 320px;
}
.cl-tic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--verde-fondo); color: var(--verde);
}


.modo-plataforma .cabecera { border-bottom: 1px solid var(--linea); }

/* La consola, a pantalla completa y sin los margenes de una hoja. */



/* === Consola de plataforma ========================================
 *
 * Estructura y medidas de `su-admin_usuarios.html`, pero con las
 * variables del tema: sigue el claro u oscuro que elija el usuario,
 * como el resto de la aplicacion.
 * ================================================================== */

/* El panel del cliente sobra entero: el operador no tiene racks. */
#app.modo-plataforma .rack-barra,
#app.modo-plataforma .pestanas,
#app.modo-plataforma #vista-panel,
#app.modo-plataforma #vista-display { display: none !important; }
#app.modo-plataforma main {
  display: block !important; max-width: none !important; padding: 0;
}
#app.modo-plataforma #vista-plataforma {
  display: none; max-width: none; width: 100%; margin: 0; padding: 0;
  min-height: calc(100vh - 58px);
  /* Fondo propio: sin el se veia el del `body` por debajo y la consola
     quedaba a medio pintar, con zonas transparentes. */
  background: var(--fondo);
}
/* Y la aplicacion entera, para que no asome nada por los bordes. */
#app.modo-plataforma { background: var(--fondo); }
#app.modo-plataforma .pl-main { background: var(--fondo); }
#app.modo-plataforma #vista-plataforma.on { display: block; }


/* --- Barra lateral ------------------------------------------------ */
.pl-app { display: grid; grid-template-columns: 236px 1fr;
          min-height: calc(100vh - 90px); }
.pl-rail {
  background: var(--banda); border-right: 1px solid var(--linea);
  padding: 18px 12px; display: flex; flex-direction: column; gap: 24px;
}
.pl-marca { display: flex; align-items: center; gap: 10px;
            padding: 2px 8px; font-weight: 600; letter-spacing: -.01em; }
.pl-marca small { display: block; font-size: 11.5px; color: var(--texto2);
                  font-weight: 400; }
.pl-grupo h5 { margin: 0 0 6px; padding: 0 9px; font-size: 11.5px;
               color: var(--texto3); font-weight: 500; }
.pl-nav {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 10px; background: none;
  color: var(--texto2); font-size: 14.5px; text-align: left;
}
.pl-nav:hover { background: var(--superficie2); color: var(--texto); }
.pl-nav.on { background: var(--azul); color: #fff; }
.pl-cnt { margin-left: auto; font-size: 11.5px; color: var(--texto3);
          font-style: normal;
          font-family: ui-monospace, Menlo, Consolas, monospace; }
.pl-nav.on .pl-cnt { color: rgba(255,255,255,.8); }
.pl-fin { margin-top: auto; border-top: 1px solid var(--linea);
          padding: 12px 9px 0; font-size: 12px; color: var(--texto3); }
.pl-fin a { color: var(--azul); text-decoration: none; }

/* --- Cabecera y contexto ------------------------------------------ */
.pl-main { min-width: 0; }
.pl-top { display: flex; align-items: center; gap: 14px;
          padding: 16px 22px; border-bottom: 1px solid var(--linea); }
.pl-top h1 { margin: 0; font-size: 21px; font-weight: 600;
             letter-spacing: -.02em; }
.pl-top .pl-iconos { margin-left: auto; display: flex; gap: 10px; }
.pl-ico { background: none; border: 0; color: var(--azul);
          display: grid; place-items: center; width: 34px; height: 34px;
          border-radius: 9px; }
.pl-ico:hover { background: var(--superficie2); }
.pl-atras { display: none; background: none; border: 0; padding: 0 2px;
            color: var(--texto); font-size: 22px; line-height: 1; }

.pl-contexto { padding: 14px 22px 0; }
.pl-contexto .titulo { font-size: 17px; font-weight: 500; }
.pl-contexto .titulo i { color: var(--texto2); font-style: normal; }
.pl-contexto p { margin: 5px 0 0; font-size: 13.5px; color: var(--texto2);
                 max-width: 86ch; }

/* --- Buscador, filtros y chips ------------------------------------ */
.pl-buscador { padding: 12px 22px 0; display: flex; gap: 14px;
               align-items: center; }
.pl-buscador input {
  flex: 1; background: var(--superficie2); border: 1px solid var(--linea);
  border-radius: 12px; color: var(--texto); padding: 12px 15px;
  font-size: 14.5px;
}
.pl-buscador input::placeholder { color: var(--texto3); }
.pl-filtros { display: flex; gap: 10px; flex-wrap: wrap;
              padding: 12px 22px 0; }
.pl-filtros select {
  background: var(--superficie2); border: 1px solid var(--linea);
  border-radius: 999px; color: var(--texto2); padding: 8px 14px;
  font-size: 13.5px;
}
.pl-chips { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 22px; }
.pl-chip-f { background: none; border: 1px solid var(--linea-fuerte);
             color: var(--texto2); border-radius: 999px;
             padding: 8px 17px; font-size: 14px; }
.pl-chip-f:hover { color: var(--texto); border-color: var(--borde-tenue); }
.pl-chip-f.on { background: var(--texto); border-color: var(--texto);
                color: var(--fondo); font-weight: 500; }
.pl-chip-f.rojo { border-color: var(--rojo); color: var(--rojo); }
.pl-chip-f.rojo.on { background: var(--rojo-fondo); color: var(--rojo); }

/* --- Rotulo y lista ------------------------------------------------ */
.pl-rotulo { display: flex; align-items: baseline; gap: 10px;
             padding: 20px 22px 9px; color: var(--texto2); font-size: 14px; }
.pl-rotulo .der { margin-left: auto; font-size: 13.5px; }
.pl-rotulo .der b { color: var(--texto); font-weight: 500; }

.pl-lista { border-top: 1px solid var(--linea);
            border-bottom: 1px solid var(--linea);
            background: var(--superficie); }
.pl-fila {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 14px;
  align-items: center; padding: 13px 22px;
  border-bottom: 1px solid var(--linea); cursor: pointer;
  background: none; border-left: 0; border-right: 0; border-top: 0;
  width: 100%; text-align: left; color: var(--texto);
}
.pl-fila:last-child { border-bottom: 0; }
.pl-fila:hover { background: var(--superficie2); }
.pl-fila.sel { background: var(--superficie2);
               box-shadow: inset 3px 0 0 var(--azul); }
.pl-fila.baja { opacity: .55; }
.pl-av { width: 40px; height: 40px; border-radius: 50%;
         background: var(--relleno); display: grid; place-items: center;
         font-size: 13px; font-weight: 600; color: var(--texto2); }
.pl-av.azul { background: var(--azul-fondo); color: var(--azul); }
.pl-nombre { display: block; font-size: 16px; font-weight: 600;
             letter-spacing: -.01em; }
.pl-nombre .yo { font-weight: 400; color: var(--texto2); font-style: normal; }
.pl-segunda { display: block; font-size: 13.5px; color: var(--texto2);
              margin-top: 1px; }
.pl-segunda .sep { color: var(--texto3); margin: 0 4px; }
.pl-der { display: flex; align-items: center; gap: 18px; }
.pl-punto { width: 9px; height: 9px; flex: none; border-radius: 50%;
            background: var(--linea-fuerte); }
.pl-punto.on { background: var(--verde); }
.pl-cols { display: flex; align-items: center; gap: 26px; }
/* Ancho FIJO, no `min-width`. Con anchos variables cada fila repartia
   distinto y el punto de la izquierda acababa en una x distinta en
   cada una: se veian desalineados en escalera. */
.pl-col { width: 96px; text-align: right; }
.pl-col:last-child { width: auto; min-width: 104px; }
.pl-col b { display: block; font-size: 13.5px; font-weight: 500; }
.pl-col span { font-size: 11.5px; color: var(--texto3); }
.pl-chev { color: var(--texto3); font-size: 19px; line-height: 1; }
.pl-mono { font-family: ui-monospace, Menlo, Consolas, monospace; }

.pl-est { font-size: 13px; padding: 3px 10px; border-radius: 999px;
          border: 1px solid var(--linea-fuerte); color: var(--texto2);
          white-space: nowrap; }
.pl-est.ok { border-color: var(--verde); color: var(--verde); }
.pl-est.av { border-color: var(--ambar); color: var(--ambar); }
.pl-est.no { border-color: var(--rojo); color: var(--rojo); }
.pl-est.raiz { border-color: var(--azul); color: var(--azul); }

.pl-pie { text-align: center; color: var(--texto2); font-size: 13px;
          padding: 14px 22px 26px; margin: 0; }
.pl-pronto { padding: 60px 22px; text-align: center; color: var(--texto3);
             font-size: 14px; }

/* --- Sistema, por grupos ------------------------------------------- */
.pl-ajuste { display: grid; grid-template-columns: 1fr auto; gap: 14px;
             align-items: center; padding: 13px 22px;
             border-bottom: 1px solid var(--linea); }
.pl-ajuste:last-child { border-bottom: 0; }
/* `display:block` en los dos: son spans, y sin el la descripcion se
   pegaba a la clave ("bateria_aviso_pctBateria por debajo..."). */
.pl-ajuste .clave { display: block; font-size: 15px; font-weight: 500;
                    font-family: ui-monospace, Menlo, Consolas, monospace; }
.pl-ajuste .desc { display: block; font-size: 13px; color: var(--texto2);
                   margin-top: 3px; }
.pl-ctrl { text-align: right; }
.pl-ctrl input, .pl-ctrl select {
  background: var(--superficie2); color: var(--texto);
  border: 1px solid var(--linea-fuerte); border-radius: 9px;
  padding: 8px 11px; width: 104px; font-size: 15px;
}
.pl-lim { display: block; font-size: 11.5px; color: var(--texto3);
          font-style: normal; margin-top: 3px; }

/* --- Dialogo de alta ----------------------------------------------- */
.pl-marcas { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.pl-par { display: flex; justify-content: space-between; gap: 12px;
          font-size: 14px; padding: 7px 0;
          border-bottom: 1px solid var(--linea); }
.pl-par:last-child { border-bottom: 0; }
.pl-par span { color: var(--texto2); }
.pl-peligro { color: var(--rojo); border-color: var(--rojo); }
.pl-err { color: var(--rojo); font-size: 13.5px; margin: 9px 0 0; }
.pl-ok { color: var(--verde); font-size: 13.5px; margin: 9px 0 0; }
.pl-clave { background: var(--superficie2);
            border: 1px solid var(--linea-fuerte); border-radius: 9px;
            padding: 12px 14px; margin: 8px 0;
            font-family: ui-monospace, Menlo, Consolas, monospace;
            font-size: 16px; word-break: break-all; user-select: all; }

/* === Adaptable: los cortes del modelo ============================= */
@media (max-width: 1180px) {
  .pl-cols { gap: 16px; }
  .pl-col.opc { display: none; }
}
@media (max-width: 820px) {
  .pl-app { grid-template-columns: 1fr; min-height: 0; }
  .pl-rail { flex-direction: row; gap: 6px; overflow-x: auto;
             border-right: 0; border-bottom: 1px solid var(--linea);
             padding: 10px; }
  .pl-marca, .pl-grupo h5, .pl-fin { display: none; }
  .pl-grupo { display: flex; gap: 6px; }
  .pl-nav { width: auto; white-space: nowrap; }
  .pl-cols { display: none; }
  .pl-top, .pl-contexto, .pl-buscador, .pl-filtros, .pl-chips,
  .pl-rotulo, .pl-fila, .pl-ajuste { padding-left: 14px;
                                     padding-right: 14px; }
  .pl-nombre { font-size: 15px; }
}