/* =========================================================
   Fuentes
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;600&family=Montserrat:wght@300;400;500;700&display=swap');

/* =========================================================
   Variables
========================================================= */
:root{
  --color-primario: #EAA001;
  --color-secundario: #222A51;
  --color-gris-100: #f5f5f5;
  --color-gris-200: #ddd;
  --color-gris-300: #c8c8c8;
  --color-gris-400: #bbb;
  --color-gris-oscuro: #555;
  --color-rojo: #D71724;
  --color-blanco: #fff;
  --color-negro: #000;

  --radius-sm: 4px;
  --radius-md: 5px;
  --radius-lg: 10px;

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

/* =========================================================
   Reset / Base
========================================================= */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; max-width:100%; overflow-x:hidden; }
body { font-family: var(--font-base); color: var(--color-negro); }

/* =========================================================
   Sidebar - usar fuente Montserrat consistente con admin
========================================================= */
.sidebar-tableros {
  font-family: 'Montserrat', sans-serif !important;
}

.sidebar-tableros .menu-label {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  color: #000 !important;
  font-size: 16px !important;
  margin-bottom: 0 !important;
}

.sidebar-tableros .menu-list a {
  font-family: 'Montserrat', sans-serif !important;
}

.sidebar-tableros .menu-list a .icon {
  color: inherit;
}

/* Forzar Montserrat en todo el contexto admin */
.is-admin .sidebar-tableros,
.is-admin .sidebar-tableros * {
  font-family: 'Montserrat', sans-serif !important;
}

/* Asegurar que los íconos se muestren correctamente */
.sidebar-tableros .icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
}

.sidebar-tableros .icon i {
  font-size: 16px !important;
  display: inline-block !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  line-height: 1 !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
}

/* =========================================================
   Tipografía
========================================================= */
.titulo-pagina{
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 2rem;
  text-align: center;
}
.titulo-pagina_popups{
  font-size: 1.7rem;
  padding-top: 10px;
  font-weight: 700;
  text-align: left;
  color: #333;
}
.subtitulo-pagina{
  font-size: 1rem;
  color: var(--color-gris-oscuro);
  margin-bottom: 1.5rem;
}

/* =========================================================
   Contenedores / Layout
========================================================= */
.contenedor-tabla{ padding: 16px; }
.notification{ background-color: #EAA001 !important; }
.contenedor-tabla td{ font-family: var(--font-alt); }

.titulo-con-boton,
.titulo-con-boton2{
  display:flex;
  justify-content:space-between;
  align-items:flex-end; /* antes: self-end (propio de grid) */
  gap:12px;
  padding:0 20px;
  margin:18px 0 18px;
}



/* =========================================================
   Botones
========================================================= */
.btn-permisos,
.btn-permisos2,
.btn-cambiar-rol,
.btn-activar,
.btn-desactivar{
  display:inline-block;
  padding:6px 12px;
  border:none;
  border-radius:var(--radius-md);
  font-size:.85rem;
  cursor:pointer;
  transition:background-color .3s ease;
  text-decoration:none;
}

/* Familias tipográficas */
.btn-permisos{ font-family: var(--font-base); }
.btn-permisos2,
.btn-cambiar-rol{ font-family: var(--font-alt); }

/* Variantes */
.btn-permisos{
  background-color:var(--color-primario);
  color:var(--color-negro);
  font-weight:600;
  margin-top:12px;
  padding:8px 14px;              /* coherente con versión de abajo */
  border-radius:var(--radius-md);
  border:0;
  white-space:nowrap;
}
.btn-permisos:hover{ background-color: var(--color-secundario); color: var(--color-blanco); }

.btn-permisos2{
  background-color:var(--color-gris-300);
  color:var(--color-negro);
  font-weight:300;
}
.btn-cambiar-rol{
  background-color:var(--color-gris-300);
  color:var(--color-negro);
  font-weight:300;
  margin:2px;
  text-align: center;
}

.btn-activar{   background-color:var(--color-primario); color:var(--color-negro); }
.btn-desactivar{ background-color:var(--color-rojo);     color:var(--color-blanco); }

/* =========================================================
   Tabla
========================================================= */
.contenedor-tabla table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed; /* evita desbordes horizontales */
}
.contenedor-tabla th,
.contenedor-tabla td{
  padding:10px 12px;
  vertical-align:middle;
  word-break:break-word;  /* envuelve emails largos */
  overflow-wrap:anywhere;
}

