/* ============================================================
   MasInfoDe System App — v1.0.216 — marco de las páginas de sistema
   (login/registro y panel del usuario). Independiente del theme.

   Qué cambia en esta ronda (solo aspecto, sin tocar la lógica):
   - Barra superior más alta y aireada, con la marca en degradado y el
     usuario en una «píldora» que se ilumina al pasar el ratón.
   - Menú lateral con el icono dentro de su recuadro, estado activo con
     una barra de acento a la izquierda y grupos bien rotulados: el usuario
     ve de un vistazo dónde está y qué le falta.
   - En pantalla estrecha el menú sale de un botón claro (tres líneas) con
     fondo difuminado, y el botón se convierte en aspa cuando está abierto.

   Se conservan TODAS las clases que usan el PHP y las pruebas
   (.mid-sys__topbar, .mid-sys__hamburger, .is-open, @media 900px…).
   ============================================================ */
.mid-system-app, .mid-system-app * { box-sizing: border-box; }
.mid-system-app {
  --mid-sys-topbar-h: 60px;
  --mid-sys-sidebar-w: 264px;
  min-height: 100vh; min-height: 100dvh;
  background: var(--mid-background);
  color: var(--mid-text);
  font-family: var(--mid-font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* v1.0.123 — Solo los enlaces de TEXTO. Con la regla genérica `.mid-system-app a { color: primary }`
   (especificidad 0,1,1) los COMPONENTES que son enlaces perdían su color: `.mid-btn-sm--primary`
   (0,1,0) quedaba con letra azul sobre fondo azul —el botón «Editar» de la tarjeta se veía como un
   rectángulo vacío— y «Vista previa», los chips y las entradas del menú salían azules. Cada
   componente trae su propio color; aquí se excluyen para no pisarlo. */
.mid-system-app a:not(.mid-button):not(.mid-btn-sm):not(.mid-chip):not(.mid-tab):not(.mid-sys__nav-item):not(.mid-link-sm) { color: var(--mid-primary); }

/* ---------- Barra superior ---------- */
.mid-sys__topbar {
  position: sticky; top: 0; z-index: 40;
  min-height: var(--mid-sys-topbar-h);
  background: var(--mid-surface);
  background: color-mix(in srgb, var(--mid-surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--mid-border);
  display: flex; align-items: center; gap: 14px;
  padding: 10px 20px;
}
.mid-sys__brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 15.5px; letter-spacing: -.02em;
  text-decoration: none; color: var(--mid-text);
}
.mid-sys__mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(140deg, #2563eb 0%, #1d4ed8 55%, #1e3a8a 100%);
  color: #fff; display: grid; place-items: center;
  font-size: 15px; font-weight: 800;
  box-shadow: 0 4px 12px rgba(29, 78, 216, .35);
}
.mid-sys__user {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--mid-text-muted);
}
/* v1.0.222 — Chip de contexto en la marca: deja claro que estás en el panel GLOBAL. */
.mid-sys__tag { margin-left: 2px; padding: 3px 10px; border-radius: 999px; background: var(--mid-primary-soft); border: 1px solid #bfdbfe; color: var(--mid-primary); font-size: 11px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.mid-sys__user > span:first-child { font-weight: 600; color: var(--mid-text); }
.mid-sys__avatar {
  width: 32px; height: 32px; border-radius: 999px;
  background: linear-gradient(140deg, var(--mid-primary-soft), #c7d2fe);
  border: 1px solid #c7d2fe; color: var(--mid-primary);
  display: grid; place-items: center; font-weight: 800; font-size: 12.5px;
}
.mid-sys__logout {
  margin-left: 4px; display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--mid-border); background: var(--mid-surface);
  color: var(--mid-text-muted) !important; font-size: 12.5px; font-weight: 600;
  text-decoration: none; transition: background .14s, color .14s, border-color .14s;
}
.mid-sys__logout:hover { background: var(--mid-danger-soft); border-color: #fecaca; color: #b91c1c !important; }

/* ---------- Cuerpo: menú + contenido ---------- */
.mid-sys__body { display: flex; align-items: stretch; min-height: calc(100vh - var(--mid-sys-topbar-h)); }

/* v1.0.224 — EL MENÚ SIEMPRE SE VE ENTERO.
   Con 17 módulos la lista era más alta que la pantalla y se cortaba por abajo (había que bajar TODA la
   página para llegar a «Estado»). Ahora el lateral se queda PEGADO bajo la barra con la altura justa de
   la ventana: si la lista no cabe, se desplaza DENTRO del menú, nunca fuera de la vista. */
.mid-sys__sidebar {
  position: sticky;
  top: var(--mid-sys-topbar-h);
  align-self: flex-start;
  height: calc(100vh - var(--mid-sys-topbar-h));
  max-height: calc(100vh - var(--mid-sys-topbar-h));
  width: var(--mid-sys-sidebar-w); flex: 0 0 auto;
  background: var(--mid-surface);
  border-right: 1px solid var(--mid-border);
  padding: 12px 10px 14px;
  display: flex; flex-direction: column; gap: 11px;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}
.mid-sys__sidebar::-webkit-scrollbar { width: 8px; }
.mid-sys__sidebar::-webkit-scrollbar-thumb { background: var(--mid-border-strong); border-radius: 999px; }
.mid-sys__nav-group { display: flex; flex-direction: column; gap: 2px; }
.mid-sys__nav-title {
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  color: var(--mid-text-faint); text-transform: uppercase;
  padding: 3px 10px 4px; margin: 0;
}
.mid-sys__nav-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 10px;
  font-size: 13.5px; font-weight: 500;
  color: var(--mid-text); text-decoration: none;
  border: 1px solid transparent;
  transition: background .14s, color .14s, border-color .14s;
}
.mid-sys__nav-item:hover { background: var(--mid-surface-muted); border-color: var(--mid-border); }
.mid-sys__nav-item.is-active {
  background: var(--mid-primary-soft); color: var(--mid-primary);
  border-color: #bfdbfe; font-weight: 700;
}
/* Barra de acento del elemento activo: refuerza «estás aquí» sin depender solo del color. */
.mid-sys__nav-item.is-active::before {
  content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--mid-primary);
}
/* El icono, dentro de su recuadro: da ritmo y hace la lista más fácil de recorrer con la vista. */
.mid-sys__nav-ico {
  width: 24px; height: 24px; flex: 0 0 auto; border-radius: 7px;
  background: var(--mid-surface-muted); border: 1px solid var(--mid-border);
  display: grid; place-items: center; font-size: 12px; line-height: 1;
  transition: background .14s, border-color .14s;
}
.mid-sys__nav-item:hover .mid-sys__nav-ico { background: var(--mid-surface); }
.mid-sys__nav-item.is-active .mid-sys__nav-ico { background: #fff; border-color: #bfdbfe; }
.mid-sys__nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pie del menú: un recordatorio útil (no decorativo) que evita que el usuario se pierda. */
.mid-sys__foot {
  margin-top: auto; padding: 10px 10px 2px;
  border-top: 1px solid var(--mid-surface-muted);
  font-size: 11.5px; color: var(--mid-text-faint); line-height: 1.5;
}
.mid-sys__foot strong { color: var(--mid-text-muted); display: block; margin-bottom: 2px; font-size: 12px; }
.mid-sys__foot em { font-style: normal; font-weight: 700; color: var(--mid-text-muted); }
.mid-sys__foot-link { display: inline-block; margin-top: 8px; font-weight: 700; color: var(--mid-primary); text-decoration: none; }
.mid-sys__foot-link:hover { text-decoration: underline; }

/* v1.0.222 — PANEL GLOBAL: la columna del contenido es más ancha y va PEGADA al menú (no centrada).
   Es un panel de datos (tablas largas); centrarlo dejaba dos huecos a los lados y el contenido
   parecía «flotando en el medio». */
.mid-sys--sa .mid-sys__main { max-width: 1400px; margin: 0; }

.mid-sys__main {
  flex: 1; min-width: 0;
  padding: 24px 24px 36px;
  max-width: var(--mid-page-max-width); margin: 0 auto; width: 100%;
}
.mid-sys__overlay { display: none; }
.mid-sys__hamburger {
  display: none; width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 10px; border: 1px solid var(--mid-border);
  background: var(--mid-surface); cursor: pointer;
  padding: 0; place-items: center;
}
.mid-sys__hamburger:hover { background: var(--mid-surface-muted); }
/* Tres líneas dibujadas con CSS (nítidas a cualquier zoom) que se vuelven aspa al abrir. */
.mid-sys__bars { position: relative; width: 18px; height: 2px; background: var(--mid-text); border-radius: 2px; display: block; transition: background .14s; }
.mid-sys__bars::before, .mid-sys__bars::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px;
  background: var(--mid-text); border-radius: 2px; transition: transform .18s, top .18s;
}
.mid-sys__bars::before { top: -6px; }
.mid-sys__bars::after { top: 6px; }
.mid-sys__hamburger.is-open .mid-sys__bars { background: transparent; }
.mid-sys__hamburger.is-open .mid-sys__bars::before { top: 0; transform: rotate(45deg); }
.mid-sys__hamburger.is-open .mid-sys__bars::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 900px) {
  .mid-sys__sidebar {
    position: fixed; inset: var(--mid-sys-topbar-h) auto 0 0;
    width: min(300px, 86vw); height: auto; max-height: none;
    transform: translateX(-100%); transition: transform .22s ease;
    z-index: 45; box-shadow: var(--mid-shadow-lg);
    border-right: 1px solid var(--mid-border);
  }
  .mid-sys__sidebar.is-open { transform: translateX(0); }
  .mid-sys__overlay.is-open {
    display: block; position: fixed; inset: var(--mid-sys-topbar-h) 0 0 0;
    background: rgba(15, 23, 42, .38); z-index: 44;
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  }
  .mid-sys__hamburger { display: grid; }
  .mid-sys__main { padding: 18px 14px 28px; }
  .mid-sys__user > span:first-child { display: none; }
}

