/*
 * ==========================================================
 * SANOHF - ESTILOS PRINCIPALES
 * Ubicación: /panel/assets/css/style.css
 * ==========================================================
 */

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

body {
  font-family: 'Poppins', sans-serif;
  background-color: #f4f7f6; /* Un gris muy claro para el fondo */
}

/* 2. Colores de Marca Sanohf (Verdes) */
:root {
  --bs-primary: #27ae60;      /* Verde principal (ej. botones) */
  --bs-primary-rgb: 39, 174, 96;
  --bs-primary-dark: #229954;
  --bs-secondary: #6c757d;    /* Gris secundario */
}

/* 3. Estilos del Login */
.login-page {
  background-color: #e8f5e9; /* Un verde muy pálido */
}

.login-card {
  border: none;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* 4. Estilos del Layout del Panel */
.sidebar {
  width: 260px;
  background-color: #ffffff;
  border-right: 1px solid #e0e0e0;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.sidebar .nav-link {
  color: #333;
  font-weight: 500;
  padding: 12px 20px;
  display: flex;
  align-items: center;
}
.sidebar .nav-link .bi {
  margin-right: 15px;
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
}

.sidebar .nav-link.active {
  background-color: #e8f5e9; /* Verde pálido */
  color: #27ae60; /* Verde principal */
  border-radius: 8px;
}

.sidebar .nav-link:hover {
  background-color: #f1f1f1;
  border-radius: 8px;
}

.main-content {
  margin-left: 260px; /* Mismo ancho que el sidebar */
  padding: 0;
}

.admin-header {
  height: 60px;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.admin-content-wrap {
  padding: 2rem;
}




/*
 * ==========================================================
 * 5. Estilos de FullCalendar
 * ==========================================================
 */

/* Integración con Bootstrap 5 */
.fc {
  /* Resetea las variables de color de FC para usar las de Bootstrap */
  --fc-border-color: var(--bs-border-color);
  --fc-daygrid-event-dot-width: 8px;
  --fc-list-event-dot-width: 10px;
  --fc-event-border-color: var(--bs-primary);
  --fc-event-bg-color: var(--bs-primary);
  --fc-event-text-color: var(--bs-white);
  --fc-page-bg-color: var(--bs-body-bg);
  --fc-neutral-bg-color: var(--bs-light-bg-subtle);
  --fc-today-bg-color: var(--bs-primary-bg-subtle);
}

/* Hacer los botones de FC como los de Bootstrap */
.fc .fc-button {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Botones de FC (tipo 'btn-primary') */
.fc .fc-button-primary {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.fc .fc-button-primary:hover {
  background-color: var(--bs-primary-dark);
  border-color: var(--bs-primary-dark);
}
.fc .fc-button-primary:disabled {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  opacity: 0.65;
}

/* Botones de FC (tipo 'btn-light') */
.fc .fc-button-secondary {
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
}
.fc .fc-button-secondary:hover {
  background-color: var(--bs-secondary-bg);
}

/* Estilo de los eventos en el calendario */
.fc-event {
  cursor: pointer;
  padding: 5px 8px;
  margin-bottom: 3px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.85em;
}

/* Título de la cabecera */
.fc .fc-toolbar-title {
  font-size: 1.5rem;
  font-weight: 600;
}

/* Estilo de los eventos en el calendario */
.fc-event {
  cursor: pointer;
  padding: 5px 8px;
  margin-bottom: 3px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.85em;
  /* (Ajuste 1) Añadimos sombra al texto para legibilidad */
  color: #ffffff; /* Forzamos texto blanco */
  text-shadow: 0 0 3px rgba(0,0,0,0.7); /* Sombra para contraste */
}




/* Estilos para reordenamiento en Modal Gestión Menú */
.sortable-handle {
  cursor: grab;
  color: #aaa;
  margin-right: 10px;
  padding: 5px;
}
.sortable-handle:active {
  cursor: grabbing;
  color: #333;
}
.sortable-ghost {
  opacity: 0.4;
  background-color: #f0f0f0;
}