/* ================ TOGGLE SIDEBAR ================== */
#sidebar-toggle {
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 1100;
  background-color: none;
  color: white;
  border: none;
  border-radius: 100px;
  padding: 8px;
  font-size: 20px;
  cursor: pointer;
  transition: background 0.2s, left var(--sidebar-dur) var(--sidebar-ease);
}

#sidebar-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
}

#sidebar-toggle img {
  vertical-align: middle;
}

/* ================== BARRA LATERAL ================= */
/* "Cerrado" ya no oculta la barra por completo: queda un riel angosto con
   solo los iconos (ancho fijo en --sidebar-rail-w), y "abierto" expande ese
   mismo riel mostrando también el texto de cada item. */
:root {
  --sidebar-rail-w: 72px;
  --sidebar-full-w: 280px;
  /* Una sola curva/duración para todo lo que se mueve o cambia de tamaño al
     colapsar/expandir (barra, botón ☰, contenido, texto de los links, logo…)
     para que se sientan sincronizados en vez de partes "saltando" de golpe. */
  --sidebar-dur: 0.32s;
  --sidebar-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

#sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--sidebar-full-w);
  height: 100%;
  background: #00084d;
  color: white;
  padding: 20px;
  transition: width var(--sidebar-dur) var(--sidebar-ease),
              padding var(--sidebar-dur) var(--sidebar-ease);
  z-index: 999;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

#sidebar:not(.active) {
  width: var(--sidebar-rail-w);
  /* padding-top deja hueco para el botón ☰ (fijo, top:15px) y evita que
     se superponga con el logo cuando el riel está colapsado. */
  padding: 58px 10px 20px;
}

#sidebar.active {
  left: 0;
}

/* Textos y elementos secundarios: solo se ven con la barra expandida.
   El texto de cada link de menú es un nodo de texto suelto (no va en un
   <span>), así que se colapsa con font-size:0 en el <a> en vez de un
   selector de texto — el <img class="ico"> no se ve afectado porque su
   tamaño es fijo en px, no depende de font-size. Todo lo que cambia de
   tamaño/posición lleva su propia transición (con la misma curva/duración
   de arriba) para que no "salte" de golpe mientras el resto se anima. */
#sidebar .menu a {
  transition: font-size var(--sidebar-dur) var(--sidebar-ease),
              padding var(--sidebar-dur) var(--sidebar-ease);
}

#sidebar .menu a img.ico {
  transition: margin-right var(--sidebar-dur) var(--sidebar-ease);
}

#sidebar .logo {
  transition: width var(--sidebar-dur) var(--sidebar-ease),
              height var(--sidebar-dur) var(--sidebar-ease);
}

#sidebar .logo-section {
  transition: margin-bottom var(--sidebar-dur) var(--sidebar-ease);
}

#sidebar .user-placeholder {
  transition: padding var(--sidebar-dur) var(--sidebar-ease),
              gap var(--sidebar-dur) var(--sidebar-ease);
}

/* h2 y los títulos de sección se difuminan con opacity en vez de aparecer/
   desaparecer de golpe con display:none. */
#sidebar h2,
#sidebar .menu li.menu-group-title {
  opacity: 1;
  transition: opacity calc(var(--sidebar-dur) * 0.6) var(--sidebar-ease);
}

#sidebar:not(.active) h2,
#sidebar:not(.active) .menu li.menu-group-title {
  opacity: 0;
  pointer-events: none;
}

/* Estos sí se sacan del flujo con display:none en vez de opacity: van
   dentro de una fila flex centrada (el ícono de recargar mapa junto al link,
   o el nombre de usuario junto al avatar) y si solo se hicieran invisibles
   seguirían ocupando espacio, descentrando al vecino que sí queda visible. */
#sidebar:not(.active) .user-info,
#sidebar:not(.active) .menu li.split-active .ico-reload,
#sidebar:not(.active) .notif-badge-inline {
  display: none;
}

#sidebar:not(.active) .menu a {
  font-size: 0;
  text-align: center;
  padding: 8px 0;
  border-radius: 12px;
}

