/* =====================================================================
   FS - Armazon
   Franja de entorno, cabecera, contenido y pie.

   Parte de la hoja de estilos de FS, que se sirve en varios archivos
   enlazados en orden desde src/views/_estilos.php. El orden importa:
   la cascada es la concatenacion de todos ellos.
   ===================================================================== */
/* --------------------------------------------------------------------
   Franja de entorno
   Igual que en legacy_blue: solo se pinta fuera de produccion, para que
   nadie confunda la copia de pruebas con la sala real.
   -------------------------------------------------------------------- */
.franja-entorno {
  background: var(--rojo);
  color: #fff;
  text-align: center;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px;
}

/* El aviso acompaña el formulario al desplazarse y no desaparece solo. */
.aviso-conexion {
  position: sticky;
  top: 8px;
  z-index: 101;
}

/* --------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------- */
.cabecera {
  position: relative;
  z-index: 100;
  background: var(--banda);
  color: var(--banda-texto);
  box-shadow: var(--sombra);
  /* La línea de la sala, cruzando el pie de la banda. Va con --acento y no
     con --acento-banda porque este borde se ve contra el contenido, que es
     claro, no contra la banda. */
  border-bottom: 3px solid var(--acento);
}

.cabecera-int {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  min-height: 54px;
}

/* El primer renglon de la cabecera: marca, sala, usuario, campanita y el
   boton del menu.

   En pantalla ancha esto NO es una caja. `display: contents` la disuelve y
   sus cinco hijos siguen siendo elementos flex de .cabecera-int, con el
   mismo `order` y el mismo gap de siempre: la cabecera de escritorio no
   cambio en nada.

   Existe por el telefono. Ahi .cabecera-int arma varios renglones -el menu,
   el buscador y el bloque de la derecha ocupan la fila entera con
   `flex: 0 0 100%`- y eso traia un problema: envolver NO achica. Flexbox
   primero corta el renglon y recien despues reparte lo que sobra o lo que
   falta, asi que un nombre largo -«Todas las salas»- empujaba en vez de
   ceder y la hamburguesa se caia sola al renglon de abajo, debajo del FS.

   Agrupados en esta caja, el primer renglon es UN renglon y no se corta
   nunca: lo que no entra se achica. Cual se achica lo decide angosto.css.
   --------------------------------------------------------------------- */
/* La barra se queda arriba mientras se recorre la pantalla: el menu, la sala
   y la campanita a un golpe de vista en cualquier parte de una lista de
   doscientas filas, sin volver al tope.

   `sticky` y no `fixed`: la barra sigue ocupando su lugar en el flujo, asi
   que no hay que compensarla con un margen de arriba que despues quede
   viejo. Donde no se pega -el telefono, la impresion, la pared, que no tiene
   cabecera- vuelve sola a ser una barra comun.

   POR QUE VA ATADA A `html.js`
   ---------------------------
   Lo que se pega DENTRO del contenido -el titulo con las pestañas de
   Reparaciones y de Base Slots- tiene que empezar JUSTO debajo de la barra,
   no atras. Ese "justo debajo" es --alto-cabecera, y la barra no mide
   siempre lo mismo: con seis secciones, entre los 700 y los 1000 px el menu
   se va a dos renglones y pasa de 57 a mas de 100. Medido: 56 a 1280 px,
   101 a 900, 125 a 780. El valor exacto solo lo sabe el navegador, y quien
   se lo pregunta es fs.js.

   Sin JavaScript no hay quien mida, y una barra pegada con una medida
   equivocada tapa las pestañas. Asi que sin JavaScript la barra no se pega
   y la pantalla queda exactamente como estaba: se pierde una comodidad, no
   se rompe nada. Es la misma regla que el menu del telefono.

   El z-index la deja por encima de todo lo que pasa por debajo. Los
   desplegables que nacen dentro de la barra -la campanita- son hijos y
   viajan con ella; los del contenido se abren siempre hacia abajo, lejos. */
html.js .cabecera {
  position: sticky;
  top: 0;
}

