/* ============================================================================
   panel.css — Tema del panel interno: marca Muelle La Bodeguita + vidrio.
   Se carga en views/partials/header.php DESPUÉS de Bootstrap 5.3.3 y de
   tokens.css. Capa global: pinta fondo, barra, pie, tarjetas, botones,
   formularios y tablas de las 50 vistas sin tocar su HTML. Las vistas con
   <style> propio ganan donde redefinen (fase 2 las remapea a --mx-*).
   ========================================================================== */

/* ── Lienzo ────────────────────────────────────────────────────────────── */
html { min-height: 100%; }
body {
  font-family: var(--mx-font-body);
  color: var(--mx-ink);
  background-color: var(--mx-bg-base);
  background-image:
    radial-gradient(60vw 60vw at 88% -12%, var(--mx-blob-1), transparent 60%),
    radial-gradient(50vw 50vw at -4% 108%, var(--mx-blob-2), transparent 60%),
    var(--mx-bg);
  background-attachment: fixed;
  transition: background-color .25s ease, color .25s ease;
}

/* Gutters de página (antes en header.php) */
.mxp-page { padding-left: .75rem; padding-right: .75rem; }
@media (min-width: 576px) { .mxp-page { padding-left: 1rem;    padding-right: 1rem; } }
@media (min-width: 992px) { .mxp-page { padding-left: 1.25rem; padding-right: 1.25rem; } }

/* ── Puente a Bootstrap 5.3 ─────────────────────────────────────────────── */
:root, html[data-bs-theme="light"], html[data-bs-theme="dark"] {
  --bs-body-bg: transparent;
  --bs-body-color: var(--mx-ink);
  --bs-body-color-rgb: 28,43,69;
  --bs-emphasis-color: var(--mx-ink);
  --bs-secondary-color: var(--mx-muted);
  --bs-tertiary-bg: var(--mx-surface-2);
  --bs-heading-color: var(--mx-primary);
  --bs-primary: var(--mx-primary);
  --bs-primary-rgb: var(--mx-primary-rgb);
  --bs-link-color: var(--mx-link);
  --bs-link-color-rgb: var(--mx-link-rgb);
  --bs-link-hover-color: var(--mx-link-hover);
  --bs-link-hover-color-rgb: var(--mx-link-hover-rgb);
  --bs-border-color: var(--mx-border);
  --bs-border-radius: var(--mx-radius-sm);
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: var(--mx-radius);
  --bs-font-sans-serif: var(--mx-font-body);
  --bs-body-font-family: var(--mx-font-body);
}
html[data-bs-theme="dark"] { --bs-body-color-rgb: 238,243,251; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.card-title, .modal-title, .navbar-brand {
  font-family: var(--mx-font-display);
  letter-spacing: -.01em;
}

/* ── Vidrio ────────────────────────────────────────────────────────────── */
.mx-glass, .navbar, .card, .modal-content, .offcanvas, .toast {
  background: var(--mx-glass);
  background-image: linear-gradient(180deg, var(--mx-glass-sheen), transparent 45%);
  -webkit-backdrop-filter: blur(var(--mx-blur)) saturate(var(--mx-glass-sat));
  backdrop-filter: blur(var(--mx-blur)) saturate(var(--mx-glass-sat));
  border: 1px solid var(--mx-glass-border);
  /* Vidrio grueso: filo superior que refleja luz, base más densa, sombra exterior */
  box-shadow: inset 0 1px 0 var(--mx-glass-edge), inset -1px -1px 0 var(--mx-glass-edge-2), var(--mx-shadow);
}
.card { --bs-card-bg: transparent; --bs-card-border-color: transparent; --bs-card-cap-bg: rgba(var(--mx-primary-rgb), .07); border-radius: var(--mx-radius); }
.card > .card-header:first-child { border-top-left-radius: var(--mx-radius); border-top-right-radius: var(--mx-radius); }
/* Modales y panel lateral: tinte y desenfoque propios (Apariencia → Modales), independientes de las tarjetas */
.modal-content, .offcanvas {
  background: var(--mx-modal-bg);
  -webkit-backdrop-filter: blur(var(--mx-modal-blur)) saturate(var(--mx-glass-sat));
  backdrop-filter: blur(var(--mx-modal-blur)) saturate(var(--mx-glass-sat));
}
.modal-content { --bs-modal-bg: transparent; border-radius: var(--mx-radius); }
.offcanvas { --bs-offcanvas-bg: transparent; }
.toast { --bs-toast-bg: transparent; }
.dropdown-menu {
  --bs-dropdown-bg: transparent;
  --bs-dropdown-color: var(--mx-menu-ink);
  --bs-dropdown-link-color: var(--mx-menu-ink);
  --bs-dropdown-link-hover-color: var(--mx-menu-ink);
  --bs-dropdown-link-hover-bg: rgba(7,55,112,.08);
  --bs-dropdown-link-active-bg: #073770;
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-header-color: #5d6a83;
  --bs-dropdown-divider-bg: rgba(7,55,112,.14);
  background: transparent;
  isolation: isolate;
  border: 1px solid rgba(7,55,112,.14);
  border-radius: var(--mx-radius-sm);
  box-shadow: var(--mx-shadow);
}
/* Un elemento con backdrop-filter es «raíz de fondo» de sus descendientes: si el desenfoque fuera
   en el propio menú, los submenús (y los menús dentro de la barra) solo desenfocarían a su padre.
   Por eso el vidrio del menú vive en un ::before sin hijos. */
.dropdown-menu::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--mx-menu-bg);
  -webkit-backdrop-filter: blur(var(--mx-nav-blur)) saturate(var(--mx-glass-sat));
  backdrop-filter: blur(var(--mx-nav-blur)) saturate(var(--mx-glass-sat));
}