#sidebar:not(.active) .menu a img.ico {
  margin-right: 0;
}

#sidebar:not(.active) .logo-section {
  margin-bottom: 16px;
}

#sidebar:not(.active) .logo {
  width: 36px;
  height: 36px;
}

#sidebar:not(.active) .user-placeholder {
  justify-content: center;
  padding: 10px;
  gap: 0;
}

#sidebar:not(.active) .menu li.split-active {
  justify-content: center;
  border-radius: 12px;
}

#sidebar:not(.active) .menu li.split-active a {
  padding: 8px 0;
}

/* El menú desplegable del usuario (notificaciones/login/etc.) normalmente
   ocupa el ancho del sidebar (left:0; right:0); con el riel colapsado eso
   lo dejaría demasiado angosto para el texto, así que se le da un ancho
   fijo y se deja "flotando" a la derecha del riel, alineado abajo con el
   avatar. position:fixed para que el overflow:hidden de #sidebar no lo
   recorte al ancho del riel. */
#sidebar:not(.active) .sidebar-user-menu {
  position: fixed;
  left: calc(var(--sidebar-rail-w) + 8px);
  right: auto;
  bottom: 20px;
  width: 240px;
}

/* Dentro del desplegable no aplican las reglas del riel que esconden el
   texto de los links (.menu a { font-size:0 }) ni el contador de
   notificaciones: el menú flota fuera del riel y se ve completo. */
#sidebar:not(.active) .sidebar-user-menu a {
  font-size: 13px;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
}

#sidebar:not(.active) .sidebar-user-menu .notif-badge-inline {
  display: inline-block;
}

#sidebar .logo-section {
  text-align: center;
  margin-bottom: 30px;
}

#sidebar .logo {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  margin-bottom: 8px;
}

#sidebar h2 {
  font-size: 18px;
  color: #f8fafc;
  margin: 0;
}

#sidebar .menu {
  list-style: none;
  padding: 0;
  width: 100%;
}

/* Solo la lista de módulos (no la de login/usuario) hace scroll vertical */
#sidebar .menu:not(.menu-bottom) {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #39579e #00084d;
}

#sidebar .menu:not(.menu-bottom)::-webkit-scrollbar {
  width: 8px;
}

#sidebar .menu:not(.menu-bottom)::-webkit-scrollbar-track {
  background: #00084d;
}

#sidebar .menu:not(.menu-bottom)::-webkit-scrollbar-thumb {
  background: #39579e;
  border-radius: 8px;
}

#sidebar .menu:not(.menu-bottom)::-webkit-scrollbar-thumb:hover {
  background: #160096;
}

#sidebar .menu li {
  width: 100%;
}

#sidebar .menu li.menu-group-title {
  color: #9fb0d9;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 14px 20px 6px;
  transition: padding var(--sidebar-dur) var(--sidebar-ease),
              opacity calc(var(--sidebar-dur) * 0.6) var(--sidebar-ease);
}

/* Colapsado: el título queda invisible (opacity, más arriba) pero su
   padding normal seguiría dejando un hueco en blanco entre los grupos de
   iconos; se reduce casi a 0 para que los iconos queden juntos. */
#sidebar:not(.active) .menu li.menu-group-title {
  padding: 4px 0;
}

#sidebar .menu li.menu-group-title:first-child {
  padding-top: 4px;
}

/* Segundo <ul class="menu"> (ej. "Recargar Mapa"): se ancla al fondo
   del sidebar gracias a que #sidebar ahora es flex-column. */
#sidebar .menu-bottom {
  margin-top: auto;
}

#sidebar .menu a {
  display: block;
  padding: 12px 20px;
  color: #cbd5e1;
  text-decoration: none;
  font-size: 15px;
  transition: all 0.3s ease;
}

#sidebar .menu a:hover {
  background: #160096;
  color: white;
  border-radius: 20px;
}