/* Cuando el navegador trae algo a la vista por su cuenta -Tab hasta un campo
   que estaba abajo del borde- deja libre lo que ocupan las barras pegadas.
   Sin esto, el campo que acaba de recibir el foco aparece justo atras de una
   de ellas y parece que el Tab no hizo nada.

   Son DOS sumadas: la barra de la aplicacion y, en la ficha de reparacion, su
   cabecera, que tambien se queda a la vista. --alto-ficha vale cero en todas
   las demas pantallas. */
html.js { scroll-padding-top: calc(var(--alto-cabecera) + var(--alto-ficha)); }

.cabecera-barra { display: contents; }

.marca {
  order: 1;
  color: var(--banda-texto);
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: .05em;
  white-space: nowrap;
}

/* La sala, pegada a la marca. Va en BLANCO y no en el color de la sala, que
   fue lo primero que se probó: el color claro sobre la banda da 8:1 de
   contraste, de sobra, pero es el mismo tono que el fondo y el nombre se
   diluye igual. Un número no arregla lo que el ojo ve.

   El color de la sala sigue estando en la cabecera, donde sí se despega: la
   línea que cruza el pie de la banda y la barra de la sección abierta.

   El texto suave y no el pleno: la marca va en el color pleno de la banda,
   y esa diferencia ordena las dos -primero el sistema, después la sala-.
   (Decía «blanco» cuando la banda era oscura en los dos temas; ver
   --banda-texto en tokens.css.)

   Y va del tamaño de la marca, separada por una barra fina, porque con el
   tamaño del menú se leía como una opción más: misma condensada, mismas
   mayúsculas, mismo cuerpo. La sala no es un lugar al que se va, es dónde
   estás; tiene que leerse pegada a la marca y no en la fila de al lado.

   El marcado son dos: una pastilla para quien tiene una sola sala y un
   selector para quien las ve todas; las dos se dibujan igual para que la
   cabecera no cambie de forma según el rol de quien mira. */
.sala-marca {
  order: 1;
  display: flex;
  align-items: center;
  /* Encerrada entre dos barras. La de la izquierda la separa de la marca, la
     de la derecha del menú: así la sala no se lee ni como parte del nombre
     del sistema ni como la primera opción del menú, que es exactamente entre
     esas dos cosas donde está.

     El margen negativo la acerca a la marca -el gap de la cabecera son 20px-
     para que las barras queden entre los tres bloques y no colgando. */
  margin-left: -8px;
  padding: 0 11px;
  border-left: 1px solid var(--banda-borde);
  border-right: 1px solid var(--banda-borde);
}
.marca:hover { text-decoration: none; opacity: .9; }

.nav { order: 2; display: flex; gap: 0; flex-wrap: wrap; flex: 1; align-self: stretch; }

/* Los enlaces ocupan todo el alto de la banda, que es lo que permite marcar
   el abierto con una barra abajo en vez de con una pastilla rellena. */
.nav a {
  display: flex;
  align-items: center;
  color: var(--banda-texto-suave);
  padding: 0 13px;
  font-family: var(--fuente-display);
  font-size: .97rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav a:hover { background: var(--banda-velo); color: var(--banda-texto); text-decoration: none; }

/* El acceso a la pared es sólo un ícono, y entre enlaces de texto gris se
   perdía. Va en el color de la letra de la banda, dentro de un recuadro con
   el borde del color de la sala: se lee como botón en los dos temas. Sin display:block el SVG se alinea como texto y
   queda corrido hacia arriba. */
.nav-pared svg { display: block; }
.nav-pared-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 34px;
  border-radius: 8px;
  background: var(--banda-velo-fuerte);
  box-shadow: inset 0 0 0 1.5px var(--acento-barra);
  color: var(--banda-texto);
}
.nav a.nav-pared:hover { background: none; }
.nav a.nav-pared:hover .nav-pared-icono { background: var(--banda-velo-fuerte); }

/* La sección abierta: letra plena y una barra del color de la sala abajo,
   --acento-barra, que es la variante del acento que se lee sobre la banda
   de cada tema. */
.nav a.activo {
  color: var(--banda-texto);
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--acento-barra);
}

