/**
 * Hoja de Estilos Principal de ITED (Limpia y Responsiva)
 * * - Eliminados estilos de sidebar en conflicto.
 * * - Añadidas media queries para móviles.
 */

/* ---------------------------------- */
/* 1. CONFIGURACIÓN (VARIABLES CSS)   */
/* ---------------------------------- */
:root {
    /* Paleta de Marca ITED (Celeste Agua) */
    --color-primary: #42BFFC;        /* 👈 CAMBIO: Celeste Agua */
    --color-primary-dark: #379fd6;   /* Para hover (un poco más oscuro) */
    
    /* El resto de la paleta dark mode... */
    --color-bg-darkest: #121829;
    --color-bg-dark: #1E293B;
    --color-bg-light: #334155;
    
    --color-text-primary: #F1F5F9;
    --color-text-secondary: #94A3B8;
    --color-border: #334155;
    --color-success: #10B981;
    --color-error: #EF4444;
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --nav-height: 65px;
}

/* ---------------------------------- */
/* 2. RESET Y GLOBALES                */
/* ---------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--color-bg-darkest);
    color: var(--color-text-secondary);
    line-height: 1.6;
}
h1, h2, h3, h4, h5 { color: var(--color-text-primary); margin-bottom: 0.75em; }
a { color: var(--color-primary); text-decoration: none; }
img { max-width: 100%; height: auto; }

/* ---------------------------------- */
/* 3. COMPONENTES DE UI BÁSICOS       */
/* ---------------------------------- */
.btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: var(--border-radius-md);
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease;
    text-align: center;
}
.btn-primary { background-color: var(--color-primary); color: #FFFFFF; }
.btn-primary:hover { background-color: var(--color-primary-dark); color: #FFFFFF; }
.btn-secondary { background-color: var(--color-bg-light); color: var(--color-text-primary); }
.btn-secondary:hover { background-color: var(--color-border); }

.form-group { margin-bottom: var(--spacing-md); }
.form-group label { display: block; color: var(--color-text-primary); font-weight: 500; margin-bottom: 8px; }
.form-control {
    display: block; width: 100%; padding: 12px;
    background-color: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    color: var(--color-text-primary); font-size: 1rem;
}
.form-control:focus { outline: none; border-color: var(--color-primary); }

.card {
    background-color: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

/* ---------------------------------- */
/* 4. NAVEGACIÓN SUPERIOR (TOP NAV)   */
/* ---------------------------------- */
.top-nav {
    width: 100%;
    height: var(--nav-height);
    background-color: var(--color-bg-dark);
    border-bottom: 1px solid var(--color-border);
    padding: 0 var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: sticky; top: 0; z-index: 1000;
}
.nav-left { display: flex; align-items: center; gap: 20px; }
.nav-logo img { height: 35px; /* LOGO TAMAÑO CORREGIDO */ display: block; }
.nav-links { display: flex; list-style: none; gap: 20px; }
.nav-links a {
    color: var(--color-text-secondary); font-weight: 500; text-decoration: none;
    padding: 20px 0; border-bottom: 3px solid transparent;
}
.nav-links a:hover { color: var(--color-text-primary); }
.nav-links a.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

.nav-search { flex-grow: 1; max-width: 500px; position: relative; }
.nav-search .fa-search { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--color-text-secondary); }
.nav-search input {
    width: 100%; background-color: var(--color-bg-darkest);
    border: 1px solid var(--color-border); border-radius: var(--border-radius-md);
    padding: 12px 16px 12px 48px; color: var(--color-text-primary);
}
.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-icon-btn { color: var(--color-text-secondary); font-size: 1.3rem; text-decoration: none; }
.nav-icon-btn:hover { color: var(--color-text-primary); }
.nav-toggle-btn { display: none; /* Oculto en PC */ }

/* ---------------------------------- */
/* 5. MENÚ MÓVIL                      */
/* ---------------------------------- */
.mobile-nav-menu {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: var(--nav-height); /* Debajo de la barra superior */
    left: 0;
    width: 100%;
    background-color: var(--color-bg-dark);
    border-bottom: 1px solid var(--color-border);
    z-index: 999;
    animation: slideDown 0.3s ease-out;
}
.mobile-nav-menu.active {
    display: block; /* Se muestra con JS */
}
.mobile-nav-menu a {
    display: block;
    padding: 16px var(--spacing-lg);
    color: var(--color-text-primary);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid var(--color-border);
}
.mobile-nav-menu a:last-child { border-bottom: none; }
@keyframes slideDown {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ---------------------------------- */
/* 6. LAYOUT PRINCIPAL (CORREGIDO)    */
/* ---------------------------------- */
.main-content {
    width: 100%;
    max-width: 1200px; /* Ancho de contenido */
    margin: 0 auto; /* Centrado */
    padding: var(--spacing-lg);
}

/* ---------------------------------- */
/* 7. ESTILOS RESPONSIVOS (MÓVIL)     */
/* ---------------------------------- */
@media (max-width: 992px) {
    /* Ocultamos los links del menú en tablet */
    .nav-links { display: none; }
}

@media (max-width: 768px) {
    /* Ocultamos la búsqueda y el botón premium en móvil */
    .nav-search { display: none; }
    .btn-premium { display: none; }
    .nav-icon-logout { display: none; } /* Ocultamos logout de la barra */
    
    /* Mostramos el botón de hamburguesa */
    .nav-toggle-btn {
        display: block;
        background: none;
        border: none;
        color: var(--color-text-primary);
        font-size: 1.5rem;
        cursor: pointer;
    }
    
    /* Hacemos que el contenido ocupe toda la pantalla */
    .main-content {
        max-width: 100%;
        padding: var(--spacing-md);
    }
    
    /* Apilamos las columnas (ej: en course.php) */
    .course-layout, .profile-layout {
        flex-direction: column;
    }
    .course-sidebar, .profile-sidebar {
        position: static; /* Quitamos el 'sticky' */
    }
    
    /* Apilamos las tarjetas de estadísticas (ej: admin/index.php) */
    .stat-grid, .action-grid {
        grid-template-columns: 1fr; /* 1 columna */
    }
    
    /* Grid de reviews a 1 columna */
    .review-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Estilos de Logo Base --- */
.nav-logo img {
    height: 35px; /* Altura PC */
    display: block; /* Asegura que no haya espacio extra */
    vertical-align: middle; /* Alineación */
}

/* Por defecto (PC), OCULTAMOS el logo móvil */
.logo-mobile {
    display: none; /* <-- IMPORTANTE: Oculto inicialmente */
    height: 30px; /* Altura Móvil */
}
/* Por defecto (PC), MOSTRAMOS el logo PC */
.logo-pc {
    display: block; /* <-- IMPORTANTE: Visible inicialmente */
     height: 35px; /* Altura PC */
}


/* --- Estilos Responsivos --- */
@media (max-width: 992px) { /* Ajusta este valor si es necesario */

    /* OCULTAMOS logo PC en pantallas más pequeñas */
    .logo-pc {
        display: none; /* <-- IMPORTANTE */
    }
    /* MOSTRAMOS logo Móvil en pantallas más pequeñas */
    .logo-mobile {
        display: block; /* <-- IMPORTANTE */
    }
    /* ... (tus otras reglas @media para ocultar .nav-links etc.) ... */
}

/* (Si tienes otra @media query para móviles más pequeños, ej. 768px,
   asegúrate de que también incluya las reglas display:none/block
   para los logos si es necesario) */
@media (max-width: 768px) {
    /* ... (tus reglas para .nav-search, .btn-premium, etc.) ... */

    /* Asegurar que el logo móvil siga visible y el de PC oculto */
     .logo-pc { display: none; }
     .logo-mobile { display: block; }
}