#sidebar .menu a.active {
  background: #fff;
  color: #00084d;
  font-weight: 600;
  border-radius: 20px;
}

/* =================== CONTENIDO PRINCIPAL ============== */
#main-content {
  transition: margin-left var(--sidebar-dur) var(--sidebar-ease);
  margin-left: var(--sidebar-rail-w); /* deja espacio para el riel de iconos colapsado */
  padding: 20px;
}

.sidebar-open #main-content {
  margin-left: var(--sidebar-full-w); /* empuja la tabla */
}

.sidebar-open #sidebar-toggle {
  left: 245px; /* el botón se mueve junto con la barra */
}

/* ================ PLACEHOLDER DE USUARIO ================== */
#sidebar .user-menu-wrap {
  position: relative;
}

#sidebar .user-placeholder {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background 0.2s ease;
}

#sidebar .user-placeholder:hover {
  background: rgba(255, 255, 255, 0.15);
}

#sidebar .user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #39579e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  color: white;
}

#sidebar .user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  overflow: hidden;
}

#sidebar .user-name {
  font-size: 14px;
  font-weight: 600;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#sidebar .user-action {
  font-size: 12px;
  color: #9fb0d9;
}

/* ==== Menú desplegable del usuario (checkbox modo noche, sesión, admin) ==== */
#sidebar .sidebar-user-menu {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: #0c0245;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 1300;
}

#sidebar .sidebar-user-menu.abierto {
  display: flex;
}

#sidebar .sidebar-user-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 13px;
  color: #e5e7eb;
  border-radius: 8px;
}

#sidebar .sidebar-user-menu a:hover {
  background: #160096;
  color: #fff;
}

#sidebar .sidebar-user-menu a[hidden] {
  display: none !important;
}

/* ================ BADGE DE NOTIFICACIONES ==================
   Clases genéricas (no restringidas a #sidebar) para poder reusarlas
   también en el botón de usuario de la barra inferior móvil (inicio.html). */
.user-avatar-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px #00084d;
}

.notif-badge[hidden] {
  display: none !important;
}

/* ==================== Lista de notificaciones (modal) ==================== */
.notif-seccion-titulo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #8a94a6;
  margin: 12px 0 6px;
  padding-top: 10px;
  border-top: 1px solid #eef1f6;
}
.notif-seccion-titulo:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.notif-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8f9fb;
  border: 1px solid #e6e9ee;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.notif-fila.leida {
  background: #fff;
  opacity: .6;
}
.notif-fila .notif-texto { flex: 1; min-width: 0; }
.notif-fila .notif-tipo-ico { width: 22px; height: 22px; flex: none; align-self: flex-start; margin-top: 1px; }
.notif-fila .notif-msg { font-size: 13px; color: #333; }
.notif-fila .notif-fecha { font-size: 11px; color: #999; margin-top: 4px; }
.notif-fila .notif-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}
.notif-fila .notif-check.leida {
  opacity: .35;
  cursor: default;
}

.notif-vacio {
  color: #888;
  font-size: 13px;
  text-align: center;
  padding: 12px 0;
}

.sidebar-user-menu a .notif-badge-inline,
.bottom-user-menu a .notif-badge-inline {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-user-menu a .notif-badge-inline[hidden],
.bottom-user-menu a .notif-badge-inline[hidden] {
  display: none !important;
}

#sidebar .sidebar-user-menu a img {
  width: 20px;
  height: 20px;
}

/* Fila del interruptor de modo nocturno dentro del menú */
#sidebar .sidebar-user-menu-night {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px 10px;
  margin-bottom: 4px;
  font-size: 13px;
  color: #e5e7eb;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

#sidebar .sidebar-user-menu-night .checkbox-wrapper-5 {
  margin: 0;
  display: block;
}

#sidebar .sidebar-user-menu-night .checkbox-wrapper-5 .check {
  --size: 28px;
}

/* ==== Item de menú dividido: ícono+texto a la izquierda, acción a la derecha ==== */
#sidebar .menu li.split-active {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: 20px;
}

