:root{

  --accent-green: #7db24a;

  --panel-bg: rgba(28,31,34,0.62);

  --card-bg: rgba(255,255,255,0.92);



  /* dashboard vars */

  --sidebar-bg: #1f2d33;

  --topbar-bg: #4aa84a;

  --accent-brown: #7b563f;

}



/* fondo + overlay */

body.login-bg {

  position: relative;

  z-index: 0;

  background-image: url('../../img/vegetal.webp');

  background-repeat: no-repeat;

  background-position: center center;

  background-size: cover;

  background-attachment: fixed;

}



/* overlay oscuro para contraste */

body.login-bg::before {

  content: "";

  position: absolute;

  inset: 0;

  background: rgba(0,0,0,0.40);

  z-index: 1;

  pointer-events: none;

}



/* El contenido quede por encima */

.topbar,

.login-wrapper,

.login-card,

.footer-login {

  position: relative;

  z-index: 2;

}



/* Topbar */

.topbar {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  height: 64px;

  background: #d9d6d4;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 6px 18px;

  z-index: 30;

}

.site-logo { height: 48px; object-fit: contain; }

.site-logoagro { height: 98px; object-fit: contain; border-radius: 10px; background: #FFF; }

.site-logo { height: 98px; object-fit: contain; border-radius: 10px; background: #FFF;}

/* Wrapper */

.login-wrapper { padding-top: 80px; padding-bottom: 60px; }



/* Left panel */

.left-panel { display: flex; align-items: center; justify-content: center;  }

.left-inner { max-width: 90%; }

.brand-title {

  font-size: 30px;

  font-weight: 600;

  color: #fff;

  margin: 0 0 12px 0;

  text-shadow: 0 2px 8px rgba(0,0,0,0.6);

}

.left-inner .lead { color: rgba(255,255,255,0.9); line-height:1.5; text-align: justify;}



/* Tarjeta de login */

.login-card {

  margin: 24px auto;

  border-radius: 6px;

  overflow: hidden;

  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));

  backdrop-filter: blur(6px);

  border: 1px solid rgba(0,0,0,0.18);

}

