/* ===================================
   RESPONSIVE CSS - Breakpoints
   =================================== */

/* --- Tablets pequeñas y Móviles grandes (481px+) --- */
@media (min-width: 481px) {
    .container { padding: 0 24px; }
    
    .card { padding: 24px; }
    
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }

    /* Encuesta */
    .area-selector {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding-bottom: 40px;
    }

    .encuesta-card {
        padding: 32px;
    }

    .carita-item { padding: 20px 16px; }
    .carita-icon { font-size: 5rem; }
    .carita-item span { font-size: 1rem; }
    
    .label-tactil { padding: 20px; font-size: 1.1rem; }
    
    .recom-icon { font-size: 4rem; }

    /* Panel */
    .sentimiento-tabs { flex-direction: row; }
}

/* --- Tablets y Desktop pequeño (769px+) --- */
@media (min-width: 769px) {
    html { font-size: 17px; }

    .container { padding: 0 32px; }

    .grid-3 { grid-template-columns: repeat(3, 1fr); }

    /* Encuesta */
    .area-selector { grid-template-columns: repeat(3, 1fr); }

    .encuesta-logo { max-width: 120px; }

    /* Panel Layout */
    .panel-sidebar {
        display: block;
        transform: translateX(0);
        position: fixed;
        width: 260px;
    }

    .panel-sidebar-overlay { display: none !important; }
    .panel-hamburger { display: none; }
    
    .panel-topbar { margin-left: 260px; }
    .panel-content { margin-left: 260px; padding: 24px; }

    .pregunta-editor-card { padding: 16px 20px; }
}

/* --- Desktop (1025px+) --- */
@media (min-width: 1025px) {
    html { font-size: 18px; }

    .card { padding: 28px; }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }

    .panel-content { padding: 28px 32px; }
    
    .login-card { padding: 48px 40px; max-width: 440px; }
}

/* --- Pantallas grandes (1200px+) --- */
@media (min-width: 1200px) {
    .container { max-width: 1400px; }
}