/* =========================================================
   Fuentes
   (En producción, preferible <link> en el HTML)
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;600&family=Montserrat:wght@300;400;500;700&display=swap');

/* =========================================================
   Variables / Reset
========================================================= */
:root{
  --color-primario: #EAA001;
  --color-secundario: #222A51;
  --color-gris-100: #f5f5f5;
  --color-gris-200: #ddd;
  --color-gris-300: #ccc;
  --color-gris-400: #bbb;
  --color-texto: #000;
  --color-blanco: #fff;

  --navbar-altura: 80px;
  --sidebar-ancho: 240px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --shadow-sm: 0 2px 6px rgba(0,0,0,.12);

  --font-base: 'Montserrat', sans-serif;
  --font-alt: 'Jost', sans-serif;
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
body{ font-family: var(--font-base); color: var(--color-texto); }

/* =========================================================
   Tipografía
========================================================= */
.titulo-tablero{
  text-align:center;
  padding-top:20px;
  font-size:1.5rem;
  font-weight:700;
  margin-bottom:20px;
}

.titleNavbar{ font-weight:700; color: var(--color-blanco); }
.titleLogin{ font-weight:700; font-size:x-large; padding-top:20px; color: var(--color-texto); }
.subtitle{ font-weight:500; color: var(--color-texto); }
.subtitleRegistro{ font-weight:300; font-style:italic; color: var(--color-texto); padding-bottom:50px; }
.subtitlePending_validation{ font-weight:300;  color: var(--color-texto) }
.subtitlePending_validation2{ font-weight:200; font-style:italic; color: var(--color-texto); padding-bottom:20px; }

/* =========================================================
   Botones
========================================================= */
.btn,
.normal-btn,
.btn-login{
  padding:10px 20px;
  border:none;
  border-radius: var(--radius-sm);
  cursor:pointer;
  transition: background-color .3s ease, opacity .2s ease;
}
.btn:disabled,
.normal-btn:disabled,
.btn-login:disabled{ opacity:.6; cursor:not-allowed; }

.normal-btn{ background: var(--color-primario); color:#000; margin-right:60px; }
.btn-login{ background:#c8c8c8; color:#000; padding:10px 60px; }
.btn-login:hover{ background:#b0b0b0; }

.ms-logo{ width:24px; height:24px; margin-right:50px; }

/* =========================================================
   NAVBAR (logo centrado visual y tamaños fluidos)
========================================================= */
.navbar-gemso{
  position:fixed; top:0; left:0; right:0;
  height: var(--navbar-altura);
  background: var(--color-secundario);
  color: var(--color-blanco);
  z-index: 1200;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 16px;
  gap:12px;
}
.with-navbar{ padding-top: var(--navbar-altura); }

.navbar-left,
.navbar-right{
  display:flex; align-items:center; gap:12px; min-width:0;
}

/* Botón hamburguesa */
.hamburger-button{
  display:grid; place-items:center;
  background: var(--color-blanco);
  box-shadow: var(--shadow-sm);
  color:#222;
  /* Tamaño fijo para evitar deformación */
  width: 40px; height: 40px;
  min-width: 40px; min-height: 40px;
  flex: 0 0 44px;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
}
.hamburger-button i{ font-size: 22px; line-height:1; }

/* Logo */
.navbar-logo{ display:flex; align-items:center; }
.navbar-logo img{
  display:block; height:44px; max-width:250px; width:auto;
  object-fit:contain; transition:height .2s ease;
}

/* Margen del logo solo en desktop */
@media (min-width: 769px){
  .navbar-logo img{
    margin-left: 16px;
  }
}

/* Centro REAL centrado en la ventana */
.navbar-center{
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; z-index:1; pointer-events:auto;
}
.navbar-center .unidad-form,
.navbar-center form{ margin:0; }

/* Select de unidades - Estilo unificado para todas las vistas */
.navbar-center select,
.unidad-form select {
  background: transparent;
  border: 1px solid var(--color-blanco);
  color: var(--color-blanco);
  font-weight: 400;
  text-align: center;
  text-align-last: center;
  font-size: 0.9rem;
  appearance: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
}

.navbar-center select option,
.unidad-form select option {
  color: #000;
}

/* Links admin (centro superior) */
.navbar-center_admin{
  display:flex; gap:35px; font-weight:400; margin-left:5.5%;
}
.navbar-center_admin a{ color: var(--color-blanco) !important; text-decoration:none; }
.navbar-center_admin a:hover{ text-decoration:underline; }

/* Área derecha: usuario */
.navbar-right{
  margin-left:auto; max-width:40vw; flex-shrink:1; font-family: 'Montserrat', sans-serif !important;
  display:flex; flex-direction:row; align-items:center; gap: 16px; text-align:right; font-weight:400;
}

/* Contenedor de info de usuario en navbar-right - columna para admin */
.is-admin .navbar-right {
  align-items: center;
}

.usuario-nombre,.usuario-rol{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.1;
}
.usuario-rol{ color: var(--color-primario); font-size:.7rem; }

/* Wrapper para usuario y cerrar sesión en columna */
.user-info-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* Select de unidades en navbar-right (solo admin desktop) */
.is-admin .navbar-right .unidad-form {
  margin-right: 10rem;
}

/* Select mobile centrado para admin - oculto en desktop */
.is-admin .navbar-center-mobile-only {
  display: none;
}

/* Select desktop en navbar-right para admin - visible por defecto */
.is-admin .navbar-right .unidad-form {
  display: block;
}
/* =========================================================
   SIDEBAR
========================================================= */
.sidebar{
  position:fixed; top:0; left:0;
  width: var(--sidebar-ancho); height:100vh;
  background: var(--color-gris-200);
  padding-top: calc(var(--navbar-altura) + 100px);
  z-index: 900;
}
.sidebar a{
  display:flex; align-items:center; gap:15px;
  padding:15px 20px; text-decoration:none;
  font-weight:300; color:#000; text-transform:uppercase; font-size:20px;
}
.sidebar a:hover{ background: var(--color-gris-300); }
.sidebar a.active{ background: var(--color-gris-400); font-weight:700; color:#000; }

.sidebar-tableros{
  padding-top: var(--navbar-altura);
  width:250px; background: var(--color-gris-100);
  height:100vh; position:fixed; top:0; left:-250px;
  z-index:1150; transition:left .3s ease;
  display: flex;
  flex-direction: column;
}
.sidebar-tableros.is-open{ left:0; }

.sidebar-overlay{ display:none; position:fixed; inset:0; background: rgba(0,0,0,.3); z-index:1050; }
.sidebar-overlay.is-visible{ display:block; }

/* Admin en sidebar solo móvil */
.sidebar-admin-title, .sidebar-adminlinks{ display:none; }

/* Color de texto para tableros en sidebar-user */
.is-user .sidebar-tableros .menu-list a {
  color: rgb(74, 74, 74) !important;
}

/* Letter spacing para título "Tableros" en sidebar-user */
.is-user .sidebar-tableros .menu-label {
  letter-spacing: 1.6px !important;
}

/* Menu list de admin sin flex para tamaño natural */
.sidebar-tableros .menu-list.sidebar-adminlinks {
  flex: 0 0 auto;
}

/* =========================================================
   Información del usuario en sidebar (solo móvil)
========================================================= */
.sidebar-user-info {
  display: none; /* Oculto por defecto en desktop */
  margin-top: auto; /* Empuja al fondo del sidebar */
  padding: 20px 16px;
  background: var(--color-blanco);
  border-top: 2px solid var(--color-gris-200);
  text-align: center;
}

.sidebar-user-name {
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-texto);
  margin-bottom: 12px;
}

.sidebar-user-role {
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 1rem;
  color: var(--color-primario);
}

.sidebar-logout-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--color-primario);
  color: var(--color-texto);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.sidebar-logout-link:hover {
  background: var(--color-secundario);
  color: var(--color-blanco);
}

.sidebar-logout-link .icon {
  display: inline-flex;
  align-items: center;
}

/* =========================================================
   Tabs
========================================================= */
.tabs-menu{ background:#c8c8c8; margin-top: calc(var(--navbar-altura) + .9px); }
.tabs a{ color:#000 !important; font-weight:400; text-decoration:none !important; }
.tabs li.is-active a{ border-bottom-color:transparent !important; color:#000 !important; background:transparent !important; box-shadow:none !important; }

/* =========================================================
   Utilidades
========================================================= */
.text-center{ text-align:center; }

/* =========================================================
   Breakpoints
========================================================= */
@media (max-width: 1460px) {
  .navbar-center_admin {display: none !important;}

  /* Mostrar opciones de admin en sidebar cuando navbar-center_admin se oculta */
  .sidebar-admin-title, .sidebar-adminlinks{ display:block; }
}

/* <= 860px (móvil general) */
@media (max-width:860px){
  /* Muestra sección de admin en el sidebar */
  .sidebar-admin-title, .sidebar-adminlinks{ display:block; }

  /* Select de unidades en móvil - restaurar estilos originales */
  .unidad-form select,
  .navbar-center select {
    width: 56vw;
    max-width: 360px;
    padding: 6px 0px 6px 90px;
    font-size: 0.95rem;
    border: none;
    background: transparent;
    color: var(--color-blanco);
    text-align: center;
    text-align-last: center;
  }

  .sidebar{ width:210px; }
}

/* <= 768px (móvil grande) */
@media (max-width:768px){
  .navbar-logo img{ height:36px; max-width:250px; }
  .hamburger-button{ width:40px; height:40px; min-width:40px; min-height:40px; }
  .hamburger-button i{ font-size:20px; }

  /* Mostrar info del usuario en sidebar en móvil */
  .is-user .sidebar-user-info,
  .is-admin .sidebar-user-info{ display: block; }

  /* Ocultar navbar-right en móvil */
  .is-user .navbar-right{ display: none; }

  /* Para admin, mostrar select centrado en móvil y ocultar el de la derecha */
  .is-admin .navbar-center-mobile-only{ display: flex !important; }
  .is-admin .navbar-right .unidad-form{ display: none !important; }
  .is-admin .navbar-right .user-info-wrapper{ display: none; }

  /* Centrar mejor el logo en móvil */
  .is-user .navbar-logo,
  .is-admin .navbar-logo{
    margin-left: 12px;
    margin-right: 12px;
  }

  /* Logo más grande en móvil */
  .is-user .navbar-logo img,
  .is-admin .navbar-logo img{
    height: 30px !important;
    max-width: 150px !important;
  }
}

/* <= 480px (móvil chico genérico) */
@media (max-width:480px){
  .navbar-logo img{ height:32px; max-width:130px; }
  .hamburger-button{ width:36px; height:36px; min-width:36px; min-height:36px; }
  .hamburger-button i{ font-size:18px; }

  .navbar-center {margin-left: 10%;}

  /* Centrar mejor el logo en móvil */
  .is-user .navbar-logo,
  .is-admin .navbar-logo{
    margin-left: 10px;
    margin-right: 10px;
  }

  /* Logo más grande en móvil */
  .is-user .navbar-logo img,
  .is-admin .navbar-logo img{
    height: 48px !important;
    max-width: 120px !important;
  }
}

/* <= 400px (iPhone 12/13/mini – 390px) */
@media (max-width:400px){
  .navbar-gemso{ height:56px; padding:0 10px; }
  .navbar-center{ top:50%; transform: translate(-50%, -50%); max-width:62vw; }
  .navbar-left{ gap:8px; min-width:0; flex:0 1 auto; }

  .hamburger-button{ width:30px; height:30px; border-radius:8px; }
  .hamburger-button i{ font-size:16px; }

  .navbar-logo{ max-width:46vw; overflow:hidden; }
  .navbar-logo img{ height:28px; max-width:120px; }

  /* Estilos de usuario solo para admin (usuarios los tienen ocultos) */
  .is-admin .usuario-nombre{ font-size: .6rem; }
  .is-admin .usuario-rol{ font-size: .5rem; }


  /* Logo en móvil */
  .is-user .navbar-logo,
  .is-admin .navbar-logo{
    margin-left: 8px;
    margin-right: 8px;
  }

  .is-user .navbar-logo img,
  .is-admin .navbar-logo img{
    height: 42px !important;
    max-width: 170px !important;
  }

  /* Hamburger button en pantallas muy pequeñas */
  .hamburger-button{
    width: 34px; height: 34px;
    min-width: 34px; min-height: 34px;
    flex: 0 0 34px;
  }
  .hamburger-button i{ font-size: 18px; }
}

/* =========================================================
   Ajustes adicionales para centrado
========================================================= */
/* Limita cuánto puede ocupar el centro y los links de admin; 
   si hay poco espacio, los links recortan con ellipsis y el centro NO invade. */
.navbar-center{
  max-width: 40vw;      /* antes sin límite en desktop; ahora reservamos espacio */
}
.navbar-center_admin{
  max-width: 38vw;      /* no permitir que se “coma” todo el lado izquierdo */
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* un poco más de aire en pantallas medianas */
@media (max-width: 1024px){
  .navbar-center{ max-width: 36vw; }
  .navbar-center_admin{ max-width: 34vw; }
}

/* en móvil ya ocultas el navbar_center_admin; reforzamos aquí por si acaso */
@media (max-width: 860px){
  .navbar-center_admin{ display: none !important; }
  .navbar-center{ max-width: 62vw; } /* mantiene lo que ya tenías para móvil */
}