/* =====================================================================
   Alena LMS — móvil primero: touch targets, tablas → tarjetas, sheets
   ===================================================================== */
@media (max-width: 768px) {
    :root { --control-h: 44px; --control-h-sm: 44px; }

    html, html.app-compact { font-size: 15px; }
    main { padding: 1rem 0.85rem 1.5rem; }
    h1 { font-size: 1.4rem; }

    /* Áreas de toque >= 44px */
    .btn, .btn.btn-sm, .btn-sm { min-height: 44px; padding: 0.5rem 1rem; font-size: 0.95rem; }
    .icon-btn, .header-burger, .drawer-close { width: 44px; height: 44px; }
    .icon-btn svg { width: 19px; height: 19px; }
    form.stacked input[type="text"], form.stacked input[type="email"], form.stacked input[type="password"], form.stacked input[type="url"],
    form.stacked input[type="search"], form.stacked input[type="tel"], form.stacked input[type="number"], form.stacked input[type="date"],
    form.stacked input[type="month"], form.stacked input[type="time"], form.stacked select {
        min-height: 44px; font-size: 16px; /* 16px evita el zoom automático de iOS al enfocar */
    }
    form.stacked textarea { font-size: 16px; }
    input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
    .dt-search input, tr.dt-filters input, tr.dt-filters select, .dt-size { min-height: 44px; font-size: 16px; }
    .dt-page { min-width: 44px; height: 44px; }
    .badge { padding: 0.25rem 0.7rem; }
    a.nav-menu-item, .lesson-nav a { min-height: 44px; }
    .kpi-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
    .kpi-card { padding: 0.7rem 0.75rem; }
    .kpi-value { font-size: 1.15rem; }
    .stat-strip { grid-template-columns: 1fr 1fr; }

    /* Cabeceras de página y acciones a todo el ancho */
    .page-header { padding: 0.8rem; }
    .page-header-actions { width: 100%; }
    .page-header-actions .btn { flex: 1; justify-content: center; }
    .actions-row { align-items: stretch; }
    .filter-card form { flex-direction: column; align-items: stretch !important; }
    .filter-card form > div { min-width: 0 !important; }
    .filter-card form .btn { width: 100%; justify-content: center; }

    /* Tablas de datos → tarjetas verticales */
    .card.table-scroll, .card-table { overflow: visible; background: transparent; border: none; box-shadow: none; }
    table.data-table, table.data-table tbody, table.data-table tr, table.data-table td, table.data-table tfoot { display: block; width: 100%; }
    table.data-table thead { display: block; }
    table.data-table thead tr:not(.dt-filters) { display: none; }
    table.data-table tbody tr, table.data-table tfoot tr {
        margin: 0 0 0.65rem; padding: 0.55rem 0.85rem; background: var(--surface);
        border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
    }
    table.data-table tbody tr:hover { background: var(--surface); }
    table.data-table td {
        display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: right;
        padding: 0.4rem 0; border: none; border-bottom: 1px dashed var(--border); min-height: 36px;
    }
    table.data-table td:last-child { border-bottom: none; }
    table.data-table td::before {
        content: attr(data-label); flex-shrink: 0; max-width: 42%; text-align: left;
        font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-tertiary);
    }
    table.data-table td:not([data-label])::before, table.data-table td[data-label=""]::before { display: none; }
    table.data-table td.lesson-actions-col { justify-content: flex-end; padding-top: 0.5rem; }
    table.data-table td.lesson-actions-col::before { display: none; }
    table.data-table td .cell-user { text-align: left; }
    table.data-table tr.dt-empty { background: transparent; border: none; box-shadow: none; }
    table.data-table tr.dt-empty td { justify-content: center; }
    table.data-table tr.dt-empty td::before { display: none; }
    table.data-table tfoot td { background: transparent; border-top: none; }

    /* Filtros por columna: panel apilado */
    table.data-table tr.dt-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0.7rem 0.85rem; margin: 0 0 0.65rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
    table.data-table tr.dt-filters[hidden] { display: none !important; }
    table.data-table tr.dt-filters th { display: block; padding: 0; background: none; border: none; }
    table.data-table tr.dt-filters th:empty { display: none; }
    table.data-table tr.dt-filters th:has(select), table.data-table tr.dt-filters th { min-width: 0; }

    .dt-toolbar { padding: 0.6rem 0; border: none; background: transparent; }
    .dt-search { max-width: none; flex-basis: 100%; }
    .dt-tools { width: 100%; }
    .dt-tools .btn { flex: 1; justify-content: center; }
    .dt-foot { border: none; background: transparent; padding: 0.5rem 0; justify-content: center; }
    .dt-menu {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: 65vh; border-radius: 18px 18px 0 0;
        padding: 0.8rem 0.9rem calc(0.8rem + env(safe-area-inset-bottom)); z-index: 95; animation: sheetUp 0.22s ease;
    }
    .dt-menu::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--border-strong); margin: 0 auto 0.6rem; }
    .dt-menu-item { padding: 0.75rem 0.5rem; font-size: 1rem; }
    .dt-server-pager { justify-content: center; }

    /* Menús y hojas a ancho completo */
    .nav-menu { position: fixed; left: 0.6rem; right: 0.6rem; min-width: 0; }
    .cookie-banner .btn { min-height: 44px; }
    .chart-box, .chart-box.tall { height: 240px; }
    .rb-layout { gap: 0.75rem; }
    .export-group { width: 100%; }
    .export-group .btn { flex: 1; justify-content: center; }
}

@keyframes sheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (max-width: 480px) {
    .kpi-grid { grid-template-columns: 1fr; }
    table.data-table tr.dt-filters { grid-template-columns: 1fr; }
}

/* Dispositivos táctiles de cualquier ancho: objetivos cómodos sin cambiar la maqueta */
@media (pointer: coarse) {
    .btn { min-height: 44px; }
    .icon-btn, .header-burger, .drawer-close { min-width: 44px; min-height: 44px; }
}

/* Respetar preferencia de menos movimiento */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}