/* Los datos nunca se leen a través de vidrio: superficies sólidas dentro de tarjetas */
.table {
  --bs-table-bg: var(--mx-table-bg);
  --bs-table-color: var(--mx-ink);
  --bs-table-border-color: var(--mx-border);
  --bs-table-striped-bg: var(--mx-table-stripe);
  --bs-table-striped-color: var(--mx-ink);
  --bs-table-hover-bg: rgba(var(--mx-primary-rgb), .08);
  --bs-table-hover-color: var(--mx-ink);
}
.table-light, .table > thead.table-light > tr > th { --bs-table-bg: var(--mx-table-head); --bs-table-color: var(--mx-ink); }
.table-responsive { border-radius: var(--mx-radius-sm); }
.form-control, .form-select, .input-group-text, .list-group-item {
  background-color: var(--mx-surface);
  color: var(--mx-ink);
  border-color: var(--mx-border);
}
.form-control::placeholder { color: var(--mx-muted); opacity: .8; }
.form-control:focus, .form-select:focus {
  background-color: var(--mx-surface);
  color: var(--mx-ink);
  border-color: var(--mx-link);
  box-shadow: 0 0 0 3px rgba(122,202,240,.45);
}
.form-control:disabled, .form-select:disabled { background-color: var(--mx-surface-2); }
.form-check-input:checked { background-color: var(--mx-primary); border-color: var(--mx-primary); }
.list-group-item.active { background-color: var(--mx-primary); border-color: var(--mx-primary); color: var(--mx-primary-ink); }

/* Vistas con .bg-white/.bg-light y sin CSS oscuro propio (about_versions, gate…):
   en oscuro pasan a superficie sólida legible. Una vista con su propio tema gana.
   Reemplaza el shim que se retiró de header.php. */
html[data-bs-theme="dark"] .bg-white, html[data-bs-theme="dark"] .bg-light {
  background-color: var(--mx-surface) !important; color: var(--mx-ink);
}

