/* ============================================
           ESTILOS GENERALES Y RESET (Restaurados)
           ============================================ */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            /* Fondo suave */
            background: linear-gradient(135deg, #f0f2f5 0%, #e9eef4 100%);
            min-height: 100vh;
            color: #333;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }

        /* ============================================
           HEADER PRINCIPAL (Restaurado)
           ============================================ */
        .main-header {
            background: linear-gradient(135deg, #2c5aa0 0%, #1e3c72 100%);
            color: white;
            padding: 15px 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            position: relative;
            z-index: 100;
            border-radius: 0 0 15px 15px;
        }

        .header-left {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .logo-img {
            width: 75px;
            height: 75px;
            border-radius: 50%;
            border: 2px solid white;
            background: #ffeb3b;
            color: #1e3c72;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .header-text h1 {
            font-size: 1.8rem;
            font-weight: 600;
        }

        .header-text .subtitle {
            font-size: 0.9rem;
            opacity: 0.8;
        }

        .school-logo {
             width: 75px;
            height: 75px;
            border-radius: 50%;
            border: 2px solid white;
            background: #ffeb3b;
            color: #1e3c72;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* ============================================
           PANTALLA DE SELECCIÓN DE PERFIL (Restaurada)
           ============================================ */
        .selection-screen {
            background: #ffffff;
            border-radius: 15px;
            margin-top: 50px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            padding: 40px;
        }

        .selection-title {
            font-size: 2.5rem;
            color: #1e3c72;
            margin-bottom: 10px;
        }

        .selection-subtitle {
            color: #666;
            font-size: 1.1rem;
            margin-bottom: 40px;
        }

        .selection-buttons {
            display: flex;
            justify-content: center;
            gap: 40px;
        }

        /* Botones de selección de perfil (Animados) */
        .selection-btn {
            background: linear-gradient(135deg, #0d6efd 0%, #2a5298 100%);
            color: white;
            padding: 40px 60px;
            border: none;
            border-radius: 20px;
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            box-shadow: 0 8px 25px rgba(0,0,0,0.2);
            min-width: 250px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }

        .selection-btn:hover {
            transform: translateY(-8px) scale(1.03);
            box-shadow: 0 15px 40px rgba(44, 90, 160, 0.5);
            filter: brightness(1.1);
        }

        .selection-btn.admin {
            background: linear-gradient(135deg, #1e3c72 0%, #0c2340 100%);
        }

        .selection-btn.teacher {
            background: linear-gradient(135deg, #17a2b8 0%, #107c8c 100%);
        }

        .selection-btn.student {
            background: linear-gradient(135deg, #ffeb3b 0%, #fbc02d 100%);
            color: #1e3c72;
        }

        /* ============================================
           FORMULARIOS DE LOGIN (Restaurados)
           ============================================ */
        .dashboard-wrapper {
            display: flex;
            justify-content: center;
            padding-top: 50px;
        }

        .login-form {
            background: white;
            padding: 40px;
            border-radius: 15px;
            max-width: 450px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            border: 1px solid #ddd;
        }

        .login-form h2 {
            color: #1e3c72;
            font-size: 2rem;
            margin-bottom: 25px;
            text-align: center;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #555;
        }

        .form-group input, .form-group select, .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 10px;
            font-size: 1rem;
            transition: border-color 0.3s;
        }

        .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
            border-color: #2a5298;
            outline: none;
            box-shadow: 0 0 5px rgba(42, 82, 152, 0.3);
        }

        /* Estilo para el label que simula un botón de subir archivo */
        .btn-file-upload {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 20px;
            border-radius: 15px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.4s ease;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            gap: 10px;
            font-weight: 600;
            text-transform: uppercase;
            color: white;
            background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
        }
        .btn-file-upload:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 25px rgba(73, 80, 87, 0.5);
            filter: brightness(1.1);
        }

        /* ============================================
           BOTONES PRINCIPALES (Animados)
           ============================================ */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            margin-top: 10px;
            /* Gradiente de botón más impactante */
            background: linear-gradient(135deg, #2a5298 0%, #1e3c72 100%);
            color: white;
            padding: 15px 25px;
            border: none;
            border-radius: 15px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.4s ease;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            gap: 10px;
            font-weight: 600;
            text-transform: uppercase;
        }

        .btn:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 25px rgba(42, 82, 152, 0.5);
            filter: brightness(1.1);
        }

        .btn-success {
            background: linear-gradient(135deg, #28a745 0%, #00bc8c 100%);
        }
        .btn-success:hover {
             box-shadow: 0 10px 25px rgba(40, 167, 69, 0.5);
        }

        .btn-danger {
            background: linear-gradient(135deg, #dc3545 0%, #ff5722 100%);
        }
        .btn-danger:hover {
             box-shadow: 0 10px 25px rgba(220, 53, 69, 0.5);
        }
        
        .btn-info {
            background: linear-gradient(135deg, #17a2b8 0%, #4dd0e1 100%);
        }
        .btn-info:hover {
             box-shadow: 0 10px 25px rgba(23, 162, 184, 0.5);
        }
        
        .back-btn {
            background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
        }

        .logout-btn {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
            width: auto;
            position: absolute;
            top: 20px;
            right: 20px;
            box-shadow: 0 8px 25px rgba(255, 87, 34, 0.3);
        }
#dashboard-screen {
  position: relative;
}

/* Mejorar visibilidad y estilo del botón */
.logout-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  background: linear-gradient(135deg, #dc3545 0%, #ff6b6b 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 10px 18px;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  z-index: 999;
  transition: all 0.3s ease;
}

.logout-btn:hover {
  background: linear-gradient(135deg, #c82333 0%, #ff4757 100%);
  transform: scale(1.05);
}

        /* ============================================
           DASHBOARD Y NAVEGACIÓN (Restaurados)
           ============================================ */
        .dashboard {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            width: 100%;
            position: relative;
            margin-top: 30px;
        }

        .welcome-header {
            background: #f8f9fa;
            color: #1e3c72;
            padding: 15px;
            border-radius: 10px;
            font-size: 1.4rem;
            margin-bottom: 20px;
            border-left: 5px solid #2a5298;
        }

        .dashboard-nav {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }

        .nav-btn {
            background: #e9ecef;
            color: #495057;
            padding: 12px 20px;
            border: none;
            border-radius: 10px;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
        }

        .nav-btn:hover {
            background: #dee2e6;
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        }

        .nav-btn.active {
            background: linear-gradient(135deg, #2a5298 0%, #1e3c72 100%);
            color: white;
            transform: scale(1.02);
            box-shadow: 0 4px 10px rgba(42, 82, 152, 0.4);
        }

        /* ============================================
           INFORMACIÓN DE USUARIO CON FOTO DE PERFIL
           ============================================ */
        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
            background: #f1f7fe;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
            border: 1px solid #c9d7e7;
        }

        .profile-pic-container {
            position: relative;
            cursor: pointer;
            width: 70px;
            height: 70px;
        }
        
        .user-profile-pic {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #2a5298;
            transition: transform 0.3s;
        }
        
        .user-profile-pic:hover {
            transform: scale(1.05);
        }

        .profile-pic-overlay {
            position: absolute;
            bottom: 0;
            right: 0;
            background-color: rgba(42, 82, 152, 0.8);
            border-radius: 50%;
            padding: 5px;
            font-size: 12px;
            border: 2px solid white;
        }

        #user-display-name {
            font-size: 1.2rem;
            font-weight: 600;
            color: #1e3c72;
        }

        /* ============================================
           ESTILOS DE TABLAS Y CONTENIDO
           ============================================ */
        .sub-panel {
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            border: 1px solid #eee;
        }

        .category-title {
            color: #1e3c72;
            font-size: 1.8rem;
            margin-bottom: 15px;
            border-bottom: 2px solid #2a5298;
            padding-bottom: 5px;
        }

        .table-container {
            overflow-x: auto;
            margin-top: 20px;
            border: 1px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.95rem;
        }

        th, td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #f1f1f1;
        }

        th {
            background: #2a5298;
            color: white;
            font-weight: 600;
            text-transform: uppercase;
        }
        
        tr:hover {
            background: #f9f9f9;
        }

        .book-thumb {
            width: 40px;
            height: 60px;
            object-fit: cover;
            border-radius: 3px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        /* Estados */
        .status-pendiente, .status-entregado, .status-devuelto {
            padding: 5px 10px;
            border-radius: 10px;
            font-weight: 600;
            display: inline-block;
        }

        .status-pendiente {
            background-color: #ffc107; /* Amarillo */
            color: #333;
        }

        .status-entregado, .status-devuelto {
            background-color: #28a745; /* Verde */
            color: white;
        }

        /* Catálogo de Libros */
        .books-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .book-card {
            background: white;
            border: 1px solid #eee;
            padding: 15px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .book-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(42, 82, 152, 0.2);
        }
        
        .book-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        
        .book-title {
            font-weight: 700;
            color: #1e3c72;
            font-size: 1.1rem;
            margin-bottom: 5px;
        }

        .book-author, .book-category {
            font-size: 0.9rem;
            color: #6c757d;
        }
        
        /* Modal General */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
            backdrop-filter: blur(5px);
        }

        .modal.fade-in {
            animation: fadeIn 0.3s;
        }

        .modal.hidden {
            display: none !important;
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 30px;
            border: 1px solid #888;
            width: 80%;
            max-width: 400px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            text-align: center;
            color: #333;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .hidden {
            display: none;
        }

        /* ============================================
   ESTILOS DE ALERTAS Y MENSAJES (Para uso en JavaScript/Modals)
   ============================================ */

/* Estilo Base para todos los mensajes */
.message-box {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-left: 5px solid; /* Usaremos este borde para el color principal */
}

.message-box i {
    font-size: 1.5rem;
    margin-right: 15px;
}

/* 1. Alerta de Éxito (Success) 🟢 */
.message-success {
    background-color: #e6ffed; /* Fondo muy claro */
    color: #1a7a28; /* Texto verde oscuro */
    border-color: #1a7a28; /* Borde verde oscuro */
}

.message-success i {
    color: #28a745; /* Icono verde brillante */
}

/* 2. Alerta de Error (Error) 🔴 */
.message-error {
    background-color: #ffeded; /* Fondo muy claro */
    color: #b02a37; /* Texto rojo oscuro */
    border-color: #b02a37; /* Borde rojo oscuro */
}

.message-error i {
    color: #dc3545; /* Icono rojo brillante */
}

/* 3. Alerta de Advertencia (Warning) 🟡 */
.message-warning {
    background-color: #fff8e6; /* Fondo muy claro */
    color: #8c6a00; /* Texto amarillo oscuro */
    border-color: #8c6a00; /* Borde amarillo oscuro */
}

.message-warning i {
    color: #ffc107; /* Icono amarillo brillante */
}

/* 4. Alerta de Información (Info) 🔵 */
.message-info {
    background-color: #e6f7ff; /* Fondo muy claro */
    color: #004085; /* Texto azul oscuro */
    border-color: #004085; /* Borde azul oscuro */
}

.message-info i {
    color: #007bff; /* Icono azul brillante */
}

	/* ============================
   Modal de Alerta Personalizado
   ============================ */
.custom-alert-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
}

.custom-alert-content {
    background: #fff;
    border-radius: 15px;
    padding: 30px 40px;
    text-align: center;
    max-width: 400px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    animation: popIn 0.3s ease;
}

.custom-alert-content .icon {
    font-size: 48px;
    color: #dc3545;
    margin-bottom: 15px;
}

.custom-alert-content p {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: #333;
}

@keyframes popIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}