/* RESET BÁSICO */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: #f4f7f6; color: #333; }

/* ENCABEZADO */
.navbar { display: flex; justify-content: space-between; align-items: center; background-color: #1a252f; color: white; padding: 15px 30px; }
.logo { font-size: 24px; font-weight: bold; letter-spacing: 2px; }
.nav-links { list-style: none; display: flex; gap: 20px; }
.nav-links a { color: white; text-decoration: none; font-size: 14px; }
.btn-primary { background-color: #3498db; color: white; border: none; padding: 10px 20px; cursor: pointer; border-radius: 4px; font-weight: bold; }
.btn-primary:hover { background-color: #2980b9; }

/* HERO SECTION */
.hero-section { text-align: center; padding: 100px 20px; }

/* MODAL DE LOGIN */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.modal.hidden { display: none; }
.modal-content { background-color: white; padding: 30px; border-radius: 8px; width: 350px; position: relative; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.close-btn { position: absolute; top: 10px; right: 15px; font-size: 24px; cursor: pointer; color: #7f8c8d; }
.modal-content h2 { margin-bottom: 20px; text-align: center; color: #2c3e50; }

/* FORMULARIO */
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-size: 14px; color: #555; }
/* Agregamos , .form-group input[type="email"] a la lista */
.form-group input[type="text"], 
.form-group input[type="password"], 
.form-group input[type="email"] { 
    width: 100%; 
    padding: 10px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
}
.password-wrapper { display: flex; gap: 5px; }
.btn-toggle { background-color: #ecf0f1; border: 1px solid #ccc; padding: 0 10px; cursor: pointer; border-radius: 4px; }
.checkbox-group { display: flex; align-items: center; gap: 8px; }
.btn-submit { width: 100%; background-color: #2ecc71; color: white; border: none; padding: 12px; font-size: 16px; cursor: pointer; border-radius: 4px; margin-top: 10px; font-weight: bold; }
.btn-submit:hover { background-color: #27ae60; }
.error-msg { color: #e74c3c; font-size: 13px; margin-top: 10px; text-align: center; }
.error-msg.hidden { display: none; }

/* ==========================================
   ACTUALIZACIONES DEL ENCABEZADO
   ========================================== */
.navbar { 
    position: sticky; /* Hace que el menú se quede pegado arriba al hacer scroll */
    top: 0; 
    z-index: 1000; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Sombra elegante */
}

/* Ocultar elementos mediante clase */
.hidden { display: none !important; }

/* Estilos del saludo al usuario */
.user-greeting {
    color: #ecf0f1;
    font-size: 15px;
    margin-right: 15px;
}
.user-greeting strong {
    color: #3498db;
}

/* ==========================================
   DISEÑO RESPONSIVO (Móviles y Tablets)
   ========================================== */
@media (max-width: 768px) {
    .navbar {
        flex-wrap: wrap; /* Permite que los elementos bajen de línea */
        padding: 15px;
        gap: 15px;
        justify-content: space-between;
    }
    
    /* El logo y la zona de botones se mantienen arriba */
    .logo { 
    font-size: 24px; 
    font-weight: bold; 
    letter-spacing: 2px; 
    color: #ffffff; /* Forzamos el color blanco puro */
    text-decoration: none; /* Aseguramos que no tenga subrayado */
    cursor: pointer;
    }

    /* Opcional: un ligero cambio de opacidad al pasar el mouse para que se sienta interactivo */
    .logo:hover {
        opacity: 0.8;
    }
    
    /* El menú público se pasa abajo y se centra */
    #public-nav {
        width: 100%;
        order: 3; /* Lo manda al final */
    }
    .nav-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
    }

    /* Ajuste del modal para pantallas pequeñas */
    .modal-content {
        width: 90%;
        padding: 20px;
    }
    
    .hero-section {
        padding: 60px 20px;
    }
}

/* ==========================================
   DASHBOARD (CENTER.HTML)
   ========================================== */
.dashboard-layout {
    display: flex;
    /* Ocupa el 100% del alto de pantalla menos el header (aprox 65px) */
    height: calc(100vh - 65px); 
    overflow: hidden;
    background-color: #f4f7f6;
}

/* --- BARRA LATERAL --- */
.sidebar {
    width: 260px;
    background-color: #2c3e50;
    color: white;
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease; /* Animación suave al ocultar */
    flex-shrink: 0;
}

/* Clase dinámica que aplicaremos con JS para ocultar la barra */
.sidebar.collapsed {
    width: 0;
    overflow: hidden;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #1a252f;
    border-bottom: 1px solid #34495e;
}

.sidebar-header h3 { font-size: 16px; font-weight: normal; letter-spacing: 1px; }

.btn-icon {
    background: none; border: none; color: #bdc3c7; cursor: pointer; font-size: 14px;
}
.btn-icon:hover { color: white; }

/* Navegación de módulos */
.sidebar-nav { list-style: none; overflow-y: auto; padding: 10px 0; }

.sidebar-nav li {
    padding: 15px 20px;
    cursor: pointer;
    border-bottom: 1px solid #34495e;
    transition: background 0.2s, border-left 0.2s;
    font-size: 14px;
}

.sidebar-nav li:hover {
    background-color: #34495e;
    border-left: 4px solid #3498db;
}

.loading-text { padding: 20px; color: #7f8c8d; font-style: italic; font-size: 13px; }

/* --- ÁREA DE TRABAJO --- */
.workspace {
    flex-grow: 1;
    padding: 30px;
    overflow-y: auto;
    position: relative;
}

.module-container {
    background: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    min-height: 100%;
}

.btn-float {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    margin-bottom: 20px;
}

/* ==========================================
   TABLAS Y MÓDULOS (CRUD)
   ========================================== */
.module-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.module-header h2 { color: #2c3e50; }

.table-container { -webkit-overflow-scrolling: touch; background: white; border-radius: 0; overflow-x: auto; }
.data-table { width: 800%; border-collapse: collapse; text-align: left; }
.data-table th, .data-table td { padding: 12px 15px; border-bottom: 1px solid #ecf0f1; }
.data-table th { background-color: #f8f9fa; color: #34495e; font-weight: bold; }
.data-table tbody tr:hover { background-color: #f1f2f6; }

/* Botones de acción pequeños */
.btn-sm { padding: 5px 10px; font-size: 12px; border: none; border-radius: 3px; cursor: pointer; color: white; margin-right: 5px; }
.btn-edit { background-color: #f39c12; }
.btn-edit:hover { background-color: #e67e22; }
.btn-delete { background-color: #e74c3c; }
.btn-delete:hover { background-color: #c0392b; }
.btn-permissions { background-color: #8e44ad; }
.btn-permissions:hover { background-color: #9b59b6; }

/* ==========================================
   SISTEMA GLOBAL DE NOTIFICACIONES (TOAST)
   ========================================== */
#toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.toast { min-width: 250px; padding: 15px 20px; border-radius: 4px; color: white; font-size: 14px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: flex; justify-content: space-between; align-items: center; opacity: 0; transform: translateX(100%); transition: opacity 0.3s ease, transform 0.3s ease; }
.toast.show { opacity: 1; transform: translateX(0); }
.toast-success { background-color: #2ecc71; border-left: 5px solid #27ae60; }
.toast-error { background-color: #e74c3c; border-left: 5px solid #c0392b; }
.toast-info { background-color: #3498db; border-left: 5px solid #2980b9; }
.toast-close { background: none; border: none; color: white; font-size: 18px; cursor: pointer; margin-left: 15px; opacity: 0.8; }
.toast-close:hover { opacity: 1; }