/* Lo que el menú sólo usa como columna: la marca de arriba, los títulos de
   grupo y los íconos. Fuera de la columna no se ven (el teléfono lo vuelve a
   decir en angosto.css, por las dudas del orden). */
.nav a.nav-marca, .nav-grupo { display: none; }
/* El botón que pliega el menú es de la columna: en la hoja del teléfono no
   va, y su renglón con la marca no es una caja. */
.nav-cabeza { display: contents; }
.form-menu { display: none; }
.nav .icono { display: none; }
.nav-pie { display: contents; }
.nav a.nav-pared .nav-texto { display: none; }

/* Los números del menú (ver menu_contadores()). Gris lo que dice cuánto hay;
   del color de la sala lo que dice qué falta hacer. Van sobre la banda, así
   que el color es --acento-barra y la letra, la del fondo de la banda: blanca
   sobre el acento oscuro en claro, oscura sobre el acento claro en oscuro. */
.nav-cuenta {
  margin-left: auto;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 10px;
  box-sizing: border-box;
  background: var(--banda-velo-fuerte);
  color: var(--banda-texto-suave);
  font-family: var(--fuente-mono);
  font-size: .72rem;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0;
  text-align: center;
}
.nav-cuenta-hacer { background: var(--acento-barra); color: var(--banda); }
.nav-punto { display: none; }

/* --------------------------------------------------------------------
   Menú lateral (desde 701 px)

   El menú dejó la banda de arriba y pasó a una columna fija a la izquierda,
   agrupada por área: Operación, Mantenimiento, Gestión. En la banda, con
   seis o siete secciones, entre los 700 y los 1000 px el menú se iba a dos
   renglones y la barra cambiaba de alto según el ancho; en columna entran
   todas las que vengan y la barra de arriba es siempre un renglón.

   Es el MISMO <nav> de la barra, en el mismo lugar del documento: lo saca
   de ahí position: fixed. Así el teléfono, que lo sigue mostrando como el
   menú de la hamburguesa, no tiene que cambiar nada. `fixed` y no una
   grilla en el <body> porque el menú vive adentro de la cabecera; la
   cabecera no tiene transform, así que el fixed se ubica contra la ventana.

   El lugar que ocupa se lo deja el padding del <body>, que sólo existe con
   sesión (.con-lateral): la franja de entorno, la barra, el contenido y el
   pie quedan todos a su derecha sin tocar sus reglas.

   Entre 701 y 1360 px la columna se angosta a sólo íconos. Con 200 px de
   menú, a 1024 las tablas ya no entraban -Preventivo se desplazaba de
   costado 34 px- y una pantalla de 1024 es una notebook común. El corte
   estuvo en 1100 hasta que el listado de Reparaciones, la tabla más ancha
   (unos 1060 px como mínimo), se desplazó de costado en notebooks de 1280:
   con el menú completo le quedaban 1027. Desde 1361 -la notebook de 1366-
   entra con el menú entero.
   -------------------------------------------------------------------- */
