/**
 * Estilos generales del sistema
 * Proyecto Pilares - Plataforma de Cuestionarios
 */

/* Estilos generales */
body {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  background-color: var(--color-light);
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23dddfe2' fill-opacity='0.2' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-attachment: fixed;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* Layout principal */
.main-content {
  margin-left: 220px;
  padding: 0.5rem;
  min-height: 100vh;
}

/* Encabezados de sección */
#cabecera {
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1rem;
}

#cabecera strong {
  color: var(--color-primary);
}

/* ====== Sidebar ====== */
.sidebar {
  box-shadow: 0 0 10px var(--color-shadow);
  background: linear-gradient(
    160deg,
    var(--color-primary) 0%,
    var(--color-primary-light) 50%,
    var(--color-primary) 100%
  );
  border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
  width: 220px;
  height: 100vh;
  position: fixed;
  z-index: 1030;
  display: flex;
  flex-direction: column;
}

.sidebar-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: 50px; /* Espacio para el username fijo */
}

.sidebar .username {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  padding: 8px 5px;
  font-size: 0.8rem;
  width: 100%;
  background-color: var(--color-black-transparent-15);
  border-top: 1px solid var(--color-gray-transparent);
}

/* Logo principal */
.sidebar-logo {
  max-width: 85%;
  margin: 0.5rem auto;
  filter: drop-shadow(0 2px 3px var(--color-shadow));
  transition: all 0.3s ease;
}

/* Menú de navegación */
.sidebar .nav-item {
  width: 100%;
  margin-bottom: 0.5rem;
}

.sidebar .nav-link {
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius-sm);
  transition: all 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  color: var(--color-white);
}

.sidebar .nav-link.active,
.sidebar .actual {
  background-color: var(--color-menu-active);
  color: var(--color-white);
  font-weight: 600;
  box-shadow: 0 2px 4px var(--color-shadow);
}

.sidebar .nav a:hover {
  background-color: var(--color-menu-hover);
  color: var(--color-white);
}

/* Submenús */
.sidebar .submenu {
  padding-left: 1rem;
  background-color: rgba(0,0,0,0.1);
  border-radius: var(--border-radius-sm);
  margin-top: 0.25rem;
}

.sidebar .submenu .nav-link.active,
.sidebar .actualsub {
  background-color: var(--color-menu-hover);
  border-radius: var(--border-radius-sm);
  font-weight: 600;
}

/* Menús desplegables */
.sidebar .nav-link[data-bs-toggle="collapse"] {
  position: relative;
}

.sidebar .nav-link[data-bs-toggle="collapse"] .menu-arrow {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}

.sidebar .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] .menu-arrow {
  transform: translateY(-50%) rotate(180deg);
}

/* ====== Barra superior móvil ====== */
.navbar.menu-bar {
  background: linear-gradient(
    160deg,
    var(--color-primary) 0%,
    var(--color-primary-light) 50%,
    var(--color-primary) 100%
  );
  box-shadow: 0 2px 4px var(--color-shadow);
}

/* Overlay para menú móvil */
.mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1040; /* Inferior al offcanvas (1045) */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

body.sidebar-open .mobile-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* ====== Botones y Tarjetas ====== */
.btn {
  border-radius: var(--border-radius-sm);
  font-weight: 500;
}

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

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

.card {
  border: none;
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 6px var(--color-shadow);
  transition: all 0.3s ease;
}



.card-header {
  background-color: var(--color-light);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  color: var(--color-primary);
}

/* ====== Formularios ====== */
.form-control {
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--color-border);
  transition: all 0.2s ease;
}

.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem var(--color-primary-opacity-10);
}

.form-select {
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--color-border);
}

.form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem var(--color-primary-opacity-10);
}

/* Estilos de tablas centralizados en css/tables.css */

/* ====== Badges ====== */
.badge {
  font-size: 0.75em;
  font-weight: 500;
  border-radius: var(--border-radius-sm);
}

/* ====== Alertas ====== */
.alert {
  border-radius: var(--border-radius-sm);
  border: none;
  box-shadow: 0 2px 4px var(--color-shadow);
}

/* ====== Ajustes responsivos ====== */
@media (max-width: 991.98px) {
  .main-content {
    margin-left: 0;
    padding-top: 4rem;
  }

  .offcanvas.sidebar-mobile {
    z-index: 1045;
    background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-primary) 100%);
  }
}

/* Scroll personalizado */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-gray-light);
}

::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-dark);
}



/* Mejoras para offcanvas móvil */
.offcanvas.sidebar-mobile .sidebar-logo-collapsed {
  max-width: 70%;
}

.mobile-overlay.clickable {
  cursor: pointer;
}

.transition-opacity {
  transition: opacity 0.3s ease;
}