/* En pantalla estrecha el chip de contexto no cabe en la barra: el menú lateral ya dice dónde estás. */
@media (max-width: 600px) {
  .mid-sys__tag { display: none; }
}

/* v1.0.224 — EN PANTALLAS BAJAS EL MENÚ SE APRIETA SOLO.
   Con 17 módulos, en un portátil de 768px de alto la lista no cabía entera. Aquí se reduce el alto de
   cada fila para que entre completa sin tener que desplazarla (medido a 768: 682px de contenido en
   708 disponibles). Solo aplica al lateral de escritorio: en móvil el menú es un panel deslizante. */
@media (max-height: 980px) and (min-width: 901px) {
  .mid-sys__sidebar { gap: 6px; padding: 9px 10px 9px; }
  .mid-sys__nav-item { padding: 3px 10px; font-size: 13px; gap: 9px; }
  .mid-sys__nav-ico { width: 22px; height: 22px; font-size: 11px; border-radius: 6px; }
  .mid-sys__nav-title { padding: 2px 10px 2px; }
  /* El pie se aprieta a una línea y media: es una nota, no un módulo. */
  .mid-sys__foot { padding: 6px 10px 0; font-size: 11px; line-height: 1.35; }
  .mid-sys__foot strong { display: inline; margin-right: 4px; }
  .mid-sys__foot-link { margin-top: 2px; }
}