@media (min-width: 701px) {
  :root { --ancho-lateral: 200px; }

  body.con-lateral { padding-left: var(--ancho-lateral); }

  .con-lateral .nav {
    position: fixed;
    /* El menú vive en la hoja «Más», fuera de la cabecera, así que no hereda
       su z-index: lleva el mismo, para quedar encima de lo que se pega
       dentro del contenido. */
    z-index: 100;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--ancho-lateral);
    box-sizing: border-box;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 1px;
    padding: 10px 10px 14px;
    /* En una ventana baja -una notebook con la barra de tareas- el menú no
       entra entero y se desplaza solo; la barra de desplazamiento va fina y
       del color de la banda para que no parezca un borde. */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--banda-borde) transparent;
    background: var(--banda);
    border-right: 1px solid var(--banda-linea);
    align-self: auto;
  }

  .con-lateral .nav a {
    gap: 11px;
    padding: 8px 10px;
    border-radius: var(--radio);
    font-size: .9rem;
    letter-spacing: .07em;
  }
  .con-lateral .nav .icono { display: block; flex: 0 0 auto; }

  /* La sección abierta: fondo apenas más claro y la barra del color de la
     sala al costado, que en columna es donde se lee como marca y no como la
     línea que separa un renglón del siguiente. */
  .con-lateral .nav a.activo {
    background: var(--banda-velo-fuerte);
    box-shadow: inset 3px 0 0 var(--acento-barra);
  }

  /* En claro, una pastilla del color de los paneles y sin barra: sobre el
     menú piedra el blanco ya se despega solo, y la barra sumaba una línea
     de color más. En oscuro sigue la de arriba. */
  :root:not([data-tema="oscuro"]) .con-lateral .nav a.activo {
    background: var(--fondo-panel);
    box-shadow: 0 1px 2px rgba(20, 24, 31, .14);
  }

  /* Con a.nav-marca y no .nav-marca a secas: si no, la regla de los enlaces
     de arriba le gana en peso y la marca sale del tamaño de una sección. */
  .con-lateral .nav a.nav-marca {
    display: block;
    padding: 4px 10px 8px;
    color: var(--banda-texto);
    font-family: var(--fuente-display);
    font-weight: 600;
    font-size: 1.35rem;
    letter-spacing: .05em;
  }
  .con-lateral .nav a.nav-marca:hover { background: none; opacity: .9; }

  /* La marca y, a su derecha, el botón que pliega el menú a sólo íconos.
     Plegado, el botón baja debajo de la marca (ver «Sólo íconos»). */
  .con-lateral .nav-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
  .con-lateral .form-menu { display: block; margin: 0; }
  .nav-plegar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--banda-borde);
    border-radius: var(--radio-chico);
    background: var(--banda-velo);
    color: var(--banda-texto-suave);
    cursor: pointer;
  }
  .nav-plegar:hover { background: var(--banda-velo-fuerte); color: var(--banda-texto); }
  .nav-plegar:focus-visible { outline: 2px solid var(--acento-barra); outline-offset: 2px; }
  .nav-plegar .icono { width: 18px; height: 18px; }
  /* Un solo dibujo: la flecha da media vuelta sobre sí misma y apunta hacia
     donde va a ir el menú. Gira sólo la flecha; el panel queda quieto. */
  .nav-plegar .icono path:last-child { transform-box: fill-box; transform-origin: center; transition: transform .22s ease; }

  /* Plegar y desplegar se mueve, no salta: el menú cambia de ancho y el
     contenido se corre con él. Los nombres se cortan mientras tanto (nowrap y
     overflow-x hidden) en vez de partirse en dos renglones. Quien pidió menos
     movimiento al sistema lo ve saltar, como antes. */
  .con-lateral .nav { overflow-x: hidden; transition: width .22s ease, box-shadow .22s ease, padding .22s ease; }
  body.con-lateral { transition: padding-left .22s ease; }
  .con-lateral .ficha-cab-fija { transition: left .22s ease; }

  /* Los nombres no desaparecen de golpe: se angostan hasta cero y se apagan.
     Con display: none se iban en el primer cuadro y el menú se cerraba vacío.
     Al abrir, el nombre aparece un poco después, cuando ya hay lugar. */
  .con-lateral .nav .nav-texto {
    max-width: 160px;
    overflow: hidden;
    transition: max-width .22s ease, opacity .15s ease .08s;
  }

  /* Los títulos de grupo son rótulos, no enlaces: chicos, apagados y sin
     el alto de un botón. */
  .con-lateral .nav-grupo {
    display: block;
    margin: 14px 10px 4px;
    color: var(--banda-tenue);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  /* En claro, los títulos se pidieron más marcados: letra plena, negrita y
     una línea que cierra cada grupo. La línea es un ::after y no un borde
     porque en el menú plegado el título se reduce a una raya de 1 px con
     overflow: hidden, que así la recorta sin que haya que deshacerla. */
  :root:not([data-tema="oscuro"]) .con-lateral .nav-grupo {
    color: var(--banda-texto);
    font-weight: 700;
  }
  :root:not([data-tema="oscuro"]) .con-lateral .nav-grupo::after {
    content: "";
    display: block;
    height: 1px;
    margin-top: 4px;
    background: var(--banda-borde);
  }

  /* Ajustes y la pared, abajo de todo: no son trabajo del día. El rótulo
     «Sistema» es de la hoja del teléfono; acá sobra, la separación ya la da
     el lugar. */
  .con-lateral .nav-pie {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: auto;
    padding-top: 12px;
  }
  .con-lateral .nav-grupo-pie { display: none; }

  /* En la columna la pared es un enlace más, con su nombre: el recuadro
     que la distinguía entre los enlaces de texto de la banda sobra acá. */
  .con-lateral .nav a.nav-pared .nav-texto { display: inline; }
  .con-lateral .nav-pared-icono {
    width: auto;
    height: auto;
    background: none;
    box-shadow: none;
    border-radius: 0;
  }
  .con-lateral .nav-pared svg { width: 20px; height: 20px; }
  .con-lateral .nav a.nav-pared:hover { background: var(--banda-velo); }
  .con-lateral .nav a.nav-pared:hover .nav-pared-icono { background: none; }

  /* La marca se mudó a la columna; en la barra quedan la sala y lo demás.
     La sala pierde la barrita de la izquierda, que la separaba de la marca. */
  .con-lateral .cabecera .marca { display: none; }
  .con-lateral .sala-marca { margin-left: 0; padding-left: 0; border-left: 0; }

  /* Sin el menú en el medio, el buscador va pegado a la sala y lo de la
     derecha -campanita, tema, usuario- se va contra el borde. */
  .con-lateral .actividad-encabezado { margin-left: auto; }

  /* Si no entra en un renglón -cerca de los 700 px, con «Todas las salas»-
     lo que baja es el bloque del usuario, y baja a la derecha, debajo de la
     campanita, no suelto contra el borde izquierdo. En el primer renglón no
     cambia nada: el espacio libre ya se lo lleva el margen de la campanita. */
  .con-lateral .cabecera-int { justify-content: flex-end; }

  /* La barra compacta de la ficha se extiende de borde a borde de la
     ventana: sin esto, la columna le tapa el comienzo, que es el UID. */
  .con-lateral .ficha-cab-fija { left: var(--ancho-lateral); }
}