.login-card .card-body { padding: 28px; background: rgba(0,0,0,0.28); color: #fff; }



/* Formulario */

.form-control { border-radius: 6px; background: rgba(255,255,255,0.95); color: #333; }

.form-label { color: #eef0f1; }



/* Botón verde */

.btn-success { background: var(--accent-green); border: none; border-radius: 8px; padding: 12px 18px; font-size: 1.05rem; }



/* Footer */

.footer-login {

  position: fixed;

  bottom: 6px;

  left: 0;

  right: 0;

  color: rgba(255,255,255,0.85);

  font-size: 20px;

  display: flex;

  justify-content: space-between;

  padding: 0 18px;

}



/* Responsive */

@media (max-width: 991px) {

  .left-panel { display: none; }

  .login-card { margin-top: 20px; }

}



/* topbar */

.topbar-dashboard {

  background: var(--topbar-bg);

  color: #fff;

  height: 56px;

  position: fixed;

  left: 0;

  right: 0;

  top: 0;

  z-index: 60;

  display: flex;

  align-items: center;

}

.topbar-logo { height:40px; }

.brand-text { margin-left:6px; }

.brand-name { font-weight:700; display:block; }

.brand-sub { font-size:12px; opacity:0.9; }



/* sidebar */

.app-sidebar {

  width: 240px;

  position: fixed;

  left: 0;

  top: 56px; /* debajo del topbar */

  bottom: 0;

  background: var(--sidebar-bg);

  color: #cfd8dc;

  padding: 12px 10px;

  overflow-y: auto;

  z-index: 50;

}

.user-avatar { width:64px; height:64px; border-radius:50%; border:2px solid rgba(255,255,255,0.06); }

.sidebar-nav .nav-link {

  color: #cfd8dc;

  padding: 10px 12px;

  border-radius:6px;

  display:flex; align-items:center;

}

.sidebar-nav .nav-link:hover { background: rgba(255,255,255,0.03); color: #fff; text-decoration:none; }

.sidebar-nav .nav-link.active { background: rgba(255,255,255,0.06); color:#fff; font-weight:600; }



/* content area */

.app-content {

  margin-left: 240px;

  margin-top: 70px;

  padding: 24px;

  min-height: calc(100vh - 70px);

  background: #f1f4f6;

}



/* Stat cards */

.card-stat {

  border-radius: 6px;

  background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.03));

  box-shadow: 0 6px 18px rgba(0,0,0,0.05);

  color: #fff;

}

.card-stat .card-body { padding: 22px; background: rgba(0,0,0,0.12); color:#fff; height:110px; display:flex; flex-direction:column; justify-content:space-between; }

.card-stat--accent { background: linear-gradient(90deg, rgba(122,176,93,0.9), rgba(104,153,80,0.9)); }



/* footer bottom (si quiere) */

.app-footer {

  position: fixed;

  left: 240px;

  right: 0;

  bottom: 0;

  height: 48px;

  background: rgba(0,0,0,0.03);

  display:flex; align-items:center; justify-content:space-between; padding:0 14px;

}



/* Responsive: para en pantallas pequeñas */

@media (max-width: 991px) {

  .app-sidebar { transform: translateX(-100%); transition: transform .25s ease; position:fixed; z-index:90; }

  .app-sidebar.open { transform: translateX(0); }

  .app-content { margin-left: 0; }

}



/* Navbar principal centrado */

.main-navbar {

  background: linear-gradient(90deg, #0f8a57 0%, #4caf50 100%);

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  width: 100%;

  z-index: 100;

  padding: 8px 18px;

  box-shadow: 0 2px 6px rgba(0,0,0,0.08);

  display: flex;

  align-items: center;

}



/* logo */

.menu-logo { height:44px; width:auto; display:block; }



.brand-name { font-weight:700; color:#fff; line-height:1; }

.brand-sub { font-size:12px; color:rgba(255,255,255,0.9); }



/* active link style (cuando uses PHP para marcar la página actual) */

.menu-items li a.active-link {

  background: rgba(255,255,255,0.18);

  font-weight:700;

}



/* logout button */

.btn-logout {

  background: rgba(0,0,0,0.15);

  color: #fff;

  padding: 7px 14px;

  border-radius: 22px;

  text-decoration: none;

  display:inline-flex;

  align-items:center;

  gap:8px;

  border: none;

}

.btn-logout:hover { background: rgba(0,0,0,0.25); color:#fff; }



/* user-info small text */

.user-info { color:#fff; }



/* MOBILE MENU */

.mobile-menu { display:none; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)); padding: 10px 16px; }

.mobile-menu ul { list-style:none; margin:0; padding:0; }

.mobile-menu ul li { border-bottom: 1px solid rgba(255,255,255,0.04); }

.mobile-menu ul li a { display:block; padding:10px 6px; color:#fff; text-decoration:none; }



@media (max-width: 991px) {

  .menu-items { display:none; }      

  .user-info { display:none; }       

  .btn-logout { padding: 6px 10px; font-size:14px; }

  .brand-sub { display:none; }       

  .main-navbar { padding: 8px 12px; }

}/* Hace que la barra principal ocupe todo el ancho y quede fija */

.main-navbar {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  width: 100%;

  z-index: 100;

  box-shadow: 0 2px 6px rgba(0,0,0,0.08);

  padding: 10px 24px;

  display: flex;

  align-items: center;

  justify-content: center; /* centra el contenido */

}



/* Hacer que el contenedor interior tenga ancho completo sin limitar */

.main-navbar .container-fluid {

  max-width: 100%;

  padding: 0 16px;

  display: flex;

  align-items: center;

  gap: 20px;

  justify-content: space-between; /* logo a la izquierda, menu centrado, acciones a la derecha */

}



/* ocultar el sidebar (visual) pero mantener el archivo incluidó por si lo quieres usar luego */

.app-sidebar { display: none !important; }



/* ajustar el contenido para que quede debajo del menú superior */

.app-content {

  margin-left: 0 !important; /* sin margen por sidebar */

  margin-top: 76px !important; /* espacio para la barra fija (ajusta si el .main-navbar cambia de altura) */

  padding: 24px;

}



/* footer fijo, se ajusta el left (opcional) */

.app-footer { left: 0 !important; }



/* RESPONSIVE: en pantallas pequeñas el menú horizontal queda con scroll */

@media (max-width: 991px) {

  .main-navbar { padding: 8px 12px; }

  .menu-items { gap: 12px; font-size: 14px; }

  .brand-name { display: none; } /* opcional: oculta texto junto al logo en pantallas pequeñas */

}



/* Navbar principal centrado */

.main-navbar {

  background: linear-gradient(90deg, #0f8a57 0%, #4caf50 100%);

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  width: 100%;

  z-index: 100;

  padding: 8px 18px;

  box-shadow: 0 2px 6px rgba(0,0,0,0.08);

  display: flex;

  align-items: center;

}



/* container interior para separar logo, menú y acciones */

.main-navbar .container-fluid {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 12px;

}



/* logo */

.menu-logo { height:42px; object-fit:contain; }



/* menú: centrado y sin forzar wrap */

.menu-items {

  list-style:none;

  margin: 0;

  padding: 0;

  display: flex;

  gap: 14px;

  align-items: center;

  justify-content: center;

  flex: 1;               /* ocupa el espacio central */

  white-space: nowrap;   /* evita salto de palabra dentro de los links */

  overflow: visible;     /* <-- cambiar a visible para que los dropdowns no se recorten */

  position: relative;    /* <-- ayuda al posicionamiento */

}



.menu-items .nav-link {

  color: #fff;

  padding: 8px 12px;

  border-radius: 8px;

  text-decoration: none;

  transition: background .15s ease;

  font-weight:600;

  display: inline-block;

}

.menu-items .nav-link:hover,

.menu-items .nav-link:focus {

  background: rgba(255,255,255,0.08);

  color: #fff;

}



/* active link */

.menu-items .active-link {

  background: rgba(255,255,255,0.14);

  font-weight:700;

}



/* dropdowns con Bootstrap */

.menu-items .dropdown-menu {

  background-color: #2E9C3F !important;

  border: none;

  padding: 8px 0;

  border-radius: 8px;

  z-index: 2000;        /* suficientemente alto para no quedar debajo de otros elementos */

  top: 100%;            /* asegurar que aparezca debajo del link */

  left: 0;

  min-width: 200px;

}



/* Color de letras */

.menu-items .dropdown-menu .dropdown-item {

    color: #ffffff !important;

    padding: 10px 16px;

    font-size: 15px;

}



/* Hover de cada item */

.menu-items .dropdown-menu .dropdown-item:hover {

    background-color: #1E7A2E !important; /* verde más oscuro */

    color: #ffffff !important;

}



.menu-items .dropdown-menu .dropdown-item.active {

    background-color: #1E7A2E !important;

    color: #ffffff !important;

}



/* boton salir y user */

.btn-logout {

  background: rgba(255,255,255,0.12);

  color: #fff;

  border: none;

  padding: 7px 12px;

  border-radius: 22px;

}



/* ocultar sidebar (si quiere eliminar lateral) */

.app-sidebar { display: none !important; }



/* ajustar content area para barra fija */

.app-content { margin-top: 72px !important; margin-left: 0 !important; }



/* mobile: mostrar menú móvil y ocultar menu-items */

@media (max-width: 991px) {

  .menu-items { display: none; }  /* usamos mobile-menu */

  .mobile-menu { display: block; background: rgba(0,0,0,0.05); padding: 10px; }

  .brand-name { display: none; } /* oculta texto marca en pantallas pequeñas */

}