/* =========================================================
   Panel de administración — Ayuntamiento de Ojinaga
   Glassmorphism funcional: superficies translúcidas con blur,
   pero con opacidad suficientemente alta para garantizar
   contraste de texto (herramienta de uso diario, no landing).
   CSS puro, sin build step. Se apoya en las variables de
   Bootstrap 5.3 (--bs-*) para reskin global.
   ========================================================= */

:root {
  /* Marca */
  --brand: #14204f;
  --brand-dark: #0c1636;
  --brand-light: #e9eaf5;
  --brand-ring: rgba(20, 32, 79, 0.35);
  --brand-rgb: 20, 32, 79;

  /* Acento (marca secundaria) */
  --accent: #e0127c;
  --accent-dark: #b30e63;
  --accent-light: #fbe6f1;
  --accent-rgb: 224, 18, 124;

  /* Neutrales */
  --ink: #0f172a;
  --ink-muted: #5b6b80;
  --ink-faint: #94a3b8;
  --surface: #ffffff;
  --bg: #eef2f1;
  --border: #e6e9ee;
  --border-strong: #d7dce3;

  /* Semánticos */
  --danger: #dc2626;
  --danger-light: #fdecec;
  --warning: #b45309;
  --warning-light: #fef3c7;
  --success: #15803d;
  --success-light: #dcfce7;
  --info: #0369a1;
  --info-light: #e0f2fe;
  --neutral-light: #eef1f4;

  /* Vidrio — funcional, no decorativo: opacidad alta para
     que el texto encima siga cumpliendo 4.5:1 de contraste. */
  --glass-bg: rgba(255, 255, 255, 0.78);
  --glass-bg-strong: rgba(255, 255, 255, 0.88);
  --glass-bg-subtle: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-border-soft: rgba(255, 255, 255, 0.35);
  --glass-blur: blur(18px) saturate(150%);
  --glass-blur-lg: blur(26px) saturate(160%);

  /* Escala */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 10px 24px -8px rgba(15, 23, 42, 0.16), 0 2px 6px -2px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 24px 60px -16px rgba(15, 23, 42, 0.28);
  --shadow-glass: 0 8px 32px -8px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* Movimiento */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast: 120ms;
  --dur: 160ms;
  --dur-slow: 220ms;

  --sidebar-w: 258px;

  /* Reskin de Bootstrap 5.3 vía sus variables */
  --bs-primary: var(--brand);
  --bs-primary-rgb: 11, 110, 79;
  --bs-link-color: var(--brand);
  --bs-link-color-rgb: 11, 110, 79;
  --bs-link-hover-color: var(--brand-dark);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--bg);
  --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius);
  --bs-border-color: var(--border);
  --bs-btn-focus-box-shadow: 0 0 0 4px var(--brand-ring);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

html {
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--bs-body-font-family);
  color: var(--ink);
  font-size: 0.925rem;
  position: relative;
  min-height: 100vh;
  background: var(--bg);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
}

a {
  transition: color var(--dur-fast) ease;
}

/* =========================
   Fondo ambiental — manchas de color suaves y fijas que le
   dan al vidrio algo translúcido de verdad que mostrar detrás.
   ========================= */

.bg-ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    linear-gradient(165deg, #fdf2f8 0%, #f5f3ff 55%, #fdf4ff 100%);
}

.bg-ambient span {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.7;
}

.bg-ambient span:nth-child(1) {
  width: 52vw;
  height: 52vw;
  top: -16vw;
  left: -14vw;
  background: radial-gradient(circle, rgba(224, 18, 124, 0.55), transparent 72%);
}

.bg-ambient span:nth-child(2) {
  width: 44vw;
  height: 44vw;
  bottom: -18vw;
  right: -10vw;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.5), transparent 72%);
}

.bg-ambient span:nth-child(3) {
  width: 34vw;
  height: 34vw;
  top: 30%;
  right: 12%;
  background: radial-gradient(circle, rgba(244, 114, 182, 0.5), transparent 72%);
}

.bg-ambient span:nth-child(4) {
  width: 26vw;
  height: 26vw;
  bottom: 8%;
  left: 22%;
  background: radial-gradient(circle, rgba(109, 40, 217, 0.4), transparent 72%);
}

@media (prefers-reduced-motion: no-preference) {
  .bg-ambient span {
    animation: drift 34s var(--ease-in-out) infinite alternate;
  }
  .bg-ambient span:nth-child(2) {
    animation-duration: 40s;
    animation-delay: -8s;
  }
  .bg-ambient span:nth-child(3) {
    animation-duration: 46s;
    animation-delay: -20s;
  }
}

@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(3%, 4%) scale(1.08); }
}