/* Sólo íconos. Pasa en dos casos, y las reglas van escritas para cada uno
   porque una media query no se puede combinar con un selector:

     - entre 701 y 1360 px, siempre, salvo cuando el botón de al lado de la
       marca abre el menú un momento por encima del contenido
       (html.menu-flotante, que pone fs.js);
     - desde 1361 px, cuando la persona lo plegó (data-menu="plegado" en el
       <html>, que sale de la cookie: ver menu_plegado()).

   En los dos el menú mide 62 px; los nombres se van y quedan la etiqueta
   que aparece al costado al pasar el mouse (fs.js; sin JavaScript, el title
   de cada enlace) y los números montados en la esquina del ícono. */
@media (min-width: 701px) and (max-width: 1360px) {
  :root { --ancho-lateral: 62px; }

  html:not(.menu-flotante) .con-lateral .nav { padding: 10px 8px 14px; }
  html:not(.menu-flotante) .con-lateral .nav a { position: relative; padding: 9px 0 9px 13px; }
  html:not(.menu-flotante) .con-lateral .nav .nav-texto { max-width: 0; opacity: 0; transition: max-width .22s ease, opacity .1s ease; }
  html:not(.menu-flotante) .con-lateral .nav-cabeza { flex-direction: column; gap: 8px; }
  html:not(.menu-flotante) .con-lateral .nav a.nav-marca { text-align: center; padding: 4px 0 0; font-size: 1.1rem; }
  html:not(.menu-flotante) .con-lateral .nav-cuenta {
    position: absolute; top: 1px; right: 2px; min-width: 17px; padding: 0 4px;
    font-size: .62rem; line-height: 14px; box-shadow: 0 0 0 2px var(--banda);
  }
  html:not(.menu-flotante) .con-lateral .nav-grupo {
    height: 1px; margin: 10px 6px; overflow: hidden; font-size: 0; background: var(--banda-borde);
  }
  html:not(.menu-flotante) .nav-plegar .icono path:last-child { transform: rotate(180deg); }

  /* Abierto encima: el ancho completo, con sombra, sin mover el contenido
     (--ancho-lateral sigue en 62 y es lo que deja el lugar). */
  html.menu-flotante .con-lateral .nav { width: 200px; box-shadow: 8px 0 28px rgba(0, 0, 0, .22); }
}

