:root {
  --azul: #0b3d91;
  --azul-oscuro: #092f70;
  --azul-claro: #eaf0fb;
  --verde: #1f9d55;
  --verde-suave: #e7f6ee;
  --ambar: #b7791f;
  --ambar-suave: #fdf3e3;
  --rojo: #c53030;
  --rojo-suave: #fdeaea;
  --gris-900: #12202f;
  --gris-700: #3b4b5e;
  --gris-500: #6b7c91;
  --gris-300: #d5dde7;
  --gris-100: #f4f7fb;
  --blanco: #ffffff;
  --radio: 14px;
  --sombra: 0 6px 24px rgba(12, 40, 90, 0.08);
  --borde: 1px solid var(--gris-300);
  --fuente: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
/* Sin esto, cualquier regla con display propio gana sobre el atributo hidden
   (paso de verdad: la capa de carga tapaba la pantalla y bloqueaba los clics). */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--fuente);
  color: var(--gris-900);
  background: var(--gris-100);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--azul); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
p { margin: .4rem 0; }

.salto { position: absolute; left: -999px; }
.salto:focus { left: 8px; top: 8px; background: var(--blanco); padding: .5rem 1rem; z-index: 50; }

/* ---------- cabecera ---------- */
.cabecera { background: var(--azul); color: var(--blanco); box-shadow: var(--sombra); position: sticky; top: 0; z-index: 20; }
.cabecera__barra { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; max-width: 1180px; margin: 0 auto; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--blanco); }
.marca__logo { height: 30px; width: auto; }
.marca__texto { font-weight: 700; font-size: 1.05rem; display: flex; flex-direction: column; line-height: 1.05; }
.marca__texto small { font-weight: 400; font-size: .68rem; opacity: .85; }
.cabecera__acciones { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.cabecera__usuario { font-size: .85rem; opacity: .95; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu { display: flex; gap: .25rem; overflow-x: auto; padding: 0 .6rem .55rem; max-width: 1180px; margin: 0 auto; }
.menu a { color: var(--blanco); text-decoration: none; font-size: .9rem; padding: .45rem .7rem; border-radius: 999px; white-space: nowrap; }
.menu a:hover, .menu a[aria-current="page"] { background: rgba(255, 255, 255, .18); }

.boton {
  font: inherit; cursor: pointer; border: 0; border-radius: 10px; padding: .6rem 1rem;
  background: var(--azul); color: var(--blanco); min-height: 42px; display: inline-flex;
  align-items: center; justify-content: center; gap: .4rem; text-decoration: none;
}
.boton:hover { background: var(--azul-oscuro); }
.boton--fantasma { background: rgba(255, 255, 255, .16); }
.boton--claro { background: var(--blanco); color: var(--azul); border: var(--borde); }
.boton--claro:hover { background: var(--azul-claro); }
.boton--exito { background: var(--verde); }
.boton--peligro { background: var(--rojo); }
.boton--chico { min-height: 34px; padding: .3rem .7rem; font-size: .82rem; }
.boton[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- lienzo ---------- */
.lienzo { max-width: 1180px; margin: 0 auto; padding: 1rem; }
.vista { display: grid; gap: 1.7rem; }
.tarjeta { background: var(--blanco); border: var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1rem; }
.tarjeta--entrar { max-width: 420px; margin: 7vh auto 4vh; width: 100%; }
.tarjeta__titulo { display: flex; align-items: center; gap: .5rem; justify-content: space-between; flex-wrap: wrap; }
/* Pantalla de entrada: logotipo arriba, titulo centrado. */
.tarjeta--entrar .tarjeta__marca { display: flex; justify-content: center; margin-bottom: .5rem; }
.tarjeta--entrar .tarjeta__marca img { width: 220px; max-width: 78%; height: auto; display: block; }
.tarjeta--entrar .tarjeta__titulo { justify-content: center; }
.tarjeta--entrar .tarjeta__titulo h1 { text-align: center; }
.rejilla { display: grid; gap: 1.35rem; }
.rejilla--apps { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.rejilla--dos { grid-template-columns: 1fr; }
.pista { color: var(--gris-500); font-size: .85rem; }
.etiqueta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 22px; padding: 0 .6rem; line-height: 1; white-space: nowrap;
  font-size: .72rem; font-weight: 700; border-radius: 999px;
  background: var(--azul-claro); color: var(--azul);
}
.etiqueta--gris { background: var(--gris-100); color: var(--gris-700); }
.etiqueta--azul { background: var(--azul-claro); color: var(--azul); }
.etiqueta--ambar { background: var(--ambar-suave); color: var(--ambar); }
.etiqueta--verde { background: var(--verde-suave); color: var(--verde); }
.etiqueta--violeta { background: #f0eaff; color: #6b46c1; }
.etiqueta--carbon { background: #e8ecf1; color: var(--gris-700); }
.etiqueta--critica { background: var(--rojo-suave); color: var(--rojo); }

/* ---------- tarjetas de app ---------- */
.app { display: flex; flex-direction: column; gap: .35rem; text-decoration: none; color: inherit; transition: transform .15s ease; }
.app:hover { transform: translateY(-2px); }
.app__nombre { font-weight: 700; }
.app__url { font-size: .78rem; color: var(--gris-500); word-break: break-all; }
.app__pie { display: flex; gap: .4rem; align-items: center; margin-top: auto; flex-wrap: wrap; }

/* ---------- listas de reportes ---------- */
.lista { display: grid; gap: 1rem; }
.fila {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1rem; row-gap: .3rem;
  background: var(--blanco); border: var(--borde); border-left: 4px solid var(--gris-300);
  border-radius: var(--radio); padding: .8rem 1rem; text-decoration: none; color: inherit;
}
.fila:hover { border-color: var(--azul); border-left-color: var(--azul); }
/* El borde izquierdo repite el color del estado: se ve de que estado es sin leer. */
.fila--gris { border-left-color: var(--gris-500); }
.fila--azul { border-left-color: var(--azul); }
.fila--ambar { border-left-color: var(--ambar); }
.fila--verde { border-left-color: var(--verde); }
.fila--violeta { border-left-color: #6b46c1; }
.fila--carbon { border-left-color: var(--gris-500); }
.fila__cuerpo { display: grid; gap: .3rem; min-width: 0; }
.fila__titulo { font-weight: 650; }
.fila__meta { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; font-size: .8rem; color: var(--gris-500); }
.fila__estado { justify-self: end; }
.filtros { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: .95rem 0 1.35rem; }
.filtros label { display: grid; gap: .2rem; font-size: .8rem; color: var(--gris-700); }

/* Filtro rapido por estado: los conteos de la app, ahora tocables. */
.filtros-rapidos { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.filtro-rapido {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 32px; padding: 0 .75rem; border-radius: 999px;
  background: var(--blanco); color: var(--gris-700); border: var(--borde);
  font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.filtro-rapido b { font-weight: 800; }
.filtro-rapido:hover { border-color: var(--azul); color: var(--azul); }
.filtro-rapido--azul { background: var(--azul-claro); border-color: #cfe0f7; color: var(--azul); }
.filtro-rapido--gris { background: var(--gris-100); }
.filtro-rapido--ambar { background: var(--ambar-suave); border-color: #f0dbb5; color: var(--ambar); }
.filtro-rapido--verde { background: var(--verde-suave); border-color: #bfe6cf; color: var(--verde); }
.filtro-rapido--violeta { background: #f0eaff; border-color: #ddd0fb; color: #6b46c1; }
.filtro-rapido--carbon { background: #e8ecf1; border-color: var(--gris-300); color: var(--gris-700); }
.filtro-rapido--critica { background: var(--rojo-suave); border-color: #f6cfcf; color: var(--rojo); }
/* El que esta puesto se ve lleno, con el color de su estado. */
.filtro-rapido--activo { background: var(--azul); border-color: var(--azul); color: var(--blanco); }
.filtro-rapido--activo:hover { background: var(--azul-oscuro); color: var(--blanco); }
.filtro-rapido--activo.filtro-rapido--ambar { background: var(--ambar); border-color: var(--ambar); color: var(--blanco); }
.filtro-rapido--activo.filtro-rapido--verde { background: var(--verde); border-color: var(--verde); color: var(--blanco); }
.filtro-rapido--activo.filtro-rapido--critica { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); }
.filtro-rapido--activo.filtro-rapido--violeta { background: #6b46c1; border-color: #6b46c1; color: var(--blanco); }
.filtro-rapido--activo.filtro-rapido--carbon { background: var(--gris-700); border-color: var(--gris-700); color: var(--blanco); }

/* ---------- formularios ---------- */
.campo { display: grid; gap: .3rem; margin-bottom: .8rem; }
.campo > span { font-size: .88rem; font-weight: 600; color: var(--gris-700); }
.campo small { color: var(--gris-500); font-weight: 400; }
input, select, textarea {
  font: inherit; width: 100%; padding: .62rem .7rem; border: var(--borde);
  border-radius: 10px; background: var(--blanco); color: var(--gris-900); min-height: 42px;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--azul); border-color: var(--azul); }
.acciones { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: .4rem; }
.acciones--centro { justify-content: center; }
.acciones--separada { margin-top: .9rem; }
.requerido { color: var(--rojo); }
.ayuda-campo { font-size: .78rem; color: var(--gris-500); }

/* ---------- ficha del reporte (campos normales, sin recuadros de color) ---------- */
/* ---------- detalle: todo en una sola columna ----------
   Una tarjeta con los datos y una tarjeta por texto, todas del mismo ancho.
   El titulo de cada tarjeta es el mismo que el de las demas secciones (h2) y
   el texto se ve completo, sin scroll ni recortes. */
/* Datos cortos: 8 tarjetas iguales con el azul de Rockkbot, 4 por fila en pantalla grande. */
.datos { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: .8rem; }
.dato {
  display: grid; align-content: start; gap: .25rem; padding: .7rem .85rem;
  background: var(--blanco); border: 2px solid var(--azul); border-radius: 12px; box-shadow: var(--sombra);
}
.dato > span { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gris-500); }
.dato strong { font-size: .88rem; font-weight: 650; color: var(--gris-900); word-break: break-word; }
.largo { margin: 0; font-size: .92rem; line-height: 1.55; }
@media (min-width: 700px) { .datos { grid-template-columns: repeat(4, 1fr); } }

/* ---------- visor de capturas y videos ---------- */
.visor { position: relative; margin-top: 1rem; border: var(--borde); border-radius: 12px; overflow: hidden; background: var(--gris-100); }
/* Boton abajo a la derecha: abre la captura en pantalla completa. */
.visor__completo {
  position: absolute; right: .6rem; bottom: .6rem; display: inline-flex; align-items: center; gap: .35rem;
  font: inherit; font-size: .78rem; font-weight: 650; cursor: pointer;
  background: rgba(255, 255, 255, .95); color: var(--azul); border: var(--borde);
  border-radius: 10px; padding: .38rem .6rem; box-shadow: 0 4px 14px rgba(12, 40, 90, .16);
}
.visor__completo:hover { background: var(--azul-claro); }
/* Al pasar a pantalla completa el medio ocupa todo y el fondo queda oscuro. */
.visor__cuerpo:fullscreen { max-height: none; padding: 0; background: #0b1220; }
.visor__cuerpo:fullscreen img, .visor__cuerpo:fullscreen video, .visor__cuerpo:fullscreen iframe { max-width: 100vw; max-height: 100vh; border-radius: 0; }
img:fullscreen, video:fullscreen, iframe:fullscreen { max-width: 100vw; max-height: 100vh; background: #0b1220; }
.visor__barra { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem .7rem; background: var(--blanco); border-bottom: var(--borde); }
.visor__titulo { font-size: .85rem; color: var(--gris-700); word-break: break-all; }
.visor__cuerpo { display: flex; align-items: center; justify-content: center; padding: .8rem; max-height: 64vh; overflow: auto; }
.visor__cuerpo img { max-width: 100%; max-height: 56vh; border-radius: 10px; }
.visor__cuerpo video { width: 100%; max-height: 56vh; border-radius: 10px; background: #000; }
.visor__cuerpo iframe { width: 100%; height: 56vh; border: 0; border-radius: 10px; background: var(--blanco); }

/* ---------- conversacion tipo WhatsApp: mis mensajes a la derecha ---------- */
.chat { display: grid; gap: .6rem; }
.chat__fila { display: flex; }
.chat__fila--mio { justify-content: flex-end; }
.chat__mensaje {
  max-width: 78%; background: #dbe7fb; border: 1px solid #c3d6f5; color: var(--gris-900);
  border-radius: 14px 14px 14px 4px; padding: .55rem .8rem;
}
/* El mio: azul de Rockkbot con letra blanca. El del otro: el mismo azul, clarito. */
.chat__mensaje--mio { background: var(--azul); border-color: var(--azul-oscuro); color: var(--blanco); border-radius: 14px 14px 4px 14px; }
.chat__cabeza { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .2rem; font-size: .82rem; }
.chat__mensaje--mio .chat__cabeza b { color: var(--blanco); }
.chat__rol { font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgba(255, 255, 255, .55); color: var(--gris-700); border-radius: 6px; padding: .05rem .32rem; }
.chat__mensaje--mio .chat__rol { background: rgba(255, 255, 255, .22); color: #eaf0fb; }
.chat__mensaje p { margin: 0; font-size: .9rem; line-height: 1.5; }
.chat__hora { display: block; text-align: right; font-size: .68rem; color: var(--gris-500); margin-top: .15rem; }
.chat__mensaje--mio .chat__hora { color: #cfe0fb; }

/* Cambio de estado: va centrado y con su badge para no confundirlo con un comentario. */
.chat__evento { display: grid; justify-items: center; gap: .35rem; text-align: center; padding: .55rem .7rem; background: var(--gris-100); border: var(--borde); border-radius: 12px; }
.chat__badge { font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--azul); background: var(--azul-claro); border-radius: 999px; padding: .14rem .5rem; }
.chat__evento__fila { display: flex; align-items: center; justify-content: center; gap: .4rem; flex-wrap: wrap; }
.chat__evento p { margin: 0; }
.chat__nota { font-size: .85rem; color: var(--gris-700); }
.chat__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--gris-300); display: block; }

/* ---------- detalle ---------- */
.detalle { display: grid; gap: 1rem; }
.bloque { background: var(--azul-claro); border-radius: 10px; padding: .7rem .85rem; }
.bloque h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gris-700); margin: 0 0 .3rem; }
.linea-tiempo { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.linea-tiempo li { border-left: 3px solid var(--azul); padding-left: .7rem; font-size: .88rem; }
.comentario { border: var(--borde); border-radius: var(--radio); padding: .7rem .85rem; background: var(--blanco); }
.comentario__cabeza { display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem; color: var(--gris-500); flex-wrap: wrap; }
.capturas { display: flex; gap: .6rem; flex-wrap: wrap; }
.capturas img { width: 116px; height: 84px; object-fit: cover; border-radius: 10px; border: var(--borde); }

/* ---------- avisos ---------- */
.avisos { display: grid; gap: .5rem; }
.aviso { border-radius: 10px; padding: .6rem .85rem; font-size: .9rem; border: 1px solid transparent; }
.aviso--bien { background: var(--verde-suave); color: #17603a; border-color: #bfe6d1; }
.aviso--mal { background: var(--rojo-suave); color: #8a1f1f; border-color: #f3c6c6; }
.aviso--info { background: var(--azul-claro); color: var(--azul-oscuro); border-color: #c9d9f5; }

/* ---------- acordeon de la cuenta (dentro del encabezado, sin flotar) ---------- */
.acordeon { background: var(--azul-oscuro); border-top: 1px solid rgba(255, 255, 255, .22); }
.acordeon__caja { max-width: 1180px; margin: 0 auto; padding: .75rem 1rem 1rem; }
.acordeon__cabecera { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .55rem; }
.acordeon__titulo { color: var(--blanco); font-weight: 650; font-size: .9rem; word-break: break-word; }
.acordeon__menu { display: grid; gap: .4rem; }
.acordeon__menu a, .acordeon__menu button {
  display: block; width: 100%; text-align: left; font: inherit; font-size: .95rem; cursor: pointer;
  color: var(--blanco); text-decoration: none; padding: .7rem .85rem; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08);
}
.acordeon__menu a:hover, .acordeon__menu button:hover { background: rgba(255, 255, 255, .2); }
.acordeon__salir { color: #ffd4d4 !important; border-color: rgba(255, 190, 190, .5) !important; }
.boton--usuario { max-width: 12rem; }
.boton__punto { width: 10px; height: 10px; border-radius: 50%; background: #7ee2a8; display: inline-block; flex: none; }
@media (min-width: 560px) {
  .acordeon__menu { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- pie y carga ---------- */
.pie { display: flex; flex-direction: column; align-items: center; gap: .4rem; justify-content: center; padding: 1.5rem 1rem 2.2rem; color: var(--gris-500); font-size: .82rem; text-align: center; }
.pie__logo { height: 20px; opacity: .75; }
.pie__creditos { display: grid; gap: .12rem; }
.pie__creditos b { color: var(--gris-700); font-weight: 650; }
.pie__creditos small { font-size: .76rem; letter-spacing: .01em; }
.capa-carga { position: fixed; inset: 0; background: rgba(244, 247, 251, .6); display: flex; align-items: center; justify-content: center; z-index: 30; }
.girador { width: 34px; height: 34px; border: 3px solid var(--azul-claro); border-top-color: var(--azul); border-radius: 50%; animation: giro .8s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
.soloMovil { display: inline-flex; }
.soloLector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- campana: centro de eventos (como el de Detras del Balance) ---------- */
.cabecera__campana { position: relative; display: flex; align-items: center; }
.campana { position: relative; }
.campana__globo {
  position: absolute; top: -.3rem; right: -.3rem; min-width: 18px; height: 18px; padding: 0 .25rem;
  border-radius: 999px; background: var(--rojo); color: var(--blanco);
  font-size: .68rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.campana__panel {
  /* Cuelga de la campana: la esquina de arriba a la derecha queda alineada con ella. */
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 25; width: min(350px, 94vw);
  background: var(--blanco); border: var(--borde); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(12, 40, 90, .22); overflow: hidden;
}
.campana__cabecera { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .75rem; border-bottom: var(--borde); }
.campana__titulo { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .95rem; color: var(--gris-900); }
.campana__pendientes { font-size: .64rem; font-weight: 700; letter-spacing: .07em; color: var(--gris-500); }
.campana__lista { max-height: 58vh; overflow-y: auto; background: var(--gris-100); }
.campana__item { display: grid; gap: .3rem; width: 100%; text-align: left; font: inherit; cursor: pointer; background: var(--blanco); border: 0; border-bottom: var(--borde); padding: .65rem .75rem; }
.campana__item:hover { background: var(--azul-claro); }
.campana__item--nueva { box-shadow: inset 3px 0 0 var(--azul); }
.campana__fila { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.campana__texto { font-size: .85rem; font-weight: 650; color: var(--gris-900); }
.campana__cuando { font-size: .7rem; color: var(--gris-500); white-space: nowrap; }
.campana__resumen { font-size: .78rem; color: var(--gris-500); }
.campana__abajo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .1rem; }
.campana__tipo { font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gris-700); background: var(--gris-100); border-radius: 6px; padding: .12rem .4rem; }
.campana__detalle { font-size: .74rem; font-weight: 650; color: var(--azul); }
.campana__vacio { padding: 1.2rem .9rem; font-size: .85rem; color: var(--gris-500); text-align: center; margin: 0; background: var(--blanco); }
.campana__pie { border-top: var(--borde); background: var(--blanco); }
.campana__limpiar { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; width: 100%; background: transparent; border: 0; cursor: pointer; font: inherit; font-size: .78rem; color: var(--gris-500); padding: .6rem .75rem; }
.campana__limpiar:hover { background: var(--gris-100); color: var(--gris-700); }
@media (max-width: 620px) {
  /* En pantalla chica no hay espacio para colgarlo de la campana: ocupa el ancho y no se sale. */
  .campana__panel { position: fixed; left: .5rem; right: .5rem; width: auto; }
}

/* ---------- pantallas medianas y grandes ---------- */
@media (min-width: 560px) {
  .filtros { grid-template-columns: repeat(4, 1fr); }
  .rejilla--dos { grid-template-columns: 1fr 1fr; }
  /* Las etiquetas ocupan el mismo alto: asi los campos de las dos columnas quedan a la misma altura. */
  .rejilla--dos .campo > span { min-height: 1.7rem; display: flex; align-items: flex-end; }
}
@media (min-width: 900px) {
  h1 { font-size: 1.8rem; }
  .lienzo { padding: 1.5rem; }
  .soloMovil { display: none; }
  .menu { padding-bottom: .7rem; }
  .rejilla--dos { grid-template-columns: 2fr 1fr; align-items: start; }
}
@media print {
  .cabecera, .menu, .pie, .acciones { display: none; }
}

/* ==========================================================================
   Estilos del Hub Central y Control Plane Multi-App
   ========================================================================== */
.menu__item--destacado {
  background: rgba(255, 255, 255, 0.22) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.modal-fondo {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(18, 32, 47, 0.7); z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; backdrop-filter: blur(4px);
}
.modal-caja {
  background: var(--blanco); border-radius: var(--radio);
  max-width: 580px; width: 100%; max-height: 90vh;
  overflow-y: auto; padding: 1.5rem; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.modal-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; border-bottom: var(--borde); padding-bottom: .6rem;
}
.input-codigo {
  font-family: monospace; font-size: .88rem; background: var(--gris-100);
  border: 1px dashed var(--gris-500); padding: .5rem; border-radius: 6px;
  width: 100%; user-select: all;
}

/* Tarjetas de aplicaciones en el Hub */
.app-card {
  display: flex; flex-direction: column; justify-content: space-between;
  border-left: 4px solid var(--azul); transition: transform .15s ease, box-shadow .15s ease;
}
.app-card:hover {
  transform: translateY(-2px); box-shadow: 0 8px 28px rgba(12, 40, 90, 0.14);
}
.app-card__header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; margin-bottom: 1rem;
}
.app-card__icono { font-size: 1.8rem; line-height: 1; }
.app-card__nombre { margin: 0; font-size: 1.15rem; color: var(--gris-900); }
.app-card__metricas {
  display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
  background: var(--gris-100); border-radius: 10px; padding: .65rem; margin-bottom: 1rem;
}
.metrica-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.metrica-num { font-size: 1.25rem; font-weight: 800; color: var(--azul); line-height: 1.1; }
.metrica-label { font-size: .72rem; color: var(--gris-500); text-transform: uppercase; font-weight: 600; }

/* Barra de pestañas del panel Super Admin */
.tabs-barra {
  display: flex; gap: .35rem; overflow-x: auto; padding: .4rem 0;
  border-bottom: 2px solid var(--gris-300); margin-bottom: 1.2rem;
}
.tab-btn {
  font: inherit; font-size: .88rem; font-weight: 600; border: 0; background: transparent;
  color: var(--gris-700); padding: .55rem .9rem; border-radius: 8px 8px 0 0;
  cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  border-bottom: 3px solid transparent; transition: all .15s ease;
}
.tab-btn:hover { background: var(--gris-100); color: var(--azul); }
.tab-btn.activo {
  color: var(--azul); border-bottom-color: var(--azul); background: var(--azul-claro);
}
.tab-panel { display: none; }
.tab-panel.activo { display: block; }
.w-100 { width: 100%; }