/* Archivo: public/style.css */
body {
  min-height: 100vh;
  min-width: 320px;
}

/* --- Sidebar --- */
#sidebar-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  padding: 48px 0 0;
  background-color: #212529; /* Color oscuro */
  width: 280px;
}

.nav-link {
  font-size: 1.1rem;
  color: #adb5bd; /* Color de texto gris */
  padding: 0.75rem 1.5rem;
}

.nav-link:hover {
  color: #fff; /* Color de texto al pasar el mouse */
  background-color: #343a40;
}

.nav-link.active {
  color: #fff;
  background-color: #0d6efd; /* Color azul de Bootstrap */
}

.nav-link .bi {
  margin-right: 12px;
}

/* --- Contenido Principal --- */
#app-content {
  margin-left: 280px; /* Mismo ancho que el sidebar */
  padding: 2rem;
}

/* Archivo: public/style.css (AÑADIR ESTO AL FINAL) */

/* --- Estilos del Calendario jSuites --- */
.jcalendar_table {
  width: 100%;
}
/* Sobrescribir los colores por defecto de jSuites */
.jcalendar_table td.present { background-color: rgba(25, 135, 84, 0.2) !important; }
.jcalendar_table td.tardy { background-color: rgba(255, 193, 7, 0.3) !important; }
.jcalendar_table td.absent { background-color: rgba(220, 53, 69, 0.3) !important; }

/* Archivo: public/style.css (AÑADIR ESTO AL FINAL) */

/* Asegura que el sidebar sea un contenedor flex 
  (puede que ya tengas 'min-height' y 'display' en tu #sidebar)
*/
#sidebar {
  min-height: 95vh;
  display: flex;
  flex-direction: column;
}

/* --- ¡NUEVO! Estilos para el encabezado (logo) --- */
.sidebar-header {
  padding: 1.25rem 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  border-bottom: 1px solid #4a4a4a;
  text-align: center;
  
  /* ¡CAMBIOS AQUÍ! */
  display: flex;
  flex-direction: column; /* Coloca el logo ARRIBA del texto */
  align-items: center;   /* Centra horizontalmente */
  justify-content: center;
}

/* Estilos para la imagen del logo */
.sidebar-logo {
  width: 60px;  /* (Puedes ajustar este tamaño, ej: 70px) */
  height: auto;
  
  /* ¡CAMBIOS AQUÍ! */
  margin-bottom: 0.5rem; /* Espacio entre el logo y el texto */
  margin-right: 0;       /* Quita el margen lateral */
}

/* Color del icono del logo */
.sidebar-header span {
  color: #fff;
  font-size: 1.5rem; /* Puede volver a ser grande */
  margin-top: 0.25rem;
}

#sidebar .list-group {
  flex-grow: 1;      /* (Ya está en sidebar.html, pero lo aseguramos) */
  overflow-y: auto;  /* ¡Añade la barra de scroll si es necesario! */
  min-height: 0;     /* ¡Truco clave de Flexbox para que el scroll funcione! */
}

/* --- ¡NUEVO! Estilos para el footer --- */
.sidebar-footer {
  padding: 1rem;
  color: #adb5bd; /* Texto gris claro */
  text-align: center;
  border-top: 1px solid #4a4a4a;
  /* Esto evita que se expanda, manteniéndolo en el fondo */
  flex-shrink: 0; 
}

.sidebar-footer small {
  display: block;
  margin-bottom: 0.5rem;
}

.sidebar-footer hr {
  border-top: 1px solid #4a4a4a;
}

.sidebar-header,
.sidebar-footer {
  flex-shrink: 0;
}
/* (El CSS existente para .nav-link, etc. se queda igual) */

/* Archivo: public/style.css (AÑADIR ESTO AL FINAL) */

/* --- ESTILOS PARA LA DIVISIÓN DIAGONAL DE CALENDARIO --- */

/* 1. Resetear el color de fondo por defecto de jSuites para las celdas con nuestros estados */
.jcalendar-content div[data-class*="att-"] {
    background-color: transparent !important;
    position: relative;
    overflow: hidden; /* Asegura que los triángulos no se salgan */
}

/* 2. ESTADOS DE MAÑANA (DIAGONAL IZQUIERDA SUPERIOR) */

/* Morning ABSENT (Rojo Oscuro) */
.jcalendar-content div[data-class*="att-m-a"]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #dc3545; /* Rojo de Bootstrap Danger */
    /* Clip-path dibuja un triángulo de la esquina superior izquierda */
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Morning TARDY (Amarillo) */
.jcalendar-content div[data-class*="att-m-t"]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffc107; /* Amarillo de Bootstrap Warning */
    clip-path: polygon(0 0, 100% 0, 0 100%);
}


/* 3. ESTADOS DE TARDE (DIAGONAL DERECHA INFERIOR) */