@media (min-width: 1361px) {
  html[data-menu="plegado"] { --ancho-lateral: 62px; }

  html[data-menu="plegado"] .con-lateral .nav { padding: 10px 8px 14px; }
  html[data-menu="plegado"] .con-lateral .nav a { position: relative; padding: 9px 0 9px 13px; }
  html[data-menu="plegado"] .con-lateral .nav .nav-texto { max-width: 0; opacity: 0; transition: max-width .22s ease, opacity .1s ease; }
  html[data-menu="plegado"] .con-lateral .nav-cabeza { flex-direction: column; gap: 8px; }
  html[data-menu="plegado"] .con-lateral .nav a.nav-marca { text-align: center; padding: 4px 0 0; font-size: 1.1rem; }
  html[data-menu="plegado"] .con-lateral .nav-cuenta {
    position: absolute; top: 1px; right: 2px; min-width: 17px; padding: 0 4px;
    font-size: .62rem; line-height: 14px; box-shadow: 0 0 0 2px var(--banda);
  }
  html[data-menu="plegado"] .con-lateral .nav-grupo {
    height: 1px; margin: 10px 6px; overflow: hidden; font-size: 0; background: var(--banda-borde);
  }
  html[data-menu="plegado"] .nav-plegar .icono path:last-child { transform: rotate(180deg); }
}

/* El nombre de la sección al pasar el mouse por un ícono del menú plegado.
   Va suelto en el <body> y no dentro del menú porque el menú se desplaza
   (overflow) y recortaría todo lo que asome a su derecha. La ubica fs.js. */
.nav-etiqueta {
  position: fixed;
  z-index: 101;
  padding: 5px 10px;
  border: 1px solid var(--banda-borde);
  border-radius: var(--radio-chico);
  background: var(--banda);
  color: var(--banda-texto);
  box-shadow: var(--sombra);
  font-size: .82rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-6px, -50%);
  transition: opacity .15s ease, transform .15s ease;
}
.nav-etiqueta.visible { opacity: 1; transform: translate(0, -50%); }

@media (prefers-reduced-motion: reduce) {
  .con-lateral .nav, body.con-lateral, .con-lateral .ficha-cab-fija,
  .con-lateral .nav .nav-texto, .nav-plegar .icono path:last-child, .nav-etiqueta { transition: none; }
}

/* La lupa del teléfono, la hoja «Más» y la barra inferior: fuera del teléfono
   no existen. La hoja no es una caja, para que el menú que lleva adentro sea
   la columna de la izquierda como si estuviera suelto; el bloque del usuario
   y el fondo oscuro no se ven, porque en pantalla ancha el usuario está en la
   barra de arriba. Todo lo del teléfono, en angosto.css. */
.buscar-toggle, .barra-inferior, .mas-fondo, .mas-usuario { display: none; }
/* En la banda del teléfono la lupa va entre la sala (1) y la campanita (4):
   los hijos de la barra se ordenan con order, no por el documento. */
.buscar-toggle { order: 3; }
.mas, .mas-hoja { display: contents; }