/* ── Botones ───────────────────────────────────────────────────────────── */
.btn { border-radius: var(--mx-radius-sm); font-weight: 600; }
.btn-primary {
  --bs-btn-bg: var(--mx-primary); --bs-btn-border-color: var(--mx-primary); --bs-btn-color: var(--mx-primary-ink);
  --bs-btn-hover-bg: var(--mx-primary-hover); --bs-btn-hover-border-color: var(--mx-primary-hover); --bs-btn-hover-color: var(--mx-primary-ink);
  --bs-btn-active-bg: var(--mx-primary-hover); --bs-btn-active-border-color: var(--mx-primary-hover); --bs-btn-active-color: var(--mx-primary-ink);
  --bs-btn-disabled-bg: var(--mx-primary); --bs-btn-disabled-border-color: var(--mx-primary); --bs-btn-disabled-color: var(--mx-primary-ink);
  --bs-btn-focus-shadow-rgb: 122,202,240;
}
.btn-outline-primary {
  --bs-btn-color: var(--mx-primary); --bs-btn-border-color: var(--mx-primary);
  --bs-btn-hover-bg: var(--mx-primary); --bs-btn-hover-border-color: var(--mx-primary); --bs-btn-hover-color: var(--mx-primary-ink);
  --bs-btn-active-bg: var(--mx-primary); --bs-btn-active-border-color: var(--mx-primary); --bs-btn-active-color: var(--mx-primary-ink);
  --bs-btn-focus-shadow-rgb: 122,202,240;
}
.btn-success { --bs-btn-bg: var(--mx-success); --bs-btn-border-color: var(--mx-success); }
.btn-danger  { --bs-btn-bg: var(--mx-danger);  --bs-btn-border-color: var(--mx-danger); }
.btn-warning { --bs-btn-bg: var(--mx-warning); --bs-btn-border-color: var(--mx-warning); --bs-btn-color: #1c2b45; }
.btn-secondary, .btn-light, .btn-outline-secondary { --bs-btn-border-radius: var(--mx-radius-sm); }

/* Insignias y alertas: tono de marca sin perder la semántica de Bootstrap */
.alert { border-radius: var(--mx-radius-sm); border-width: 1px; }
.alert-primary { --bs-alert-bg: rgba(var(--mx-primary-rgb), .12); --bs-alert-border-color: rgba(var(--mx-primary-rgb), .3); --bs-alert-color: var(--mx-ink); }
.badge { border-radius: 999px; font-weight: 600; }

/* ── Barra de navegación (nav.php) ─────────────────────────────────────── */
.navbar.mx-navbar {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  isolation: isolate;
  border: 0;
  border-bottom: 1px solid rgba(122,202,240,.25);
  border-radius: 0;
  box-shadow: 0 8px 30px rgba(4,32,63,.25);
}
/* El vidrio de la barra también en ::before: así los desplegables que cuelgan de ella desenfocan la página. */
.navbar.mx-navbar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--mx-nav-bg);
  -webkit-backdrop-filter: blur(var(--mx-nav-blur)) saturate(var(--mx-glass-sat));
  backdrop-filter: blur(var(--mx-nav-blur)) saturate(var(--mx-glass-sat));
}
.mx-navbar .navbar-brand { color: #fff; font-weight: 600; }
.mx-navbar .mx-brand-logo { height: 40px; width: auto; border-radius: 8px; display: block; }
.mx-navbar .mx-brand-text {
  display: block; font-family: var(--mx-font-display); font-weight: 500;
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cielo);
  white-space: nowrap; line-height: 1.2;
}
.mx-navbar .nav-link, .mx-navbar .dropdown-toggle:not(.dropdown-item), .mx-navbar .fw-semibold { color: var(--mx-nav-ink); }
.mx-navbar .nav-link:hover, .mx-navbar .nav-link:focus { color: #fff; }
.mx-navbar .nav-link.active { color: var(--mx-nav-active) !important; font-weight: 700; }
.mx-navbar .navbar-toggler { border-color: rgba(255,255,255,.35); }
.mx-navbar .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.mx-navbar .btn-outline-secondary { --bs-btn-color: var(--mx-nav-ink); --bs-btn-border-color: rgba(255,255,255,.35); --bs-btn-hover-bg: rgba(255,255,255,.12); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: rgba(255,255,255,.5); }
.mx-navbar .btn-outline-primary, .mx-navbar .btn-outline-danger {
  --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.45);
  --bs-btn-hover-bg: rgba(255,255,255,.14); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: rgba(255,255,255,.6);
  --bs-btn-active-bg: rgba(255,255,255,.2); --bs-btn-active-color: #fff; --bs-btn-active-border-color: rgba(255,255,255,.6);
}
.mx-navbar .text-muted, .mx-navbar .small { color: rgba(255,255,255,.72) !important; }
.mx-navbar .text-warning { color: var(--mx-nav-active) !important; }
.mx-navbar .dropdown-item.active { background: #073770; color: #fff; font-weight: 700; }
.mx-navbar .dropdown-submenu > .dropdown-menu { border-left-color: rgba(7,55,112,.25); }

/* ── Pie (footer.php) ──────────────────────────────────────────────────── */
footer.mx-footer {
  background: var(--mx-glass);
  -webkit-backdrop-filter: blur(var(--mx-blur)) saturate(var(--mx-glass-sat));
  backdrop-filter: blur(var(--mx-blur)) saturate(var(--mx-glass-sat));
  border-top: 1px solid var(--mx-glass-border);
  color: var(--mx-muted);
}
footer.mx-footer .mx-footer-logo { height: 22px; width: auto; border-radius: 5px; }
footer.mx-footer a { color: var(--mx-link); }

/* ── Acceso (gate.php, gate_2fa.php) ───────────────────────────────────── */
.mx-auth-wrap { min-height: calc(100vh - 2rem); display: flex; align-items: center; justify-content: center; padding: 1rem 0; }
.mx-auth { width: 100%; max-width: 440px; }
.mx-auth .card { overflow: hidden; }
.mx-auth-head {
  background: var(--azul-logo); color: #fff; text-align: center;
  padding: 26px 24px 22px; position: relative;
}
.mx-auth-head .mx-auth-logo { display: block; width: min(72%, 280px); height: auto; margin: 0 auto; }
.mx-auth-head .mx-auth-tag {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 5px 16px 5px 12px;
  border: 1.5px solid rgba(122,202,240,.55); border-radius: 999px;
  font-family: var(--mx-font-display); font-weight: 500; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cielo);
}
.mx-auth-head .mx-auth-tag .star { color: var(--amarillo); }
.mx-auth-head .mx-auth-sub { margin: 9px 0 0; font-size: .82rem; color: rgba(234,231,208,.75); }
.mx-auth .card-body { padding: 1.5rem 1.5rem 1.35rem; }
.mx-auth .mx-auth-title { font-family: var(--mx-font-display); font-weight: 700; font-size: 1.35rem; color: var(--mx-primary); margin: 0 0 1rem; text-align: center; }
.mx-auth .form-label { font-family: var(--mx-font-display); font-weight: 500; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mx-muted); margin-bottom: .3rem; }
.mx-auth .form-control { padding: .7rem .9rem; }
.mx-auth .btn-primary { padding: .7rem 1rem; font-family: var(--mx-font-display); font-weight: 700; letter-spacing: .04em; }
.mx-auth .mx-auth-foot { text-align: center; margin-top: 1rem; font-size: .8rem; color: var(--mx-muted); }
.mx-auth .mx-auth-foot a { color: var(--mx-muted); }
.mx-auth .mx-auth-code { font-family: var(--mx-font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: .4em; text-align: center; }
.mx-auth .mx-auth-secret { font-size: .72rem; color: var(--mx-muted); text-align: center; word-break: break-all; }

/* ── Fallbacks ─────────────────────────────────────────────────────────── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mx-glass, .card, .modal-content, .offcanvas, .toast, footer.mx-footer { background: var(--mx-surface); }
  .dropdown-menu::before { background: #fffdf4; }
  .navbar.mx-navbar::before { background: var(--mx-nav-solid); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ── Impresión: plano, blanco y negro ──────────────────────────────────── */
@media print {
  body { background: #fff !important; color: #000 !important; padding-top: 0 !important; }
  .navbar, footer, .dropdown-menu::before { display: none !important; }
  .mx-glass, .card, .modal-content, .dropdown-menu, .offcanvas, .toast {
    background: #fff;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none;
    border: 1px solid #999;
  }
  .table { --bs-table-bg: #fff; --bs-table-color: #000; --bs-table-border-color: #999; --bs-table-striped-bg: #f2f2f2; }
  .table-light, .table > thead.table-light > tr > th { --bs-table-bg: #f2f2f2; --bs-table-color: #000; }
  h1, h2, h3, h4, h5, h6 { color: #000; }
}