/* --- CSS Completo y Final para College Aprender Core --- */

/* =========================================================================
   1. ESTILOS GUÍA DE ONBOARDING (DASHBOARD)
   ========================================================================== */
.apye-guia-plataforma-container { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    margin: 20px auto 40px auto;
    padding: 25px;
    background-color: #f6f7f7;
    border: 1px solid #cddcde;
    max-width: 1200px;
    box-sizing: border-box;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.apye-guia-header {
    text-align: center; 
    margin-bottom: 25px; 
    padding-bottom: 25px; 
    border-bottom: 1px solid #245FA8;
}

.apye-guia-header h2 { 
    font-size: 26px;
    font-weight: 600;
    color: #1d2327;
    margin: 0 0 20px 0; 
}

.apye-guia-progreso-texto { 
    font-size: 14px;
    margin-bottom: 8px; 
    color: #444; 
}

.apye-guia-progreso-barra-externa { width: 100%; background-color: #e9ecef; border-radius: 20px; height: 22px; overflow: hidden; }
.apye-guia-progreso-barra-interna { height: 100%; background-color: #0073aa; color: #fff; font-size: 12px; line-height: 22px; text-align: center; transition: width 0.6s ease; }

.apye-guia-content-wrapper { display: flex; gap: 25px; background-color: #fff; padding: 20px; border: 1px solid #dcdcde; min-height: 550px; }
.apye-guia-nav-menu { flex: 0 0 280px; border-right: 1px solid #dcdcde; padding-right: 20px; max-height: 500px; overflow-y: auto; }
.apye-guia-nav-menu ul { list-style: none; margin: 0; padding: 0; }

.apye-guia-nav-item { 
    padding: 9px 15px;
    margin-bottom: 6px; 
    border-radius: 5px; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    font-size: 14px;
    line-height: 1.5;
    transition: background-color 0.2s, color 0.2s;
    border: 1px solid transparent;
}

.apye-guia-nav-item:not(.bloqueado):hover { background-color: #f0f0f1; }
.apye-nav-item-status-icon { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; position: relative; border: 2px solid #8c8f94; transition: all 0.2s ease; }
.apye-guia-nav-item.completado .apye-nav-item-status-icon { background-color: #00a32a; border-color: #00a32a; }
.apye-guia-nav-item.completado .apye-nav-item-status-icon::after { content: '✔'; color: white; font-size: 12px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.apye-guia-nav-item.activo .apye-nav-item-status-icon { border-color: #0073aa; transform: scale(1.1); }
.apye-guia-nav-item.bloqueado { cursor: not-allowed; color: #a0a5aa; }
.apye-guia-nav-item.bloqueado .apye-nav-item-status-icon { background-color: #e9ecef; border-color: #dcdcde; }
.apye-guia-nav-item.current-view { background-color: #0073aa; color: #fff; font-weight: 600; }

.apye-guia-content-area { flex-grow: 1; position: relative; padding: 20px; z-index: 1; }
.apye-guia-content-area::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../images/background.jpg'); background-position: center; background-size: cover; opacity: 0.05; z-index: -1; }
.apye-guia-content-panel h3 { font-size: 22px; margin-top: 0; color: #1d2327; margin-bottom: 20px; }
.apye-guia-content-meta { margin: 15px 0; padding: 12px; background: #f8f9fa; border-left: 4px solid #0073aa; }
.apye-guia-content-actions { margin-top: 30px; display: flex; align-items: center; gap: 15px; }


/* =========================================================================
   2. ESTILOS DE BOTONES Y MENSAJES (CÓDIGO COMPLETO)
   ========================================================================== */

.apye-button,
.apye-guia-boton-acceso,
.apye-guia-btn-mark-read {
    display: inline-block;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    padding: 12px 24px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.apye-guia-boton-acceso {
    background: #0073aa;
    color: #fff !important;
    border-color: #0073aa;
}
.apye-guia-boton-acceso:hover {
    background: #005a87;
    border-color: #005a87;
}

.apye-guia-btn-mark-read {
    background: #f0f0f1;
    color: #1d2327 !important;
    border-color: #c3c4c7;
}
.apye-guia-btn-mark-read:hover:not(:disabled) {
    background: #e0e0e0;
    border-color: #b3b4b7;
}
.apye-guia-btn-mark-read:disabled {
    background: #e9f5ea !important;
    color: #008a20 !important;
    border-color: #a7dca9 !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

.apye-message {
    padding: 15px 20px;
    margin-bottom: 25px;
    border-radius: 5px;
}
.apye-message.apye-error {
    background-color: #fbeaea;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
.apye-message.apye-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}


/* =========================================================================
   3. RESPONSIVIDAD
   ========================================================================== */
@media (max-width: 782px) {
    .apye-guia-content-wrapper { 
        flex-direction: column; 
        min-height: auto; 
    }
    .apye-guia-nav-menu { 
        max-height: 300px; 
        border-right: none; 
        border-bottom: 1px solid #dcdcde;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
    .apye-guia-content-area {
        padding: 10px;
    }
}