.cabecera-der { order: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.actividad-encabezado { order: 4; display: flex; align-items: center; }

/* Campanita y desplegable de actividad. El panel usa los registros de
   auditoría operativa, pero solo muestra los de la sala actualmente elegida. */
.actividad { position: relative; }
.actividad-boton {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 32px;
  cursor: pointer;
  border: 1px solid var(--banda-borde);
  border-radius: var(--radio-chico);
  background: var(--banda-velo);
  color: var(--banda-texto);
}
.actividad-boton:hover, .actividad.abierta .actividad-boton { background: var(--banda-velo-fuerte); }
.actividad-boton:focus-visible { outline: 2px solid var(--banda-texto); outline-offset: 3px; }
.actividad-campana { font-size: 1rem; line-height: 1; filter: var(--banda-icono); }
.actividad-contador {
  position: absolute;
  top: -7px;
  right: -8px;
  min-width: 17px;
  padding: 1px 4px;
  border: 2px solid var(--banda);
  border-radius: 999px;
  background: var(--rojo);
  color: #fff;
  font-size: .67rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}
.actividad-panel {
  position: absolute;
  z-index: 110;
  top: calc(100% + 8px);
  right: 0;
  width: min(380px, calc(100vw - 28px));
  max-height: min(540px, calc(100vh - 88px));
  overflow: auto;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-panel);
  color: var(--texto);
  box-shadow: var(--sombra);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.actividad-panel[hidden] { display: none; }
.actividad.abierta .actividad-panel { opacity: 1; transform: translateY(0); pointer-events: auto; }
.actividad-titulo { display: flex; justify-content: space-between; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--borde); }
.actividad-titulo span { color: var(--texto-suave); font-size: .82rem; }
.actividad-lista { margin: 0; padding: 0; list-style: none; }
.actividad-lista li + li { border-top: 1px solid var(--borde); }
.actividad-lista li.actividad-no-leida > a { background: var(--acento-suave); box-shadow: inset 3px 0 0 var(--acento); }
.actividad-lista li.actividad-no-leida > a:hover { background: var(--fondo-hover); }
.actividad-lista a { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 9px; padding: 11px 14px; color: inherit; }
.actividad-lista a:hover { background: var(--fondo-hover); text-decoration: none; }
.actividad-lista strong, .actividad-detalle, .actividad-meta { display: block; }
.actividad-lista strong { font-size: .88rem; }
.actividad-detalle { margin-top: 2px; color: var(--texto); font-size: .83rem; }
.actividad-meta { margin-top: 3px; color: var(--texto-suave); font-size: .78rem; }
/* --azul-700 no existe en la paleta: la declaracion era invalida y el color
   caia en el heredado, asi que el glifo de cualquier accion sin regla propia
   salia gris oscuro en vez de azul. Va con --acento, que si existe y ademas
   sigue el tema oscuro. */