/* Acciones (columna con dos botones apilados en desktop según tu versión) */
.contenedor-tabla td .acciones{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.btn-cambiar-rol,
.btn-permisos2{
  font-size:.9rem;
  border-radius:var(--radius-md);
  border:0;
}

.form-container {
  padding: 20px;
}

.navbar-right{
  font-family: 'Montserrat', sans-serif !important;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Logo GEMSO en navbar */
.navbar-logo-gemso {
  display: flex;
  align-items: center;
  margin-right: 15px;
}

.gemso-logo-img {
  height: 50px;
  width: auto;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

.gemso-logo-img:hover {
  opacity: 0.8;
}

/* Responsivo: Ocultar logo en tablets y móviles */
@media (max-width: 768px) {
  .navbar-logo-gemso {
    display: none;
  }

  .navbar-right {
    gap: 10px;
  }
}

/* Responsivo: Ajustar tamaño del logo en tablets */
@media (min-width: 769px) and (max-width: 1024px) {
  .gemso-logo-img {
    height: 40px;
  }

  .navbar-logo-gemso {
    margin-right: 10px;
  }
}

/* Estilo para el botón de cerrar sesión */
.logout-link {
  display: inline-flex;
  align-items: center;
  color: var(--color-primario);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: .7rem;
}

.logout-link:hover {
  text-decoration: underline;
  color: var(--color-primario);
}

.logout-link .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.menu-label{
  font-family: 'Montserrat', sans-serif !important;
}

/* Fuente Montserrat para enlaces de navegación admin en desktop */
.navbar-center_admin {
  font-family: 'Montserrat', sans-serif !important;
}

.navbar-center_admin a {
  font-family: 'Montserrat', sans-serif !important;
}

/* =========================================================
   Paginación
========================================================= */
.pagination-container{ padding: 0 30% 20px; }
.pagination-wrapper{
  text-align:center;
  margin:0 20%;
  padding:10px;
  border:2px solid var(--color-gris-300);
  border-radius:var(--radius-lg);
}

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 768px){

  /* Título + botón: dos renglones si hace falta */
  .titulo-con-boton{ flex-wrap:wrap; }
  .titulo-pagina{
    font-size: clamp(1rem, 4vw + .4rem, 1.35rem);
    text-align: center;
  }
  .btn-permisos{
    font-size:.9rem;
    padding:8px 12px;
  }

  /* Roles en formato card */
  .tabla-roles thead{ display:none; }
  .tabla-roles table,
  .tabla-roles tbody,
  .tabla-roles tr,
  .tabla-roles td{
    display:block; width:100%;
  }
  .tabla-roles tr{
    background:#fff; border:1px solid var(--color-gris-200);
    border-radius:10px; padding:10px 12px; margin-bottom:12px;
  }
  .tabla-roles td{
    display:grid; grid-template-columns:120px 1fr;
    gap:8px 12px; padding:6px 0; border:0;
  }

  /* Labels SÓLO para roles (Nombre, Email, Rol, Acción) */
  .tabla-roles td:nth-child(1)::before { content:"Nombre"; font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-roles td:nth-child(2)::before { content:"Email";  font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-roles td:nth-child(3)::before { content:"Rol";    font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-roles td:nth-child(4)::before { content:"Acción"; font-weight:600; color:var(--color-gris-oscuro); }

  /* Botones ancho completo sólo en roles */
  .tabla-roles .btn-cambiar-rol,
  .tabla-roles .btn-permisos2{
    width:100%; font-size:.95rem;
  }

  /* Paginación más angosta (opcional, global) */
  .pagination-container{ padding: 0 12px 16px; }
  .pagination-wrapper{ margin:0; }
  
  
  /* Contendor para tabla sesiones en movil*/
  .tabla-sesiones thead{ display:none; }
  .tabla-sesiones table,
  .tabla-sesiones tbody,
  .tabla-sesiones tr,
  .tabla-sesiones td{
    display:block; width:100%;
  }
  .tabla-sesiones tr{
    background:#fff; border:1px solid var(--color-gris-200);
    border-radius:10px; padding:10px 12px; margin-bottom:12px;
  }
  .tabla-sesiones td{
    display:grid; grid-template-columns:120px 1fr;
    gap:8px 12px; padding:6px 0; border:0;
  }
  /* Orden: Nombre, Inicio, Fin, Duración (s), Equipo/Navegador, Cierre motivo, Estado */
  .tabla-sesiones td:nth-child(1)::before { content:"Nombre";            font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-sesiones td:nth-child(2)::before { content:"Inicio";            font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-sesiones td:nth-child(3)::before { content:"Fin";               font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-sesiones td:nth-child(4)::before { content:"Duración (s)";      font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-sesiones td:nth-child(5)::before { content:"Equipo/Navegador";  font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-sesiones td:nth-child(6)::before { content:"Cierre motivo";     font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-sesiones td:nth-child(7)::before { content:"Estado";            font-weight:600; color:var(--color-gris-oscuro); }

  .table-sesiones .btn-cambiar-rol,
  .table-sesiones .btn-permisos2 {
    width: 100%; font-size: .95rem;
  }

  /* TABLEROS */
  .tabla-tableros thead{ display:none; }
  .tabla-tableros table,
  .tabla-tableros tbody,
  .tabla-tableros tr,
  .tabla-tableros td{
    display:block; width:100%;
  }
  .tabla-tableros tr{
    background:#fff; border:1px solid var(--color-gris-200);
    border-radius:10px; padding:10px 12px; margin-bottom:12px;
  }
  .tabla-tableros td{
    display:grid; grid-template-columns:120px 1fr;
    gap:8px 12px; padding:6px 0; border:0;
  }
  /* Orden: Nombre, Unidad de Negocio, Descripcion, Categoria, Accion */
  .tabla-tableros td:nth-child(1)::before { content:"Nombre";              font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-tableros td:nth-child(2)::before { content:"Unidad de Negocio";   font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-tableros td:nth-child(3)::before { content:"Descripción";         font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-tableros td:nth-child(4)::before { content:"Categoría";           font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-tableros td:nth-child(5)::before { content:"Acción";              font-weight:600; color:var(--color-gris-oscuro); }

  .tabla-solicitudes thead{ display:none; }
  .tabla-solicitudes table,
  .tabla-solicitudes tbody,
  .tabla-solicitudes tr,
  .tabla-solicitudes td{
    display:block; width:100%;
  }
  .tabla-solicitudes tr{
    background:#fff; border:1px solid var(--color-gris-200);
    border-radius:10px; padding:10px 12px; margin-bottom:12px;
  }
  .tabla-solicitudes td{
    display:grid; grid-template-columns:120px 1fr;
    gap:8px 12px; padding:6px 0; border:0;
  }
  /* Orden: Nombre, Unidad de Negocio, Descripcion, Categoria, Accion */
  .tabla-solicitudes td:nth-child(1)::before { content:"# Solicitud";              font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-solicitudes td:nth-child(2)::before { content:"Usuario";   font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-solicitudes td:nth-child(3)::before { content:"Email";         font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-solicitudes td:nth-child(4)::before { content:"Unidad";           font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-solicitudes td:nth-child(5)::before { content:"Estado";           font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-solicitudes td:nth-child(6)::before { content:"Fecha Solicitud";           font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-solicitudes td:nth-child(7)::before { content:"Acciones";           font-weight:600; color:var(--color-gris-oscuro); }

  .tabla-permisos thead{ display:none; }
  .tabla-permisos table,
  .tabla-permisos tbody,
  .tabla-permisos tr,
  .tabla-permisos td{
    display:block; width:100%;
  }
  .tabla-permisos tr{
    background:#fff; border:1px solid var(--color-gris-200);
    border-radius:10px; padding:10px 12px; margin-bottom:12px;
  }
  .tabla-permisos td{
    display:grid; grid-template-columns:120px 1fr;
    gap:8px 12px; padding:6px 0; border:0;
  }
  /* Orden: Nombre, Unidad de Negocio, Descripcion, Categoria, Accion */
  .tabla-permisos td:nth-child(1)::before { content:"Nombre";              font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-permisos td:nth-child(2)::before { content:"Email";   font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-permisos td:nth-child(3)::before { content:"Unidad";         font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-permisos td:nth-child(4)::before { content:"Tableros";           font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-permisos td:nth-child(5)::before { content:"Estado";           font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-permisos td:nth-child(6)::before { content:"Acciones";           font-weight:600; color:var(--color-gris-oscuro); }

  .tabla-acceso thead{ display:none; }
  .tabla-acceso table,
  .tabla-acceso tbody,
  .tabla-acceso tr,
  .tabla-acceso td{
    display:block; width:100%;
  }
  .tabla-acceso tr{
    background:#fff; border:1px solid var(--color-gris-200);
    border-radius:10px; padding:10px 12px; margin-bottom:12px;
  }
  .tabla-acceso td{
    display:grid; grid-template-columns:120px 1fr;
    gap:8px 12px; padding:6px 0; border:0;
  }
  /* Orden: Nombre, Unidad de Negocio, Descripcion, Categoria, Accion */
  .tabla-acceso td:nth-child(1)::before { content:"Nombre";              font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-acceso td:nth-child(2)::before { content:"Tablero";   font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-acceso td:nth-child(3)::before { content:"Unidad";         font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-acceso td:nth-child(4)::before { content:"Inicio";           font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-acceso td:nth-child(5)::before { content:"Fin";           font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-acceso td:nth-child(6)::before { content:"Duración (s)";         font-weight:600; color:var(--color-gris-oscuro); }
  .tabla-acceso td:nth-child(7)::before { content:"Estado";              font-weight:600; color:var(--color-gris-oscuro); }
}

/* =========================
   Modal responsivo GEMSO
   (no rompe Bulma; solo extiende)
========================= */

/* Contenedor raíz: mejora el fondo y soporta blur opcional */
.g-modal {
  /* Asegurar que el modal esté por encima del navbar (z-index: 1200) */
  z-index: 1300 !important;
}
.g-modal .modal-background {
  background-color: rgba(10, 10, 10, 0.6);
  backdrop-filter: saturate(1.2) blur(2px);
  z-index: 1300;
}

/* La tarjeta del modal: ancho fluido + alto máximo con layout de columna */
.g-modal-card {
  width: clamp(320px, 92vw, 840px);
  max-height: min(90vh, 720px);
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  box-shadow: var(--shadow-sm, 0 6px 24px rgba(0,0,0,.18));
  overflow: hidden; /* recorta bordes redondeados en iOS/Android */
  z-index: 1301; /* Asegurar que la card esté por encima del fondo */
}

/* Encabezado y pie “pegajosos” para que siempre estén visibles */
.g-modal-head,
.g-modal-foot {
  position: sticky;
  z-index: 2;
  background: #fff;
}
.g-modal-head {
  top: 0;
  border-bottom: 1px solid var(--color-gris-200, #e6e6e6);
}
.g-modal-foot {
  bottom: 0;
  border-top: 1px solid var(--color-gris-200, #e6e6e6);
}

/* Título y botón de cerrar con mejor área táctil */
.g-modal-title {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  line-height: 1.2;
}
.g-modal-close {
  /* aumenta el área de toque sin cambiar el ícono */
  position: relative;
}
.g-modal-close::after {
  content: "";
  position: absolute;
  inset: -8px;
}

/* Cuerpo con scroll interno y padding cómodo */
.g-modal-body {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* scroll suave en iOS */
  padding: 1rem;
}

/* Pie con botones que se acomodan en pantallas pequeñas */
.g-modal-actions {
  width: 100%;
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.g-modal-actions .button {
  min-height: 40px;
  border-radius: 10px;
}

/* Modo “pantalla completa” en móviles angostos */
@media (max-width: 480px) {
  .g-modal .modal-card.g-modal-card {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  .g-modal-body {
    padding: 0.75rem;
  }
  .g-modal-actions {
    padding: 0 0.25rem;
    justify-content: stretch;
  }
  .g-modal-actions .button {
    flex: 1 1 48%;
  }
}

/* Respeta preferencias del usuario para reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  .g-modal .modal-background {
    backdrop-filter: none;
  }
}

/* =========================================================
   SweetAlert2 - z-index para aparecer sobre modales
========================================================= */
/* Asegurar que SweetAlert2 aparezca por encima del modal de edición (z-index: 1300-1301) */
.swal2-container {
  z-index: 1400 !important;
}

.swal2-popup {
  z-index: 1401 !important;
}