/* =========================
   Layout shell
   ========================= */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-lg);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  border-right: 1px solid var(--glass-border-soft);
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.4), var(--shadow-sm);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  transition: transform var(--dur-slow) var(--ease-in-out);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sidebar {
    background: #fbfdfc;
  }
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1.15rem 1.15rem 1rem;
  border-bottom: 1px solid var(--border);
}

.sidebar-brand-logo {
  height: 38px;
  width: auto;
  flex-shrink: 0;
}

.sidebar-brand-text {
  line-height: 1.15;
}

.sidebar-brand-text strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
}

.sidebar-brand-text span {
  display: block;
  font-size: 0.72rem;
  color: var(--ink-muted);
}

.sidebar-nav {
  flex: 1;
  padding: 0.85rem 0.7rem;
  overflow-y: auto;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.15rem;
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  font-size: 0.865rem;
  font-weight: 550;
  text-decoration: none;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}

.sidebar-nav a svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  opacity: 0.85;
}

@media (hover: hover) and (pointer: fine) {
  .sidebar-nav a:hover {
    background: rgba(255, 255, 255, 0.6);
    color: var(--ink);
  }
}

.sidebar-nav a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-ring);
}

.sidebar-nav a.active {
  background: linear-gradient(135deg, rgba(var(--brand-rgb), 0.16), rgba(var(--brand-rgb), 0.08));
  color: var(--brand-dark);
  box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), 0.18);
}

.sidebar-nav a.active svg {
  opacity: 1;
}

.sidebar-foot {
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--border);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.sidebar-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.sidebar-user-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-role {
  font-size: 0.72rem;
  color: var(--ink-muted);
}

.app-main {
  flex: 1;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-topbar {
  display: none;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border-soft);
  position: sticky;
  top: 0;
  z-index: 30;
}

.app-content {
  padding: 1.75rem clamp(2rem, 3vw, 3.5rem) 3.5rem;
  max-width: 1680px;
  width: 100%;
  margin-inline: auto;
}

/* Formularios de un solo campo/columna (dependencias, tema de
   conocimiento, instrucciones del sistema): se quedan angostos aunque
   el contenedor sea ancho, para que los inputs cortos y el texto largo
   sigan siendo cómodos de leer y llenar. */
.form-narrow {
  max-width: 720px;
}

/* Vista de conversación individual (chat de una sola columna): igual
   que un formulario angosto, un hilo de mensajes de ancho completo en
   pantallas grandes deja las burbujas pegadas a cada extremo, con un
   vacío enorme en medio — se acota a un ancho de lectura razonable. */
.chat-panel {
  max-width: 820px;
}

.sidebar-toggle {
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  border-radius: var(--radius-sm);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  z-index: 35;
  opacity: 0;
  transition: opacity var(--dur-slow) ease;
}

@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(-100%);
    box-shadow: var(--shadow-lg);
  }
  .app-shell.nav-open .sidebar {
    transform: translateX(0);
  }
  .app-shell.nav-open .sidebar-backdrop {
    display: block;
    opacity: 1;
  }
  .app-main {
    margin-left: 0;
  }
  .app-topbar {
    display: flex;
  }
  .app-content {
    padding: 1.25rem 1rem 3rem;
  }
}

/* Layout de autenticación (login, sin sidebar) */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    linear-gradient(160deg, rgba(253, 242, 248, 0.55), rgba(245, 243, 255, 0.55)),
    url('img/login-bg.jpg') center center / cover no-repeat;
}

/* =========================
   Componentes — vidrio
   ========================= */

.card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-glass);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out),
    background var(--dur) ease;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card {
    background: #ffffff;
  }
}

.card-body {
  padding: 1.25rem 1.35rem;
}

.card-title {
  font-size: 0.95rem;
  font-weight: 650;
  margin-bottom: 0.9rem;
}

a.card-link-hover {
  text-decoration: none;
  color: inherit;
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  .card.card-hoverable:hover {
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: translateY(-3px);
    background: var(--glass-bg-strong);
  }
}

.stat-card {
  padding: 1.1rem 1.3rem;
  position: relative;
  overflow: hidden;
}

.stat-card::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 60%;
  height: 140%;
  background: radial-gradient(circle, rgba(var(--brand-rgb), 0.1), transparent 70%);
  pointer-events: none;
}

.stat-card .stat-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}

.stat-card .stat-value {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.stat-delta {
  font-size: 0.72rem;
  color: var(--ink-muted);
  margin-top: 0.35rem;
  font-weight: 550;
}

.stat-meter {
  margin-top: 0.6rem;
  height: 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.stat-meter span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-dark));
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease-out);
}

/* =========================
   Gráficas
   ========================= */

.chart-card .card-title {
  margin-bottom: 1rem;
}

.chart-wrap {
  position: relative;
  width: 100%;
}

.chart-table-toggle {
  margin-top: 0.85rem;
  border-top: 1px solid var(--border);
  padding-top: 0.6rem;
}

