/**
 * Sistema de Guías - Estilos responsivos
 */

/* Tablet & Smaller Desktop */
@media (max-width: 992px) {
    /* Ajustes de tamaño de texto */
    .hero h1 {
        font-size: 2.2rem;
    }
    
    .hero p {
        font-size: 1.1rem;
    }
    
    /* Ajustes de iconos y logos */
    .device-icon {
        height: 130px;
    }
    
    .device-icon img {
        max-width: 70px;
    }
    
    .panel-logo {
        height: 130px;
    }
    
    .panel-logo img {
        max-width: 150px;
    }
    
    /* Menú principal */
    .main-menu {
        position: fixed;
        top: 60px;
        left: -300px;
        width: 280px;
        height: calc(100vh - 60px);
        background-color: var(--primary);
        flex-direction: column;
        overflow-y: auto;
        transition: all 0.3s ease;
        z-index: 1000;
        padding: 1rem 0;
    }
    
    .main-menu.active {
        left: 0;
    }
    
    .main-menu a {
        padding: 12px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .main-menu .submenu {
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background-color: rgba(0,0,0,0.1);
        width: 100%;
        border-radius: 0;
    }
    
    .main-menu li.submenu-open .submenu {
        display: block;
    }
    
    .main-menu .submenu a {
        padding-left: 40px;
        color: white;
    }
    
    .main-menu li.has-submenu > a:after {
        content: '\f107';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        margin-left: auto;
    }
    
    /* Config tabs */
    .configs-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .config-icon {
        margin: 0 auto 1.5rem;
    }
    
    /* Steps section */
    .step-item {
        flex-direction: column;
    }
    
    .step-image {
        max-width: 100%;
        flex: 0 0 100%;
    }
}

/* Tablet */
@media (max-width: 768px) {
    /* Header */
    .header-container {
        flex-direction: column;
    }
    
    .contact-info {
        margin-top: 1rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .nav-container {
        padding: 0.8rem 0;
    }
    
    /* Hero section */
    .hero {
        padding: 2.5rem 0;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero p {
        font-size: 1rem;
        padding: 0 1rem;
    }
    
    /* Formularios */
    .search-bar {
        flex-direction: column;
        gap: 0.8rem;
    }
    
    .search-bar button {
        width: 100%;
        padding: 0.8rem;
    }
    
    .account-form {
        grid-template-columns: 1fr;
    }
    
    /* Grids */
    .devices-grid, 
    .panels-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 1.5rem;
    }
    
    /* Botones y acciones */
    .form-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .btn-secondary {
        margin-left: 0;
    }
    
    /* Modales */
    .modal-content {
        width: 95%;
        max-height: 80vh;
    }
    
    .modal-header h3 {
        font-size: 1rem;
    }
    
    /* Guía header */
    .guia-header .row {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .guia-icon {
        margin: 0 auto;
    }
    
    /* Config tabs navegación */
    .config-tabs-nav {
        flex-direction: column;
    }
    
    /* Prerequisites section */
    .prereq-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .prereq-icon {
        margin-bottom: 1rem;
    }
    
    /* Personalization form */
    .input-with-button {
        flex-direction: column;
    }
    
    .input-with-button button {
        width: 100%;
    }
    
    /* Step cards */
    .step-content {
        padding: 1.5rem;
    }
    
    .step-checklist li {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .check-label {
        margin-bottom: 0.5rem;
    }
    
    /* Tips cards */
    .tip-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .tip-icon {
        margin-bottom: 1rem;
    }
    
    /* Help options */
    .help-options {
        flex-direction: column;
        align-items: center;
    }
    
    .help-option {
        width: 100%;
        max-width: 280px;
    }
    
    /* Footer */
    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-logo {
        justify-content: center;
    }
}

/* Mobile */
@media (max-width: 576px) {
    /* Header */
    .header-container,
    .contact-info {
        flex-direction: column;
        text-align: center;
    }
    
    .logo img {
        height: 35px;
    }
    
    .contact-info {
        gap: 10px;
    }
    
    /* Hero section */
    .hero h1 {
        font-size: 1.8rem;
    }
    
    .hero p {
        font-size: 0.9rem;
    }
    
    /* Personalization card */
    .card-title {
        font-size: 1.3rem;
    }
    
    /* Section headers */
    .section-header h2 {
        font-size: 1.6rem;
    }
    
    /* Device cards */
    .devices-grid, 
    .panels-grid {
        grid-template-columns: 1fr;
    }
    
    .device-card, 
    .panel-card {
        max-width: 320px;
        margin: 0 auto;
    }
    
    /* Support section */
    .support-card h3 {
        font-size: 1.4rem;
    }
    
    /* App buttons */
    .app-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .app-button {
        width: 100%;
        justify-content: center;
    }
    
    /* Step content */
    .step-tip, 
    .step-note, 
    .step-warning, 
    .step-success,
    .step-info {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .step-tip i, 
    .step-note i, 
    .step-warning i, 
    .step-success i {
        margin-bottom: 0.5rem;
    }
    
    /* Config details */
    .config-details {
        padding: 0.5rem;
    }
    
    /* Toast notifications */
    .toast-container {
        left: 20px;
        right: 20px;
    }
    
    .toast {
        max-width: none;
    }
    
    /* Form groups */
    .form-group {
        margin-bottom: 1rem;
    }
    
    /* Management cards */
    .management-card {
        padding: 1rem;
    }
    
    /* FAQ items */
    .faq-question {
        padding: 1rem;
    }
    
    .faq-question h4 {
        font-size: 1rem;
    }
    
    .faq-answer {
        padding: 1rem;
    }
    
    /* Steps section */
    .step-content h3 {
        font-size: 1.1rem;
    }
    
    /* Config tabs */
    .config-tabs-content {
        padding: 1rem;
    }
    
    .config-tabs-nav a {
        padding: 0.8rem;
    }
    
    .config-tabs-nav a img {
        width: 40px;
    }
}

/* Smaller Phones */
@media (max-width: 375px) {
    /* Hero section */
    .hero h1 {
        font-size: 1.5rem;
    }
    
    /* Modals */
    .modal-header h3 {
        font-size: 0.9rem;
    }
    
    .modal-body {
        height: 70vh;
    }
    
    /* Personalization card */
    .personalization-card {
        padding: 15px;
    }
    
    /* App buttons */
    .app-button {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
    
    /* Step content */
    .step-content {
        padding: 1rem;
    }
    
    /* Guía header */
    .guia-icon {
        width: 100px;
        height: 100px;
    }
    
    .guia-icon img {
        max-width: 60px;
    }
    
    .guia-title h1 {
        font-size: 1.4rem;
    }
    
    /* Config tabs */
    .config-tabs-nav a {
        font-size: 0.8rem;
    }
    
    /* Form elements */
    .form-input-group label, 
    .form-group label {
        font-size: 0.85rem;
    }
}