.actividad-icono { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--acento-suave); color: var(--acento); font-weight: 700; }
.actividad-icono-crear { background: #d9f5e5; color: #167044; }
.actividad-icono-cambio_estado { background: #e5ddff; color: #5739a4; }
.actividad-icono-bitacora { background: #fff0c9; color: #9a6400; }
.actividad-icono-adjunto_subir { background: #d9edff; color: #1265a8; }
/* Verde azulado y no azul: el azul ya es el de "Archivo subido", y las dos
   acciones conviven en la misma lista. En la bitacora el envio a LAB si va en
   azul, porque ahi no hay adjuntos con los que chocar; lo que comparten las dos
   pantallas es el glifo →, que es lo que se reconoce. */
.actividad-icono-envio_lab { background: #d6ecea; color: #0d6b60; }
.actividad-vacia { margin: 0; padding: 18px 14px; color: var(--texto-suave); font-size: .9rem; }
.actividad-pie { padding: 10px 14px; border-top: 1px solid var(--borde); font-size: .88rem; }

.usuario {
  color: var(--banda-texto);
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  font-size: .88rem;
  text-align: right;
}
.usuario:hover { text-decoration: none; opacity: .85; }
.usuario .rol { color: var(--banda-tenue); font-size: .8rem; }

.form-sala, .form-salir, .form-tema { margin: 0; }
.form-ir { order: 3; }

/* Botón de tema. Vive en la cabecera, así que se estila como el
   selector de sala y no como un botón del contenido. */
.btn-tema {
  background: var(--banda-velo);
  border: 1px solid var(--banda-borde);
  color: var(--banda-texto);
  border-radius: var(--radio-chico);
  padding: 5px 9px;
  font-family: inherit;
  font-size: .86rem;
  cursor: pointer;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-tema:hover { background: var(--banda-velo-fuerte); }

.btn-tema .icono { font-size: 1rem; line-height: 1; }

/* En la pantalla de ingreso no hay cabecera: el botón va arriba a la derecha
   y necesita colores del contenido, no de la barra. */
.pagina-login .form-tema {
  position: absolute;
  top: 14px;
  right: 16px;
}
.pagina-login .btn-tema {
  background: var(--fondo-panel);
  border-color: var(--borde-fuerte);
  color: var(--texto-suave);
}
.pagina-login .btn-tema:hover { background: var(--fondo-hover); }

/* El selector se dibuja igual que la sala fija: quien administra ve la misma
   cabecera que la sala, no una con una caja de más. Lo único que lo delata
   como control es el subrayado punteado y la flecha que el navegador le pone
   solo; al pasar el mouse el subrayado se vuelve lleno. */
.form-sala select {
  background: transparent;
  color: var(--banda-texto-suave);
  border: 0;
  border-bottom: 1px dashed var(--banda-borde);
  border-radius: 0;
  padding: 0 0 1px;
  font-family: var(--fuente-display);
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.form-sala select:hover { border-bottom-style: solid; border-bottom-color: var(--banda-texto-suave); color: var(--banda-texto); }
.form-sala select:focus-visible { outline: 2px solid var(--banda-texto); outline-offset: 3px; }
.form-sala select option {
  color: var(--texto);
  background: var(--fondo-panel);
  letter-spacing: normal;
}

/* Una sala concreta es un filtro global, no sólo el nombre del contexto. Se
   distingue con texto y línea propios, sin encerrarla en una pastilla: el
   encabezado ya tiene suficientes cajas y un relleno saturado competía con
   la navegación. Los tres tonos apagados viven en tokens.css y sólo se usan
   acá, para no confundir una sala con los colores de estado del contenido. */
.form-sala.sala-activa select {
  padding: 0 0 2px;
  border: 0;
  border-bottom: 2px solid var(--sala-banda);
  border-radius: 0;
  background: transparent;
  color: var(--sala-banda);
  font-weight: 600;
}
.form-sala.sala-activa select:hover {
  border-bottom-color: var(--banda-texto);
  background: transparent;
  color: var(--banda-texto);
}

/* "Ir a UID" del encabezado: mismo estilo que el selector de sala, sobre la
   banda. Angosto para no comerle lugar al menú. */
.form-ir { margin: 0; }
.form-ir input {
  width: 130px;
  background: var(--banda-velo);
  color: var(--banda-texto);
  border: 1px solid var(--banda-borde);
  border-radius: var(--radio-chico);
  padding: 5px 9px;
  font-size: .88rem;
}
.form-ir input::placeholder { color: var(--banda-tenue); }
.form-ir input:focus { background: var(--banda-velo-fuerte); outline: none; }

/* Usuario atado a una sala: en vez del selector se muestra cuál es. Mismo
   lugar y mismo peso visual, pero sin parecer algo en lo que se puede hacer
   clic. */
.sala-fija {
  font-family: var(--fuente-display);
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--banda-texto-suave);
  white-space: nowrap;
}

/* Sobre la cabecera tinta de la pantalla ancha en claro, el nombre de la
   sala va en blanco pleno, como la marca: en el tono de la sala se leía
   distinto en cada una. El color de la sala queda en la línea de abajo del
   nombre y en la que cruza el pie de la cabecera. */
@media (min-width: 701px) {
  :root:not([data-tema="oscuro"]) .form-sala select,
  :root:not([data-tema="oscuro"]) .form-sala.sala-activa select,
  :root:not([data-tema="oscuro"]) .sala-fija { color: var(--banda-texto); }
}

/* --------------------------------------------------------------------
   Estructura
   -------------------------------------------------------------------- */
.contenido {
  max-width: 1500px;
  margin: 0 auto;
  padding: 20px 18px 44px;
}

.pie {
  max-width: 1500px;
  margin: 0 auto;
  padding: 14px 18px 28px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--texto-tenue);
  font-size: .82rem;
  border-top: 1px solid var(--borde);
}

.titulo-pagina { margin-bottom: 16px; }
.titulo-pagina .sub { margin: 3px 0 0; color: var(--texto-suave); font-size: .92rem; }