#sidebar .menu li.split-active a {
  flex: 1;
  padding: 12px 8px 12px 20px;
  color: #00084d;
  font-weight: 600;
  background: transparent;
  border-radius: 0;
}

#sidebar .menu li.split-active a:hover {
  background: transparent;
  color: #00084d;
}

#sidebar .menu li.split-active .ico-reload {
  width: 20px;
  height: 20px;
  margin-right: 16px;
  padding: 6px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease;
}

#sidebar .menu li.split-active .ico-reload:hover {
  background: rgba(0, 8, 77, 0.1);
}
/* Evita el menú nativo del navegador móvil (copiar enlace, abrir en
   navegador, guardar imagen...) al mantener presionado módulos e iconos.
   En Android lo bloquea el "contextmenu" de quick-menu.js. */
a,
a img,
button img,
img[src$=".ico"],
img[src$=".svg"] {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
a,
button {
  -webkit-user-select: none;
  user-select: none;
}

/* ============ BOTÓN INICIO DE LA BARRA INFERIOR (móvil) ============
   Punto fijo en todas las páginas: el mismo lugar que ocupa en /home
   (inicio.html). Allí la barra reparte el espacio con space-around entre
   Inicio (38 px), "Recargar mapa" (~127 px) y Usuario (38 px) = 203 px, así
   que el borde izquierdo de Inicio cae en (ancho - 203 px) / 6. Las demás
   páginas usan #btnHomeMobile; su contenido empieza a la derecha de Inicio.
   Si cambian los botones de la barra de inicio.html, recalcular 203px. */
@media (max-width: 768px) {
  #bottom-bar #btnHomeMobile {
    position: absolute !important;  /* gana al style="position:relative" en línea */
    left: calc((100% - 203px) / 6);
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }
  #bottom-bar:has(#btnHomeMobile) {
    box-sizing: border-box !important;
    padding-left: calc((100% - 203px) / 6 + 38px + 10px) !important;
  }
}

/* ============ BOTÓN RECARGAR DE LA BARRA INFERIOR (móvil) ============
   Punto fijo a la derecha: el lugar del botón Usuario/login de inicio.html,
   cuyo borde derecho cae en (ancho - 203 px) / 6 desde la derecha (misma
   cuenta que Inicio). Las páginas lo marcan con .btn-reload-mobile. */
@media (max-width: 768px) {
  #bottom-bar a.btn-reload-mobile,
  #bottom-bar a#btnGpsPondMobile {
    position: absolute !important;
    right: calc((100% - 203px) / 6);
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 6px 8px;
  }
  #bottom-bar:has(.btn-reload-mobile, #btnGpsPondMobile) {
    box-sizing: border-box !important;
    padding-right: calc((100% - 203px) / 6 + 38px + 10px) !important;
  }
}

/* ============ FILTROS DE LA BARRA INFERIOR (móvil) ============
   El input y la cinta desplegable llenan el hueco entre Inicio y el botón
   de la derecha (recargar o GPS). Sin botón a la derecha, llegan hasta el
   mismo margen que Inicio deja a la izquierda. El padding-left/right de la
   barra lo ponen las reglas de arriba. */
@media (max-width: 768px) {
  #bottom-bar.bottom-bar-con-filtros:has(#btnHomeMobile),
  #bottom-bar.snd-bb:has(#btnHomeMobile) {
    justify-content: flex-start !important;
    gap: 0 !important;
    padding-right: calc((100% - 203px) / 6) !important;
  }
  #bottom-bar.bottom-bar-con-filtros:has(#btnHomeMobile):has(.btn-reload-mobile, #btnGpsPondMobile),
  #bottom-bar.snd-bb:has(#btnHomeMobile):has(.btn-reload-mobile, #btnGpsPondMobile) {
    padding-right: calc((100% - 203px) / 6 + 38px + 10px) !important;
  }
  #bottom-bar:has(#btnHomeMobile) > .bottom-bar-filtros,
  #bottom-bar:has(#btnHomeMobile) > .snd-bb-finca {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}