/* Afternoon PRESENT (Verde) */
.jcalendar-content div[data-class*="att-a-p"]:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #198754; /* Verde de Bootstrap Success */
    /* Clip-path dibuja un triángulo en la esquina inferior derecha */
    clip-path: polygon(100% 100%, 0 100%, 100% 0);
}

/* Afternoon ABSENT (Rojo Oscuro) */
.jcalendar-content div[data-class*="att-a-a"]:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #dc3545; /* Rojo de Bootstrap Danger */
    clip-path: polygon(100% 100%, 0 100%, 100% 0);
}

/* 4. ESTADO DE TEXTO (Asegura que el texto sea visible sobre el fondo oscuro) */
.jcalendar-content div[data-class*="att-"]:has(.jcalendar-number) .jcalendar-number,
.jcalendar-content div[data-class*="att-"] .jcalendar-weekday-text {
    color: #fff !important; /* Texto blanco en celdas coloreadas */
    z-index: 2; /* Pone el número encima de los triángulos */
    position: relative;
}

/* 5. ARREGLO DE SOBREPOSICIÓN (Si ambos son el mismo color, se fusionan) */

/* Si toda la célula es roja (AA) - Solo necesitamos un color de fondo para la celda entera */
.jcalendar-content div[data-class="att-m-a att-a-a"],
.jcalendar-content div[data-class*="att-m-a att-a-a"]:before,
.jcalendar-content div[data-class*="att-m-a att-a-a"]:after {
    background: #dc3545 !important;
    clip-path: none !important;
}

/* Si toda la célula es verde (PP) */
.jcalendar-content div[data-class="att-m-p att-a-p"],
.jcalendar-content div[data-class*="att-m-p att-a-p"]:before,
.jcalendar-content div[data-class*="att-m-p att-a-p"]:after {
    background: #198754 !important;
    clip-path: none !important;
}

/* Archivo: public/style.css (AÑADIR ESTO AL FINAL) */

/* --- ESTILOS PARA LA DIVISIÓN DIAGONAL DE CALENDARIO --- */

/* 1. Resetear el color de fondo por defecto de jSuites para las celdas con nuestros estados */
.jcalendar-content div[data-class*="att-"] {
    background-color: transparent !important;
    position: relative;
    overflow: hidden; /* Asegura que los triángulos no se salgan */
}

/* 2. ESTADOS DE MAÑANA (DIAGONAL IZQUIERDA SUPERIOR) */

/* Morning ABSENT (Rojo) */
.jcalendar-content div[data-class*="att-m-a"]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #dc3545; /* Rojo Danger */
    /* Dibuja un triángulo de la esquina superior izquierda */
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Morning TARDY (Amarillo) */
.jcalendar-content div[data-class*="att-m-t"]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffc107; /* Amarillo Warning */
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Morning PRESENT (Verde) */
/* Nota: Si el lado izquierdo es Presente (p), usamos un verde suave para el triángulo izquierdo */
.jcalendar-content div[data-class*="att-m-p"]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #28a745; /* Verde Suave */
    clip-path: polygon(0 0, 100% 0, 0 100%);
}


/* 3. ESTADOS DE TARDE (DIAGONAL DERECHA INFERIOR) */

/* Afternoon ABSENT (Rojo Oscuro) */
.jcalendar-content div[data-class*="att-a-a"]:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #dc3545; /* Rojo Danger */
    /* Dibuja un triángulo en la esquina inferior derecha */
    clip-path: polygon(100% 100%, 0 100%, 100% 0);
}

/* Afternoon TARDY (Amarillo) */
.jcalendar-content div[data-class*="att-a-t"]:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffc107; /* Amarillo Warning */
    clip-path: polygon(100% 100%, 0 100%, 100% 0);
}

/* Afternoon PRESENT (Verde Fuerte) */
.jcalendar-content div[data-class*="att-a-p"]:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #198754; /* Verde Success */
    clip-path: polygon(100% 100%, 0 100%, 100% 0);
}


/* 4. ARREGLO DE TEXTO Y SUPERPOSICIÓN */
/* Asegura que el número del día y el texto sean visibles y no queden bajo los triángulos */
.jcalendar-content div[data-class*="att-"] .jcalendar-number,
.jcalendar-content div[data-class*="att-"] .jcalendar-weekday-text {
    color: #fff !important; 
    z-index: 2; /* Pone el número encima de los triángulos */
    position: relative;
}

/* Si AMBOS son el mismo color, se fusionan */
/* (Ejemplo de override si ambos son Absent) */
.jcalendar-content div[data-class="att-m-a att-a-a"] {
    background: #dc3545 !important;
}

/* Si ambos son Presente */
.jcalendar-content div[data-class="att-m-p att-a-p"] {
    background: #198754 !important;
}

/* Si ambos son Tardy */
.jcalendar-content div[data-class="att-m-t att-a-t"] {
    background: #ffc107 !important;
}