/* v1.0.225 — VENTANAS MUY BAJAS: un segundo apretón. En una ventana de 450px de alto el menú del
   USUARIO (11 entradas) tampoco cabía con el apretón normal; aquí entra entero, y el del superadmin
   (17) entra a partir de ~560px. La nota del pie se esconde: es lo menos importante y así el menú
   completo gana su sitio. */
@media (max-height: 620px) and (min-width: 901px) {
  .mid-sys__sidebar { gap: 3px; padding: 7px 10px 7px; }
  .mid-sys__nav-item { padding: 1px 10px; font-size: 12.5px; gap: 8px; }
  .mid-sys__nav-ico { width: 20px; height: 20px; font-size: 10px; border-radius: 5px; }
  .mid-sys__nav-title { font-size: 10px; padding: 1px 10px 1px; }
  .mid-sys__foot { display: none; }
}
@media (max-width: 420px) {
  .mid-sys__topbar { gap: 10px; padding: 10px 14px; }
  .mid-sys__logout { padding: 6px 9px; font-size: 11.5px; }
}

/* Guest split (login / registro) */
.mid-guest { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1.05fr 1fr; }
.mid-guest__brand {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #2563eb 0%, #1d4ed8 55%, #1e3a8a 100%);
  color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 48px;
}
.mid-guest__brand::after {
  content: ""; position: absolute; right: -120px; bottom: -140px;
  width: 380px; height: 380px; border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}
.mid-guest__brand h1 { font-size: clamp(1.6rem, 3vw, 2rem); margin: 0 0 10px; letter-spacing: -.03em; position: relative; }
.mid-guest__brand p { opacity: .92; font-size: 15px; margin: 0; max-width: 40ch; position: relative; }
.mid-guest__brand .mid-sys__mark { box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.mid-guest__logo { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; position: relative; }
.mid-guest__logo strong { font-size: 16px; letter-spacing: -.02em; }
.mid-guest__form { display: flex; align-items: center; justify-content: center; padding: 32px 24px; background: var(--mid-background); }
.mid-guest__box { width: 100%; max-width: 420px; }
@media (max-width: 860px) {
  .mid-guest { grid-template-columns: 1fr; }
  .mid-guest__brand { padding: 28px 24px; }
  .mid-guest__brand::after { display: none; }
}

/* Foco visible coherente en todo el marco */
.mid-sys__nav-item:focus-visible,
.mid-sys__hamburger:focus-visible,
.mid-sys__logout:focus-visible,
.mid-sys__brand:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; border-radius: 10px; }