.chart-table-toggle summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-weight: 600;
  outline: none;
  list-style: none;
  transition: color var(--dur-fast) ease;
}

.chart-table-toggle summary::-webkit-details-marker {
  display: none;
}

.chart-table-toggle summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 0.4rem;
  transition: transform var(--dur-fast) var(--ease-out);
}

.chart-table-toggle[open] summary::before {
  transform: rotate(90deg);
}

.chart-table-toggle summary:hover {
  color: var(--ink);
}

.chart-table-toggle table {
  font-size: 0.8rem;
}

/* Botones — sólidos a propósito (afordancia clara sobre vidrio) */
.btn {
  font-weight: 560;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease,
    color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: linear-gradient(155deg, var(--brand), var(--brand-dark));
  border-color: var(--brand-dark);
  box-shadow: 0 4px 12px -3px rgba(11, 110, 79, 0.45);
}

.btn-primary:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  box-shadow: 0 6px 16px -3px rgba(11, 110, 79, 0.55);
}

.btn-outline-primary {
  color: var(--brand);
  border-color: var(--brand);
  background: rgba(255, 255, 255, 0.4);
}

.btn-outline-primary:hover {
  background: var(--brand);
  border-color: var(--brand);
}

.btn-outline-secondary,
.btn-outline-danger {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: var(--border-strong);
  color: var(--ink-muted);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out);
}

.btn-outline-secondary:hover {
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  border-color: var(--border-strong);
}

.btn-outline-secondary.active {
  background: linear-gradient(155deg, var(--brand), var(--brand-dark));
  border-color: var(--brand-dark);
  color: #fff;
  box-shadow: 0 3px 10px -3px rgba(11, 110, 79, 0.45);
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--brand-ring);
}

/* Formularios */
.form-control,
.form-select {
  background: rgba(255, 255, 255, 0.6);
  border-color: var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;
}

.form-control:focus,
.form-select:focus {
  background: #ffffff;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-ring);
}

.form-label {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.form-text {
  font-size: 0.78rem;
}

/* Tablas */
.table {
  --bs-table-bg: transparent;
  font-size: 0.87rem;
}

.table thead th {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--border-strong);
  padding-block: 0.65rem;
  background: transparent;
}

.table tbody td {
  padding-block: 0.65rem;
  vertical-align: middle;
  border-bottom-color: var(--border);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255, 255, 255, 0.35);
}

.table-hover > tbody > tr {
  transition: background-color var(--dur-fast) ease;
}

.table-hover > tbody > tr:hover > * {
  background-color: rgba(var(--brand-rgb), 0.09);
}

.table-responsive {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-glass);
  padding: 0.15rem;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .table-responsive {
    background: #ffffff;
  }
}

.table-responsive .table {
  margin-bottom: 0;
}

/* Badges — pill sólido, legible a tamaño pequeño (el vidrio no
   aplica bien aquí: prioriza escaneo rápido de estado) */
.badge {
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  padding: 0.38em 0.65em;
  border-radius: 999px;
}

.badge.bg-secondary {
  background-color: var(--neutral-light) !important;
  color: var(--ink-muted) !important;
}

.badge.bg-success {
  background-color: var(--success-light) !important;
  color: var(--success) !important;
}

.badge.bg-warning {
  background-color: var(--warning-light) !important;
  color: var(--warning) !important;
}

.badge.bg-danger {
  background-color: var(--danger-light) !important;
  color: var(--danger) !important;
}

.badge.bg-dark {
  background-color: #e2e8f0 !important;
  color: #334155 !important;
}

/* Alertas */
.alert {
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 0.87rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.alert-danger {
  background: rgba(253, 236, 236, 0.85);
  color: #991b1b;
}

/* Login — vidrio sobre una foto real de Ojinaga, por eso necesita más
   opacidad blanca que el resto de las tarjetas (para garantizar
   contraste de texto incluso sobre las zonas más oscuras de la foto) */
.auth-card {
  width: 100%;
  max-width: 380px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: var(--glass-blur-lg);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  padding: 2.25rem 1.95rem;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .auth-card {
    background: #ffffff;
  }
}

.auth-card-logo {
  display: block;
  height: 84px;
  width: auto;
  margin: 0 auto 1.2rem;
  filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.18));
}

.auth-card h4 {
  text-align: center;
  margin-bottom: 1.4rem;
}

/* Burbujas de conversación */
.chat-bubble {
  transition: box-shadow var(--dur) ease;
}

/* Scrollbar discreta dentro de contenedores de chat */
[style*="overflow-y:auto"]::-webkit-scrollbar,
[style*="overflow-y: auto"]::-webkit-scrollbar {
  width: 8px;
}
[style*="overflow-y:auto"]::-webkit-scrollbar-thumb,
[style*="overflow-y: auto"]::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
}