/* =============================================================================
   MD SORTEOS · responsive.css
   ========================================================================== */

/* Tablet */
@media (max-width: 980px) {
    .stat-grid { grid-template-columns: repeat(3, 1fr); }
    .reglas-grid { grid-template-columns: 1fr; gap: 28px; }
    .admin-cols, .admin-cols--detail { grid-template-columns: 1fr; }
    .cards-grid { grid-template-columns: 1fr 1fr; }
    .gallery { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: 1fr 1fr; }
    .reg-grid { grid-template-columns: 1fr; }
}

/* Mobile */
@media (max-width: 720px) {
    .container { padding: 0 18px; }

    /* Nav público colapsable */
    .nav-toggle { display: flex; }
    .site-nav {
        position: fixed; inset: 70px 0 auto 0;
        flex-direction: column; align-items: stretch;
        gap: 4px; padding: 18px;
        background: var(--carbon); border-bottom: var(--border);
        transform: translateY(-130%); transition: transform var(--transition);
        z-index: 40;
    }
    .site-nav.is-open { transform: translateY(0); }
    .site-nav > a:not(.btn) { padding: 12px 8px; border-bottom: var(--border); }
    .site-nav .btn { width: 100%; margin-top: 6px; }

    .hero { min-height: 88vh; }
    .section { padding: 60px 0; }

    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .cards-grid, .steps, .gallery { grid-template-columns: 1fr; }

    .countdown__unit { min-width: 48px; }
    .countdown__unit span { font-size: 2rem; }

    .site-footer__top { flex-direction: column; gap: 24px; }

    .data-list--row { grid-template-columns: 1fr; }
    .data-list--row > div { flex-direction: row; justify-content: space-between; }

    /* Timeline vertical en móvil */
    .timeline { flex-direction: column; align-items: flex-start; gap: 14px; }
    .timeline::before { top: 0; bottom: 0; left: 8px; right: auto; width: 2px; height: auto; }
    .timeline__step { flex-direction: row; gap: 12px; text-align: left; }
    .timeline__label { max-width: none; }

    /* ---- Panel admin móvil ---- */
    .admin-sidebar__toggle { display: block; }
    .admin-sidebar {
        position: fixed; top: 0; left: 0; height: 100vh; z-index: 70;
        transform: translateX(-105%); transition: transform var(--transition);
        box-shadow: var(--shadow);
    }
    .admin-sidebar.is-open { transform: translateX(0); }
    .admin-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 65; opacity: 0; pointer-events: none; transition: opacity var(--transition); }
    .admin-backdrop.is-open { opacity: 1; pointer-events: auto; }
    .admin-topbar { padding: 18px 18px 18px 64px; }
    .admin-topbar__title { font-size: 1.25rem; }
    .admin-main { padding: 22px 18px 50px; }
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar__search { flex-direction: column; align-items: stretch; }
    .toolbar__search input[type=text] { width: 100%; }

    /* Tablas -> tarjetas */
    .table-wrap { border: 0; }
    .data-table, .data-table thead, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
    .data-table thead { display: none; }
    .data-table tr { background: var(--graphite); border: var(--border); border-radius: var(--radius); margin-bottom: 12px; padding: 6px 4px; }
    .data-table td { border-bottom: var(--border); display: flex; justify-content: space-between; align-items: center; gap: 14px; text-align: right; }
    .data-table td:last-child { border-bottom: 0; }
    .data-table td::before { content: attr(data-label); color: var(--smoke); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; text-align: left; flex-shrink: 0; }
    .data-table__actions { justify-content: flex-end; }

    .auth-card, .auth-card--wide { padding: 28px 22px; }
}

@media (max-width: 420px) {
    .stat-grid { grid-template-columns: 1fr; }
    .countdown { gap: 6px; }
    .countdown__unit { min-width: 40px; }
    .countdown__sep { font-size: 1.4rem; }
}