/* ── Reset & Variables ────────────────────────────────────────────────────── */
:root {
    /* Tokens del handoff SaaS (docs/design_handoff_comevery_saas): paleta slate + indigo */
    --primary:        #6366f1;
    --primary-hover:  #4f46e5;
    --primary-dark:   #4338ca;
    --primary-light:  #eef2ff;
    --primary-tint:   #e0e7ff;
    --brand:          #6366f1;
    --bg:             #f1f5f9;
    --bg-secondary:   #f8fafc;
    --white:          #ffffff;
    --text:           #0f172a;
    --text-primary:   #0f172a;
    --text-secondary: #475569;
    --text-muted:     #64748b;
    --text-aux:       #94a3b8;
    --border:         #e2e8f0;
    --radius:         16px;
    --radius-btn:     12px;
    --radius-lg:      20px;
    --shadow:         0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.06);
    --shadow-md:      0 4px 16px rgba(15,23,42,.10);
    --shadow-lg:      0 12px 40px rgba(15,23,42,.16);
    --grad-cta:       linear-gradient(135deg,#6366f1,#7c3aed);
    /* Semánticos (README handoff): éxito / aviso / error / info */
    --success:        #22c55e;
    --success-text:   #15803d;
    --success-bg:     #dcfce7;
    --success-border: #bbf7d0;
    --warn:           #f59e0b;
    --warn-text:      #b45309;
    --warn-bg:        #fffbeb;
    --warn-bg-alt:    #fef3c7;
    --warn-border:    #fde68a;
    --danger:         #dc2626;
    --danger-dark:    #b91c1c;
    --danger-bg:      #fef2f2;
    --danger-bg-alt:  #fee2e2;
    --danger-border:  #fecaca;
    --info-text:      #1d4ed8;
    --info-bg:        #dbeafe;
    /* Rotación de colores de avatar (README handoff) */
    --av-0: #6366f1; --av-1: #ec4899; --av-2: #14b8a6;
    --av-3: #0ea5e9; --av-4: #f59e0b; --av-5: #8b5cf6;
    /* Contexto de menú por rol (indicador de borde fino): rojo/índigo/verde */
    --nav-ctx-admin:  #dc2626;
    --nav-ctx-staff:  #4f46e5;
    --nav-ctx-member: #16a34a;
}

/* ── Dark Mode CSS variable overrides ───────────────────────────────────────── */
html.dark {
    --bg:             #0f172a;
    --bg-secondary:   #1e293b;
    --white:          #1e293b;
    --text:           #f1f5f9;
    --text-primary:   #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted:     #94a3b8;
    --text-aux:       #64748b;
    --border:         #334155;
    --shadow:         0 1px 2px rgba(0,0,0,.5), 0 8px 22px -6px rgba(0,0,0,.55);
    --shadow-md:      0 4px 16px rgba(0,0,0,.55);
    --shadow-lg:      0 12px 40px rgba(0,0,0,.6);
    /* Contexto de menú por rol — tonos ~400 más suaves en oscuro */
    --nav-ctx-admin:  #f87171;
    --nav-ctx-staff:  #818cf8;
    --nav-ctx-member: #4ade80;
}
html.dark .card,
html.dark .post-card,
html.dark .event-card,
html.dark .lesson-card,
html.dark .form-card { background: #1e293b; border-color: #334155; }
html.dark .navbar,
html.dark .sub-nav   { background: #1e293b; border-color: #334155; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.65;
    font-size: 15px;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--primary-dark); }

img { max-width: 100%; display: block; }

/* ── Top Navbar ──────────────────────────────────────────────────────────── */
.navbar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    height: 58px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 200;
    gap: 16px;
}

.navbar-brand {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    flex-shrink: 0;
}

.navbar-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.navbar-user strong { color: var(--text); }

.btn-link {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 4px 8px;
    border-radius: 6px;
    text-decoration: none;
}
.btn-link:hover { background: var(--bg); color: var(--text); text-decoration: none; }

/* Layout/sidebars/nav-menu legacy eliminados (shell usa grid de Tailwind). */

/* ── Card ────────────────────────────────────────────────────────────────── */
.card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow);
}

.card-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* ── User Profile Card ───────────────────────────────────────────────────── */
.profile-card {
    text-align: center;
    padding: 20px 16px;
}

.avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 1.3rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(99,102,241,.12), 0 2px 6px -1px rgba(17,24,39,.12);
    overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.avatar-sm { width: 32px; height: 32px; font-size: 0.8rem; }
.avatar-xs { width: 24px; height: 24px; font-size: 0.65rem; }

.profile-name { font-weight: 600; font-size: 0.95rem; }
.profile-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }

.level-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    margin-top: 6px;
    color: #fff;
}

.points-bar-wrap { margin-top: 10px; }
.points-bar-label { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 4px; display: flex; justify-content: space-between; }
.points-bar { height: 6px; background: var(--border); border-radius: 4px; overflow: hidden; }
.points-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width .4s; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
/* Botones: definidos en tailwind/input.css (@layer components) para estar
   disponibles en TODAS las páginas (app, auth, classroom y about). */

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }

label { font-size: 0.875rem; font-weight: 500; }

/* Campos de formulario: base definida en tailwind/input.css (@layer base)
   para estar disponible en TODAS las páginas y con foco/estados elegantes. */

.form-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.875rem;
    margin-bottom: 16px;
}

.form-success {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.875rem;
    margin-bottom: 16px;
}

/* ── Auth Pages ──────────────────────────────────────────────────────────── */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--bg);
}

.auth-box {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 36px;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow-md);
}

.auth-logo { text-align: center; margin-bottom: 24px; }
.auth-logo h1 { font-size: 1.6rem; color: var(--primary); font-weight: 800; }
.auth-logo p { color: var(--text-muted); font-size: 0.875rem; margin-top: 4px; }
.auth-footer { text-align: center; margin-top: 20px; font-size: 0.875rem; color: var(--text-muted); }

/* ── Post Card ───────────────────────────────────────────────────────────── */
.post-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow);
    margin-bottom: 12px;
    transition: border-color .15s, box-shadow .2s, transform .2s;
}
.post-card:hover { border-color: #cbd5e1; box-shadow: var(--shadow-md); transform: translateY(-2px); }

.post-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.post-author-name { font-weight: 600; font-size: 0.875rem; }
.post-time { color: var(--text-muted); font-size: 0.78rem; margin-left: auto; }

.category-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.cat-general   { background: #e0f2fe; color: #0369a1; }
.cat-anuncios  { background: #fef3c7; color: #92400e; }
.cat-preguntas { background: #ede9fe; color: #6d28d9; }
.cat-logros    { background: #d1fae5; color: #065f46; }

.post-title { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.post-title a { color: var(--text); }
.post-title a:hover { color: var(--primary); text-decoration: none; }

.post-content { color: #374151; font-size: 0.9rem; line-height: 1.65; }
.post-content-preview {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Quill-rendered HTML inside posts and comments */
.quill-content p     { margin: 0 0 0.5em; }
.quill-content p:last-child { margin-bottom: 0; }
.quill-content ul, .quill-content ol { margin: 0.4em 0 0.4em 1.4em; padding: 0; }
.quill-content li    { margin-bottom: 2px; }
.quill-content blockquote {
    border-left: 3px solid var(--primary);
    padding-left: 10px;
    margin: 6px 0;
    color: var(--text-muted);
    font-style: italic;
}
.quill-content a     { color: var(--primary); text-decoration: underline; }
.quill-content strong { font-weight: 700; }
.quill-content em    { font-style: italic; }
.quill-content pre   { background: #f3f4f6; border-radius: 4px; padding: 8px 12px; font-size: 0.82rem; overflow-x: auto; }

/* Override Quill Snow theme border inside forms */
#quill-post-editor .ql-container,
#quill-comment-editor .ql-container { border-color: #d1d5db; border-radius: 0 0 4px 4px; }
#quill-post-editor .ql-toolbar,
#quill-comment-editor .ql-toolbar  { border-color: #d1d5db; border-radius: 4px 4px 0 0; }

/* Editores Quill en modo oscuro: los contenedores tienen background:#fff inline
   y Quill Snow trae toolbar/borde claros → cajas blancas en dark. Se oscurecen
   el fondo (con !important por el inline), bordes, texto, placeholder e iconos. */
html.dark #quill-post-editor,
html.dark #quill-edit-editor,
html.dark #quill-comment-editor,
html.dark .quill-reply-editor { background: #111827 !important; border-color: #374151 !important; }
html.dark .ql-toolbar.ql-snow { background: #1f2937; border-color: #374151 !important; }
html.dark .ql-container.ql-snow { border-color: #374151 !important; color: #e5e7eb; }
html.dark .ql-editor { color: #e5e7eb; }
html.dark .ql-editor.ql-blank::before { color: #9ca3af; }
html.dark .ql-snow .ql-stroke { stroke: #cbd5e1; }
html.dark .ql-snow .ql-fill { fill: #cbd5e1; }
html.dark .ql-snow .ql-picker-label,
html.dark .ql-snow .ql-picker { color: #cbd5e1; }
html.dark .ql-snow .ql-picker-options { background: #1f2937; border-color: #374151; }

.post-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* ── Like Button ─────────────────────────────────────────────────────────── */
.like-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    padding: 5px 12px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: all .2s;
    font-family: inherit;
}
.like-btn:hover { border-color: #f87171; color: #dc2626; }
.like-btn.liked  { border-color: #f87171; background: #fef2f2; color: #dc2626; }
.like-btn svg { width: 14px; height: 14px; }

.comment-count-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 20px;
}
.comment-count-btn:hover { background: var(--bg); color: var(--text); text-decoration: none; }

/* ── Create Post Form ────────────────────────────────────────────────────── */
.create-post-card { margin-bottom: 16px; }
.create-post-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.create-post-input-fake {
    flex: 1;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.875rem;
    color: var(--text-muted);
}
.create-post-input-fake:hover { border-color: var(--primary); }

#create-post-form { display: none; margin-top: 14px; }
#create-post-form.open { display: block; }

/* ── Comments ────────────────────────────────────────────────────────────── */
.comments-section { margin-top: 20px; }
.comments-title { font-weight: 700; margin-bottom: 14px; font-size: 0.95rem; }

.comment {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}
.comment-body { flex: 1; }
.comment-bubble {
    background: var(--bg-secondary);
    border: 1px solid var(--bg);
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 0.875rem;
    line-height: 1.55;
}
.comment-author { font-weight: 600; font-size: 0.8rem; margin-bottom: 2px; }
.comment-meta { font-size: 0.72rem; color: var(--text-muted); margin-top: 5px; display: flex; gap: 10px; }
.reply-toggle { cursor: pointer; color: var(--primary); background: none; border: none; font-size: 0.72rem; font-family: inherit; }
.reply-toggle:hover { text-decoration: underline; }

.comment-replies { margin-left: 42px; margin-top: 10px; }
/* Movil: reducir la sangria de comentarios anidados para no perder ancho a 320px (auditoria movil #8) */
@media (max-width: 767.98px) { .comment-replies { margin-left: 16px; } }

.reply-form { margin-top: 8px; display: none; }
.reply-form.open { display: flex; gap: 8px; }
.reply-input { flex: 1; }

.add-comment-form { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; }
.add-comment-form textarea { min-height: 60px; }

/* ── Leaderboard ─────────────────────────────────────────────────────────── */
.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.82rem;
}
.leaderboard-item:last-child { border-bottom: none; }
.lb-rank { width: 18px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; text-align: center; }
.lb-name { flex: 1; font-weight: 500; }
.lb-pts  { color: var(--primary); font-weight: 600; }

/* ── Upcoming Events (sidebar) ───────────────────────────────────────────── */
.event-item { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.82rem; }
.event-item:last-child { border-bottom: none; }
.event-item-date { font-size: 0.72rem; color: var(--text-muted); }
.event-item-title { font-weight: 600; margin-top: 1px; }

/* ── Classroom ───────────────────────────────────────────────────────────── */
.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.course-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.course-card.locked { opacity: .7; }

.course-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: var(--primary-light);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
}

.course-title { font-weight: 700; font-size: 0.95rem; }
.course-desc  { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; flex: 1; }

.lock-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    background: #f3f4f6;
    color: #6b7280;
    width: fit-content;
}

/* ── Lesson Player ───────────────────────────────────────────────────────── */
.classroom-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 500px;
    box-shadow: var(--shadow);
}

.lesson-sidebar {
    border-right: 1px solid var(--border);
    overflow-y: auto;
    max-height: 80vh;
}

.lesson-sidebar-header {
    padding: 16px;
    font-weight: 700;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    position: sticky; top: 0;
}

.module-group { border-bottom: 1px solid var(--border); }
.module-title { padding: 10px 16px; font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }

.lesson-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px 9px 24px;
    font-size: 0.85rem;
    color: var(--text);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background .15s;
}
.lesson-link:hover { background: var(--bg); text-decoration: none; }
.lesson-link.active { border-left-color: var(--primary); background: var(--primary-light); color: var(--primary); font-weight: 600; }

.lesson-main { padding: 24px; overflow-y: auto; }
.lesson-main h1 { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 16px; }

.video-wrapper {
    position: relative;
    padding-top: 56.25%;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    margin-bottom: 20px;
}
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

.lesson-content { font-size: 0.9rem; line-height: 1.75; color: #374151; }
/* Contraste en modo oscuro para el texto enriquecido (lección, posts, comentarios) */
html.dark .lesson-content,
html.dark .post-content,
html.dark .quill-content,
html.dark .comment-body { color: #cbd5e1; }

/* ── Events ──────────────────────────────────────────────────────────────── */
.event-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    align-items: flex-start;
}

.event-date-block {
    flex-shrink: 0;
    text-align: center;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 10px;
    padding: 10px 14px;
    min-width: 58px;
}
.event-date-day   { font-size: 1.4rem; font-weight: 800; line-height: 1; }
.event-date-month { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; }

.event-info { flex: 1; }
.event-title { font-weight: 700; margin-bottom: 4px; }
.event-desc  { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 10px; }
.event-time  { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 8px; }

/* ── Page Header ─────────────────────────────────────────────────────────── */
.page-header { margin-bottom: 16px; }
.page-header h1 { font-size: 1.25rem; font-weight: 800; }
.page-header p  { font-size: 0.875rem; color: var(--text-muted); margin-top: 2px; }

/* ── Sort Bar ────────────────────────────────────────────────────────────── */
.sort-bar { display: flex; gap: 6px; margin-bottom: 14px; }
.sort-btn {
    padding: 5px 14px; border-radius: 20px; font-size: 0.8rem; font-weight: 600;
    cursor: pointer; border: 1.5px solid var(--border); background: var(--white); color: var(--text-muted);
    text-decoration: none;
}
.sort-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.sort-btn:hover { text-decoration: none; border-color: var(--primary); color: var(--primary); }
.sort-btn.active:hover { color: #fff; }

/* Navbar-search legacy eliminado (la busqueda vive en el header de Tailwind). */

/* ── Filter Toolbar (feed) ───────────────────────────────────────────────────── */
.filter-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
    align-items: center;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}

/* ── Pagination ──────────────────────────────────────────────────────────────── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 20px;
    padding: 12px 0;
}

.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--white);
    text-decoration: none;
    transition: all .15s;
}
.page-btn:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.page-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* ── Search Results ──────────────────────────────────────────────────────────── */
.search-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin: 20px 0 10px;
}

.search-comment-card { margin-bottom: 10px; }
.search-lesson-card  { margin-bottom: 10px; }

.search-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0;
}

.search-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
}
.search-tab:hover { color: var(--text); text-decoration: none; }
.search-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.search-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 6px;
    min-width: 20px;
}
.search-tab.active .search-tab-badge { background: var(--primary-light); border-color: var(--primary-light); color: var(--primary); }

.search-see-all {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
    margin-left: auto;
}
.search-see-all:hover { text-decoration: underline; }

.search-section-title {
    display: flex;
    align-items: center;
}

/* ── Profile Page ────────────────────────────────────────────────────────────── */
.profile-header-card { margin-bottom: 16px; }

.profile-hero {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.profile-avatar {
    width: 72px;
    height: 72px;
    font-size: 1.8rem;
    flex-shrink: 0;
}

.profile-hero-info { flex: 1; }
.profile-hero-name { font-size: 1.3rem; font-weight: 800; margin-bottom: 2px; }

.profile-points-bar-wrap { margin-top: 12px; max-width: 340px; }

.profile-stats {
    display: flex;
    gap: 0;
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

.stat-item {
    flex: 1;
    text-align: center;
    padding: 4px 0;
    border-right: 1px solid var(--border);
}
.stat-item:last-child { border-right: none; }

.stat-value { font-size: 1.3rem; font-weight: 800; color: var(--primary); line-height: 1.2; }
.stat-label { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }

/* ── Post author link ────────────────────────────────────────────────────────── */
.post-author-link { color: var(--text); text-decoration: none; }
.post-author-link:hover { color: var(--primary); text-decoration: none; }

.lb-name { color: var(--text); text-decoration: none; }
.lb-name:hover { color: var(--primary); text-decoration: underline; }

/* ── Admin Panel ─────────────────────────────────────────────────────────── */
.admin-bar {
    display: flex;
    gap: 4px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.admin-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 7px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.admin-tab:hover { background: var(--bg); color: var(--text); text-decoration: none; }
.admin-tab.active { background: var(--primary-light); color: var(--primary); }
/* En dark, --primary-light es claro → caja brillante. Se usa un realce translúcido. */
html.dark .admin-tab.active { background: rgba(99, 102, 241, 0.20); color: #a5b4fc; }

/* Fondos claros hardcodeados inline (p.ej. admin/email_templates: card morado y
   chips <code>) → cajas brillantes en dark. Se anulan por selector de atributo. */
html.dark [style*="background:#faf5ff"] { background: #2e1065 !important; border-color: #5b21b6 !important; }
html.dark [style*="background:#eef2ff"] { background: rgba(99, 102, 241, 0.18) !important; color: #c7d2fe !important; }
html.dark [style*="background:#f3f4f6"] { background: #374151 !important; color: #e5e7eb !important; }
/* Rojo de peligro inline (#dc2626 red-600) tiene poco contraste en dark; se aclara
   a red-400, igual que el patrón dark:text-red-400 ya usado en clases Tailwind. */
html.dark [style*="color:#dc2626"] { color: #f87171 !important; }
/* Grises/rojos claros de la paleta usados inline (gray-50, gray-700 texto, red-50). */
html.dark [style*="background:#f9fafb"] { background: #1f2937 !important; border-color: #374151 !important; }
html.dark [style*="color:#374151"] { color: #d1d5db !important; }
html.dark [style*="background:#fef2f2"] { background: rgba(220, 38, 38, 0.15) !important; border-color: #7f1d1d !important; }
/* Iconos/badges de clase con fondos claros (classroom). */
html.dark .course-icon { background: rgba(99, 102, 241, 0.18); }
html.dark .lock-badge { background: #374151; color: #d1d5db; }
/* Chip sky inline (admin/lessons "Embed"). */
html.dark [style*="background:#e0f2fe"] { background: rgba(2, 132, 199, 0.20) !important; color: #7dd3fc !important; }
/* Cajas de aviso amarillas (Tailwind bg-yellow-50 sin variante dark en el build). */
html.dark .bg-yellow-50 { background: rgba(234, 179, 8, 0.12) !important; }
html.dark .border-yellow-200 { border-color: rgba(234, 179, 8, 0.35) !important; }
html.dark .text-yellow-700 { color: #fde047 !important; }

.admin-table-wrap { overflow-x: auto; }

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.admin-table th {
    text-align: left;
    padding: 8px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    border-bottom: 1.5px solid var(--border);
    background: var(--bg);
}
.admin-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--bg); }

/* ── Course Progress Bar ─────────────────────────────────────────────────── */
.course-progress { margin-top: 8px; }
.course-progress-bar {
    height: 6px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
}
.course-progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 4px;
    transition: width .4s;
}
.course-progress-label { font-size: 0.72rem; color: var(--text-muted); }

/* ── Event Attendees ─────────────────────────────────────────────────────── */
.event-attendees {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.event-attendee-count { font-size: 0.78rem; color: var(--text-muted); margin-left: 4px; }
.rsvp-group { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

/* ── Notification Bell ───────────────────────────────────────────────────── */
.notif-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    flex-shrink: 0;
}
.notif-bell:hover { background: var(--bg); }

.notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #dc2626;
    color: #fff;
    border-radius: 20px;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 4px;
    min-width: 16px;
    text-align: center;
    line-height: 1.4;
    pointer-events: none;
}

.notif-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    z-index: 500;
    overflow: hidden;
}
.notif-dropdown.open { display: block; }

.notif-header {
    padding: 12px 16px;
    font-weight: 700;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.notif-footer {
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    background: var(--bg);
}

#notif-list { max-height: 340px; overflow-y: auto; }

.notif-item {
    border-bottom: 1px solid var(--border);
    transition: background .15s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg); }
.notif-unread { background: var(--primary-light, #eef2ff); }
.notif-unread:hover { background: var(--primary-tint, #e0e7ff); }

.notif-item-inner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
}

/* ── Conversation List ───────────────────────────────────────────────────── */
.conv-row { color: var(--text); transition: background .15s; }
.conv-row:hover { background: var(--bg); text-decoration: none; }
.conv-unread { background: var(--primary-light, #eef2ff); }
.conv-unread:hover { background: var(--primary-tint, #e0e7ff); }

/* ── Chat Bubbles ────────────────────────────────────────────────────────── */
.chat-msg { display: flex; flex-direction: column; max-width: 72%; }
.chat-msg-mine { align-self: flex-end; align-items: flex-end; }
.chat-msg-theirs { align-self: flex-start; align-items: flex-start; }

.chat-msg-name { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 3px; }

.chat-bubble {
    padding: 9px 14px;
    border-radius: 16px;
    font-size: 0.875rem;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}
.chat-msg-mine   .chat-bubble { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg-theirs .chat-bubble { background: var(--bg); color: var(--text); border-bottom-left-radius: 4px; border: 1px solid var(--border); }

.chat-msg-time { font-size: 0.68rem; color: var(--text-muted); margin-top: 3px; }

/* Responsive legacy eliminado: la capa movil vive en los @media 767/768 mas abajo. */

/* -- Phase 4: Pin, video embed, mentions ------------------------------------ */
.post-pinned { border-left: 3px solid var(--primary) !important; }
.video-embed-wrap { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:8px; margin:10px 0; }
.video-embed-wrap iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; }
.mention-link { color: var(--primary); font-weight:600; text-decoration:none; }
.mention-link:hover { text-decoration:underline; }

/* ── Fase 0: Toasts ────────────────────────────────────────────────────────── */
#toast-container {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(360px, calc(100vw - 40px));
}
.toast {
    background: #1f2937;
    color: #fff;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.875rem;
    line-height: 1.35;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease;
    border-left: 4px solid #6b7280;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-success { border-left-color: #16a34a; }
.toast-error   { border-left-color: #dc2626; }
.toast-info    { border-left-color: var(--primary); }

/* ── Fase 1: Imágenes en posts + estado editado ───────────────────────────── */
.post-image {
    max-width: 100%;
    border-radius: 8px;
    margin: 10px 0;
    display: block;
    border: 1px solid var(--border);
}
.post-edited { font-size: 0.7rem; color: var(--text-muted); font-style: italic; margin-left: 6px; }

/* Botones de acción del autor (editar/eliminar) */
.owner-actions { display: inline-flex; gap: 4px; }
.owner-actions form { display: inline; margin: 0; }

/* ── Fase 2: Estados vacíos ───────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 48px 24px; color: var(--text-muted); }
.empty-state-icon {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--bg, #f1f5f9); border: 1px solid var(--border, #e2e8f0);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; margin: 0 auto 14px;
}
html.dark .empty-state-icon { background: #334155; border-color: #475569; }
.empty-state-title { font-weight: 700; color: var(--text); margin-bottom: 6px; }
.empty-state-text { font-size: 0.9rem; margin-bottom: 16px; }

/* ── Fase 3: Guardar y reacciones ─────────────────────────────────────────── */
.save-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.78rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all .15s;
}
.save-btn:hover { border-color: var(--primary); color: var(--primary); }
.save-btn.saved { background: var(--primary-light); border-color: var(--primary); color: var(--primary); font-weight: 600; }

.reaction-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 3px 10px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all .15s;
}
.reaction-btn:hover { border-color: var(--primary); transform: translateY(-1px); }
.reaction-btn.active { background: var(--primary-light); border-color: var(--primary); }
.reaction-btn .re-count { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; }
.reaction-btn.active .re-count { color: var(--primary); }

/* ── Fase 4: Encuestas ────────────────────────────────────────────────────── */
.poll { margin: 14px 0; display: flex; flex-direction: column; gap: 8px; }
.poll-question { font-weight: 600; margin-bottom: 4px; }
.poll-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    min-height: 44px;
    cursor: pointer;
    overflow: hidden;
    font-size: 0.9rem;
    transition: border-color .15s;
}
.poll-option:hover { border-color: var(--primary); }
.poll-option.voted-mine { border-color: var(--primary); font-weight: 600; }
.poll-bar {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: var(--primary-light);
    z-index: 0;
    transition: width .4s ease;
}
.poll-opt-text, .poll-opt-pct { position: relative; z-index: 1; }
.poll-opt-pct { color: var(--text-muted); font-size: 0.8rem; font-weight: 600; }
.poll-total { font-size: 0.78rem; color: var(--text-muted); }

/* ── Fase 5: Tarjeta de bienvenida (onboarding) ───────────────────────────── */
.welcome-card { border-left: 4px solid var(--primary); background: linear-gradient(135deg, var(--primary-light), var(--white)); }
html.dark .welcome-card { background: #1f2937; }

/* =====================================================================
   CAPA MOVIL (plan ROADMAP_MOBILE)
   Reglas base seguras + bloques @media para usabilidad y estructura.
   ===================================================================== */

/* Base anti-desborde (segura en todos los tamanos) */
img, svg, video, iframe { max-width: 100%; }
.post-content, .comment-body, .comment-bubble, .quill-content,
.post-title, .chat-bubble, .page-header p { overflow-wrap: anywhere; }
/* code/pre con tokens largos sin espacios (rutas API, claves, secretos) rompen
   para no forzar el ancho del contenedor por min-content en móvil */
code, pre, .font-mono { overflow-wrap: anywhere; }
main, .card, .post-card, .post-meta, .post-body, .comment, .comment-body { min-width: 0; }

/* Drawer del community-switcher (oculto en escritorio) */
#cs-hamburger { display: none; }
#cs-backdrop  { display: none; }

/* La barra lateral izquierda (rail de 68px) solo hace scroll VERTICAL cuando su
 * contenido supera el alto; NUNCA horizontal aunque un hijo intente forzar el
 * ancho (arregla #7 iter4). */
#community-switcher { overflow-x: hidden; overflow-y: auto; }
#community-switcher > * { max-width: 100%; min-width: 0; }

/* about (iter4): contenedor flex de las secciones de marketing editables, para
 * que el reordenado (order) surta efecto tanto en edición como en el render
 * guardado. Apilado vertical idéntico al original; hero y checkout van fuera. */
.about-editzone { display: flex; flex-direction: column; }

@media (max-width: 767.98px) {
    body { padding-left: 0 !important; }            /* anula pl-[68px] de Tailwind */
    #community-switcher {
        transform: translateX(-100%);
        transition: transform .22s ease;
        z-index: 60;                 /* por encima de la topbar (z-50) al abrirse */
    }
    #community-switcher.is-open {
        transform: translateX(0);
        box-shadow: 0 0 40px rgba(0,0,0,.35);
    }
    #cs-backdrop {
        position: fixed; inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 58;                 /* tapa el contenido, bajo el drawer */
    }
    #cs-backdrop.is-open { display: block; }
    #cs-hamburger {
        display: inline-flex;
        align-items: center; justify-content: center;
        width: 40px; height: 40px;
        border: none; background: transparent; cursor: pointer;
        color: #4b5563; border-radius: 8px;
    }
    #cs-hamburger:hover { background: #f3f4f6; }
    #cs-close { display: inline-flex !important; }   /* botón cerrar dentro del drawer */
}

/* Reglas moviles generales */
@media (max-width: 767.98px) {
    .page-header h1 { font-size: 1.4rem; }
    .page-header p  { font-size: 0.9rem; }

    .card, .post-card { padding: 14px; }
    .post-meta   { flex-wrap: wrap; gap: 4px 8px; }
    .post-actions, .owner-actions, .reaction-bar { flex-wrap: wrap; gap: 6px; }
    .filter-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
    .filter-bar { margin-left: 0; flex-wrap: wrap; }
    .sort-bar   { flex-wrap: wrap; }

    /* Formularios sin zoom de iOS (>=16px). !important para ganar a estilos inline. */
    input, select, textarea { font-size: 16px !important; }
    .form-group input, .form-group select, .form-group textarea,
    .form-card input, .form-card select, .form-card textarea { width: 100%; }

    .ql-toolbar.ql-snow { flex-wrap: wrap; }
    .ql-toolbar .ql-formats { margin-right: 8px; }

    /* Tooltip de enlace de Quill: Quill lo posiciona al cursor con white-space:nowrap
       y puede salirse del viewport en móvil. Se fija a la izquierda y se acota.
       !important porque quill.snow.css (.ql-snow .ql-tooltip) tiene más especificidad
       y carga después de style.css. */
    .ql-snow .ql-tooltip { max-width: calc(100vw - 40px) !important; white-space: normal !important; z-index: 60; }
    .ql-snow .ql-tooltip:not(.ql-hidden) { left: 8px !important; }
    .ql-snow .ql-tooltip input[type=text] { max-width: 55vw; }

    .classroom-layout { grid-template-columns: 1fr; }
    .lesson-sidebar {
        max-height: 240px; overflow-y: auto;
        border-right: none; border-bottom: 1px solid var(--border);
    }

    aside.sticky { position: static !important; top: auto !important; }

    .search-tabs { flex-wrap: wrap; }

    /* El dropdown de notificaciones se anclaba con right:0 a la campana (que no
       está en el borde), y sus 320px se salían por la izquierda (título recortado).
       En móvil se fija al viewport, pegado al borde derecho y bajo el header. */
    #notif-dropdown {
        position: fixed;
        top: 62px;
        right: 8px;
        left: auto;
        margin-top: 0;
        width: min(340px, calc(100vw - 16px));
        max-height: calc(100dvh - 76px);
        overflow-y: auto;
    }

    /* Dropdowns <details> con form absoluto (Editar evento/curso/módulo/lección):
       con right-0 y el summary apilado a la izquierda en móvil, se salían de
       pantalla. Se anclan a la izquierda y se acotan al viewport. Cubre w-64/72/80. */
    details > form.absolute {
        right: auto !important;
        left: 0 !important;
        max-width: calc(100vw - 40px) !important;
    }

    #toast-container { left: 12px; right: 12px; bottom: 12px; max-width: none; }

    .profile-hero { flex-direction: column; align-items: center; text-align: center; }
    .profile-points-bar-wrap { max-width: 100%; }

    /* TABLAS: scroll horizontal contenido (no desborda la pagina) */
    table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

/* Mensajeria: el chat usa el alto real del movil (dvh, no vh) */
@media (max-width: 767.98px) {
    #chat-shell { height: calc(100dvh - 116px); }
    #chat-input { font-size: 16px !important; }
}

/* -- EJE C · Mensajes mobile-first: targets táctiles ≥44px, burbujas sin desborde --
   Aditivo: todo dentro del @media móvil, cero impacto en escritorio. El zoom de iOS
   ya lo cubre la regla global input,select,textarea{font-size:16px} de más arriba. */
@media (max-width: 767.98px) {
    /* Flecha «volver a mensajes»: era un <a> pelado (~19px) -> zona táctil WCAG 2.5.5. */
    .chat-back { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    /* Cada fila de conversación es un objetivo táctil cómodo. */
    .conv-row { min-height: 44px; }
    /* Botón de enviar del hilo: refuerzo del ≥44px (además de la regla .btn global). */
    #chat-form .btn { min-height: 44px; }
    /* Las burbujas aprovechan el ancho del móvil sin provocar scroll horizontal. */
    .chat-msg { max-width: 85%; }
    .chat-bubble { max-width: 100%; }
}

/* Pulido: foco visible y areas seguras (notch) */
@media (max-width: 767.98px) {
    a:focus-visible, button:focus-visible, input:focus-visible,
    select:focus-visible, textarea:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }
    #community-switcher { padding-top: max(12px, env(safe-area-inset-top)); }
}

/* ===== Fase 1 usabilidad: bottom nav movil, foco global, areas tactiles ===== */

/* Foco visible en TODOS los tamanos (accesibilidad de teclado tambien en escritorio) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Barra inferior tipo app (solo movil, dentro de una comunidad) */
.bottom-nav { display: none; }
@media (max-width: 767.98px) {
    .bottom-nav {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
        background: rgba(255,255,255,.82);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
        border-top: 1px solid var(--border);
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -4px 16px -4px rgba(17,24,39,.12);
    }
    html.dark .bottom-nav { background: rgba(31,41,55,.85); border-color: #374151; }
    .bottom-nav a, .bottom-nav button {
        flex: 1; display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 3px;
        min-height: 56px; padding: 6px 0;
        font-size: 0.66rem; color: var(--text-muted); text-decoration: none;
        transition: color .15s ease;
        background: none; border: 0; font-family: inherit; cursor: pointer;
    }
    .bottom-nav a.active, .bottom-nav button.active { color: var(--primary); font-weight: 600; }
    .bottom-nav .bn-ico {
        font-size: 1.2rem; line-height: 1;
        padding: 4px 14px; border-radius: 999px;
        transition: background-color .18s ease, transform .18s ease;
    }
    .bottom-nav a.active .bn-ico {
        background: var(--primary-light); transform: translateY(-1px);
    }
    html.dark .bottom-nav a.active .bn-ico { background: rgba(99,102,241,.22); }
    body.has-bottom-nav { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }

    /* Areas tactiles de los iconos del header superior */
    #theme-toggle, #notif-toggle, #cs-hamburger, #lang-toggle {
        min-width: 44px; min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
    }
}

/* ===== Fase 2: drawer del temario en la leccion (movil) ===== */
.lesson-temario-btn { display: none; }
.lesson-drawer-backdrop { display: none; }
@media (max-width: 767.98px) {
    .lesson-temario-btn {
        display: inline-flex; align-items: center; gap: 6px;
        margin-bottom: 12px; padding: 10px 14px; min-height: 44px;
        background: var(--primary); color: #fff; border: none; border-radius: 10px;
        font-weight: 600; font-size: 0.9rem; cursor: pointer;
    }
    .classroom-layout { display: block; }            /* anula el grid en movil */
    #lesson-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
        width: min(82vw, 320px); height: 100dvh; max-height: none;
        background: #ffffff; overflow-y: auto;
        transform: translateX(-100%); transition: transform .22s ease;
        border-right: 1px solid var(--border); box-shadow: 0 0 40px rgba(0,0,0,.35);
        padding-top: max(12px, env(safe-area-inset-top));
    }
    html.dark #lesson-sidebar { background: #1f2937; }
    #lesson-sidebar.is-open { transform: translateX(0); }
    .lesson-drawer-backdrop.is-open {
        display: block; position: fixed; inset: 0; z-index: 59; background: rgba(0,0,0,.45);
    }
}

/* ===== Fase 2: editor Quill mas comodo en movil ===== */
@media (max-width: 767.98px) {
    .ql-toolbar.ql-snow { padding: 4px; }
    .ql-toolbar.ql-snow button { width: 32px; height: 32px; }
    .ql-toolbar .ql-formats { margin-right: 6px !important; }
    .ql-container.ql-snow { font-size: 16px; }
}

/* ===== Fase 3: tablas como tarjetas en movil (set core) + pista de scroll ===== */
@media (max-width: 767.98px) {
    table.cards-mobile { display: block; width: 100%; white-space: normal; overflow: visible; }
    table.cards-mobile thead { display: none; }
    table.cards-mobile tbody { display: block; }
    table.cards-mobile tr {
        display: block; border: 1px solid var(--border); border-radius: 12px;
        padding: 8px 12px; margin-bottom: 10px; background: #ffffff;
    }
    html.dark table.cards-mobile tr { background: #1f2937; }
    table.cards-mobile td {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 6px 0 !important; border: none !important; text-align: right; width: auto;
    }
    table.cards-mobile td::before {
        content: attr(data-label); font-weight: 600; color: var(--text-muted);
        text-align: left; flex: 0 0 38%; white-space: nowrap;
    }
    table.cards-mobile td:not([data-label]) { justify-content: flex-start; }

    /* Pista de scroll en tablas anchas NO convertidas */
    .admin-table-wrap { position: relative; }
    .admin-table-wrap::after {
        content: "\2192 desliza para ver mas";
        display: block; font-size: 0.7rem; color: var(--text-muted);
        padding: 4px 2px 0; text-align: right;
    }
    .admin-table-wrap:has(table.cards-mobile)::after { display: none; }
}

/* ===== Fase 4: accesibilidad y pulido ===== */
/* Legibilidad del texto blanco de los badges sobre colores claros */
.level-badge { text-shadow: 0 1px 1.5px rgba(0,0,0,.4); }
/* Estado deshabilitado/cargando coherente en todos los botones */
.btn:disabled, .btn[disabled], button:disabled, button[disabled] {
    opacity: .6; cursor: not-allowed; pointer-events: none;
}
[aria-busy="true"] { cursor: progress; opacity: .8; }


/* FAB de instalar PWA: no tapar la bottom-nav en móvil */
.pwa-install-fab { bottom: 16px; }
@media (max-width: 767.98px) {
    body.has-bottom-nav .pwa-install-fab { bottom: calc(70px + env(safe-area-inset-bottom)); }
}

/* ===== Fase 7: red de seguridad para grids inline (paneles admin) =====
   Muchas vistas admin usan style="display:grid;grid-template-columns:..." con
   columnas fijas que no colapsan y desbordan a <768px. Al ser estilos inline,
   solo se pueden anular con !important. Se apilan a una columna en móvil:
   formularios (label+input alineados) y KPIs quedan legibles y sin scroll horiz. */
@media (max-width: 767.98px) {
    [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* ===== Fase 7: modales/overlays con scroll vertical seguro en móvil =====
   Backdrops fijos centrados (fixed inset-0 flex items-center) recortan
   formularios altos en pantallas cortas. Se permite scroll y se alinea arriba. */
@media (max-width: 767.98px) {
    .fixed.inset-0.flex.items-center { align-items: flex-start !important; overflow-y: auto; }
    .fixed.inset-0.flex.items-center > * { margin-top: 1rem; margin-bottom: 1rem; max-height: calc(100dvh - 2rem); overflow-y: auto; }
}

/* ===== Fase 7: cabeceras flex (.page-header con display:flex inline) =====
   p.ej. admin/analytics: h1 + selector de período en una fila que no envuelve
   fuerza ~495px de ancho. flex-wrap no está inline, así que CSS puede activarlo
   sin !important. Envuelve la cabecera y sus filas de controles en móvil. */
@media (max-width: 767.98px) {
    .page-header { flex-wrap: wrap; gap: 8px 12px; }
    .page-header > div { flex-wrap: wrap; }
}

/* ===== Fase 7: inputs de archivo nativos no fuerzan ancho en móvil =====
   <input type="file"> tiene un min-content grande ("Seleccionar archivo / Ningún
   archivo…") que empuja la celda de grid/flex por encima de 360px. min-width:0 +
   max-width:100% permite que la tarjeta contenedora se encoja al viewport. */
@media (max-width: 767.98px) {
    input[type="file"] { max-width: 100%; min-width: 0; }
}

/* ===== Fase 7: pantallas muy pequeñas (<360px, p.ej. iPhone SE 2016) =====
   El shell global (header superior + wrapper de contenido) deja poco ancho útil
   a 320px y provoca shrink-to-fit. Solo por debajo de 360px (no afecta al baseline
   de 360) se compacta el padding/gap del header y del contenedor para recuperar
   espacio. Reclama ~24px: 4 de 5 vistas densas pasan a caber en 320px. */
@media (max-width: 359.98px) {
    .max-w-7xl.my-6 { padding-left: 8px !important; padding-right: 8px !important; }
    header.max-w-7xl { padding-left: 8px !important; padding-right: 8px !important; column-gap: 8px !important; }
    header.max-w-7xl a.text-xl { max-width: 34vw !important; }
    header.max-w-7xl .border-l.pl-4 { padding-left: 8px !important; }
}

/* ===== Fase 7: meta de comentarios envuelve como filas en móvil =====
   .comment-meta es flex sin wrap; con 6 acciones (hora, editado, like, Responder,
   Editar, Eliminar) en una respuesta anidada estrecha, cada ítem se apretaba y
   partía sus palabras a mitad ("Respo/nder"). Se envuelve por filas y cada acción
   se mantiene entera. */
@media (max-width: 767.98px) {
    .comment-meta { flex-wrap: wrap; gap: 6px 12px; }
    .comment-meta > * { white-space: nowrap; }
}

/* ===== Fase 7: objetivos táctiles cómodos en móvil (WCAG 2.5.5, ≥44px) =====
   Botones y filtros quedaban en 28–32px de alto. En móvil se garantiza una zona
   táctil cómoda sin cambiar el aspecto (padding/anchura intactos, solo min-height).
   Se excluyen los botones de la toolbar de Quill (ya dimensionados a 32px aparte). */
@media (max-width: 767.98px) {
    /* .btn-sm reduce el min-height de .btn a ~32px; en móvil se restaura a 44px.
       !important porque tailwind.build.css carga después de style.css. .btn ya es
       inline-flex centrado, así que solo hace falta el min-height. */
    .btn { min-height: 44px !important; }
    .sort-btn { min-height: 42px; }
    /* Acciones compactas de tarjeta (Editar/Borrar/Gestionar) y tabs de panel */
    .admin-tab, .filter-bar a, .filter-bar button { min-height: 40px; }
    /* Enlaces de pie: zona táctil mayor sin separar en exceso la lista */
    footer a { display: inline-block; padding-top: 5px; padding-bottom: 5px; }
    /* Enlaces "ver más" de las tarjetas del sidebar (leaderboard / eventos) */
    aside a.block { padding-top: 7px; padding-bottom: 7px; }
}

/* ===== Fase 7: botones de texto largo envuelven en móvil =====
   Botones como "Eliminar esta comunidad permanentemente" (.btn es inline-flex
   con white-space:nowrap) fuerzan el ancho del contenedor por min-content.
   !important porque tailwind.build.css se carga después de style.css y ganaría
   con igual especificidad. En móvil se permite envolver el texto. */
@media (max-width: 767.98px) {
    .btn { white-space: normal !important; }
}

/* ===== Fase 8: respeto a prefers-reduced-motion (accesibilidad) =====
   Usuarios con sensibilidad vestibular activan "reducir movimiento" en su SO.
   Se neutralizan animaciones y transiciones (los drawers/modales abren al
   instante en vez de deslizar; la funcionalidad se mantiene intacta). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== Fase 8: altura de viewport dinámica (dvh) para layouts a pantalla completa =====
   Los bodies con min-h-screen (100vh) incluyen la barra de URL del móvil, lo que
   descentra ligeramente el contenido centrado (páginas auth). body.min-h-screen
   (especificidad 0,1,1) gana a la clase .min-h-screen de Tailwind. @supports da
   fallback a 100vh donde dvh no exista. */
@supports (min-height: 100dvh) {
    body.min-h-screen { min-height: 100dvh; }
}

/* ── Nav de sección de la comunidad: hamburguesa SOLO en móvil ──────────────────
   El CSS de Tailwind está purgado y no siempre incluye md:hidden/md:flex para
   clases nuevas, así que forzamos el comportamiento responsive por ID. */
@media (min-width: 768px) {
    #community-nav { display: flex !important; }
    #community-nav-toggle { display: none !important; }
}
@media (max-width: 767.98px) {
    #community-nav:not(.hidden) { display: flex; }
}

/* ═══ F2 · Navegación de comunidad agrupada (acordeón) ═══════════════════════
   Grupos como <details>: en escritorio son desplegables (dropdown absoluto),
   en móvil se expanden en vertical. Uno abierto a la vez (JS en main.js). */
.nav-group { position: relative; }
.nav-group > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    color: var(--text-secondary, #475569);
    font-size: 14px; font-weight: 500; white-space: nowrap;
    padding: 7px 11px; border-radius: 9px;
    transition: background .15s, color .15s;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after {
    content: "▾"; font-size: 11px; opacity: .6; transition: transform .15s;
}
.nav-group[open] > summary::after { transform: rotate(180deg); }
.nav-group > summary:hover { background: var(--bg, #f1f5f9); color: var(--text, #0f172a); }
.nav-group.has-active > summary { color: var(--primary-dark, #4338ca); font-weight: 600; }
html.dark .nav-group > summary:hover { background: #334155; color: #f1f5f9; }
html.dark .nav-group.has-active > summary { color: #a5b4fc; }

.nav-group-panel { display: flex; flex-direction: column; gap: 2px; }
.nav-group-link {
    color: var(--text-secondary, #475569); text-decoration: none;
    font-size: 14px; font-weight: 500; white-space: nowrap;
    padding: 7px 11px; border-radius: 9px; transition: background .15s, color .15s;
    display: flex; align-items: center; gap: 8px;
}
.nav-group-link:hover { background: var(--bg, #f1f5f9); color: var(--text, #0f172a); text-decoration: none; }
.nav-group-link.active { background: var(--primary-light, #eef2ff); color: var(--primary-dark, #4338ca); font-weight: 600; }
html.dark .nav-group-link:hover { background: #334155; color: #f1f5f9; }
html.dark .nav-group-link.active { background: rgba(99,102,241,.2); color: #a5b4fc; }

@media (min-width: 768px) {
    #community-nav { overflow: visible; }
    .nav-group[open] > .nav-group-panel {
        position: absolute; top: calc(100% + 4px); left: 0; z-index: 50;
        min-width: 210px; padding: 6px;
        background: var(--card, #ffffff); border: 1px solid var(--border, #e2e8f0);
        border-radius: 12px; box-shadow: 0 10px 30px rgba(2, 6, 23, .12);
    }
    html.dark .nav-group[open] > .nav-group-panel {
        background: #1e293b; border-color: #334155; box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    }
}
@media (max-width: 767.98px) {
    #community-nav .nav-group, #community-nav .nav-group-panel { width: 100%; }
    .nav-group-panel { padding-left: 14px; }
}

/* ═══ Fase 1 del PLAN_MEJORA_UX ══════════════════════════════════════════════
   Navegación admin agrupada (.anav) + hoja "Más" del bottom-nav. */

/* ── Navegación admin agrupada ── */
.anav { margin-bottom: 16px; }
.anav-bar {
    display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 8px 12px;
}
.anav-back {
    font-size: 0.82rem; font-weight: 600; color: var(--text-muted);
    padding: 6px 10px; text-decoration: none; white-space: nowrap;
}
.anav-back:hover { color: var(--primary); text-decoration: none; }
.anav-sep { width: 1px; align-self: stretch; background: var(--border); margin: 2px 4px; }
.anav-item {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 7px;
    font-size: 0.82rem; font-weight: 600; color: var(--text-muted);
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background .15s, color .15s;
    list-style: none; user-select: none;
}
.anav-item:hover { background: var(--bg); color: var(--text); text-decoration: none; }
.anav-item.active { background: var(--primary-light); color: var(--primary); }
html.dark .anav-item.active { background: rgba(99, 102, 241, 0.20); color: #a5b4fc; }
.anav-group { position: relative; }
.anav-group > summary { list-style: none; }
.anav-group > summary::-webkit-details-marker { display: none; }
.anav-caret { font-size: 0.65em; opacity: .7; margin-left: 2px; }
.anav-group[open] .anav-caret { transform: rotate(180deg); }
.anav-dd {
    position: absolute; left: 0; top: calc(100% + 6px); min-width: 210px;
    background: var(--white); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: var(--shadow-md);
    padding: 6px; z-index: 60;
    display: flex; flex-direction: column; gap: 2px;
}
.anav-dd-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 7px;
    font-size: 0.85rem; font-weight: 500; color: var(--text);
    text-decoration: none;
}
.anav-dd-item:hover { background: var(--bg); text-decoration: none; }
.anav-dd-item.active { background: var(--primary-light); color: var(--primary); font-weight: 700; }
html.dark .anav-dd-item.active { background: rgba(99, 102, 241, 0.20); color: #a5b4fc; }
.anav-mobile { display: none; }
@media (max-width: 767.98px) {
    .anav-bar { display: none; }
    .anav-mobile { display: flex; gap: 8px; align-items: center; }
    .anav-mobile .anav-back {
        min-width: 44px; min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--white); border: 1px solid var(--border); border-radius: 10px;
    }
    .anav-select {
        flex: 1; width: 100%; min-height: 44px;
        background: var(--white); color: var(--text);
        border: 1px solid var(--border); border-radius: 10px;
        padding: 10px 12px; font-size: 16px; font-weight: 600;
    }
}

/* Eje C móvil — panel del creador (group_admin): navegación del panel y sus
   botones con zona táctil ≥44px (WCAG 2.5.5) y sin desbordamiento horizontal.
   Ámbito acotado a .ga-panel-nav (solo el panel de comunidad) para no afectar
   al panel de plataforma ni a otras zonas. Aditivo; sin regresión desktop. */
@media (max-width: 767.98px) {
    .ga-panel-nav { max-width: 100%; overflow-x: hidden; }
    .ga-panel-nav .anav-mobile { flex-wrap: wrap; row-gap: 8px; }
    .ga-panel-nav .anav-select {
        min-height: 44px; max-width: 100%;
    }
    .ga-panel-nav .anav-back {
        min-width: 44px; min-height: 44px;
    }
}

/* ── Hoja "Más" del bottom-nav (solo móvil) ── */
#bn-more-backdrop {
    position: fixed; inset: 0; z-index: 46;
    background: rgba(17, 24, 39, 0.45);
}
#bn-more-sheet {
    position: fixed; left: 0; right: 0; z-index: 47;
    bottom: calc(56px + env(safe-area-inset-bottom));
    background: var(--white);
    border-radius: 16px 16px 0 0;
    border: 1px solid var(--border); border-bottom: none;
    box-shadow: 0 -8px 30px -6px rgba(17, 24, 39, 0.25);
    padding: 10px 16px 16px;
    max-height: 65vh; overflow-y: auto;
}
#bn-more-sheet[hidden], #bn-more-backdrop[hidden] { display: none; }
.bn-sheet-handle {
    width: 40px; height: 4px; border-radius: 999px;
    background: var(--border); margin: 0 auto 12px;
}
.bn-sheet-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.bn-sheet-item {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 6px; border-radius: 12px; min-height: 44px;
    background: var(--bg); color: var(--text);
    font-size: 0.75rem; font-weight: 500; text-align: center;
    text-decoration: none;
}
.bn-sheet-item:hover { text-decoration: none; }
.bn-sheet-item.active { background: var(--primary-light); color: var(--primary); font-weight: 700; }
html.dark .bn-sheet-item.active { background: rgba(99, 102, 241, 0.22); color: #a5b4fc; }
.bn-sheet-ico { font-size: 1.3rem; line-height: 1; }
.bn-sheet-divider { border-top: 1px solid var(--border); margin: 12px 0; }
@media (min-width: 768px) {
    #bn-more-sheet, #bn-more-backdrop { display: none !important; }
}

/* ── Modal de entrada accesible (promptModal) ─────────────────────────────── */
.pm-overlay {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.45); padding: 16px;
    opacity: 0; transition: opacity .18s ease;
}
.pm-overlay.show { opacity: 1; }
.pm-box {
    background: var(--bg-card, #fff); color: var(--text, #111);
    border: 1px solid var(--border, #e5e7eb); border-radius: 14px;
    width: 100%; max-width: 440px; padding: 18px;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
    transform: translateY(8px) scale(.98); transition: transform .18s ease;
}
.pm-overlay.show .pm-box { transform: none; }
.pm-title { font-size: 1rem; font-weight: 700; margin: 0 0 10px; }
.pm-input {
    width: 100%; box-sizing: border-box; resize: vertical;
    border: 1px solid var(--border, #d1d5db); border-radius: 8px;
    background: var(--bg-secondary, #fff); color: inherit;
    padding: 8px 10px; font: inherit; font-size: .9rem;
}
.pm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* Accesibilidad: enlace "saltar al contenido" (WCAG 2.4.1 Bypass Blocks, nivel A).
   Oculto visualmente hasta recibir el foco por teclado (Tab), momento en que se
   muestra en la esquina superior izquierda. No depende de utilidades de Tailwind
   (not-sr-only no está en el CSS compilado). */
.skip-link {
    position: absolute;
    left: 8px;
    top: -60px;
    z-index: 1000;
    padding: 10px 16px;
    background: var(--primary, #6366f1);
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    font-size: .95rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    transition: top .15s ease-in-out;
}
.skip-link:focus {
    top: 8px;
    outline: 3px solid #fff;
    outline-offset: 2px;
    text-decoration: none;
}

/* Toggle mostrar/ocultar contrasena (accesible, progresivo desde main.js). */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { padding-right: 2.75rem !important; }
.pw-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    border-radius: 8px;
    line-height: 0;
}
.pw-toggle:hover { color: var(--primary, #6366f1); }
.pw-toggle:focus-visible { outline: 3px solid var(--primary, #6366f1); outline-offset: 2px; }
html.dark .pw-toggle { color: #94a3b8; }

/* ═══ Rediseño SaaS (docs/design_handoff_comevery_saas) — fundamentos ═══════
   Componentes compartidos del handoff. El build de Tailwind está purgado y no
   admite clases nuevas, así que todo componente nuevo vive aquí con tokens. */

::selection { background: var(--primary-tint, #e0e7ff); }

/* Kicker: 11–12px / 700 / uppercase / tracking 0.05em */
.kicker {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--text-aux, #94a3b8);
}

/* Título display y de sección (H2 30–32/800/-0.02em) */
.display-title { font-size: clamp(38px, 5vw, 56px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.section-title { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.card-heading  { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }

/* Esqueleto de carga (patrón del handoff: pulse 1.4s opacidad 1↔0.45) */
@keyframes ce-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.skeleton {
    background: var(--border, #e2e8f0);
    border-radius: 8px;
    animation: ce-pulse 1.4s ease-in-out infinite;
    color: transparent !important;
    pointer-events: none;
    min-height: 12px;
}
html.dark .skeleton { background: #334155; }

/* Chips / badges redondeados (radio full) */
.chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600; line-height: 1.6;
    background: var(--bg, #f1f5f9); color: var(--text-secondary, #475569);
    border: 1px solid var(--border, #e2e8f0);
}
.chip-indigo  { background: var(--primary-light, #eef2ff); color: var(--primary-dark, #4338ca); border-color: var(--primary-tint, #e0e7ff); }
.chip-success { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
.chip-warn    { background: var(--warn-bg-alt); color: var(--warn-text); border-color: var(--warn-border); }
.chip-danger  { background: var(--danger-bg-alt); color: var(--danger-dark); border-color: var(--danger-border); }
.chip-info    { background: var(--info-bg); color: var(--info-text); border-color: #bfdbfe; }
html.dark .chip-success { background: rgba(34,197,94,.15); color: #4ade80; border-color: rgba(34,197,94,.35); }
html.dark .chip-warn    { background: rgba(245,158,11,.15); color: #fbbf24; border-color: rgba(245,158,11,.35); }
html.dark .chip-danger  { background: rgba(220,38,38,.16); color: #f87171; border-color: rgba(220,38,38,.4); }
html.dark .chip-info    { background: rgba(29,78,216,.2); color: #93c5fd; border-color: rgba(29,78,216,.45); }
html.dark .chip-indigo  { background: rgba(99,102,241,.18); color: #a5b4fc; border-color: rgba(99,102,241,.4); }

/* Filtro segmentado (Todas / Gratis / De pago) */
.segmented {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--bg, #f1f5f9); border: 1px solid var(--border, #e2e8f0);
    border-radius: 11px;
}
.segmented a, .segmented button {
    padding: 6px 14px; border-radius: 8px; border: none; background: none;
    font-size: 13px; font-weight: 600; color: var(--text-muted, #64748b);
    cursor: pointer; text-decoration: none; font-family: inherit; line-height: 1.4;
}
.segmented a:hover, .segmented button:hover { color: var(--text, #0f172a); text-decoration: none; }
.segmented a.active, .segmented button.active {
    background: var(--white, #fff); color: var(--text, #0f172a);
    box-shadow: 0 1px 2px rgba(15,23,42,.08);
}
html.dark .segmented a.active, html.dark .segmented button.active { background: #334155; color: #f1f5f9; }

/* Toggle (pista índigo on / #cbd5e1 off) */
.toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
    position: absolute; inset: 0; border-radius: 999px; cursor: pointer;
    background: #cbd5e1; transition: background .18s ease;
}
.toggle-track::before {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.25); transition: transform .18s ease;
}
.toggle input:checked + .toggle-track { background: var(--primary, #6366f1); }
.toggle input:checked + .toggle-track::before { transform: translateX(18px); }
.toggle input:focus-visible + .toggle-track { outline: 2px solid var(--primary, #6366f1); outline-offset: 2px; }
html.dark .toggle-track { background: #475569; }

/* Barra de progreso genérica del handoff */
.progress { height: 8px; background: var(--border, #e2e8f0); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--primary, #6366f1); border-radius: 999px; transition: width .4s ease; }

/* CTA degradado (portada / about) */
.cta-gradient {
    background: var(--grad-cta, linear-gradient(135deg,#6366f1,#7c3aed));
    color: #fff; border-radius: 20px;
}
.cta-gradient a { color: #fff; }

/* Tarjeta destacada (borde índigo: plan Creador, post inicial de tema, certificado) */
.card-accent { border: 2px solid var(--primary, #6366f1) !important; }

/* Fila de stats de portada / paneles */
.stat-card {
    background: var(--white, #fff); border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow);
}
.stat-card .stat-value { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--text, #0f172a); line-height: 1.2; }
.stat-card .stat-label { font-size: 12.5px; color: var(--text-muted, #64748b); margin-top: 2px; }
.stat-card.stat-warn .stat-value  { color: var(--warn-text); }
.stat-card.stat-good .stat-value  { color: var(--success-text); }
.stat-card.stat-brand .stat-value { color: var(--primary, #6366f1); }

/* Bloque de fecha de eventos (día grande + mes) — refuerzo del existente */
.event-date-block { border-radius: 12px; }

/* Avatares apilados (asistentes de evento) */
.avatar-stack { display: flex; }
.avatar-stack .avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--white, #fff); }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* Colores de avatar en rotación (handoff) */
.av-c0 { background: var(--av-0); color: #fff; }
.av-c1 { background: var(--av-1); color: #fff; }
.av-c2 { background: var(--av-2); color: #fff; }
.av-c3 { background: var(--av-3); color: #fff; }
.av-c4 { background: var(--av-4); color: #fff; }
.av-c5 { background: var(--av-5); color: #fff; }

/* Estados vacíos: variante tarjeta del handoff (icono en círculo slate) */
.empty-state-icon-circle {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--bg, #f1f5f9); border: 1px solid var(--border, #e2e8f0);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; margin: 0 auto 14px;
}

/* Masthead: tinte de hover en enlaces de nav (handoff) */
.mast-link {
    color: var(--text-secondary, #475569); text-decoration: none;
    font-size: 14px; font-weight: 500; white-space: nowrap;
    padding: 7px 11px; border-radius: 9px; transition: background .15s, color .15s;
}
.mast-link:hover { background: var(--bg, #f1f5f9); color: var(--text, #0f172a); text-decoration: none; }
.mast-link.active { background: var(--primary-light, #eef2ff); color: var(--primary-dark, #4338ca); font-weight: 600; }
/* Indicador de novedades por seccion (mig 203): contador junto al enlace del
   menu de comunidad. Se oculta solo cuando no hay novedades (no se imprime). */
.nav-new-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    margin-left: 0.35rem;
    border-radius: 999px;
    background: var(--primary, #6366f1);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}
html.dark .nav-new-badge { background: #818cf8; color: #0f172a; }

html.dark .mast-link:hover { background: #334155; color: #f1f5f9; }
html.dark .mast-link.active { background: rgba(99,102,241,.2); color: #a5b4fc; }

/* Sub-nav de comunidad en pildoras (handoff): respiro vertical en escritorio */
@media (min-width: 768px) {
    #community-nav { padding-top: 6px; padding-bottom: 6px; }
}

/* Formularios: acento índigo nativo (radios, checkbox, range) — handoff */
input[type="radio"], input[type="checkbox"], input[type="range"], progress { accent-color: var(--primary, #6366f1); }

/* Quiz (handoff #quiz): opción seleccionada resaltada en índigo (mejora progresiva :has) */
#quiz-form label:has(input[type="radio"]:checked) {
    border-color: var(--primary, #6366f1);
    background: var(--primary-light, #eef2ff);
    font-weight: 600;
}
html.dark #quiz-form label:has(input[type="radio"]:checked) { background: rgba(99,102,241,.18); }

/* ── F0: tarjetas-guía del creador (help-card) + bloques de ejemplo (demo) ── */
.chip-help { background: var(--primary-light, #eef2ff); color: var(--primary-dark, #4338ca); border-color: var(--primary-tint, #e0e7ff); }
html.dark .chip-help { background: rgba(99,102,241,.18); color: #a5b4fc; border-color: rgba(99,102,241,.4); }

.help-card {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--white);
    border: 1px solid var(--primary-tint, #e0e7ff);
    border-left: 4px solid var(--primary, #6366f1);
    border-radius: var(--radius, 16px);
    padding: 16px 18px; margin-bottom: 16px;
    box-shadow: var(--shadow);
}
html.dark .help-card { border-color: rgba(99,102,241,.4); }
.help-card-ico { font-size: 22px; line-height: 1.2; flex-shrink: 0; }
.help-card-main { min-width: 0; flex: 1; }
.help-card-title { font-size: 15px; font-weight: 700; color: var(--text); margin: 8px 0 4px; }
.help-card-body { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; white-space: pre-line; }
.help-card-cta { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--primary, #6366f1); }
.help-card-x {
    flex-shrink: 0; background: transparent; border: 0; cursor: pointer;
    color: var(--text-aux, #94a3b8); font-size: 20px; line-height: 1;
    padding: 2px 8px; border-radius: 8px;
}
.help-card-x:hover { background: var(--bg); color: var(--text-secondary); }

/* Bloque de ejemplo: mismo markup del módulo, atenuado y con chip «Ejemplo». */
.demo-block { position: relative; opacity: .92; }
.demo-block .demo-chip { position: absolute; top: 10px; right: 10px; z-index: 2; }

/* Barra de filtros de «Explorar comunidades» (discover): UNA sola línea en
   escritorio; solo se apila en móvil (≤640px). No usa flex-nowrap de Tailwind
   (purgado del build). */
.discover-toolbar { display:flex; flex-wrap:nowrap; align-items:center; gap:12px; }
.discover-toolbar > form { display:flex; flex-wrap:nowrap; align-items:center; gap:8px; min-width:0; }
.discover-toolbar select { min-width:0; }
/* Ancho fijo: evita que el select se redimensione según la opción elegida y
   recoloque el resto de la barra al cambiar de categoría/orden. */
.discover-toolbar select[name="cat"]   { width:13rem; max-width:45vw; }
.discover-toolbar select[name="orden"] { width:11rem; max-width:45vw; }
.discover-toolbar .discover-create { margin-left:auto; white-space:nowrap; }
@media (max-width:640px) {
    .discover-toolbar,
    .discover-toolbar > form { flex-wrap:wrap; }
    .discover-toolbar .discover-create { margin-left:0; }
}

/* ── Indicador de contexto de menú por rol (nav-ctx) ─────────────────────────
   Borde fino (1px) de color que indica "como quién" navega el usuario:
   rojo = admin de plataforma · azul índigo = staff de comunidad · verde = miembro.
   El color por rol se expone en la propia var --nav-ctx para reutilizarlo por
   superficie. */
.nav-ctx-admin  { --nav-ctx: var(--nav-ctx-admin); }
.nav-ctx-staff  { --nav-ctx: var(--nav-ctx-staff); }
.nav-ctx-member { --nav-ctx: var(--nav-ctx-member); }

/* Panel de plataforma (rojo) y de comunidad (azul): recolorea el borde de .anav-bar */
.anav.nav-ctx-admin  .anav-bar,
.anav.nav-ctx-staff  .anav-bar {
    border-color: color-mix(in srgb, var(--nav-ctx) 70%, transparent);
}

/* Menú de comunidad (escritorio): caja con borde completo, radio del componente */
@media (min-width: 768px) {
    #community-nav.nav-ctx-staff,
    #community-nav.nav-ctx-member {
        border: 1px solid color-mix(in srgb, var(--nav-ctx) 65%, transparent);
        border-radius: var(--radius-btn);
        padding: 2px 8px;
    }
}

/* Bottom-nav (móvil): SOLO borde superior (sin caja doble), respeta safe-area */
@media (max-width: 767.98px) {
    .bottom-nav.nav-ctx-admin,
    .bottom-nav.nav-ctx-staff,
    .bottom-nav.nav-ctx-member {
        border-top: 1px solid color-mix(in srgb, var(--nav-ctx) 60%, transparent);
    }
}

/* ===== EJE C · Feed mobile-first (pasada pantalla del feed principal) =====
   Los botones de acción del post usan clases propias (.like-btn /
   .comment-count-btn / .save-btn), NO .btn, así que quedaban fuera del
   min-height:44px de Fase 7 (~30px de alto). En móvil se garantiza zona
   táctil cómoda (WCAG 2.5.5 · ≥44px) sin tocar el aspecto de escritorio. */
@media (max-width: 767.98px) {
    .post-actions { gap: 8px; }
    .post-actions .like-btn,
    .post-actions .comment-count-btn,
    .post-actions .save-btn {
        min-height: 44px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    /* La tira de historias se desplaza en horizontal con inercia, sin
       arrastrar la página (no debe provocar scroll horizontal del viewport). */
    .stories-strip { -webkit-overflow-scrolling: touch; max-width: 100%; }
    /* La imagen del post ocupa el ancho de la tarjeta en móvil. */
    .post-card .post-image { width: 100%; }
}

/* ===== EJE C · Classroom mobile-first (pasada del aula: listado + lección) =====
   Los controles propios del aula que NO son .btn (enlaces del temario y descargas
   de recursos) quedaban en ~37-40px de alto. En móvil se garantiza zona táctil
   cómoda (WCAG 2.5.5 · ≥44px), el vídeo no desborda su columna y las listas de
   módulos/lecciones no provocan scroll horizontal. Puramente aditivo: nada de
   esto afecta al aspecto de escritorio. */
@media (max-width: 767.98px) {
    /* Enlaces del temario (módulos/lecciones): zona táctil ≥44px y sin desborde. */
    .lesson-link {
        min-height: 44px;
        padding-top: 11px;
        padding-bottom: 11px;
        word-break: break-word;
    }
    /* El temario (drawer) nunca fuerza scroll horizontal del viewport. */
    .lesson-sidebar,
    #lesson-sidebar { max-width: 100%; }
    /* Descargas de recursos: enlaces con estilo propio (no .btn) → ≥44px. */
    .lesson-resources a { min-height: 44px; }
    /* El iframe/vídeo de la lección nunca desborda el ancho de la columna. */
    .video-wrapper { max-width: 100%; }
    /* Rejilla de cursos a una columna: evita cualquier desborde en pantallas
       estrechas y mantiene las tarjetas legibles. */
    .courses-grid { grid-template-columns: 1fr; }
}

/* ===== EJE C · Membresía / tiers mobile-first (panel del socio) =====
   El panel "Mi membresía" (/g/{slug}/feed/membership) muestra el plan actual,
   el historial de pagos, el resumen anual y la lista de "Otros planes". Las
   tablas usan .table plana (sin wrapper .admin-table-wrap) y en pantallas
   estrechas desbordaban el viewport; las tarjetas de plan ya son de una columna.
   Puramente aditivo: nada de esto afecta al aspecto de escritorio. */
@media (max-width: 767.98px) {
    /* Tablas de historial de pagos / resumen anual: scroll interno para no
       desbordar el viewport en móvil (WCAG 1.4.10 reflow). */
    .membership-table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Lista de planes disponibles a una columna, sin desborde y con CTA táctil. */
    .membership-plans { max-width: 100%; }
    .membership-plans .btn { min-height: 44px; }
    /* Enlace de descarga del carné (no es .btn): zona táctil cómoda ≥ 44px. */
    .membership-action {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* ===== EJE C · Perfil mobile-first (pasada de la pantalla de perfil) =====
   Los enlaces sociales del perfil son anclas solo-icono (SVG 20px) con estilo
   propio (utilidades Tailwind), muy por debajo de los 44px táctiles; igual el
   enlace "Ver post completo" de cada tarjeta. En movil se garantiza zona tactil
   comoda (WCAG 2.5.5 · ≥44px), la fila de redes envuelve y las rejillas de
   estadisticas/insignias nunca desbordan el viewport. Puramente aditivo: nada
   de esto afecta al aspecto de escritorio. */
@media (max-width: 767.98px) {
    /* Fila de redes sociales: envuelve sin desbordar el ancho de la tarjeta. */
    .profile-social-links { flex-wrap: wrap; max-width: 100%; }
    /* Iconos sociales solo-icono: zona tactil cuadrada ≥44x44px. */
    .profile-social-link {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Rejillas de estadisticas e insignias a ancho fluido (reflow, sin scroll
       horizontal del viewport). */
    .profile-stats-grid,
    .profile-badges-grid { max-width: 100%; }
    /* Enlace "Ver post completo" (texto, no .btn): zona tactil comoda ≥44px. */
    .profile-post-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* ============================================================
   EJE C - PERFIL mobile-first (edicion de perfil + tarjeta publica).
   Bloque ADITIVO, todo bajo la media query -> cero regresion en
   escritorio y sin colores nuevos (solo geometria tactil).
   Cubre lo que las pasadas previas de .profile-screen / .settings-screen
   dejaban por debajo de los 44px de WCAG 2.5.5:
     - la fila del avatar de /settings (avatar + boton + pista) que
       desbordaba a 360px,
     - los botones solo-icono de "Compartir perfil" (ancho < 44px),
     - el titulo de cada post del perfil, que es un enlace de texto.
   Razonado a 360-414px.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Foto de perfil (/settings > Perfil): la fila envuelve en lugar de
       comprimir el boton "Cambiar foto" o desbordar la tarjeta. */
    .settings-avatar-row {
        flex-wrap: wrap;
        gap: 12px;
        max-width: 100%;
    }
    .settings-avatar-row form { flex-wrap: wrap; }
    /* La etiqueta que dispara el selector de archivo es el target real. */
    .settings-avatar-row label {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Compartir perfil: los intents X / WhatsApp / Telegram son botones
       solo-icono. El alto ya lo da .btn; falta el ancho tactil. */
    .profile-share .btn {
        min-width: 44px;
        justify-content: center;
    }
    .profile-share { row-gap: 8px; }

    /* Titulo de cada publicacion del perfil: enlace de texto, no .btn. */
    .profile-post-title {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        overflow-wrap: anywhere;
    }
}

/* ===== EJE C · Eventos mobile-first (listado + detalle) =====
   Los botones de accion de cada evento (Ver evento, RSVP, Agendar, Outlook,
   Exportar .ics, Unirse) son .btn .btn-sm y el toggle Lista/Calendario son
   .view-toggle-btn: por debajo de los 44px tactiles en movil. Aqui se garantiza
   zona tactil comoda (WCAG 2.5.5 · ≥44px), las tarjetas de evento a ancho fluido
   sin scroll horizontal, y los embeds/iframes de retransmision responsive.
   Puramente aditivo: nada de esto afecta al aspecto de escritorio. */
@media (max-width: 767.98px) {
    /* Tarjeta de evento a ancho fluido: envuelve y nunca desborda el viewport. */
    .event-card { max-width: 100%; flex-wrap: wrap; }
    /* Fila de acciones del evento: envuelve dentro del ancho de la tarjeta. */
    .event-actions { max-width: 100%; }
    /* Zona tactil comoda ≥44px en todos los botones/enlaces de accion. */
    .event-actions .btn,
    .event-link,
    .rsvp-btn,
    .event-ics-link,
    #rsvp-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    /* Toggle Lista/Calendario tactil ≥44px. */
    .view-toggle-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    /* Listado, calendario y embeds a ancho fluido (reflow, sin scroll horizontal). */
    #view-list,
    #view-calendar,
    #fullcalendar,
    .event-stream-embed { max-width: 100%; }
    /* Iframes/mapas/video de retransmision responsive. */
    .event-stream-embed iframe,
    .event-card iframe { max-width: 100%; }
}

/* ============================================================
   Eventos (/events listado + detalle): pasada mobile-first
   Bloque ADITIVO acotado a .events-screen. Todo bajo la media query:
   cero regresion en escritorio y sin fijar colores (dark mode intacto).
   Targets tactiles >=44px (WCAG 2.5.5). Razonado a 360px y 414px:
   la tarjeta de evento (bloque-fecha ~58px + info) cabe holgada en una fila
   fluida que envuelve; el detalle (max-w-3xl) ya se acota al viewport. Los
   embeds/iframes y las rejillas van a ancho completo, sin scroll horizontal.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de ambas pantallas de eventos fluido, sin desborde horizontal. */
    .events-screen { max-width: 100%; overflow-x: hidden; }

    /* Tarjetas/listado/calendario a 1 columna fluida que nunca desborda. */
    .events-screen .event-card,
    .events-screen #view-list,
    .events-screen #view-calendar,
    .events-screen #fullcalendar,
    .events-screen [role="list"] > * { max-width: 100%; }

    /* La tarjeta de evento envuelve su fila (bloque-fecha + info + acciones)
       para no comprimir el texto en pantallas estrechas. */
    .events-screen .event-card { flex-wrap: wrap; }
    .events-screen .event-info { min-width: 0; }

    /* Titulos, hora y descripcion nunca provocan scroll horizontal. */
    .events-screen .event-title,
    .events-screen .event-desc,
    .events-screen .event-time,
    .events-screen h1,
    .events-screen p { overflow-wrap: anywhere; }

    /* Inputs, textarea y select a 16px (evita el zoom de iOS) y sin desbordar:
       chat del evento, URL de sincronizacion .ics y formularios de entrada. */
    .events-screen input[type="text"],
    .events-screen input[type="search"],
    .events-screen textarea,
    .events-screen select {
        font-size: 16px;
        max-width: 100%;
    }

    /* Imagenes / iframes (retransmision, avatares, mapas) fluidos. */
    .events-screen img,
    .events-screen iframe,
    .events-screen .event-stream-embed { max-width: 100%; }
    .events-screen .event-stream-embed iframe,
    .events-screen .event-card iframe { height: auto; }

    /* Zona tactil comoda >=44px en todos los botones/enlaces de accion:
       Ver evento, RSVP/asistir, compartir, agendar (Google/Outlook), .ics,
       comprar entrada, enviar chat, toggle Lista/Calendario y paginacion. */
    .events-screen .btn,
    .events-screen .event-link,
    .events-screen .rsvp-btn,
    .events-screen .event-ics-link,
    .events-screen #rsvp-btn,
    .events-screen .view-toggle-btn,
    .events-screen .pagination a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}


/* ===== EJE C · Clasificacion (leaderboards) mobile-first (ranking + niveles + retos) =====
   Las pestanas de periodo (.lb-range-tab) son anclas px-4 py-2 (~36px de alto) y los
   botones de reto/check-in (.challenge-checkin-btn) y de canje de tienda (.pshop-redeem-btn)
   quedaban por debajo de los 44px tactiles. Aqui se garantiza zona tactil comoda
   (WCAG 2.5.5 · ≥44px), las listas de ranking/distribucion/niveles no desbordan el
   viewport (reflow con scroll interno, sin scroll horizontal de la pagina) y la rejilla
   de retos va a una columna. Puramente aditivo: nada de esto afecta al aspecto de escritorio. */
@media (max-width: 767.98px) {
    /* Pestanas de periodo (Historico/Semana/Mes): zona tactil ≥44px. */
    .lb-range-tab {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    /* Botones de check-in de reto y de canje de tienda: zona tactil ≥44px. */
    .challenge-checkin-btn,
    .pshop-redeem-btn {
        min-height: 44px;
    }
    /* Listas de ranking, distribucion de niveles y sistema de niveles: ancho fluido
       con scroll interno para no desbordar el viewport en movil (WCAG 1.4.10 reflow). */
    .lb-ranking,
    .lb-distribution,
    .lb-levels {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Rejilla de retos a una columna: evita cualquier desborde en pantallas estrechas. */
    .lb-challenges {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
}

/* --- Ajustes de usuario (/settings): pasada mobile-first (WCAG 2.5.5) ---
   Bloque ADITIVO. Todo bajo la media query: cero regresion en escritorio. */
@media (max-width: 767.98px) {
    /* Contenedor: nunca fuerza scroll horizontal de pagina. */
    .settings-screen { max-width: 100%; }
    /* Barra de pestanas: scroll horizontal interno, sin desbordar la pagina. */
    .settings-tabs {
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }
    /* Cada pestana como target tactil >=44px de alto y centrada. */
    .settings-tab {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    /* Campos e inputs (incl. enlaces de afiliado monospace) acotados al ancho. */
    .settings-screen input,
    .settings-screen textarea,
    .settings-screen select {
        max-width: 100%;
    }
    /* Todos los botones de la pantalla (interruptor de tema, copiar, portal de
       Stripe, guardar, borrar...) garantizan zona tactil >=44px, incluidos los
       que no usan la clase .btn (esos ya la tienen por la regla global). */
    .settings-screen button {
        min-height: 44px;
    }
    /* Filas interactivas: la etiqueta que envuelve un interruptor, checkbox o
       radio se vuelve fila tactil de >=44px de alto (se conserva su alineacion). */
    .settings-screen label:has(input[type="checkbox"]),
    .settings-screen label:has(input[type="radio"]) {
        min-height: 44px;
    }
}

/* ============================================================
   Busqueda (/search): pasada mobile-first (aditiva, sin color)
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .search-screen { max-width: 100%; }
    .search-screen .card,
    .search-screen .post-card,
    .search-screen [role="list"] > * {
        max-width: 100%;
    }

    /* Caja de busqueda: input a 16px (evita el zoom de iOS) y target tactil;
       el boton "Buscar" con zona tactil >=44px. */
    .search-screen form[role="search"] input[type="search"] {
        font-size: 16px;
        min-height: 44px;
    }
    .search-screen form[role="search"] .btn {
        min-height: 44px;
    }

    /* Pestanas de tipo: scroll horizontal interno si no caben (no envolver),
       sin desbordar la pagina; cada pestana como target tactil >=44px. */
    .search-screen .search-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }
    .search-screen .search-tab {
        min-height: 44px;
        flex-shrink: 0;
    }

    /* Enlaces de accion de cada resultado (ver post/comentario/perfil/leccion)
       con zona tactil >=44px, incluidos los que son solo boton o solo texto. */
    .search-screen .btn,
    .search-screen .post-actions a,
    .search-screen [role="listitem"] a.btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* ============================================================
   Busqueda (/search): teclado y tactil movil (aditivo, sin color)
   Bloque ADITIVO. Todo bajo la media query: cero regresion en escritorio.
   ============================================================ */
@media (max-width: 767.98px) {
    /* El formulario apila en columna para que input y boton no se aprieten. */
    .search-screen form[role="search"] {
        flex-direction: column;
    }
    /* Input a 16px (evita el zoom de iOS), ancho completo sin desbordar. */
    .search-screen form[role="search"] input[type="search"] {
        font-size: 16px;
        width: 100%;
        box-sizing: border-box;
    }
    /* Botones (incluido el de respuesta IA) con zona tactil >=44px. */
    .search-screen .btn,
    .search-screen button,
    .search-screen #ai-search-btn {
        min-height: 44px;
    }
}

/* ============================================================
   Panel del usuario (/dashboard): pasada mobile-first (aditiva, sin color)
   Bloque ADITIVO. Todo bajo la media query: cero regresion en escritorio.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .dashboard-screen { max-width: 100%; }

    /* Rejillas de comunidades (tuyas / descubrir) a una sola columna fluida
       para que las tarjetas nunca desborden en pantallas estrechas. */
    .dashboard-screen [role="list"] {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    .dashboard-screen [role="list"] > *,
    .dashboard-screen [role="listitem"] {
        max-width: 100%;
    }

    /* Botones de accion de la cabecera (Nueva Comunidad, Pases) y los CTA
       internos (Activar Plan Creador, Conectar Stripe...) con zona tactil
       >=44px, incluidos los que no usan la clase .btn. */
    .dashboard-screen .btn,
    .dashboard-screen button,
    .dashboard-screen form[method="POST"] button {
        min-height: 44px;
    }

    /* Enlaces de accion de cada tarjeta (abrir feed, ajustes, ver comunidad,
       conectar Stripe) como target tactil >=44px. */
    .dashboard-screen [role="listitem"] a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Cualquier tabla eventual dentro del panel con scroll horizontal propio,
       sin forzar el de la pagina. */
    .dashboard-screen table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }
}

/* EJE C mobile-first: pantalla de notificaciones (dropdown de la cabecera) */
@media (max-width: 767.98px) {
    .notifications-screen {
        max-width: 100%;
        width: calc(100vw - 24px);
        overflow-x: hidden;
    }
    .notifications-screen #notif-list,
    .notifications-screen [role="list"] {
        display: grid;
        grid-template-columns: 1fr;
        max-width: 100%;
        max-height: 70vh;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .notifications-screen a,
    .notifications-screen [role="listitem"] {
        min-height: 44px;
        max-width: 100%;
    }
    .notifications-screen button,
    .notifications-screen #notif-mark-read {
        min-height: 44px;
        min-width: 44px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

/* ============================================================
   EJE C mobile-first: pagina publica de venta / checkout (/g/{slug}/about)
   Bloque ADITIVO. Todo bajo la media query: cero regresion en escritorio.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla (body de la landing) acotado al ancho. */
    .about-screen { max-width: 100%; }

    /* Titulo hero (Tailwind text-5xl = 3rem) a un tamano legible que no
       desborda con nombres largos en pantallas de 360px; parte palabras muy
       largas para no forzar el scroll horizontal. */
    .about-screen #about-hero-title {
        font-size: 2rem;
        line-height: 1.15;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Campos del embudo (cupon, email de waitlist/regalo, enlace de compartir)
       a 16px para evitar el zoom automatico de iOS y con zona tactil >=44px. */
    .about-screen .about-input {
        font-size: 16px;
        min-height: 44px;
        max-width: 100%;
    }

    /* Todos los CTA/botones (unirse, suscribirse, PayPal, regalar, editar) y el
       boton "Copiar enlace" del bloque de compartir (no usa .btn) garantizan
       zona tactil comoda >=44px. */
    .about-screen button,
    .about-screen a.btn {
        min-height: 44px;
    }

    /* Iconos de redes para compartir (40px de base w-10/h-10) elevados a target
       tactil >=44px sin alterar su forma circular. */
    .about-screen .about-share {
        width: 44px;
        height: 44px;
    }

    /* Enlaces de texto de la barra superior (Iniciar sesion / marca) como
       target tactil comodo. */
    .about-screen nav a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* ------------------------------------------------------------
   EJE C mobile-first (fase 2): pantallas estrechas 360-480px de la pagina
   publica de venta. Bloque ADITIVO bajo @media: cero regresion en escritorio.
   Solo geometria/espaciado (sin color): respeta tokens y modo oscuro.
   ------------------------------------------------------------ */
@media (max-width: 480px) {
    /* Cero scroll horizontal en la landing (embeds y tablas incluidos). */
    .about-screen { overflow-x: hidden; }
    .about-screen img,
    .about-screen iframe,
    .about-screen video { max-width: 100%; }

    /* Tarjetas de tier a ancho completo y con menos padding: el precio y el
       CTA quedan siempre visibles sin scroll lateral. */
    .about-screen .grid { grid-template-columns: 1fr; }
    .about-screen .grid > * { min-width: 0; max-width: 100%; }

    /* Precio del plan legible pero sin desbordar (Tailwind text-3xl = 1.875rem). */
    .about-screen .text-3xl { font-size: 1.625rem; line-height: 1.15; }
    .about-screen .text-2xl { font-size: 1.375rem; line-height: 1.2; }

    /* Areas tactiles >=44px en CTA de tier, importes sugeridos de propina y
       enlaces de accion (no todos son <button> ni .btn). */
    .about-screen .btn-full { width: 100%; }
    .about-screen [data-tip-amount],
    .about-screen summary,
    .about-screen a.btn,
    .about-screen button {
        min-height: 44px;
    }
    .about-screen [data-tip-amount] { min-width: 44px; }
    .about-screen summary {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    /* Casillas de verificacion (order bump, mostrar nombre) con zona comoda. */
    .about-screen label:has(input[type="checkbox"]) { min-height: 44px; }
    .about-screen input[type="checkbox"] { width: 20px; height: 20px; }

    /* Textareas y selects del embudo a 16px (evita el zoom de iOS al enfocar). */
    .about-screen textarea.about-input,
    .about-screen select { font-size: 16px; }
    .about-screen select { min-height: 44px; }
    .about-screen textarea.about-input { min-height: 88px; }

    /* Texto largo (descripcion, testimonios, FAQ) parte palabras antes que
       forzar el scroll lateral. */
    .about-screen p,
    .about-screen h1,
    .about-screen h2,
    .about-screen h3 { overflow-wrap: anywhere; }
}

/* ============================================================
   Foro (/foro): pasada mobile-first (aditiva, sin color)
   Bloque ADITIVO acotado a .forum-screen. Todo bajo la media query:
   cero regresion en escritorio. No se fijan colores (respeta modo oscuro).
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla del foro fluido, sin scroll horizontal de pagina. */
    .forum-screen,
    .forum-screen .foro-wrap { max-width: 100%; }

    /* Listados/tarjetas (foros, temas, papelera, posts, encuestas) a 1 columna
       fluida que nunca desborda en 360-414px. */
    .forum-screen .foro-card,
    .forum-screen .foro-topic,
    .forum-screen .foro-trow,
    .forum-screen .foro-post,
    .forum-screen .foro-pollcard,
    .forum-screen .foro-newbox,
    .forum-screen .foro-replybox,
    .forum-screen [role="list"] > * { max-width: 100%; }

    /* La cabecera de tarjeta de foro/tema apila su meta debajo del titulo
       para no comprimir el texto en pantallas estrechas. */
    .forum-screen .foro-card,
    .forum-screen .foro-topic { flex-wrap: wrap; }
    .forum-screen .foro-meta,
    .forum-screen .foro-tstat { text-align: left; }

    /* Inputs, textarea y select a 16px (evita el zoom de iOS) y sin desbordar. */
    .forum-screen input[type="text"],
    .forum-screen input[type="search"],
    .forum-screen textarea,
    .forum-screen select {
        font-size: 16px;
        max-width: 100%;
    }

    /* El cuerpo de los posts nunca provoca scroll horizontal; los medios/tablas
       incrustados se acotan al ancho disponible. */
    .forum-screen .foro-pbody { overflow-wrap: anywhere; }
    .forum-screen .foro-pbody img,
    .forum-screen .foro-pbody iframe { max-width: 100%; height: auto; }
    .forum-screen .foro-pbody table { display: block; max-width: 100%; overflow-x: auto; }

    /* Todos los enlaces/botones tactiles con zona >=44px (WCAG 2.5.5):
       enlaces de tema, botones responder/nuevo tema/publicar, barra de staff,
       formularios de papelera, RSS y paginacion. */
    .forum-screen .foro-topic,
    .forum-screen .foro-card,
    .forum-screen .btn,
    .forum-screen .foro-pag a,
    .forum-screen .foro-staffbar .btn,
    .forum-screen .foro-actbar .btn {
        min-height: 44px;
    }
    .forum-screen .foro-actbar .btn,
    .forum-screen .foro-staffbar .btn,
    .forum-screen .foro-pag a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Acciones de post (me gusta / editar / borrar / reportar) y reacciones
       emoji como target tactil >=44px (los solo-icono tambien >=44px de ancho). */
    .forum-screen .foro-act,
    .forum-screen .foro-react {
        min-height: 44px;
        min-width: 44px;
        justify-content: center;
    }

    /* Las barras de acciones envuelven en varias filas si no caben. */
    .forum-screen .foro-actbar,
    .forum-screen .foro-staffbar,
    .forum-screen .foro-pactions { flex-wrap: wrap; }

    /* El select de "mover tema" a ancho completo dentro de su formulario. */
    .forum-screen .foro-staffbar form { flex-wrap: wrap; }
    .forum-screen .foro-staffbar select { flex: 1 1 auto; min-height: 44px; }
}

/* ============================================================
   Wiki (/wiki): pasada mobile-first (aditiva, sin color)
   Bloque ADITIVO acotado a .wiki-screen. Todo bajo la media query:
   cero regresion en escritorio. No se fijan colores (respeta modo oscuro).
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla del wiki fluido, sin scroll horizontal. */
    .wiki-screen { max-width: 100%; }

    /* Tarjetas (indice, pagina, edicion, historial) a 1 columna fluida
       que nunca desborda en 360-414px. */
    .wiki-screen .card { max-width: 100%; }

    /* Titulos, migas, contenido y nombres largos parten linea en vez de
       desbordar horizontalmente. */
    .wiki-screen h1,
    .wiki-screen nav,
    .wiki-screen summary,
    .wiki-screen .wiki-content,
    .wiki-screen .quill-content { overflow-wrap: anywhere; }

    /* El contenido incrustado (imagenes, iframes, tablas) se acota al ancho
       disponible y escala con height:auto. */
    .wiki-screen .wiki-content img,
    .wiki-screen .quill-content img,
    .wiki-screen .wiki-content iframe,
    .wiki-screen .quill-content iframe { max-width: 100%; height: auto; }
    .wiki-screen .wiki-content table,
    .wiki-screen .quill-content table { display: block; max-width: 100%; overflow-x: auto; }

    /* Inputs, textarea y select a 16px (evita el zoom de iOS) y sin desbordar. */
    .wiki-screen input[type="text"],
    .wiki-screen input[type="search"],
    .wiki-screen textarea,
    .wiki-screen select {
        font-size: 16px;
        max-width: 100%;
    }

    /* Todos los botones tactiles con zona >=44px (WCAG 2.5.5): nueva pagina,
       editar/historial/eliminar, restaurar version, guardar/cancelar. */
    .wiki-screen .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Las filas de la lista de paginas (enlaces dentro de la tarjeta) como
       target tactil >=44px y con permiso para envolver en pantallas estrechas. */
    .wiki-screen .card > a {
        min-height: 44px;
        flex-wrap: wrap;
    }

    /* La cabecera del indice y la de la pagina apilan sus acciones debajo del
       titulo en vez de comprimirlo. */
    .wiki-screen header,
    .wiki-screen .card > div:first-child { flex-wrap: wrap; }
}

/* ============================================================
   Portada publica (/): pasada mobile-first (aditiva, sin color)
   Bloque ADITIVO acotado a .landing-screen. Todo bajo la media query:
   cero regresion en escritorio. No se fijan colores (respeta modo oscuro).
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la portada fluido, sin scroll horizontal de pagina. */
    .landing-screen { max-width: 100%; overflow-x: hidden; }

    /* Titulo hero (display-title muy grande) a un tamano legible en 360px,
       partiendo palabras largas para no forzar scroll horizontal. */
    .landing-screen .display-title {
        font-size: 2rem;
        line-height: 1.15;
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .landing-screen .section-title { overflow-wrap: break-word; }

    /* Parrafos y textos acotados al ancho disponible. */
    .landing-screen p { max-width: 100%; }

    /* Rejillas (stats, features, showcase, CTA de 2 columnas) a 1 columna
       fluida que nunca desborda entre 360 y 414px. */
    .landing-screen .grid { grid-template-columns: 1fr; }

    /* Todos los CTA/botones (crear comunidad, explorar, empezar gratis) como
       target tactil comodo >=44px (WCAG 2.5.5), a ancho completo para no
       comprimir el texto en pantallas estrechas. */
    .landing-screen .btn,
    .landing-screen .cta-gradient a,
    .landing-screen section a[style] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* La fila de CTA del hero apila los botones a ancho completo. */
    .landing-screen .flex.flex-wrap { flex-direction: column; align-items: stretch; }
    .landing-screen .flex.flex-wrap > .btn { width: 100%; }

    /* Imagenes / iframes incrustados nunca desbordan el ancho. */
    .landing-screen img,
    .landing-screen iframe { max-width: 100%; height: auto; }

    /* Reduce el padding generoso de las secciones showcase/CTA en movil. */
    .landing-screen .card,
    .landing-screen .cta-gradient { padding-left: 22px; padding-right: 22px; }
}

/* ===============================================================
   Galeria (/galeria): pasada mobile-first (aditiva, sin color)
   Bloque ADITIVO acotado a .galeria-screen. Todo bajo la media query;
   cero regresion desktop y sin tocar la paleta (dark mode intacto).
   Targets tactiles >=44px (WCAG 2.5.5). Razonado a 360px y 414px:
   con minmax(150px,1fr) a 360px caben 2 columnas (2*150+gap ~= 314 < 360)
   y a 414px van holgadas; nunca hay scroll horizontal de pagina.
   =============================================================== */
@media (max-width: 767.98px) {
    /* Contenedor fluido, sin desborde horizontal. */
    .gal-wrap.galeria-screen { max-width: 100%; overflow-x: hidden; }

    /* Rejilla de albumes y de fotos a 1-2 columnas fluidas. */
    .galeria-screen .gal-grid,
    .galeria-screen .gal-imgs {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    /* Imagenes / miniaturas / portadas nunca desbordan. */
    .galeria-screen img,
    .galeria-screen .gal-album-cover,
    .galeria-screen .gal-cell { max-width: 100%; }

    /* La tarjeta de album completa es tactil. */
    .galeria-screen .gal-album { min-height: 44px; }

    /* Celda de imagen clicable: minimo tactil garantizado. */
    .galeria-screen .gal-cell { min-height: 44px; }

    /* Cabeceras en columna para que los botones ocupen el ancho. */
    .galeria-screen .gal-head,
    .galeria-screen .gal-top { flex-direction: column; align-items: stretch; }

    /* Botones de accion (gestionar, crear, subir) >=44px y a ancho completo. */
    .galeria-screen .gal-head .btn,
    .galeria-screen .gal-empty .btn,
    .galeria-screen .gal-upload .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    /* Zona de arrastrar/subir: objetivo tactil amplio. */
    .galeria-screen .gal-drop { min-height: 88px; display: flex; flex-direction: column; justify-content: center; }

    /* Input de fichero (fallback noscript): 16px evita el zoom en iOS. */
    .galeria-screen input[type="file"],
    .galeria-screen .gal-upload input { font-size: 16px; }

    /* Chips de filtro por etiqueta: alto tactil. */
    .galeria-screen .gal-tag-chip {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* --- Lightbox (.glb lleva la clase de ambito): controles >=44px --- */
    .galeria-screen .glb-close { min-width: 44px; min-height: 44px; font-size: 30px; }
    .galeria-screen .glb-nav { width: 48px; height: 48px; }
    .galeria-screen .glb-like { min-height: 44px; }
    .galeria-screen .glb-cform input,
    .galeria-screen .glb-cform button { min-height: 44px; }
    .galeria-screen .glb-cform input { font-size: 16px; }
    .galeria-screen .glb-staff button { min-height: 44px; }
    .galeria-screen .glb-tag-add { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ============================================================
   Mensajes (/messages): pasada mobile-first (aditiva, sin color)
   Bloque ADITIVO acotado a .messages-screen. Todo bajo la media query:
   cero regresion en escritorio. No se fijan colores (respeta modo oscuro).
   Razonado a 360px y 414px.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla de mensajeria fluido, sin scroll horizontal. */
    .messages-screen { max-width: 100%; overflow-x: hidden; }

    /* Lista de conversaciones a 1 columna fluida que nunca desborda. */
    .messages-screen .card,
    .messages-screen .conv-row { max-width: 100%; }

    /* Cada conversacion como target tactil >=44px (WCAG 2.5.5). */
    .messages-screen .conv-row { min-height: 44px; }

    /* Avatares clicables y botones (nueva conversacion, enviar, volver, personas)
       con zona tactil >=44px. */
    .messages-screen .btn { min-height: 44px; }
    .messages-screen .chat-back {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Inputs, textarea y buscador a 16px (evita el zoom de iOS) y sin desbordar. */
    .messages-screen input[type="text"],
    .messages-screen input[type="search"],
    .messages-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* Los nombres/enlaces de persona en el panel de nueva conversacion no fuerzan
       scroll horizontal en pantallas estrechas. */
    .messages-screen #new-chat-results a,
    .messages-screen #new-chat-panel a { max-width: 100%; }

    /* Area del hilo de chat: sin overflow-x de pagina; las burbujas ajustan texto
       largo/URLs en lugar de estirar el ancho. */
    .messages-screen #chat-shell { max-width: 100%; }
    .messages-screen #chat-messages { max-width: 100%; }
    .messages-screen .chat-bubble { overflow-wrap: anywhere; }
}


/* ============================================================
   Chat (/chat, /chat/room): pasada mobile-first (aditiva, sin color).
   Bloque ADITIVO acotado a .chat-screen. Todo bajo la media query:
   cero regresion en escritorio. No se fijan colores (respeta modo oscuro).
   Razonado a 360px y 414px.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla de chat fluido, sin scroll horizontal. */
    .chat-screen { max-width: 100%; overflow-x: hidden; }

    /* Lista de salas y tarjetas a 1 columna fluida que nunca desborda. */
    .chat-screen .card,
    .chat-screen .demo-block { max-width: 100%; }

    /* Botones (crear/eliminar sala, enviar) y enlaces (sala, breadcrumb)
       con zona tactil >=44px (WCAG 2.5.5). */
    .chat-screen .btn { min-height: 44px; }
    .chat-screen .btn-sm { min-height: 44px; }

    /* Inputs y textarea a 16px (evita el zoom de iOS) y sin desbordar. */
    .chat-screen input[type="text"],
    .chat-screen input[type="search"],
    .chat-screen textarea,
    .chat-screen select {
        font-size: 16px;
        max-width: 100%;
    }

    /* Imagenes, iframes y avatares fluidos (nunca fuerzan scroll horizontal). */
    .chat-screen img,
    .chat-screen iframe {
        max-width: 100%;
        height: auto;
    }

    /* Nombres de sala y cuerpos de mensaje ajustan texto largo/URLs en lugar
       de estirar el ancho. */
    .chat-screen a,
    .chat-screen .chat-msg,
    .chat-screen .chat-body { overflow-wrap: anywhere; }

    /* El hilo de mensajes a ancho completo sin overflow-x de pagina. */
    .chat-screen #chat-box { max-width: 100%; }
    .chat-screen #chat-form { max-width: 100%; }
}


/* ============================================================
   Aula / Classroom (/classroom, /classroom/lesson, /quiz): pasada
   mobile-first (aditiva, sin color). Bloque ADITIVO acotado a
   .classroom-screen. Todo bajo la media query: cero regresion en
   escritorio. No se fijan colores (respeta modo oscuro). Razonado a
   360px y 414px de ancho.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor del aula fluido, sin scroll horizontal de pagina. */
    .classroom-screen { max-width: 100%; overflow-x: hidden; }

    /* Botones de accion (preguntar al tutor, comprar/desbloquear PPV, enviar
       tarea, ver membresias, boton de temario) con zona tactil >=44px. */
    .classroom-screen .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .classroom-screen .lesson-temario-btn { min-height: 44px; }

    /* Rejilla de cursos y tarjetas a 1 columna fluida que nunca desborda. */
    .classroom-screen .courses-grid { grid-template-columns: 1fr; }
    .classroom-screen .course-card,
    .classroom-screen .card { max-width: 100%; }

    /* Enlaces del temario (modulos/lecciones) y descargas de recursos con
       zona tactil >=44px (WCAG 2.5.5). */
    .classroom-screen .lesson-link { min-height: 44px; }
    .classroom-screen .lesson-resources a { min-height: 44px; }

    /* Inputs, textarea y selectores a 16px (evita el zoom de iOS) y sin
       desbordar el ancho del contenedor. */
    .classroom-screen input,
    .classroom-screen textarea,
    .classroom-screen select { font-size: 16px; max-width: 100%; }

    /* Video/iframe de la leccion (YouTube/Loom/local) e imagenes fluidos:
       nunca fuerzan scroll horizontal en 360/414px. */
    .classroom-screen .video-wrapper,
    .classroom-screen .video-wrapper iframe,
    .classroom-screen .video-wrapper video,
    .classroom-screen .lesson-content img,
    .classroom-screen img { max-width: 100%; }

    /* Titulos y contenido largos o URLs sin espacios ajustan en lugar de
       estirar el ancho. */
    .classroom-screen .lesson-main h1,
    .classroom-screen .lesson-content,
    .classroom-screen .course-title,
    .classroom-screen .course-desc { overflow-wrap: anywhere; }
}


/* ============================================================
   Feed principal (/feed): pasada mobile-first (aditiva, sin color)
   Bloque ADITIVO acotado a .feed-screen. Todo bajo la media query:
   cero regresion en escritorio. No se fijan colores (respeta modo oscuro).
   Razonado a 360px y 414px de ancho.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor del feed fluido, sin scroll horizontal de pagina. */
    .feed-screen { max-width: 100%; overflow-x: hidden; }

    /* Tarjetas (composer, filtros y cada post) a 1 columna fluida sin desbordar. */
    .feed-screen .card,
    .feed-screen .post-card { max-width: 100%; }

    /* Targets tactiles >=44px (WCAG 2.5.5): boton de crear post, acciones del
       composer, botones de orden/categoria y paginacion. */
    .feed-screen .btn,
    .feed-screen .sort-btn { min-height: 44px; display: inline-flex; align-items: center; }
    .feed-screen .page-btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Acciones de cada post (like, comentar, guardar) con zona tactil >=44px. */
    .feed-screen .post-actions .like-btn,
    .feed-screen .post-actions .save-btn,
    .feed-screen .post-actions .comment-count-btn { min-height: 44px; }

    /* Inputs, textarea, selectores y el editor Quill a 16px (evita el zoom de iOS)
       y sin desbordar el ancho de la tarjeta. */
    .feed-screen input,
    .feed-screen textarea,
    .feed-screen select,
    .feed-screen .ql-editor {
        font-size: 16px;
        max-width: 100%;
    }

    /* Media dentro de un post (imagen adjunta y videos embebidos) fluida, nunca
       fuerza scroll horizontal en 360/414px. */
    .feed-screen .post-card img,
    .feed-screen .post-card iframe,
    .feed-screen .post-image { max-width: 100%; }

    /* Texto largo o URLs sin espacios ajustan en lugar de estirar la tarjeta. */
    .feed-screen .post-title,
    .feed-screen .post-content { overflow-wrap: anywhere; }
}

/* ============================================================
   Membresia / tiers (/feed/membership): pasada mobile-first
   (aditiva, sin color). Bloque ADITIVO acotado a .membership-screen.
   Es el embudo de monetizacion (elegir/gestionar plan): todo bajo la
   media query -> cero regresion en escritorio. No se fijan colores
   (respeta modo oscuro). Razonado a 360-414px de ancho.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla fluido, sin scroll horizontal de pagina. */
    .membership-screen { max-width: 100%; overflow-x: hidden; }

    /* Tarjetas de plan/tier e informacion a 1 columna fluida que nunca desborda. */
    .membership-screen .card { max-width: 100%; }

    /* Botones de suscribir/cambiar plan/gestionar/portal Stripe/cancelar y
       enlaces de accion con zona tactil >=44px (WCAG 2.5.5). */
    .membership-screen .btn,
    .membership-screen button,
    .membership-screen .membership-action {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Inputs, select y textarea a 16px (evita el zoom de iOS) y sin desbordar. */
    .membership-screen input,
    .membership-screen select,
    .membership-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* Precios, nombres de plan, descripciones y beneficios ajustan texto largo
       o URLs sin espacios en lugar de estirar la tarjeta. */
    .membership-screen .page-header h1,
    .membership-screen .membership-details dd,
    .membership-screen .membership-perks,
    .membership-screen .membership-action { overflow-wrap: anywhere; word-break: break-word; }

    /* La tabla de historial/resumen anual se desplaza dentro de su caja, no de la pagina. */
    .membership-screen .membership-table { display: block; overflow-x: auto; max-width: 100%; }

    /* Media incrustada nunca desborda el ancho del movil. */
    .membership-screen img,
    .membership-screen iframe { max-width: 100%; }
}

/* ============================================================
   Perfil publico (/profile): pasada mobile-first (aditiva, sin color).
   Bloque ADITIVO acotado a .profile-screen. Es la tarjeta social del
   miembro (avatar, progreso de nivel, stats, insignias, comunidades y
   posts): todo bajo la media query -> cero regresion en escritorio.
   No se fijan colores (respeta modo oscuro). Razonado a 360-414px.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla fluido, sin scroll horizontal de pagina. */
    .profile-screen { max-width: 100%; overflow-x: hidden; }

    /* Botones y enlaces de accion (redes sociales, ver post, comunidades)
       con zona tactil >=44px (WCAG 2.5.5). */
    .profile-screen .btn,
    .profile-screen .profile-social-link,
    .profile-screen .profile-post-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Inputs, select y textarea a 16px (evita el zoom de iOS) y sin desbordar. */
    .profile-screen input,
    .profile-screen select,
    .profile-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* Nombre, bio, descripciones de insignia y titulos de post ajustan texto
       largo o URLs sin espacios en lugar de estirar la tarjeta. */
    .profile-screen h1,
    .profile-screen h4,
    .profile-screen p { overflow-wrap: anywhere; word-break: break-word; }

    /* Rejillas (stats, insignias, comunidades) a 1 columna: nada de scroll-x. */
    .profile-screen .profile-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-screen .profile-badges-grid > div { width: 100%; }

    /* Media incrustada (avatar, portadas, iframe) nunca desborda el movil. */
    .profile-screen img,
    .profile-screen iframe { max-width: 100%; height: auto; }
}

/* ---------------------------------------------------------------------------
   EJE C · Pasada mobile-first del PANEL DE COMUNIDAD (group_admin, /g/{slug}/admin/*).
   Bloque ADITIVO acotado a .gadmin-screen (una sola clase en views/group_admin/
   layout.php cubre TODAS las subpantallas del panel). Mismo patron que
   .feed-screen / .messages-screen / .classroom-screen / .profile-screen:
   SIN colores (no rompe el modo oscuro) y CERO regresion desktop (todo bajo la
   media query). Razonado a 360px y 414px.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* El panel nunca provoca scroll horizontal de pagina. */
    .gadmin-screen { max-width: 100%; overflow-x: hidden; }

    /* Targets tactiles >=44px: botones, enlaces de accion e items de menu. */
    .gadmin-screen .btn,
    .gadmin-screen button,
    .gadmin-screen a.btn,
    .gadmin-screen [role="tab"],
    .gadmin-screen .anav-item,
    .gadmin-screen .anav-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Inputs a 16px (evita el zoom automatico de iOS) y sin desbordar. */
    .gadmin-screen input,
    .gadmin-screen select,
    .gadmin-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* Tarjetas y contenedores nunca mas anchos que la pantalla. */
    .gadmin-screen .card { max-width: 100%; }

    /* Tablas: scroll interno del contenedor, no de la pagina. */
    .gadmin-screen table { width: 100%; }
    .gadmin-screen .table-wrap,
    .gadmin-screen .table-responsive,
    .gadmin-screen .overflow-x-auto {
        display: block;
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    /* Rejillas de KPIs / tarjetas a 1 columna en movil. */
    .gadmin-screen .grid.grid-cols-2,
    .gadmin-screen .grid.grid-cols-3,
    .gadmin-screen .grid.grid-cols-4,
    .gadmin-screen .kpi-grid,
    .gadmin-screen .stats-grid,
    .gadmin-screen .cards-grid {
        grid-template-columns: 1fr;
    }

    /* Media incrustada (portadas, previews, iframes) fluida. */
    .gadmin-screen img,
    .gadmin-screen iframe { max-width: 100%; height: auto; }

    /* Titulos y celdas largos parten palabra en lugar de desbordar. */
    .gadmin-screen h1,
    .gadmin-screen h2,
    .gadmin-screen h3,
    .gadmin-screen th,
    .gadmin-screen td { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Directorio publico (/discover): pasada mobile-first (aditiva, sin color)
   Bloque ADITIVO. Todo bajo la media query: cero regresion en escritorio.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .discover-screen { max-width: 100%; overflow-x: hidden; }

    /* Rejillas del directorio (comunidades, proyectos, colecciones) a una sola
       columna fluida para que las tarjetas nunca desborden en pantallas estrechas. */
    .discover-screen [role="list"] {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    .discover-screen [role="list"] > *,
    .discover-screen [role="listitem"],
    .discover-screen .discover-card { max-width: 100%; }

    /* Barra de herramientas (titulo + buscador + filtros + crear) apilada,
       sin forzar scroll horizontal de pagina. */
    .discover-screen .discover-toolbar { max-width: 100%; }
    .discover-screen .discover-search-form { max-width: 100%; }

    /* Buscador y selects de filtro: fuente a 16px (evita el zoom de iOS) y
       zona tactil >=44px; a lo ancho para pulsar comodo. */
    .discover-screen input[type="search"],
    .discover-screen input,
    .discover-screen select,
    .discover-screen textarea {
        font-size: 16px;
        min-height: 44px;
    }

    /* Botones y enlaces de accion (Buscar, Limpiar, Crear, CTA de tarjeta,
       unirse, paginacion, colecciones) con zona tactil >=44px, incluidos los
       que no usan la clase .btn. */
    .discover-screen .btn,
    .discover-screen button,
    .discover-screen [role="listitem"] a,
    .discover-screen .discover-card a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Portadas, logos y avatares fluidos, nunca desbordan la tarjeta. */
    .discover-screen img,
    .discover-screen iframe { max-width: 100%; height: auto; }

    /* Nombres y descripciones largos parten palabra en lugar de desbordar. */
    .discover-screen h1,
    .discover-screen h2,
    .discover-screen h3,
    .discover-screen p { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Escaparate publico de creadores (/creadores): pasada mobile-first
   Bloque ADITIVO acotado a .creadores-screen. Todo bajo la media query:
   cero regresion en escritorio, sin color (respeta dark mode).
   Razonado a 360px y 414px de ancho.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .creadores-screen { max-width: 100%; overflow-x: hidden; }

    /* Rejilla de tarjetas de creador a una sola columna fluida para que las
       tarjetas nunca desborden en pantallas estrechas (360/414px). */
    .creadores-screen [role="list"] {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    .creadores-screen [role="list"] > *,
    .creadores-screen [role="listitem"] { max-width: 100%; }

    /* Buscador y campos de filtro (si los hubiera): fuente a 16px (evita el
       zoom de iOS) y zona tactil >=44px; a lo ancho para pulsar comodo. */
    .creadores-screen input,
    .creadores-screen select,
    .creadores-screen textarea {
        font-size: 16px;
        min-height: 44px;
        max-width: 100%;
    }

    /* Botones y enlaces de accion (CTA de tarjeta, Ver comunidad, explorar)
       con zona tactil >=44px, incluidos los que no usan la clase .btn.
       Excepcion: los enlaces de texto inline (nombre de la comunidad, del
       creador) no se fuerzan a 44px para no romper el flujo de texto. */
    .creadores-screen .btn,
    .creadores-screen button,
    .creadores-screen [role="listitem"] > a[aria-label] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Portadas, logos y avatares fluidos, nunca desbordan la tarjeta. */
    .creadores-screen img,
    .creadores-screen iframe { max-width: 100%; height: auto; }

    /* Badges (categoria, Gratis/De Pago) legibles sin desbordar. */
    .creadores-screen [role="listitem"] span { overflow-wrap: anywhere; }

    /* Nombres y descripciones largos parten palabra en lugar de desbordar. */
    .creadores-screen h1,
    .creadores-screen h2,
    .creadores-screen h3,
    .creadores-screen p { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Tienda de productos digitales (/g/{slug}/tienda): pasada mobile-first
   Bloque ADITIVO acotado a .tienda-screen. Todo bajo la media query:
   cero regresion en escritorio, sin color (respeta dark mode).
   Razonado a 360px y 414px de ancho.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .tienda-screen { max-width: 100%; overflow-x: hidden; }

    /* Rejilla de productos a una sola columna fluida: las tarjetas nunca
       desbordan en pantallas estrechas (360/414px). */
    .tienda-screen .grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    .tienda-screen .grid > *,
    .tienda-screen article { max-width: 100%; }

    /* Cabecera (titulo + boton gestionar) puede apilarse sin desbordar. */
    .tienda-screen header { max-width: 100%; }

    /* Inputs/select/textarea (precio pwyw, etc.) a 16px (evita el zoom de
       iOS) y a lo ancho; anulan anchos fijos como .w-32. */
    .tienda-screen input,
    .tienda-screen select,
    .tienda-screen textarea {
        font-size: 16px;
        min-height: 44px;
        max-width: 100%;
    }

    /* Botones, enlaces de accion y badges con zona tactil >=44px, incluidos
       los que no usan la clase .btn (descargar, comprar, gestionar). */
    .tienda-screen .btn,
    .tienda-screen button,
    .tienda-screen article a,
    .tienda-screen .demo-badge {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Portadas de producto y embeds fluidos, nunca desbordan la tarjeta. */
    .tienda-screen img,
    .tienda-screen iframe { max-width: 100%; height: auto; }

    /* Nombres, descripciones, precios y licencias largos parten palabra en
       lugar de desbordar. */
    .tienda-screen h1,
    .tienda-screen h2,
    .tienda-screen p,
    .tienda-screen .font-mono { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Clasificacion / Leaderboard (/leaderboards): pasada mobile-first
   Bloque ADITIVO acotado a .leaderboards-screen. Todo bajo la media
   query: cero regresion en escritorio, sin color (respeta dark mode).
   Razonado a 360px y 414px de ancho.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .leaderboards-screen { max-width: 100%; overflow-x: hidden; }

    /* Rejilla de retos activos (md:grid-cols-2) a una sola columna fluida:
       las tarjetas nunca desbordan a 360/414px. */
    .leaderboards-screen .lb-challenges {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    /* Listas de ranking, distribucion de niveles y sistema de niveles a ancho
       completo; filas y tarjetas nunca desbordan la pagina. */
    .leaderboards-screen .lb-ranking,
    .leaderboards-screen .lb-distribution,
    .leaderboards-screen .lb-levels,
    .leaderboards-screen [role="list"],
    .leaderboards-screen [role="listitem"] { max-width: 100%; }

    /* Pestanas de rango (Historico/Semana/Mes) con scroll interno horizontal
       sin desbordar la pagina y zona tactil >=44px. */
    .leaderboards-screen nav[aria-label] { max-width: 100%; }
    .leaderboards-screen .lb-range-tab {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Botones y enlaces de accion (check-in, canjear, ver perfil) con zona
       tactil >=44px, incluidos los que no usan la clase .btn. */
    .leaderboards-screen .btn,
    .leaderboards-screen button,
    .leaderboards-screen .challenge-checkin-btn,
    .leaderboards-screen .pshop-redeem-btn,
    .leaderboards-screen [role="listitem"] a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Campos de formulario (si los hubiera) a 16px para evitar el zoom de iOS
       y sin desbordar el ancho. */
    .leaderboards-screen input,
    .leaderboards-screen select,
    .leaderboards-screen textarea {
        font-size: 16px;
        min-height: 44px;
        max-width: 100%;
    }

    /* Avatares, imagenes y embeds fluidos, nunca desbordan la fila. */
    .leaderboards-screen img,
    .leaderboards-screen iframe { max-width: 100%; height: auto; }

    /* Nombres de miembros, titulos de reto y textos largos parten palabra en
       lugar de desbordar horizontalmente. */
    .leaderboards-screen h1,
    .leaderboards-screen h2,
    .leaderboards-screen p,
    .leaderboards-screen a,
    .leaderboards-screen .font-mono { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Directorio de miembros (/members): pasada mobile-first
   Bloque ADITIVO acotado a .members-screen. Todo bajo la media
   query: cero regresion en escritorio, sin color (respeta dark mode).
   Razonado a 360px y 414px de ancho.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .members-screen { max-width: 100%; overflow-x: hidden; }

    /* Rejilla de tarjetas de miembro (sm:grid-cols-2) a una sola columna
       fluida: las tarjetas nunca desbordan a 360/414px. */
    .members-screen [role="list"] {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    .members-screen [role="list"] > *,
    .members-screen [role="listitem"] { max-width: 100%; }

    /* Barra de busqueda y filtros a ancho completo, sin desbordar la pagina. */
    .members-screen nav[aria-label],
    .members-screen form[role="search"] { max-width: 100%; }

    /* Botones, enlaces, filtros de orden/estado/nivel y paginacion con zona
       tactil >=44px, incluidos los que no usan la clase .btn. */
    .members-screen .btn,
    .members-screen button,
    .members-screen nav[aria-label] a,
    .members-screen [role="listitem"] a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Campos de formulario (busqueda y select) a 16px para evitar el zoom de
       iOS y sin desbordar el ancho. */
    .members-screen input,
    .members-screen input[type="search"],
    .members-screen select,
    .members-screen textarea {
        font-size: 16px;
        min-height: 44px;
        max-width: 100%;
    }

    /* Avatares, imagenes y embeds fluidos, nunca desbordan la fila. */
    .members-screen img,
    .members-screen iframe { max-width: 100%; height: auto; }

    /* Nombres y biografias largas parten palabra en lugar de desbordar. */
    .members-screen h1,
    .members-screen h2,
    .members-screen p,
    .members-screen a { overflow-wrap: anywhere; word-break: break-word; }
}

/* ---------------------------------------------------------------------------
   EJE C - Pasada mobile-first de las PANTALLAS DE AUTENTICACION (views/auth/*).
   Bloque ADITIVO acotado a .auth-screen (una sola clase en el contenedor raiz
   de cada vista: login, register, forgot, reset, activate, resend, twofa,
   pending, logout_confirm). Mismo patron que .settings-screen / .profile-screen:
   SIN colores (no rompe el modo oscuro) y CERO regresion desktop (todo bajo la
   media query). Razonado a 360px y 414px.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* La tarjeta de auth nunca provoca scroll horizontal de pagina. */
    .auth-screen { max-width: 100%; overflow-x: hidden; }

    /* Botones (btn-full de enviar, submit sin .btn) y enlaces de accion
       (volver, crear cuenta, recuperar) con zona tactil >=44px (WCAG 2.5.5). */
    .auth-screen .btn,
    .auth-screen button,
    .auth-screen a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Inputs, select y textarea (email, contrasena, codigo 2FA) a 16px para
       evitar el zoom automatico de iOS y sin desbordar el ancho. */
    .auth-screen input,
    .auth-screen select,
    .auth-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* Titulos, subtitulos, mensajes de error/aviso y textos largos parten
       palabra o URL en lugar de estirar la tarjeta. */
    .auth-screen h1,
    .auth-screen h2,
    .auth-screen p,
    .auth-screen label,
    .auth-screen a { overflow-wrap: anywhere; word-break: break-word; }

    /* Media incrustada (logotipo, ilustraciones) fluida, nunca desborda. */
    .auth-screen img,
    .auth-screen iframe { max-width: 100%; height: auto; }
}


/* ============================================================
   Precios publicos (/pricing y /pricing/calculadora): pasada
   mobile-first (aditiva, sin color). Bloque bajo la media query:
   cero regresion en escritorio. WCAG 2.5.5 targets tactiles >=44px.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado: nunca fuerza scroll horizontal. */
    .pricing-screen {
        max-width: 100%;
        overflow-x: hidden;
    }
    /* Rejillas de planes y de la calculadora a una sola columna. */
    .pricing-screen .grid {
        grid-template-columns: 1fr;
    }
    /* Targets tactiles >=44px: botones y enlaces de accion (WCAG 2.5.5).
       Los .btn ya cumplen por la regla global; aqui cubrimos el resto. */
    .pricing-screen .btn,
    .pricing-screen button,
    .pricing-screen a[href] {
        min-height: 44px;
    }
    /* Enlaces de solo texto (volver, ver calculadora): no forzar altura de
       bloque que rompa el flujo del parrafo; se restablece a auto. */
    .pricing-screen p a[href],
    .pricing-screen li a[href],
    .pricing-screen summary a[href] {
        min-height: 0;
    }
    /* Campos: 16px evita el zoom automatico de iOS al enfocar; acotados. */
    .pricing-screen input,
    .pricing-screen select,
    .pricing-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }
    /* Titulos y etiquetas: parten palabras largas antes que desbordar. */
    .pricing-screen h1,
    .pricing-screen h2,
    .pricing-screen h3,
    .pricing-screen label {
        overflow-wrap: anywhere;
    }
    /* Media fluida (formulario de contacto embebido, imagenes). */
    .pricing-screen img,
    .pricing-screen iframe {
        max-width: 100%;
        height: auto;
    }
}

/* ============================================================
   Pases multi-comunidad (/bundle/{slug} y /bundles): pasada mobile-first
   Bloque ADITIVO acotado a .bundles-screen. Todo bajo la media query:
   cero regresion en escritorio, sin color (respeta dark mode).
   Razonado a 360px y 414px de ancho.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .bundles-screen { max-width: 100%; overflow-x: hidden; }

    /* Rejillas (comunidades incluidas, checkboxes de comunidades) a una sola
       columna fluida: las tarjetas nunca desbordan en 360/414px. */
    .bundles-screen .grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    .bundles-screen .grid > * { max-width: 100%; }

    /* Inputs/select/textarea (nombre, precio, cobro, descripcion) a 16px
       (evita el zoom de iOS) y a lo ancho; anulan anchos fijos. */
    .bundles-screen input,
    .bundles-screen select,
    .bundles-screen textarea {
        font-size: 16px;
        min-height: 44px;
        max-width: 100%;
    }
    /* Los checkboxes de seleccion de comunidad no necesitan 44px de alto. */
    .bundles-screen input[type="checkbox"] { min-height: 0; }

    /* Botones y enlaces de accion con zona tactil >=44px (comprar, crear,
       pausar, eliminar, registrarse), incluidos los que no usan .btn.
       Los enlaces de texto en linea (volver, URL del pase) se excluyen. */
    .bundles-screen .btn,
    .bundles-screen button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Portadas de comunidad y avatares fluidos, nunca desbordan la tarjeta. */
    .bundles-screen img { max-width: 100%; height: auto; }

    /* Nombres, descripciones, precios y URLs largos parten palabra en lugar
       de desbordar. */
    .bundles-screen h1,
    .bundles-screen h2,
    .bundles-screen h3,
    .bundles-screen p,
    .bundles-screen .break-all { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Panel «Mi negocio» del creador (/g/{slug}/admin/mi_negocio):
   pasada mobile-first. Bloque ADITIVO acotado a .minegocio-screen.
   Todo bajo la media query: cero regresion en escritorio, sin color
   (respeta dark mode). Razonado a 360px y 414px de ancho.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .minegocio-screen { max-width: 100%; overflow-x: hidden; }

    /* Rejillas de KPIs y tarjetas a una sola columna fluida: nunca
       desbordan en 360/414px. */
    .minegocio-screen .grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    .minegocio-screen .grid > * { max-width: 100%; }

    /* Campos (exportar/filtros embebidos) a 16px evita el zoom de iOS al
       enfocar, y a lo ancho; anulan anchos fijos. */
    .minegocio-screen input,
    .minegocio-screen select,
    .minegocio-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* Botones y enlaces de accion con zona tactil >=44px (exportar CSV y
       demas acciones), incluidos los que no usan .btn (WCAG 2.5.5). */
    .minegocio-screen .btn,
    .minegocio-screen button,
    .minegocio-screen a[href] {
        min-height: 44px;
    }
    /* Enlaces de solo texto en linea (dentro de parrafos o listas): no
       forzar altura de bloque que rompa el flujo. */
    .minegocio-screen p a[href],
    .minegocio-screen li a[href] {
        min-height: 0;
    }

    /* Titulos, descripciones y cifras largas parten palabra antes que
       desbordar la tarjeta. */
    .minegocio-screen h1,
    .minegocio-screen h2,
    .minegocio-screen h3,
    .minegocio-screen p { overflow-wrap: anywhere; word-break: break-word; }

    /* Media incrustada fluida, nunca desborda. */
    .minegocio-screen img,
    .minegocio-screen iframe { max-width: 100%; height: auto; }
}


/* ============================================================
   Panel de ANALITICAS del creador (/g/{slug}/admin/analiticas):
   pasada mobile-first. Bloque ADITIVO acotado a .analytics-screen
   (convive con .gadmin-screen del layout de comunidad). Pantalla de
   consumo: KPIs de miembros, engagement, aprendizaje e ingresos.
   Todo bajo la media query: cero regresion en escritorio, sin color
   (respeta dark mode). Razonado a 360px y 414px de ancho.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .analytics-screen { max-width: 100%; overflow-x: hidden; }

    /* Rejillas de tarjetas KPI (grid-cols-2/lg:grid-cols-4) a una sola
       columna fluida: a 360/414px las cifras y subtitulos respiran y
       nunca desbordan. */
    .analytics-screen .grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    .analytics-screen .grid > * { max-width: 100%; }

    /* Boton de accion (resumen con IA) con zona tactil >=44px, incluido
       si no usa .btn (WCAG 2.5.5). */
    .analytics-screen .btn,
    .analytics-screen button {
        min-height: 44px;
    }

    /* Titulos, subtitulos y cifras largas (importes con separadores de
       miles) parten palabra antes que desbordar la tarjeta. */
    .analytics-screen h1,
    .analytics-screen h2,
    .analytics-screen p,
    .analytics-screen .text-2xl { overflow-wrap: anywhere; word-break: break-word; }
}


/* ============================================================
   Ficha de DETALLE de un evento (/g/{slug}/events/view/{id}):
   pasada mobile-first. Bloque ADITIVO acotado a .eventview-screen
   (convive con .events-screen del listado). Superficie de consumo y
   monetizacion (entrada PPV, stream integrado, RSVP, chat en vivo).
   Todo bajo la media query: cero regresion en escritorio, sin color
   (respeta dark mode). Razonado a 360px y 414px de ancho.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .eventview-screen { max-width: 100%; overflow-x: hidden; }

    /* Rejillas a una sola columna fluida: nunca desbordan en 360/414px. */
    .eventview-screen .grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    .eventview-screen .grid > * { max-width: 100%; }

    /* Barra de acciones (.ics, Google Calendar, Outlook) y barra de
       compartir apiladas y a lo ancho: los botones no se comprimen. */
    .eventview-screen .event-actions,
    .eventview-screen .event-share { max-width: 100%; }

    /* Campos (chat del evento) a 16px evita el zoom de iOS al enfocar,
       y a lo ancho; anulan anchos fijos. */
    .eventview-screen input,
    .eventview-screen select,
    .eventview-screen textarea {
        font-size: 16px;
        min-height: 44px;
        max-width: 100%;
    }

    /* Botones y acciones con zona tactil >=44px (comprar entrada, RSVP,
       enviar en el chat, anadir a calendario), incluidos los que no usan
       .btn (boton RSVP, boton de envio del chat) (WCAG 2.5.5). */
    .eventview-screen .btn,
    .eventview-screen button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Enlaces de solo texto en linea (dentro de parrafos o pistas): no
       forzar altura de bloque que rompa el flujo. */
    .eventview-screen p a:not(.btn),
    .eventview-screen .text-xs a:not(.btn) { min-height: 0; }

    /* Stream integrado y media incrustada fluida, nunca desborda. */
    .eventview-screen .event-stream-embed { max-width: 100%; }
    .eventview-screen img,
    .eventview-screen iframe { max-width: 100%; height: auto; }

    /* Titulo, descripcion, precios y URLs largos parten palabra antes que
       desbordar la tarjeta. */
    .eventview-screen h1,
    .eventview-screen h2,
    .eventview-screen h3,
    .eventview-screen p { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Importar audiencia del creador (/g/{slug}/admin/importar_audiencia):
   pasada mobile-first. Bloque ADITIVO acotado a .importaudiencia-screen.
   Cero regresion en escritorio, sin color (respeta dark mode).
   Razonado a 360px y 414px de ancho.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .importaudiencia-screen { max-width: 100%; overflow-x: hidden; }

    /* KPIs (total/validos/invalidos/duplicados) y cualquier rejilla a una
       sola columna fluida: nunca desbordan en 360/414px. */
    .importaudiencia-screen .grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    .importaudiencia-screen .grid > * { max-width: 100%; }

    /* La tabla de previsualizacion conserva su scroll horizontal propio
       (envuelta en .overflow-x-auto) sin arrastrar el ancho de la pagina. */
    .importaudiencia-screen .overflow-x-auto { max-width: 100%; }

    /* Celdas de la tabla de previsualizacion: emails/nombres largos parten
       antes que forzar scroll horizontal en 360/414px. La columna de estado
       conserva su whitespace-nowrap y no se ve afectada por esto. */
    .importaudiencia-screen td,
    .importaudiencia-screen th { overflow-wrap: anywhere; word-break: break-word; }

    /* Inputs/select/textarea (archivo CSV) a 16px (evita zoom de iOS) y a
       lo ancho; anulan anchos fijos. */
    .importaudiencia-screen input,
    .importaudiencia-screen select,
    .importaudiencia-screen textarea {
        font-size: 16px;
        min-height: 44px;
        max-width: 100%;
    }
    /* El input de fichero no necesita 44px de alto minimo forzado. */
    .importaudiencia-screen input[type="file"] { min-height: 0; }

    /* Botones y enlaces de accion con zona tactil >=44px (previsualizar,
       enviar invitaciones), incluidos los que no usan .btn. Los enlaces de
       texto en linea se excluyen. */
    .importaudiencia-screen .btn,
    .importaudiencia-screen button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Titulos, descripciones y cifras largas parten palabra antes que
       desbordar la tarjeta. */
    .importaudiencia-screen h1,
    .importaudiencia-screen h2,
    .importaudiencia-screen h3,
    .importaudiencia-screen p { overflow-wrap: anywhere; word-break: break-word; }

    /* Media incrustada fluida, nunca desborda. */
    .importaudiencia-screen img,
    .importaudiencia-screen iframe { max-width: 100%; height: auto; }
}

/* ============================================================
   Proyectos / crowdfunding (/g/{slug}/proyectos y /proyectos/{id}):
   pasada mobile-first. Bloque ADITIVO acotado a .proyectos-screen.
   Todo bajo la media query: cero regresion en escritorio, sin color
   (respeta dark mode). Razonado a 360px y 414px de ancho.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .proyectos-screen { max-width: 100%; overflow-x: hidden; }

    /* Rejillas (listado de proyectos, columnas ficha + aside de recompensas)
       a una sola columna fluida: nunca desbordan en 360/414px. */
    .proyectos-screen .proy-grid,
    .proyectos-screen .pw-cols,
    .proyectos-screen .grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    .proyectos-screen .proy-grid > *,
    .proyectos-screen .pw-cols > *,
    .proyectos-screen .grid > * { max-width: 100%; }

    /* Inputs/select/textarea (importe a aportar, comentario) a 16px
       (evita el zoom de iOS) y a lo ancho; anulan anchos fijos. */
    .proyectos-screen input,
    .proyectos-screen select,
    .proyectos-screen textarea {
        font-size: 16px;
        min-height: 44px;
        max-width: 100%;
    }
    /* Los checkboxes no necesitan 44px de alto. */
    .proyectos-screen input[type="checkbox"] { min-height: 0; }

    /* Botones y enlaces de accion con zona tactil >=44px (aportar/pledge,
       gestionar, publicar, elegir recompensa), incluidos los que no usan
       .btn. Los enlaces de texto en linea (volver) se excluyen. */
    .proyectos-screen .btn,
    .proyectos-screen button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Portadas, imagenes de recompensa, avatares y video incrustado fluidos:
       nunca desbordan la tarjeta. */
    .proyectos-screen img,
    .proyectos-screen iframe,
    .proyectos-screen video { max-width: 100%; height: auto; }

    /* Titulos, descripciones e importes largos parten palabra en lugar de
       desbordar. */
    .proyectos-screen h1,
    .proyectos-screen h2,
    .proyectos-screen h3,
    .proyectos-screen h4,
    .proyectos-screen p,
    .proyectos-screen .proy-title { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Paginas legales (/legal/{slug}: terminos, privacidad, cookies...):
   pasada mobile-first. Bloque ADITIVO acotado a .legal-screen.
   Cero regresion en escritorio, sin color (respeta dark mode).
   Razonado a 360px y 414px de ancho: el contenido legal viene de
   sanitizeHtml() (parrafos, listas, enlaces, tablas, imagenes) y debe
   fluir sin provocar scroll horizontal.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .legal-screen { max-width: 100%; overflow-x: hidden; }

    /* Enlaces de accion (p. ej. botones/CTA dentro del cuerpo legal) con zona
       tactil >=44px; los enlaces de texto en linea del propio texto legal
       (.legal-content a) se excluyen para no romper el flujo de lectura. */
    .legal-screen .btn,
    .legal-screen button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Si alguna pagina legal incluye formularios (consentimiento, contacto):
       16px evita el zoom de iOS y ancho fluido anula anchos fijos. */
    .legal-screen input,
    .legal-screen select,
    .legal-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* Imagenes, iframes (mapas/embeds incrustados) y video del cuerpo legal
       fluidos, nunca desbordan el ancho de la columna. */
    .legal-screen img,
    .legal-screen iframe,
    .legal-screen video { max-width: 100%; height: auto; }

    /* Tablas del cuerpo legal (p. ej. tabla de cookies) fluidas con scroll
       propio si hace falta, sin arrastrar la pagina entera. */
    .legal-screen table { max-width: 100%; display: block; overflow-x: auto; }

    /* Titulos y contenido legal (URLs, correos, palabras largas) parten
       palabra en lugar de desbordar. */
    .legal-screen h1,
    .legal-screen h2,
    .legal-screen h3,
    .legal-screen p,
    .legal-screen li,
    .legal-screen .legal-content { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Centro de confianza (/trust): pasada mobile-first.
   Bloque ADITIVO acotado a .trust-screen. Cero regresion en
   escritorio, sin color (respeta dark mode). Razonado a 360px y
   414px: tarjetas de estado/seguridad/legal con titulos, listas y
   enlaces (volver, documentos legales) que deben fluir sin scroll
   horizontal. La vista no tiene formularios/inputs ni tablas.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .trust-screen { max-width: 100%; overflow-x: hidden; }

    /* Enlaces de accion / CTA y botones con zona tactil >=44px. */
    .trust-screen .btn,
    .trust-screen button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Imagenes/iframes/video que pudieran incrustarse: fluidos, nunca
       desbordan el ancho de la columna. */
    .trust-screen img,
    .trust-screen iframe,
    .trust-screen video { max-width: 100%; height: auto; }

    /* Titulos, textos y contenido (URLs, correos, palabras largas)
       parten palabra en lugar de desbordar. */
    .trust-screen h1,
    .trust-screen h2,
    .trust-screen h3,
    .trust-screen p,
    .trust-screen li,
    .trust-screen a { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Podcast de la comunidad (/g/{slug}/podcast): pasada
   mobile-first. Bloque ADITIVO acotado a .podcast-screen. Sirve
   tanto la pagina del miembro (/g/{slug}/podcast) como el panel del
   creador (/g/{slug}/admin/podcast), que comparten esta clase de
   ambito (mismo patron que .members-screen).
   Cero regresion en escritorio, sin color (respeta dark mode).
   Razonado a 360px y 414px de ancho: episodios con titulos,
   descripciones largas y reproductor de audio + bloque RSS
   (input de solo lectura y botones) que no deben desbordar.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .podcast-screen { max-width: 100%; overflow-x: hidden; }

    /* CTA (gestionar episodios) y botones (copiar RSS) con zona tactil
       >=44px; los enlaces de texto en linea del cuerpo se dejan intactos. */
    .podcast-screen .btn,
    .podcast-screen button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Input del RSS (y cualquier campo): 16px evita el zoom de iOS y ancho
       fluido anula los min-width/anchos fijos en pantallas de 360-414px. */
    .podcast-screen input,
    .podcast-screen select,
    .podcast-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* Reproductor de audio de cada episodio e imagenes/embeds fluidos,
       nunca desbordan el ancho de la columna. */
    .podcast-screen audio,
    .podcast-screen img,
    .podcast-screen iframe,
    .podcast-screen video { max-width: 100%; height: auto; }

    /* Tablas eventuales del contenido con scroll propio si hace falta. */
    .podcast-screen table { max-width: 100%; display: block; overflow-x: auto; }

    /* Titulos y descripciones (URLs, palabras largas) parten palabra en
       lugar de desbordar el ancho. */
    .podcast-screen h1,
    .podcast-screen h2,
    .podcast-screen h3,
    .podcast-screen p,
    .podcast-screen span,
    .podcast-screen summary { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Reservas de espacios (/g/{slug}/reservas): pasada mobile-first.
   Bloque ADITIVO acotado a .reservas-screen. Cero regresion en
   escritorio, sin color (respeta dark mode). Razonado a 360px y
   414px: parrilla de franjas horarias (muchos botones pequenos en
   flex-wrap), filtro por dia (input date + boton Ver) y lista
   «Mis reservas» con boton de cancelar, que no deben desbordar
   ni quedar con zona tactil por debajo de 44px.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .reservas-screen { max-width: 100%; overflow-x: hidden; }

    /* Formulario de filtro por dia a ancho completo y en columna para
       que la etiqueta, el input de fecha y el boton «Ver» respiren. */
    .reservas-screen form.flex.items-center.gap-2 {
        flex-wrap: wrap;
    }

    /* Botones de franja horaria, «Ver», «Reservar» y «Cancelar» con zona
       tactil >=44px; los enlaces de texto en linea del cuerpo se dejan. */
    .reservas-screen .btn,
    .reservas-screen button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* El input de fecha (y cualquier campo): 16px evita el zoom de iOS y
       ancho fluido anula min-width/anchos fijos en 360-414px. */
    .reservas-screen input,
    .reservas-screen select,
    .reservas-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }
    /* El date-picker no debe estirarse a todo el ancho; conserva su tamano. */
    .reservas-screen input[type="date"] { width: auto; }

    /* Imagenes/embeds eventuales fluidos, nunca desbordan la columna. */
    .reservas-screen img,
    .reservas-screen iframe,
    .reservas-screen video { max-width: 100%; height: auto; }

    /* Titulos, descripciones y nombres de recurso (URLs, palabras largas)
       parten palabra en lugar de desbordar el ancho de la tarjeta. */
    .reservas-screen h1,
    .reservas-screen h2,
    .reservas-screen h3,
    .reservas-screen p,
    .reservas-screen .font-semibold { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Promocion del creador (/g/{slug}/admin/promocion): pasada
   mobile-first. Bloque ADITIVO acotado a .promocion-screen. Cero
   regresion en escritorio, sin color (respeta dark mode). Razonado
   a 360px y 414px: rejilla de tarjetas de snippet (lg:grid-cols-3
   colapsa a 1 col), textareas/inputs/code con fragmentos largos y
   URLs, boton «Copiar» por tarjeta y la fila enlace+boton que no
   deben desbordar ni quedar con zona tactil por debajo de 44px.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .promocion-screen { max-width: 100%; overflow-x: hidden; }

    /* Botones «Copiar»/«Ver» con zona tactil >=44px. */
    .promocion-screen .btn,
    .promocion-screen button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Campos (URL, textareas de snippet): 16px evita el zoom de iOS y
       ancho fluido anula anchos fijos en 360-414px. */
    .promocion-screen input,
    .promocion-screen select,
    .promocion-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* Imagenes/embeds eventuales fluidos, nunca desbordan la columna. */
    .promocion-screen img,
    .promocion-screen iframe,
    .promocion-screen video { max-width: 100%; height: auto; }

    /* Titulos, textos, snippets copiables y el <code> Markdown (URLs y
       palabras largas) parten en lugar de desbordar el ancho. */
    .promocion-screen h1,
    .promocion-screen h2,
    .promocion-screen h3,
    .promocion-screen p,
    .promocion-screen code,
    .promocion-screen textarea { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Archivos del creador/miembro (/g/{slug}/archivos y .../f/{id}):
   pasada mobile-first. Bloque ADITIVO acotado a .archivos-screen
   (cubre index.php y folder.php). Cero regresion en escritorio,
   sin color (respeta dark mode). Razonado a 360px y 414px: rejilla
   de tarjetas de carpeta/descarga (sm:grid-cols-2 lg:grid-cols-3
   colapsa a 1 col), nombres de archivo largos (.truncate) y URLs,
   el buscador/orden del listado propio (_filelist.php), los botones
   «Descargar»/«Refrescar»/conmutador Lista-Cuadricula y el iframe
   de Drive embebido (conserva su height inline 70vh).
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .archivos-screen { max-width: 100%; overflow-x: hidden; }

    /* Rejillas de tarjetas de carpeta y descargas a 1 columna. */
    .archivos-screen .grid { grid-template-columns: 1fr; }
    .archivos-screen .grid > * { max-width: 100%; }

    /* Botones «Descargar»/«Refrescar»/«Gestionar» y conmutador de vista
       con zona tactil >=44px; los enlaces de texto en linea se dejan. */
    .archivos-screen .btn,
    .archivos-screen button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Buscador y selector de orden del listado propio: 16px evita el zoom
       de iOS y ancho fluido anula anchos fijos en 360-414px. */
    .archivos-screen input,
    .archivos-screen select,
    .archivos-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* Imagenes/embeds fluidos (el iframe de Drive conserva su height inline
       70vh, que gana por especificidad). */
    .archivos-screen img,
    .archivos-screen iframe,
    .archivos-screen video { max-width: 100%; height: auto; }

    /* Nombres de archivo/carpeta, titulos y descripciones (palabras largas,
       URLs) parten en lugar de desbordar el ancho de la tarjeta. */
    .archivos-screen h1,
    .archivos-screen h2,
    .archivos-screen h3,
    .archivos-screen p,
    .archivos-screen .truncate { overflow-wrap: anywhere; word-break: break-word; }

    /* Tablas eventuales con scroll propio, nunca desbordan la pagina. */
    .archivos-screen table { max-width: 100%; display: block; overflow-x: auto; }
}

/* ============================================================
   Portal del socio (/g/{slug}/socio): pasada mobile-first.
   Bloque ADITIVO acotado a .socio-screen. Cero regresion en
   escritorio, sin color (respeta dark mode). Razonado a 360px y
   414px: hub de solo lectura con rejilla de tarjetas (cuota,
   recibos, mandato SEPA, votaciones, asambleas, reservas,
   voluntariado), enlaces de accion (Firmar/Reservar/ver detalle),
   IBAN en fuente monoespaciada y titulos largos que no deben
   provocar scroll horizontal. La vista no tiene formularios.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .socio-screen { max-width: 100%; overflow-x: hidden; }

    /* Rejilla de tarjetas a una sola columna en movil (por si el breakpoint
       sm de Tailwind cambiara): garantiza tarjetas a ancho completo. */
    .socio-screen .grid { grid-template-columns: 1fr; }

    /* Enlaces de accion / CTA y botones con zona tactil >=44px; los enlaces
       de texto en linea del cuerpo (listas de votaciones, certificados) se
       dejan intactos para no romper el flujo de lectura. */
    .socio-screen .btn,
    .socio-screen button {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Imagenes/iframes/video que pudieran incrustarse: fluidos, nunca
       desbordan el ancho de la columna. */
    .socio-screen img,
    .socio-screen iframe,
    .socio-screen video { max-width: 100%; height: auto; }

    /* Tablas eventuales con scroll propio, nunca arrastran la pagina. */
    .socio-screen table { max-width: 100%; display: block; overflow-x: auto; }

    /* Titulos, textos, IBAN monoespaciado y palabras largas (URLs, correos)
       parten palabra en lugar de desbordar el ancho de la tarjeta. */
    .socio-screen h1,
    .socio-screen h2,
    .socio-screen h3,
    .socio-screen p,
    .socio-screen li,
    .socio-screen a,
    .socio-screen .font-mono { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Votaciones y encuestas (/g/{slug}/votaciones): pasada
   mobile-first. Bloque ADITIVO acotado a .votaciones-screen. Cero
   regresion en escritorio, sin color (respeta dark mode). Razonado
   a 360px y 414px: listado de tarjetas de encuesta/votacion con
   cabecera «titulo + boton Participar» en fila (flex justify-between
   que apretaria el boton), formulario de voto (radios/checkbox +
   textarea + boton), formulario de verificacion de recibo (input +
   boton en la misma linea) y tablas de resultados. Todo debe caber
   sin scroll horizontal ni zonas tactiles < 44px.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .votaciones-screen { max-width: 100%; overflow-x: hidden; }

    /* Cabecera de cada tarjeta y del titulo de pagina: que el bloque de
       texto y el boton «Participar»/«Ver resultados» pasen a apilarse en
       lugar de comprimirse en una sola linea estrecha. */
    .votaciones-screen .flex.items-start.justify-between,
    .votaciones-screen form.flex.items-center.gap-2 { flex-wrap: wrap; }

    /* Rejillas eventuales (resultados/acciones) a una sola columna. */
    .votaciones-screen .grid { grid-template-columns: 1fr; }

    /* CTA de votar/participar, «Ver resultados», «Verificar» y demas
       botones con zona tactil >=44px; los enlaces de texto en linea del
       cuerpo se dejan intactos. */
    .votaciones-screen .btn,
    .votaciones-screen button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Campos (codigo de recibo, texto libre, selects): 16px evita el zoom
       de iOS y el ancho fluido anula min-width/anchos fijos en 360-414px. */
    .votaciones-screen input,
    .votaciones-screen select,
    .votaciones-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* Imagenes/embeds/tablas de resultados fluidos, nunca desbordan. */
    .votaciones-screen img,
    .votaciones-screen iframe,
    .votaciones-screen video { max-width: 100%; height: auto; }
    .votaciones-screen table { max-width: 100%; display: block; overflow-x: auto; }

    /* Titulos, descripciones y opciones de voto (URLs, palabras largas)
       parten palabra en lugar de desbordar el ancho de la tarjeta. */
    .votaciones-screen h1,
    .votaciones-screen h2,
    .votaciones-screen h3,
    .votaciones-screen p,
    .votaciones-screen li,
    .votaciones-screen label,
    .votaciones-screen .font-bold { overflow-wrap: anywhere; word-break: break-word; }
}

/* ── EJE C: pagina publica de verificacion de certificado (/verificar/{code}).
   Aterrizaje viral standalone. Bloque ADITIVO acotado a .verificar-screen; sin
   colores para no romper dark mode. La vista es una tarjeta unica con botones de
   compartir (enlaces + boton copiar) y el codigo del certificado. ──────────── */
@media (max-width: 767.98px) {
    /* La tarjeta ocupa el ancho disponible sin desbordar en 360-414px. */
    .verificar-screen { max-width: 100%; overflow-x: hidden; }

    /* Fila «Compartir»: apilar en columna a targets de ancho completo. */
    .verificar-screen [role="group"] { flex-direction: column; align-items: stretch; }

    /* Enlaces de compartir y boton copiar: objetivo tactil >=44px. */
    .verificar-screen a,
    .verificar-screen button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Codigo del certificado, nombre, titulo del curso (cadenas largas):
       parten palabra en lugar de desbordar el ancho de la tarjeta. */
    .verificar-screen h1,
    .verificar-screen p,
    .verificar-screen code { overflow-wrap: anywhere; word-break: break-word; }
}


/* ============================================================
   Publicacion individual / permalink (/g/{slug}/feed/post/{id}):
   pasada mobile-first. Bloque ADITIVO acotado a .post-screen.
   Cero regresion en escritorio, sin color (respeta dark mode).
   Razonado a 360px y 414px: aterrizaje frecuente al compartir un
   enlace. Contiene la tarjeta del post (autor, titulo, contenido
   rico Quill con imagenes/embeds, encuesta, acciones like/guardar,
   barra de reacciones emoji, botones de compartir) y la tarjeta de
   comentarios (comentarios anidados y los editores Quill de
   respuesta y de comentario nuevo). Nada de esto debe provocar
   scroll horizontal en pantallas estrechas.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .post-screen { max-width: 100%; overflow-x: hidden; }

    /* Botones de accion (like, guardar, reaccion, encuesta, compartir,
       enviar comentario, acciones de autor, reportar) con zona tactil
       >=44px; en 360-414px el dedo acierta sin ampliar. */
    .post-screen .btn,
    .post-screen button,
    .post-screen .like-btn,
    .post-screen .save-btn,
    .post-screen .reaction-btn,
    .post-screen .poll-option,
    .post-screen .tr-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Campos (input readonly del enlace a compartir, editores) a 16px
       para evitar el zoom automatico de iOS, y ancho fluido. */
    .post-screen input,
    .post-screen select,
    .post-screen textarea,
    .post-screen .quill-reply-editor {
        font-size: 16px;
        max-width: 100%;
    }

    /* Imagen del post y cualquier embed del contenido rico (YouTube/Loom,
       video) fluidos: nunca desbordan la columna en 360px. */
    .post-screen img,
    .post-screen iframe,
    .post-screen video,
    .post-screen .post-image { max-width: 100%; height: auto; }

    /* Titulo, cuerpo del post y de los comentarios (URLs y palabras largas
       sin espacios) parten en lugar de desbordar el ancho de la tarjeta. */
    .post-screen h1,
    .post-screen h2,
    .post-screen h3,
    .post-screen .post-title,
    .post-screen .post-content,
    .post-screen .comment { overflow-wrap: anywhere; word-break: break-word; }

    /* Tablas eventuales dentro del contenido rico con scroll propio,
       nunca desbordan la pagina. */
    .post-screen .post-content table { max-width: 100%; display: block; overflow-x: auto; }
}

/* ============================================================
   Transparencia de tesoreria (/g/{slug}/tesoreria): pasada
   mobile-first. Bloque ADITIVO acotado a .tesoreria-screen. Cero
   regresion en escritorio, sin color (respeta dark mode via las
   variables/clases existentes). Razonado a 360px y 414px: vista
   de solo lectura con selector de ejercicio, rejilla de tarjetas
   de resumen (Ingresos/Gastos/Saldo/Saldo total), desglose por
   categoria y libro de movimientos en tablas. A 360/414px las
   rejillas de 2/3/4 columnas apretarian las cifras en euros y las
   tablas de 5 columnas (Fecha/Tipo/Concepto/Categoria/Importe)
   desbordarian: se fuerzan a 1 columna y las tablas ganan scroll
   horizontal propio. La vista no tiene formularios de escritura.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .tesoreria-screen { max-width: 100%; overflow-x: hidden; }

    /* Rejillas (resumen y layout categoria/movimientos) a una sola columna:
       a 360/414px las tarjetas de cifras necesitan el ancho completo. */
    .tesoreria-screen .grid { grid-template-columns: 1fr; }

    /* Enlaces de accion (ejercicios, Informe PDF, Exportar CSV) y botones con
       zona tactil >=44px. */
    .tesoreria-screen .btn,
    .tesoreria-screen button {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Formularios eventuales: inputs a 16px para evitar el zoom automatico de
       iOS al enfocar, y nunca mas anchos que su contenedor. */
    .tesoreria-screen input,
    .tesoreria-screen select,
    .tesoreria-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* Imagenes/iframes/video que pudieran incrustarse: fluidos. */
    .tesoreria-screen img,
    .tesoreria-screen iframe,
    .tesoreria-screen video { max-width: 100%; height: auto; }

    /* Tablas (categorias y libro de movimientos) con scroll propio, nunca
       arrastran la pagina. */
    .tesoreria-screen table { max-width: 100%; display: block; overflow-x: auto; }

    /* Titulos, textos, conceptos e importes en euros: parten palabra en lugar
       de desbordar el ancho de la tarjeta/columna. */
    .tesoreria-screen h1,
    .tesoreria-screen h2,
    .tesoreria-screen h3,
    .tesoreria-screen p,
    .tesoreria-screen td,
    .tesoreria-screen a { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Panel de PLATAFORMA (/admin): pasada mobile-first. Bloque
   ADITIVO acotado a .platadmin-screen. Cero regresion en
   escritorio, sin color (respeta dark mode via las variables/
   clases existentes). Razonado a 360px y 414px: dashboard del
   administrador de plataforma con cabecera, rejilla de tarjetas
   de metricas (Usuarios/Pendientes/Reportes/Posts/Cursos/
   Lecciones) a 2-3 columnas, panel de accesos rapidos con
   botones y un bloque opcional de analitica con tablas. A 360/
   414px la rejilla de 3 columnas apretaria las cifras y el bloque
   de analitica desbordaria: se fuerzan a 1 columna y las tablas
   ganan scroll horizontal propio.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .platadmin-screen { max-width: 100%; overflow-x: hidden; }

    /* Rejillas (tarjetas de metricas y analitica) a una sola columna:
       a 360/414px las tarjetas de cifras necesitan el ancho completo. */
    .platadmin-screen .grid { grid-template-columns: 1fr; }

    /* Enlaces de accion (accesos rapidos) y botones con zona tactil >=44px. */
    .platadmin-screen .btn,
    .platadmin-screen button {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Formularios eventuales: inputs a 16px para evitar el zoom automatico de
       iOS al enfocar, y nunca mas anchos que su contenedor. */
    .platadmin-screen input,
    .platadmin-screen select,
    .platadmin-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* Imagenes/iframes/video que pudieran incrustarse: fluidos. */
    .platadmin-screen img,
    .platadmin-screen iframe,
    .platadmin-screen video { max-width: 100%; height: auto; }

    /* Tablas (analitica) con scroll propio, nunca arrastran la pagina. */
    .platadmin-screen table { max-width: 100%; display: block; overflow-x: auto; }

    /* Titulos, textos, conceptos y cifras: parten palabra en lugar de
       desbordar el ancho de la tarjeta/columna. */
    .platadmin-screen h1,
    .platadmin-screen h2,
    .platadmin-screen h3,
    .platadmin-screen p,
    .platadmin-screen td,
    .platadmin-screen a { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Opciones del miembro (/g/{slug}/options): pasada mobile-first.
   Bloque ADITIVO acotado a .options-screen. Cero regresion en
   escritorio, sin color (respeta dark mode). Razonado a 360px y
   414px: pantalla de ajustes con secciones (difusiones, idioma,
   abandonar comunidad); formularios con checkbox/radio, un input
   de texto de confirmacion, enlaces-boton de idioma y botones de
   guardar/abandonar. El contenedor ya es max-w-2xl centrado.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .options-screen { max-width: 100%; overflow-x: hidden; }

    /* Botones y enlaces-boton (idioma es/en) con zona tactil >=44px. */
    .options-screen .btn,
    .options-screen button {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Inputs de accion (texto de confirmacion, campos) con 16px para
       evitar el zoom automatico de iOS al enfocar. */
    .options-screen input[type="text"],
    .options-screen input[type="email"],
    .options-screen select,
    .options-screen textarea,
    .options-screen .field {
        font-size: 16px;
        min-height: 44px;
    }

    /* Formularios apilados en vertical (el sm:flex-row de Tailwind ya lo
       hace; se refuerza para garantizar ancho completo en movil). */
    .options-screen form { width: 100%; }

    /* Imagenes/iframes/video que pudieran incrustarse: fluidos. */
    .options-screen img,
    .options-screen iframe,
    .options-screen video { max-width: 100%; height: auto; }

    /* Titulos, textos y palabras largas (correos, URLs) parten palabra en
       lugar de desbordar el ancho de la seccion. */
    .options-screen h1,
    .options-screen h2,
    .options-screen p,
    .options-screen label,
    .options-screen span { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Publicaciones guardadas (/feed/saved): pasada mobile-first.
   Bloque ADITIVO acotado a .saved-screen. Cero regresion en
   escritorio (todo dentro del media query), sin color (respeta
   dark mode). Razonado a 360px y 414px: la vista lista .post-card
   (autor, badges, titulo, preview y una barra .post-actions con
   4 controles) o un estado vacio .empty-state; sin formularios,
   tablas ni media incrustada, por eso no se incluyen esas reglas.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal. */
    .saved-screen { max-width: 100%; overflow-x: hidden; }

    /* Botones y enlaces de accion con zona tactil >=44px
       (CTA del estado vacio y controles de cada post). */
    .saved-screen .btn,
    .saved-screen button,
    .saved-screen .comment-count-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Barra de acciones del post: que los 4 controles fluyan a
       varias lineas en pantallas estrechas en vez de desbordar. */
    .saved-screen .post-actions { flex-wrap: wrap; }

    /* Titulos, preview y nombres largos (URLs, correos) parten
       palabra en lugar de provocar scroll horizontal. */
    .saved-screen h1,
    .saved-screen .post-title,
    .saved-screen .post-title a,
    .saved-screen .post-content,
    .saved-screen .post-author-name,
    .saved-screen .empty-state-title,
    .saved-screen .empty-state-text { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Voluntariado (/g/{slug}/voluntariado): pasada mobile-first.
   Bloque ADITIVO acotado a .voluntariado-screen. Cero regresion
   en escritorio, sin color (respeta dark mode). Razonado a 360px
   y 414px: lista vertical de turnos con boton Apuntarme/Cancelar
   a la derecha, tarjetas de horas acreditadas (enlaces a
   certificados) e historial con badges de estado. La vista no
   tiene inputs visibles (solo campos hidden), ni tablas, ni
   media incrustado. Titulos y descripciones de turno pueden ser
   largos y no deben provocar scroll horizontal.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .voluntariado-screen { max-width: 100%; overflow-x: hidden; }

    /* Botones de accion (Apuntarme / Cancelar inscripcion) con zona
       tactil >=44px; conservan el flujo en linea junto al texto del turno. */
    .voluntariado-screen button {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Titulos, textos, descripciones de turno y palabras largas (URLs,
       correos, nombres) parten palabra en lugar de desbordar la tarjeta. */
    .voluntariado-screen h1,
    .voluntariado-screen p,
    .voluntariado-screen a,
    .voluntariado-screen div { overflow-wrap: anywhere; word-break: break-word; }
}


/* ============================================================
   Panel de DIFUSIONES del creador (/g/{slug}/admin/difusion):
   pasada mobile-first. Bloque ADITIVO acotado a .broadcast-screen
   (convive con .gadmin-screen del layout de comunidad). Nucleo del
   modelo creador: envio de email/notificacion a la audiencia.
   Todo bajo la media query: cero regresion en escritorio, sin color
   (respeta dark mode). Razonado a 360px y 414px de ancho.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .broadcast-screen { max-width: 100%; overflow-x: hidden; }

    /* Rejillas de segmentacion (membresia/nivel, actividad/mas filtros)
       a una sola columna: a 360/414px los dos selects necesitan el ancho
       completo y no se comprimen. */
    .broadcast-screen .grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    .broadcast-screen .grid > * { max-width: 100%; }

    /* Editor y campos del formulario (asunto, cuerpo, filtros, datetime)
       a 16px evita el zoom de iOS al enfocar, y a lo ancho; anulan anchos
       fijos en linea que a 360px se quedarian estrechos. */
    .broadcast-screen input,
    .broadcast-screen select,
    .broadcast-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* Botones de accion (enviar difusion, guardar plantilla/segmento,
       activar newsletter, borrar) con zona tactil >=44px, incluidos los
       que no usan .btn (WCAG 2.5.5). */
    .broadcast-screen .btn,
    .broadcast-screen button {
        min-height: 44px;
    }
    /* Enlaces de solo texto en linea (ver pagina publica, etc.): no forzar
       altura de bloque que rompa el flujo del parrafo. */
    .broadcast-screen p a[href] { min-height: 0; }

    /* Tabla de metricas de campanas (ultimas difusiones) con scroll propio,
       nunca arrastra la pagina. */
    .broadcast-screen table { max-width: 100%; display: block; overflow-x: auto; }

    /* Titulos, textos, asuntos y codigos de plantilla ({nombre}) parten
       palabra antes que desbordar la tarjeta/columna. */
    .broadcast-screen h1,
    .broadcast-screen h2,
    .broadcast-screen p,
    .broadcast-screen td,
    .broadcast-screen code { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Membresias del creador (/g/{slug}/admin/membresias): pasada
   mobile-first. Bloque ADITIVO acotado a .tiers-screen. Corazon
   de la monetizacion: crear niveles de acceso (gratis/pago) y
   gestionar cupones y codigos regalo. Cero regresion en escritorio,
   sin color (respeta dark mode via las variables/clases existentes).
   Razonado a 360px y 414px: rejilla de formulario de creacion +
   listado de membresias (grid-cols hasta 3), formularios con precio/
   periodo/selects de acceso, y tablas de cupones y codigos regalo de
   varias columnas. A 360/414px las rejillas apretarian los campos y
   las tablas desbordarian: se fuerzan a 1 columna y las tablas ganan
   scroll horizontal propio. La vista no incrusta media.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .tiers-screen { max-width: 100%; overflow-x: hidden; }

    /* Rejillas (formulario de creacion + listado de membresias) a una sola
       columna: a 360/414px las tarjetas y campos necesitan el ancho completo. */
    .tiers-screen .grid { grid-template-columns: 1fr; }
    .tiers-screen .grid > * { max-width: 100%; }

    /* Campos del formulario (nombre, descripcion, precio, periodo, selects de
       cursos/categorias/eventos) a 16px evita el zoom de iOS al enfocar, y
       nunca mas anchos que su contenedor. */
    .tiers-screen input,
    .tiers-screen select,
    .tiers-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* Botones de accion (crear membresia, generar cupon/codigo regalo, anular)
       con zona tactil >=44px, incluidos los que no usan .btn (WCAG 2.5.5). */
    .tiers-screen .btn,
    .tiers-screen button {
        min-height: 44px;
    }

    /* Tablas (cupones y codigos regalo) con scroll propio, nunca arrastran
       la pagina. */
    .tiers-screen table { max-width: 100%; display: block; overflow-x: auto; }

    /* Titulos, textos, importes y codigos parten palabra antes que desbordar
       la tarjeta/columna. */
    .tiers-screen h1,
    .tiers-screen h2,
    .tiers-screen h3,
    .tiers-screen p,
    .tiers-screen td,
    .tiers-screen code { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Biblioteca exclusiva (/g/{slug}/feed/biblioteca): pasada
   mobile-first. Bloque ADITIVO acotado a .biblioteca-screen. Cero
   regresion en escritorio (todo dentro del media query), sin color
   (respeta dark mode). Razonado a 360px y 414px: la vista lleva un
   formulario role="search" (input type=search + select orden + boton),
   una barra de filtros por tier (enlaces .btn), un listado flex en
   columna de .post-card (badge, titulo, fecha y una .post-actions) o
   un estado vacio .empty-state, y una paginacion de enlaces .btn; sin
   tablas ni media incrustada, por eso no se incluyen esas reglas.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal. */
    .biblioteca-screen { max-width: 100%; overflow-x: hidden; }

    /* Botones y enlaces de accion con zona tactil >=44px (buscar,
       filtros por tier, ver post, paginacion y CTA del estado vacio). */
    .biblioteca-screen .btn,
    .biblioteca-screen button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Campos del buscador (texto/orden) a 16px para evitar el zoom de
       iOS al enfocar; ancho fluido para no desbordar la columna. */
    .biblioteca-screen input,
    .biblioteca-screen input[type="search"],
    .biblioteca-screen select {
        font-size: 16px;
        max-width: 100%;
    }

    /* Barra de acciones del post: que los controles fluyan a varias
       lineas en pantallas estrechas en vez de desbordar. */
    .biblioteca-screen .post-actions { flex-wrap: wrap; }

    /* Titulos, fecha, autor y textos largos (URLs, correos) parten
       palabra en lugar de provocar scroll horizontal. */
    .biblioteca-screen h1,
    .biblioteca-screen .post-title,
    .biblioteca-screen .post-title a,
    .biblioteca-screen .biblioteca-locked-title,
    .biblioteca-screen .biblioteca-locked,
    .biblioteca-screen .post-time,
    .biblioteca-screen .empty-state-title,
    .biblioteca-screen .empty-state-text { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Panel de METAS del creador (/g/{slug}/admin/metas):
   pasada mobile-first. Bloque ADITIVO acotado a .goals-screen.
   Todo bajo la media query: cero regresion en escritorio, sin color
   (respeta dark mode). Razonado a 360px y 414px de ancho. Esta vista
   no tiene tablas ni media incrustada, por eso no se incluyen esas
   reglas.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .goals-screen { max-width: 100%; overflow-x: hidden; }

    /* Rejillas (progreso actual y alta+listado) a una sola columna
       fluida: nunca desbordan en 360/414px. */
    .goals-screen .grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    .goals-screen .grid > * { max-width: 100%; }

    /* Campos del formulario (tipo, objetivo, recompensa, visible) a 16px
       evita el zoom de iOS al enfocar, y a lo ancho anulando fijos. */
    .goals-screen input,
    .goals-screen select,
    .goals-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* Botones de accion con zona tactil >=44px (crear/guardar y los
       controles de reordenar/eliminar, que no usan .btn) (WCAG 2.5.5). */
    .goals-screen .btn,
    .goals-screen button {
        min-height: 44px;
    }

    /* Titulos, textos y recompensas largas parten palabra antes que
       desbordar la tarjeta. */
    .goals-screen h1,
    .goals-screen p { overflow-wrap: anywhere; word-break: break-word; }
}


/* ============================================================
   Panel RETOS del creador (/g/{slug}/admin/retos): pasada
   mobile-first. Bloque ADITIVO acotado a .challenges-screen
   (convive con .gadmin-screen del layout de comunidad). Todo bajo
   la media query: cero regresion en escritorio, sin color (respeta
   dark mode). Razonado a 360px y 414px de ancho. Esta vista solo
   tiene un formulario de alta y tarjetas de reto: sin tablas ni
   media incrustada, por eso no se incluyen esas reglas.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal. */
    .challenges-screen { max-width: 100%; overflow-x: hidden; }

    /* Rejilla (form de alta + listado de retos, cols-1 lg:cols-3)
       a una sola columna fluida: nunca desborda en 360/414px. */
    .challenges-screen .grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    .challenges-screen .grid > * { max-width: 100%; }

    /* Campos del alta (titulo, descripcion, tipo, meta, puntos,
       insignia, fechas) a 16px evita el zoom de iOS al enfocar, y a
       lo ancho anulando anchos fijos (w-20/w-24). */
    .challenges-screen input,
    .challenges-screen select,
    .challenges-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* Botones con zona tactil >=44px: el de crear (.btn) y los de
       activar/pausar/eliminar (button suelto) (WCAG 2.5.5). */
    .challenges-screen .btn,
    .challenges-screen button {
        min-height: 44px;
    }

    /* Titulos y textos largos (titulo/descripcion/recompensa del
       reto) parten palabra antes que desbordar la tarjeta. */
    .challenges-screen h1,
    .challenges-screen h2,
    .challenges-screen p { overflow-wrap: anywhere; word-break: break-word; }
}


/* ============================================================
   Panel EMBUDO de conversion del creador (/g/{slug}/admin/embudo):
   pasada mobile-first. Bloque ADITIVO acotado a .embudo-screen
   (convive con .gadmin-screen del layout de comunidad). Pantalla de
   consumo: filtros de periodo, rejilla de KPIs del funnel (visitas ->
   registros -> altas -> pagos) y tabla de desglose UTM por fuente/
   medio/campana. Todo bajo la media query: cero regresion en
   escritorio, sin color (respeta dark mode). Razonado a 360px y 414px.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .embudo-screen { max-width: 100%; overflow-x: hidden; }

    /* Rejilla de KPIs del embudo (grid-cols-2/md:grid-cols-4) a una sola
       columna fluida: a 360/414px las cifras y porcentajes respiran y
       nunca desbordan la tarjeta. */
    .embudo-screen .grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    .embudo-screen .grid > * { max-width: 100%; }

    /* Filtros de periodo (7/30/90/365 dias) son enlaces de accion: zona
       tactil >=44px y centrados, aunque no usen .btn (WCAG 2.5.5). */
    .embudo-screen a[href] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Tabla de desglose por fuente/medio/campana (8 columnas) con scroll
       horizontal propio, nunca arrastra el ancho de la pagina. */
    .embudo-screen table { max-width: 100%; display: block; overflow-x: auto; }

    /* Titulos, descripciones y celdas largas (fuentes y campanas UTM)
       parten palabra antes que desbordar la tarjeta/columna. */
    .embudo-screen h1,
    .embudo-screen h2,
    .embudo-screen p,
    .embudo-screen td { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Analítica de retención del creador (/g/{slug}/admin/retencion):
   pasada mobile-first. Bloque ADITIVO acotado a .retencion-screen
   (convive con .gadmin-screen del layout de comunidad). Pantalla de
   consumo: formulario de oferta win-back (checkbox + mensaje +
   código de descuento), filtros de periodo (30/90/365/todo) y tabla
   de desglose de motivos de baja con barras de proporción. Todo bajo
   la media query: cero regresión en escritorio, sin color (respeta
   dark mode). Razonado a 360px y 414px de ancho.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .retencion-screen { max-width: 100%; overflow-x: hidden; }

    /* Campos del formulario de oferta (mensaje + código) a 16px: evita el
       zoom de iOS al enfocar, y a lo ancho; anulan anchos fijos. No hay
       <select> en esta vista, por eso no se incluye. */
    .retencion-screen input,
    .retencion-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* Botón «Guardar oferta» con zona tactil >=44px (WCAG 2.5.5). */
    .retencion-screen .btn,
    .retencion-screen button {
        min-height: 44px;
    }

    /* Filtros de periodo (30/90 dias, 1 año, todo) son enlaces de accion:
       zona tactil >=44px y texto centrado, aunque no usen .btn. */
    .retencion-screen a[href] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Tabla de desglose de motivos (motivo/bajas/proporcion) con scroll
       horizontal propio, nunca arrastra el ancho de la pagina. */
    .retencion-screen table { max-width: 100%; display: block; overflow-x: auto; }

    /* Titulos, descripciones, comentarios y celdas largas parten palabra
       antes que desbordar la tarjeta/columna. */
    .retencion-screen h1,
    .retencion-screen h2,
    .retencion-screen p,
    .retencion-screen td { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Automatizaciones del creador (/g/{slug}/admin/automatizaciones):
   pasada mobile-first. Bloque ADITIVO acotado a
   .automatizaciones-screen. Motor "si pasa X -> haz Y" del creador:
   un formulario de creacion en rejilla (nombre, disparador, accion y
   config condicional: tier/curso/puntos/mensaje) y un listado de
   reglas con botones Pausar/Reanudar y Eliminar. Cero regresion en
   escritorio (todo dentro del media query), sin color (respeta dark
   mode via las clases existentes). Razonado a 360px y 414px: la
   rejilla sm:grid-cols-2 apretaria los campos y los selects/textarea
   dispararian el zoom de iOS; se fuerza 1 columna, campos a 16px y
   botones con zona tactil >=44px. La vista no lleva tabla ni media.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .automatizaciones-screen { max-width: 100%; overflow-x: hidden; }

    /* Rejilla del formulario de creacion a una sola columna: a 360/414px
       cada campo (nombre, disparador, accion y su config) necesita el
       ancho completo. */
    .automatizaciones-screen .grid { grid-template-columns: 1fr; }
    .automatizaciones-screen .grid > * { max-width: 100%; }

    /* Campos del formulario (nombre, selects de evento/accion/tier/curso,
       puntos y textarea del mensaje) a 16px evita el zoom de iOS al
       enfocar, y nunca mas anchos que su contenedor. */
    .automatizaciones-screen input,
    .automatizaciones-screen select,
    .automatizaciones-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* Botones de accion (crear automatizacion, pausar/reanudar, eliminar)
       con zona tactil >=44px, incluidos los que no usan .btn (WCAG 2.5.5). */
    .automatizaciones-screen .btn,
    .automatizaciones-screen button {
        min-height: 44px;
    }

    /* Titulos, textos de ayuda y nombres de regla parten palabra antes
       que desbordar la tarjeta/columna. */
    .automatizaciones-screen h1,
    .automatizaciones-screen h2,
    .automatizaciones-screen p { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Dashboard de INGRESOS del creador (/g/{slug}/admin/ingresos):
   pasada mobile-first. Bloque ADITIVO acotado a .ingresos-screen
   (convive con .gadmin-screen del layout de comunidad). Pantalla de
   consumo/analitica: rejilla de KPIs (MRR/ARR/ARPU/LTV/churn...),
   tablas de ingresos por mes y cohortes de alta, y lista de top fans
   con enlaces al perfil. Sin formularios ni multimedia en la vista,
   por eso se omiten reglas de input/select/textarea e img/iframe.
   Todo bajo la media query: cero regresion en escritorio, sin color
   (respeta dark mode). Razonado a 360px y 414px de ancho.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .ingresos-screen { max-width: 100%; overflow-x: hidden; }

    /* Rejillas de KPIs (grid-cols-2/md:grid-cols-4) y de tablas
       (md:grid-cols-2) a una sola columna fluida: a 360/414px las cifras
       respiran y ninguna tarjeta desborda. */
    .ingresos-screen .grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    .ingresos-screen .grid > * { max-width: 100%; }

    /* Enlaces al perfil de la lista de top fans: zona tactil >=44px y
       centrada para el pulgar (WCAG 2.5.5), aunque no usen .btn. */
    .ingresos-screen a[href] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Tablas de ingresos por mes y cohortes (4 columnas) con scroll
       horizontal propio, nunca arrastran el ancho de la pagina. */
    .ingresos-screen table { max-width: 100%; display: block; overflow-x: auto; }

    /* Titulos, descripciones y celdas largas parten palabra antes que
       desbordar la tarjeta/columna. */
    .ingresos-screen h1,
    .ingresos-screen h2,
    .ingresos-screen p,
    .ingresos-screen td { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Pantalla «Crear nueva comunidad» (/dashboard/create): pasada
   mobile-first. Bloque ADITIVO acotado a .creategroup-screen. Es el
   paso clave del onboarding del creador: formulario en 3 pasos
   (Detalles / Precio / Vista previa) con stepper #cg-stepper, campos
   de texto/numero, textarea y toggle, mas botones de asistente
   (Anterior/Siguiente/Crear). Sin tablas ni multimedia en la vista,
   por eso se omiten reglas de table/img/iframe/video/.grid (cero CSS
   muerto). Todo bajo la media query: cero regresion en escritorio,
   sin color (respeta dark mode). Razonado a 360px y 414px de ancho.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .creategroup-screen { max-width: 100%; overflow-x: hidden; }

    /* Campos del formulario (nombre, slug, descripcion, precio) a 16px
       evita el zoom de iOS al enfocar, y a lo ancho; anulan anchos fijos
       (p.ej. el precio con w-40) para no desbordar en 360/414px. */
    .creategroup-screen input,
    .creategroup-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* Botones del asistente (Anterior/Siguiente/Crear) con zona tactil
       >=44px (WCAG 2.5.5), incluidos los que no usan .btn. */
    .creategroup-screen .btn,
    .creategroup-screen button {
        min-height: 44px;
    }

    /* El stepper de 3 pasos puede envolver si el ancho aprieta, en vez de
       forzar scroll horizontal en 360px. */
    .creategroup-screen #cg-stepper { flex-wrap: wrap; max-width: 100%; }

    /* Titulos, ayudas y etiquetas parten palabra antes que desbordar
       la tarjeta/columna. */
    .creategroup-screen h1,
    .creategroup-screen h2,
    .creategroup-screen p,
    .creategroup-screen label { overflow-wrap: anywhere; word-break: break-word; }
}


/* ============================================================
   Primeros pasos del creador (/g/{slug}/admin/onboarding):
   pasada mobile-first. Bloque ADITIVO acotado a .primerospasos-screen.
   Todo bajo la media query: cero regresion en escritorio, sin color
   (respeta dark mode). Razonado a 360px y 414px de ancho. Esta vista
   (checklist de puesta en marcha) no tiene rejillas, formularios,
   tablas ni media incrustada, por eso solo se acota el contenedor,
   la zona tactil de los botones y el corte de textos largos.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .primerospasos-screen { max-width: 100%; overflow-x: hidden; }

    /* Botones de accion (Empezar/Revisar, enlaces con .btn) con zona
       tactil >=44px (WCAG 2.5.5). */
    .primerospasos-screen .btn { min-height: 44px; }

    /* Titulo, subtitulo y descripciones de cada paso parten palabra
       antes que desbordar la tarjeta en 360/414px. */
    .primerospasos-screen h1,
    .primerospasos-screen p { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Secuencias de email del creador (/g/{slug}/admin/secuencias):
   pasada mobile-first. Bloque ADITIVO acotado a .secuencias-screen
   (convive con .gadmin-screen del layout de comunidad). Automatiza
   correos de goteo: crear secuencia, anadir pasos y ver metricas.
   Todo bajo la media query: cero regresion en escritorio, sin color
   (respeta dark mode). Razonado a 360px y 414px de ancho.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .secuencias-screen { max-width: 100%; overflow-x: hidden; }

    /* Campos de los formularios (nombre, disparador, dia, asunto y cuerpo)
       a 16px evita el zoom de iOS al enfocar, y a lo ancho; anulan los
       anchos fijos en linea (max-width/flex) que a 360px se estrecharian. */
    .secuencias-screen input,
    .secuencias-screen select,
    .secuencias-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* Botones de accion (crear, activar/pausar, borrar, anadir paso) con
       zona tactil >=44px, incluidos los que no usan .btn (WCAG 2.5.5). */
    .secuencias-screen .btn,
    .secuencias-screen button {
        min-height: 44px;
    }

    /* Tabla de metricas de cada secuencia (dia, asunto, enviados, aperturas,
       clics) con scroll propio, nunca arrastra la pagina. */
    .secuencias-screen table { max-width: 100%; display: block; overflow-x: auto; }

    /* Titulos, textos, asuntos, celdas y el codigo del cron parten palabra
       antes que desbordar la tarjeta/columna en 360/414px. */
    .secuencias-screen h1,
    .secuencias-screen h2,
    .secuencias-screen p,
    .secuencias-screen td,
    .secuencias-screen code { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Panel Equipos del creador (/g/{slug}/admin/equipos): pasada
   mobile-first. Bloque ADITIVO acotado a .equipos-screen (convive
   con .gadmin-screen del layout de comunidad). Crear equipo,
   ranking con boton de borrado y tabla de asignacion de miembros
   (select + guardar). Todo bajo la media query: cero regresion en
   escritorio, sin color (respeta dark mode). Razonado a 360 y 414px.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .equipos-screen { max-width: 100%; overflow-x: hidden; }

    /* Campos (nombre y color del equipo, selector de equipo por miembro)
       a 16px evita el zoom de iOS al enfocar, y ancho fluido anula los
       min-width en linea que a 360px desbordarian la tarjeta. */
    .equipos-screen input,
    .equipos-screen select,
    .equipos-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* Botones (crear, borrar, guardar asignacion) con zona tactil >=44px,
       incluidos los que no usan .btn (WCAG 2.5.5). */
    .equipos-screen .btn,
    .equipos-screen button {
        min-height: 44px;
    }

    /* Tabla de asignacion de miembros con scroll propio, nunca arrastra
       la pagina en 360/414px. */
    .equipos-screen table { max-width: 100%; display: block; overflow-x: auto; }

    /* Titulos, textos y celdas (nombres de miembro/equipo largos) parten
       palabra antes que desbordar la tarjeta o columna. */
    .equipos-screen h1,
    .equipos-screen h2,
    .equipos-screen p,
    .equipos-screen td { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Panel Lista de espera del creador (/g/{slug}/admin/waitlist):
   pasada mobile-first. Bloque ADITIVO acotado a .waitlist-screen
   (convive con .gadmin-screen del layout de comunidad). La vista
   es un listado: titulo, intro, enlace CSV y una tabla de emails
   apuntados (email, nombre, fecha). Sin formularios ni botones.
   Todo bajo la media query: cero regresion en escritorio, sin
   color (respeta dark mode). Razonado a 360 y 414px.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .waitlist-screen { max-width: 100%; overflow-x: hidden; }

    /* La tabla de emails con scroll propio: un correo largo scrollea
       dentro de la tabla y nunca arrastra la pagina en 360/414px. */
    .waitlist-screen table { max-width: 100%; display: block; overflow-x: auto; }

    /* Titulo, intro y celdas (emails/nombres largos sin espacios)
       parten palabra antes que desbordar la tarjeta o la columna. */
    .waitlist-screen h1,
    .waitlist-screen p,
    .waitlist-screen th,
    .waitlist-screen td { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Panel «Retención: riesgo de baja» del creador
   (/g/{slug}/admin/churn): pasada mobile-first. Bloque ADITIVO
   acotado a .churn-screen (convive con .gadmin-screen del layout
   de comunidad). Pantalla de consumo/analitica: cabecera (titulo +
   descripcion), tarjeta con boton «Consejos de retencion con IA» y
   tabla de miembros ordenados por riesgo (miembro con enlace al CRM,
   score, ultima actividad, antiguedad, pago y señales). No hay
   formularios (input/select/textarea), ni rejilla .grid, ni
   multimedia en la vista, por eso se omiten esas reglas: cero CSS
   muerto. Todo bajo la media query: cero regresion en escritorio,
   sin color (respeta dark mode). Razonado a 360px y 414px de ancho.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .churn-screen { max-width: 100%; overflow-x: hidden; }

    /* Boton «Consejos de retencion con IA» con zona tactil >=44px (WCAG 2.5.5). */
    .churn-screen .btn,
    .churn-screen button {
        min-height: 44px;
    }

    /* Enlaces al CRM del miembro (nombre en cada fila): zona tactil >=44px
       y centrada para el pulgar, aunque no usen .btn. */
    .churn-screen a[href] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Tabla de miembros por riesgo (6 columnas: miembro/riesgo/actividad/
       antiguedad/pago/señales) con scroll horizontal propio, nunca
       arrastra el ancho de la pagina. */
    .churn-screen table { max-width: 100%; display: block; overflow-x: auto; }

    /* Titulos, descripcion y celdas largas parten palabra antes que
       desbordar la tarjeta/columna. */
    .churn-screen h1,
    .churn-screen h2,
    .churn-screen p,
    .churn-screen td { overflow-wrap: anywhere; word-break: break-word; }
}

/* ------------------------------------------------------------------------- *
   roles.php (panel RBAC de roles del creador): pasada mobile-first.
   Bloque ADITIVO acotado a .roles-screen; sin colores -> dark mode intacto,
   sin regresion en desktop. Elementos reales: inputs de texto (.field),
   botones, formularios flex-wrap y enlaces; sin table/select/textarea.
 * ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .roles-screen { max-width: 100%; overflow-x: hidden; }
    /* 16px evita el zoom automatico de iOS al enfocar; no desborda la tarjeta */
    .roles-screen input[type="text"],
    .roles-screen .field { font-size: 16px; max-width: 100%; }
    /* objetivos tactiles >= 44px (renombrar, guardar, eliminar, editar) */
    .roles-screen .btn,
    .roles-screen button { min-height: 44px; }
    .roles-screen a[href] { min-height: 44px; display: inline-flex; align-items: center; }
    /* textos largos (nombres de rol, descripciones de permisos) no desbordan */
    .roles-screen h1,
    .roles-screen p,
    .roles-screen span,
    .roles-screen label { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Panel «Gestión de cursos» del creador (/g/{slug}/admin/courses):
   pasada mobile-first. Bloque ADITIVO acotado a .courses-screen
   (convive con .gadmin-screen/.max-w-7xl del layout de comunidad).
   Elementos REALES de la vista: cabecera (h1 + boton «Nuevo Curso»),
   estado vacio (p + boton), lista de cursos en TARJETAS (div, no
   table) con h3 y enlaces/botones de accion (Gestionar/Editar/
   Eliminar), y dos modales con formularios (.field: input text/
   number, textarea, select). NO hay <table> ni <td> en la vista, por
   eso se omiten esas reglas: cero CSS muerto. Todo bajo la media
   query: cero regresion en escritorio, sin color (dark mode intacto).
   Razonado a 360px y 414px de ancho.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .courses-screen { max-width: 100%; overflow-x: hidden; }

    /* Campos de los modales (titulo, descripcion, prereq, nivel, PPV,
       plazos): 16px evita el zoom automatico de iOS al enfocar y no
       desbordan la tarjeta del modal. */
    .courses-screen input,
    .courses-screen select,
    .courses-screen textarea,
    .courses-screen .field { font-size: 16px; max-width: 100%; }

    /* Botones (Nuevo Curso, Crear, Guardar, Eliminar, Cancelar, IA):
       zona tactil >= 44px (WCAG 2.5.5). */
    .courses-screen .btn,
    .courses-screen button { min-height: 44px; }

    /* Enlaces de accion de cada tarjeta («Gestionar contenido»): zona
       tactil >= 44px y centrada para el pulgar, aunque no usen .btn. */
    .courses-screen a[href] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Titulos, descripcion y nombres de curso largos parten palabra
       antes que desbordar la tarjeta/columna. */
    .courses-screen h1,
    .courses-screen h2,
    .courses-screen h3,
    .courses-screen p { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Plantillas por tipo de creador (/g/{slug}/admin/plantillas):
   pasada mobile-first. Bloque ADITIVO acotado a .plantillas-screen.
   Cero regresion en escritorio, sin color (respeta dark mode).
   Razonado a 360px y 414px: la rejilla lg:grid-cols-2 de tarjetas
   colapsa a 1 col; cada tarjeta lleva textos largos (bios, guiones,
   reglas), botones «Copiar» por bloque y el CTA final. NO hay
   formularios visibles (solo <input type=hidden>), ni tablas, ni
   imagenes/embeds → esos selectores se OMITEN a proposito.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal. */
    .plantillas-screen { max-width: 100%; overflow-x: hidden; }

    /* Botones «Copiar» de cada bloque y el CTA (.btn/<button>) con
       zona tactil >=44px, centrados para el pulgar. */
    .plantillas-screen .btn,
    .plantillas-screen button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Titulos, textos, items de plan/seccion y fragmentos copiables
       (bios, guiones, reglas con palabras/URLs largas) parten en
       lugar de desbordar el ancho de la tarjeta. */
    .plantillas-screen h1,
    .plantillas-screen h2,
    .plantillas-screen h3,
    .plantillas-screen p,
    .plantillas-screen li { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Editor de Niveles del creador (/g/{slug}/admin/levels):
   pasada mobile-first. Bloque ADITIVO acotado a .levels-screen
   (convive con .gadmin-screen/.max-w-7xl del layout de comunidad).
   Elementos REALES de la vista: cabecera (h1 + p), un formulario
   con inputs de texto/numero/color, <select> (insignia auto) y
   .field; botones (emoji-picker <button> y «Guardar niveles» .btn);
   una <table class="cards-mobile"> que YA reflota a tarjetas en
   movil (regla global, linea ~1377) por lo que NO se añade
   display:block/overflow-x a la tabla: cero CSS muerto. No hay
   textarea, ni h2/h3, ni <label> (solo aria-label): esos selectores
   se OMITEN a proposito. Cero regresion en escritorio, sin color
   (respeta dark mode). Razonado a 360px y 414px de ancho.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal. */
    .levels-screen { max-width: 100%; overflow-x: hidden; }

    /* Campos (nombre, puntos, color, icono, recompensa, insignia):
       16px evita el zoom automatico de iOS al enfocar y no desbordan. */
    .levels-screen input,
    .levels-screen select,
    .levels-screen .field { font-size: 16px; max-width: 100%; }

    /* Botones (emojis de icono y «Guardar niveles»): zona tactil
       >= 44px (WCAG 2.5.5). */
    .levels-screen .btn,
    .levels-screen button { min-height: 44px; }

    /* Titulos, textos y celdas (nombres de nivel, recompensas)
       parten palabra antes que desbordar la tarjeta/columna. */
    .levels-screen h1,
    .levels-screen p,
    .levels-screen td { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Accesos por seccion del creador (/g/{slug}/admin/accesos):
   pasada mobile-first. Bloque ADITIVO acotado a .access-screen
   (convive con .gadmin-screen/.max-w-7xl del layout de comunidad).
   Elementos REALES de la vista: cabecera (h1 + p), un formulario
   con <select> (nivel/membresia/rol), inputs number/text/checkbox
   (.field field-sm) y un boton «Guardar accesos» (.btn); una
   <table class="cards-mobile"> que YA reflota a tarjetas en movil
   (regla global, linea ~1377) por lo que NO se anade
   display:block/overflow-x a la tabla: cero CSS muerto. No hay
   textarea, ni h2/h3, ni <a> de accion: esos selectores se OMITEN
   a proposito. Cero regresion en escritorio, sin color (respeta
   dark mode). Razonado a 360px y 414px de ancho.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal. */
    .access-screen { max-width: 100%; overflow-x: hidden; }

    /* Campos (nivel, membresia, rol, antiguedad, badge): 16px evita
       el zoom automatico de iOS al enfocar y no desbordan. */
    .access-screen input,
    .access-screen select,
    .access-screen .field { font-size: 16px; max-width: 100%; }

    /* Boton «Guardar accesos»: zona tactil >= 44px (WCAG 2.5.5). */
    .access-screen .btn,
    .access-screen button { min-height: 44px; }

    /* Titulos, textos y celdas (nombres de seccion) parten palabra
       antes que desbordar la tarjeta/columna. */
    .access-screen h1,
    .access-screen p,
    .access-screen td { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Panel «Onboarding» del creador (/g/{slug}/admin/onboarding):
   pasada mobile-first. Bloque ADITIVO acotado a .onboarding-screen
   (convive con .gadmin-screen/.max-w-7xl del layout de comunidad).
   Elementos REALES de la vista: cabecera (h1), tarjetas con h2/p,
   textarea del mensaje de bienvenida (.field), inputs de texto
   (icono/texto/enlace, .field), formularios y botones .btn/button.
   Sin table, sin select, sin enlaces de accion (a[href]), sin media.
   ============================================================ */
@media (max-width: 767.98px) {
    .onboarding-screen { max-width: 100%; overflow-x: hidden; }
    /* 16px evita el zoom automatico de iOS al enfocar; no desborda la tarjeta */
    .onboarding-screen input[type="text"],
    .onboarding-screen textarea,
    .onboarding-screen .field { font-size: 16px; max-width: 100%; }
    /* objetivos tactiles >= 44px (guardar, anadir, borrar) */
    .onboarding-screen .btn,
    .onboarding-screen button { min-height: 44px; }
    /* textos largos (mensaje de bienvenida, pasos, enlaces) no desbordan */
    .onboarding-screen h1,
    .onboarding-screen h2,
    .onboarding-screen p { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Panel «Miembros» del creador (/g/{slug}/admin/members):
   pasada mobile-first. Bloque ADITIVO acotado a .members-screen
   (convive con .gadmin-screen/.max-w-7xl del layout de comunidad).
   Elementos REALES de la vista: cabecera (h1), ficha CRM (h2/p),
   buscador (input[type=search]), inputs de la ficha de socio
   (text/number/date y .field), selects (rol, tipo de socio, estado
   de cuota), botones .btn/button y enlaces de accion a[href]
   (export, pestanas de estado, certificados PDF). La tabla usa
   .cards-mobile → YA reflota a tarjetas en movil, por eso NO se le
   aplica display:block. Sin textarea. Todo bajo la media query:
   cero regresion en escritorio, sin color (respeta dark mode).
   ============================================================ */
@media (max-width: 767.98px) {
    .members-screen { max-width: 100%; overflow-x: hidden; }
    /* 16px evita el zoom automatico de iOS al enfocar; no desborda la tarjeta */
    .members-screen input[type="text"],
    .members-screen input[type="search"],
    .members-screen input[type="number"],
    .members-screen input[type="date"],
    .members-screen select,
    .members-screen .field { font-size: 16px; max-width: 100%; }
    /* objetivos tactiles >= 44px (buscar, aprobar, rechazar, guardar, eliminar) */
    .members-screen .btn,
    .members-screen button { min-height: 44px; }
    .members-screen a[href] { min-height: 44px; display: inline-flex; align-items: center; }
    /* nombres, emails y textos largos (sin espacios) parten palabra
       antes que desbordar la tarjeta o la columna */
    .members-screen h1,
    .members-screen h2,
    .members-screen p,
    .members-screen span,
    .members-screen td { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Tienda del creador (panel /g/{slug}/admin/tienda): pasada
   mobile-first. Bloque ADITIVO acotado a .tienda-admin-screen
   (distinto de .tienda-screen, la vista de socio). Cero regresion
   en escritorio, sin color (respeta dark mode). Razonado a 360px y
   414px: el formulario de alta (nombre, descripcion, precio, PWYW,
   limite, ficheros) y la tabla de productos de 6 columnas no deben
   desbordar el viewport ni dejar zona tactil por debajo de 44px;
   los campos a 16px evitan el zoom de iOS al enfocarlos.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor acotado, sin scroll horizontal de pagina. */
    .tienda-admin-screen { max-width: 100%; overflow-x: hidden; }

    /* Campos del formulario (nombre/descripcion/precio/min/limite,
       subida de fichero y portada): 16px anti-zoom iOS y ancho fluido
       que anula anchos fijos como .w-32/.w-full. */
    .tienda-admin-screen input,
    .tienda-admin-screen textarea,
    .tienda-admin-screen .field { font-size: 16px; max-width: 100%; }

    /* Botones y enlaces de accion (guardar, cancelar, editar, borrar,
       activar/desactivar) con zona tactil >=44px. */
    .tienda-admin-screen .btn,
    .tienda-admin-screen button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Tabla de productos (no usa .cards-mobile): scroll horizontal
       propio en bloque en vez de estirar el viewport. */
    .tienda-admin-screen table { display: block; overflow-x: auto; }

    /* Titulos, textos, nombres de producto largos y celdas parten
       palabra en lugar de desbordar la columna. */
    .tienda-admin-screen h1,
    .tienda-admin-screen h2,
    .tienda-admin-screen p,
    .tienda-admin-screen span,
    .tienda-admin-screen td { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Libro de calificaciones (/g/{slug}/admin/calificaciones):
   pasada mobile-first. Bloque ADITIVO acotado a
   .calificaciones-screen. Cero regresion en escritorio, sin
   color (respeta dark mode). Razonado a 360px y 414px: el filtro
   por curso (select + enlace «Exportar CSV») y la tabla de
   progreso de 5 columnas por miembro no deben desbordar el ancho
   ni dejar zona tactil por debajo de 44px; el select a 16px evita
   el zoom de iOS al enfocarlo.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor acotado, sin scroll horizontal de pagina. */
    .calificaciones-screen { max-width: 100%; overflow-x: hidden; }

    /* Filtro (etiqueta + select del curso) en flex-wrap para respirar
       junto al enlace de exportar en 360-414px. */
    .calificaciones-screen form.flex.items-center.gap-2 { flex-wrap: wrap; }

    /* Select del curso: 16px anti-zoom iOS y ancho fluido. */
    .calificaciones-screen .field,
    .calificaciones-screen select { font-size: 16px; max-width: 100%; }

    /* Enlace de accion «Exportar CSV» con zona tactil >=44px. */
    .calificaciones-screen .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Tabla de calificaciones (no usa .cards-mobile): scroll horizontal
       propio en bloque en vez de estirar el viewport. */
    .calificaciones-screen table { display: block; overflow-x: auto; }

    /* Titulos, textos, nombres/usuarios (@handle) y celdas parten
       palabra larga en lugar de desbordar la columna. */
    .calificaciones-screen h1,
    .calificaciones-screen p,
    .calificaciones-screen span,
    .calificaciones-screen td { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Tienda de puntos (panel /g/{slug}/admin/puntos_tienda): pasada
   mobile-first. Bloque ADITIVO acotado a .puntostienda-screen. Cero
   regresion en escritorio, sin color (respeta dark mode). Razonado a
   360px y 414px: el formulario de alta (nombre, descripcion, coste,
   stock) y las dos tablas (articulos y canjes) no deben desbordar el
   viewport ni dejar zona tactil por debajo de 44px; los campos a 16px
   evitan el zoom de iOS al enfocarlos.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor acotado, sin scroll horizontal de pagina. */
    .puntostienda-screen { width: 100%; overflow-x: hidden; }

    /* Campos del formulario de alta (nombre/descripcion/coste/stock):
       16px anti-zoom iOS y ancho fluido. */
    .puntostienda-screen input,
    .puntostienda-screen textarea,
    .puntostienda-screen .field { font-size: 16px; max-width: 100%; }

    /* Botones de accion (crear, activar/desactivar, borrar, entregado,
       cancelar y reembolsar) con zona tactil >=44px. */
    .puntostienda-screen .btn,
    .puntostienda-screen button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Tablas de articulos y canjes (no usan .cards-mobile): scroll
       horizontal propio en bloque en vez de estirar el viewport. */
    .puntostienda-screen table { display: block; overflow-x: auto; }

    /* Titulos, textos y celdas parten palabra en lugar de desbordar. */
    .puntostienda-screen h1,
    .puntostienda-screen h2,
    .puntostienda-screen p,
    .puntostienda-screen span,
    .puntostienda-screen td { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   FORO (moderacion/gestion de foros del creador) — pasada
   mobile-first. Bloque ADITIVO acotado a .foro-screen. Todo bajo
   la media query: cero regresion en escritorio, sin color (respeta
   dark mode). Razonado a 360px y 414px de ancho.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .foro-screen { max-width: 100%; overflow-x: hidden; }

    /* Campos de los formularios (categoria, nombre, orden, descripcion y
       los <select> de permisos) a 16px evita el zoom de iOS al enfocar,
       y a lo ancho anulando anchos fijos (w-24). */
    .foro-screen input,
    .foro-screen select,
    .foro-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* Botones de accion con zona tactil >=44px: los .btn (crear, guardar,
       renombrar, abrir, eliminar) y los <button> de reordenar/borrar
       categoria que no usan .btn (flechas). WCAG 2.5.5. */
    .foro-screen .btn,
    .foro-screen button {
        min-height: 44px;
    }

    /* Tabla de permisos por foro (no usa .cards-mobile): scroll
       horizontal propio en bloque en vez de estirar el viewport. */
    .foro-screen table { display: block; overflow-x: auto; }

    /* Titulos, textos y celdas parten palabra en lugar de desbordar. */
    .foro-screen h1,
    .foro-screen h2,
    .foro-screen p,
    .foro-screen span,
    .foro-screen td { overflow-wrap: anywhere; word-break: break-word; }
}
/* ============================================================
   GALERIA (panel del creador: albumes/cuota/moderacion) —
   pasada mobile-first. Bloque ADITIVO acotado a
   .galeria-admin-screen (distinto de .galeria-screen del socio).
   Todo bajo la media query: cero regresion en escritorio, sin
   color (respeta dark mode). Razonado a 360px y 414px de ancho.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .galeria-admin-screen { max-width: 100%; overflow-x: hidden; }

    /* Campos de los formularios (cuota, titulo/descripcion del album,
       nivel minimo) a 16px evita el zoom de iOS al enfocar, y a lo
       ancho anulando anchos fijos (w-32, w-24). No hay <select> ni
       .field en esta vista, se omiten para no dejar CSS muerto. */
    .galeria-admin-screen input,
    .galeria-admin-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* Botones/enlaces de accion con zona tactil >=44px (crear album,
       guardar, aprobar/rechazar, abrir, compartir, eliminar). WCAG 2.5.5. */
    .galeria-admin-screen .btn,
    .galeria-admin-screen button,
    .galeria-admin-screen a[href] {
        min-height: 44px;
    }

    /* Titulos y textos parten palabra en lugar de desbordar (no hay
       <table> ni <td> en esta vista, se omiten). */
    .galeria-admin-screen h1,
    .galeria-admin-screen h2,
    .galeria-admin-screen p,
    .galeria-admin-screen span { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   MÓDULOS (panel /g/{slug}/admin/modulos: activar secciones de la
   comunidad) — pasada mobile-first. Bloque ADITIVO acotado a
   .modulos-admin-screen. Todo bajo la media query: cero regresion en
   escritorio, sin color (respeta dark mode). Razonado a 360px y 414px.
   La vista es un formulario de checkboxes/toggles agrupados por
   seccion + boton submit; no hay <table>, <select>, <textarea>,
   inputs de texto ni <a href> (se omiten para no dejar CSS muerto).
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla acotado, sin scroll horizontal de pagina. */
    .modulos-admin-screen { max-width: 100%; overflow-x: hidden; }

    /* Las <label> envuelven checkbox+texto y son el area tactil real
       (cursor:pointer): zona >=44px para cumplir WCAG 2.5.5. */
    .modulos-admin-screen label { min-height: 44px; }

    /* Boton de guardar con zona tactil >=44px. */
    .modulos-admin-screen .btn,
    .modulos-admin-screen button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Titulos, textos y etiquetas parten palabra en lugar de desbordar. */
    .modulos-admin-screen h1,
    .modulos-admin-screen h2,
    .modulos-admin-screen p,
    .modulos-admin-screen span { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Analitica/embudo del creador (dashboard group_admin, partial
   _analytics.php): pasada mobile-first. Bloque ADITIVO acotado a
   .analitica-admin-screen (distinto de .analytics-screen, la vista
   de analitica standalone). Cero regresion en escritorio, sin color
   (respeta dark mode). Razonado a 360px y 414px: las rejillas de
   tarjetas de metricas (grid-cols-2), el boton «Resumen con IA» y la
   barra «Miembros por membresia» no deben desbordar el viewport ni
   dejar zona tactil por debajo de 44px. La vista no tiene inputs,
   tablas ni enlaces de accion, por lo que el bloque solo cubre
   contenedor, botones y textos (cero CSS muerto).
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor acotado, sin scroll horizontal de pagina. */
    .analitica-admin-screen { width: 100%; max-width: 100%; overflow-x: hidden; }

    /* Boton «Resumen con IA» (y cualquier boton generado) con zona
       tactil >=44px. */
    .analitica-admin-screen .btn,
    .analitica-admin-screen button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Titulos, textos y valores largos (importes, porcentajes, nombres
       de membresia) parten palabra en vez de desbordar la columna. */
    .analitica-admin-screen h2,
    .analitica-admin-screen p,
    .analitica-admin-screen span { overflow-wrap: anywhere; word-break: break-word; }
}

/* Mobile-first — panel de lista negra local del creador (group_admin/blacklist.php) */
@media (max-width: 767.98px) {
    .blacklist-screen { width: 100%; max-width: 100%; overflow-x: hidden; }
    .blacklist-screen input[type="text"] { font-size: 16px; max-width: 100%; }
    .blacklist-screen .btn,
    .blacklist-screen button { min-height: 44px; }
    .blacklist-screen h1,
    .blacklist-screen h2,
    .blacklist-screen p,
    .blacklist-screen span { overflow-wrap: anywhere; word-break: break-word; }
}

/* Mobile-first — panel de cuotas de socio del creador (group_admin/cuotas.php) */
@media (max-width: 767.98px) {
    .cuotas-screen { width: 100%; max-width: 100%; overflow-x: hidden; }
    /* Campos de formulario a 16px: evita el zoom automatico de iOS al enfocar */
    .cuotas-screen input,
    .cuotas-screen select,
    .cuotas-screen textarea { font-size: 16px; max-width: 100%; }
    /* Area tactil comoda en botones y enlaces de accion */
    .cuotas-screen .btn,
    .cuotas-screen button,
    .cuotas-screen a[href] { min-height: 44px; }
    /* Titulos, textos e importes largos parten palabra en vez de desbordar */
    .cuotas-screen h1,
    .cuotas-screen h2,
    .cuotas-screen p,
    .cuotas-screen span { overflow-wrap: anywhere; word-break: break-word; }
}

/* ------------------------------------------------------------------
   Mobile-first del centro de documentos de la entidad (group_admin/documentos.php).
   Bloque ADITIVO acotado a .documentos-screen. Cero regresion en desktop
   ni dark mode (no toca colores). Elementos reales de la vista: input[type=search],
   enlaces-tarjeta a[href], titulos h1/h2 y textos p/span. No hay tabla, select,
   textarea ni boton, por eso no se generan reglas para ellos.
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .documentos-screen { width: 100%; max-width: 100%; overflow-x: hidden; }
    /* Campo de busqueda a 16px: evita el zoom automatico de iOS al enfocar */
    .documentos-screen input { font-size: 16px; max-width: 100%; }
    /* Area tactil comoda en los enlaces-tarjeta de cada documento */
    .documentos-screen a[href] { min-height: 44px; }
    /* Titulos y descripciones largas parten palabra en vez de desbordar */
    .documentos-screen h1,
    .documentos-screen h2,
    .documentos-screen p,
    .documentos-screen span { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   EJE C mobile-first: panel de gestion de ARCHIVOS del creador
   (/g/{slug}/admin/archivos → views/group_admin/archivos.php).
   Bloque ADITIVO acotado a .archivos-admin-screen (NO confundir
   con .archivos-screen, que es la vista de socio). Solo elementos
   que existen en la vista: formularios de alta/edicion de carpeta
   (select/url/text/number/file/textarea), biblioteca de descargas,
   botones/enlaces de accion y titulos/descripciones largos. Sin
   color (respeta dark mode). Cero regresion en escritorio.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor acotado, sin scroll horizontal de pagina. */
    .archivos-admin-screen { width: 100%; max-width: 100%; overflow-x: hidden; }

    /* Campos de los formularios de carpeta y de subida a biblioteca:
       16px evita el zoom de iOS y ancho fluido anula anchos fijos. */
    .archivos-admin-screen input,
    .archivos-admin-screen select,
    .archivos-admin-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* Botones «Anadir/Guardar/Editar/Ver/Subir» y enlaces de accion
       con zona tactil >=44px. */
    .archivos-admin-screen .btn,
    .archivos-admin-screen button,
    .archivos-admin-screen a[href] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Titulos, textos de ayuda y nombres de fichero/URL largos parten
       en lugar de desbordar. */
    .archivos-admin-screen h1,
    .archivos-admin-screen h2,
    .archivos-admin-screen h3,
    .archivos-admin-screen p,
    .archivos-admin-screen span { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Gestion de curso del creador (/g/{slug}/admin/courses/manage):
   pasada mobile-first. Bloque ADITIVO acotado a .coursemanage-screen.
   Solo elementos que existen en la vista: formularios de edicion de
   curso/modulo/leccion/tarea/quiz/correccion (text/number/url/file/
   date/radio/checkbox, select, textarea), botones y enlaces de accion
   (volver, ver archivo entregado) y titulos/textos largos. No hay
   <table> (la vista usa tarjetas y barras de progreso con divs) ni
   <img>, por eso se omiten. Sin color (respeta dark mode). Cero
   regresion en escritorio. Razonado a 360px y 414px: los popovers de
   edicion (w-64/w-72/w-80) y las filas de modulo/leccion no deben
   desbordar el viewport ni dejar zona tactil por debajo de 44px; los
   campos a 16px evitan el zoom de iOS al enfocarlos.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor acotado, sin scroll horizontal de pagina. */
    .coursemanage-screen { width: 100%; max-width: 100%; overflow-x: hidden; }

    /* Campos de todos los formularios (curso, modulo, leccion, tarea,
       quiz, correccion): 16px evita el zoom de iOS y ancho fluido anula
       anchos fijos como .w-20/.w-24/.w-40. */
    .coursemanage-screen input,
    .coursemanage-screen select,
    .coursemanage-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* Botones «Guardar/Crear/Anadir/Borrar/Quiz» y enlaces de accion
       (volver a cursos, ver archivo entregado) con zona tactil >=44px. */
    .coursemanage-screen .btn,
    .coursemanage-screen button,
    .coursemanage-screen a[href] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Titulos, textos y nombres de curso/modulo/leccion largos parten
       palabra en lugar de desbordar. */
    .coursemanage-screen h1,
    .coursemanage-screen h2,
    .coursemanage-screen h3,
    .coursemanage-screen p,
    .coursemanage-screen span { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   EJE C mobile-first: panel de EVENTOS del creador
   (/g/{slug}/admin/eventos -> views/group_admin/events.php).
   Bloque ADITIVO acotado a .eventos-admin-screen (NO confundir
   con una posible .eventos-screen de socio). Solo elementos que
   existen realmente en la vista: formularios de alta/edicion de
   evento (text/datetime-local/number/url/checkbox, select repeticion,
   textarea descripcion), botones/enlaces de accion (nuevo/editar/
   guardar/eliminar y enlaces de certificado a[href]) y titulos/
   textos largos (h1/h2/h3/p/span). No hay <table>, <img> ni <iframe>,
   por eso se omiten. Sin color (respeta dark mode). Cero regresion
   en escritorio.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor acotado, sin scroll horizontal de pagina. */
    .eventos-admin-screen { width: 100%; max-width: 100%; overflow-x: hidden; }

    /* Campos de los formularios de evento (nuevo y edicion en popover):
       16px evita el zoom de iOS y ancho fluido anula anchos fijos como
       .w-24/.w-28/.w-40. */
    .eventos-admin-screen input,
    .eventos-admin-screen select,
    .eventos-admin-screen textarea {
        font-size: 16px;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Botones «Nuevo/Editar/Guardar/Crear/Eliminar» y enlaces de accion
       (certificado de asistencia) con zona tactil comoda >=44px. */
    .eventos-admin-screen .btn,
    .eventos-admin-screen button,
    .eventos-admin-screen a[href] { min-height: 44px; }

    /* Titulos, textos y nombres de evento largos parten palabra en
       lugar de desbordar la columna. */
    .eventos-admin-screen h1,
    .eventos-admin-screen h2,
    .eventos-admin-screen h3,
    .eventos-admin-screen p,
    .eventos-admin-screen span { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   EJE C mobile-first: panel de DONATIVOS del creador
   (/g/{slug}/admin/donativos -> views/group_admin/donativos.php).
   Bloque ADITIVO acotado a .donativos-screen. Solo elementos que
   existen realmente en la vista: formulario de registro (input
   text/number, select tipo), tabla del listado de donativos,
   botones/enlaces de accion (registrar, certificado, CSV, filtros
   de ejercicio a[href]) y titulos/textos largos (h1/h2/h3/p/span).
   No hay <textarea>, <img> ni <iframe>, por eso se omiten. Sin
   color (respeta dark mode). Cero regresion en escritorio.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor acotado, sin scroll horizontal de pagina. */
    .donativos-screen { width: 100%; max-width: 100%; overflow-x: hidden; }

    /* Campos del formulario de alta de donativo: 16px evita el zoom
       de iOS y el ancho fluido anula anchos fijos. */
    .donativos-screen input,
    .donativos-screen select {
        font-size: 16px;
        max-width: 100%;
    }

    /* La tabla del listado hace scroll horizontal propio en vez de
       desbordar la pagina. */
    .donativos-screen table { display: block; width: 100%; overflow-x: auto; }

    /* Botones «Registrar» y enlaces de accion (certificado, CSV,
       filtros de ejercicio) con zona tactil comoda >=44px. */
    .donativos-screen .btn,
    .donativos-screen button,
    .donativos-screen a[href] { min-height: 44px; }

    /* Titulos, nombres de donante e importes largos parten palabra en
       lugar de desbordar la columna. */
    .donativos-screen h1,
    .donativos-screen h2,
    .donativos-screen h3,
    .donativos-screen p,
    .donativos-screen span { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   EJE C mobile-first: panel de REPORTES del creador
   (/g/{slug}/admin/reportes -> views/group_admin/reports.php).
   Bloque ADITIVO acotado a .reports-admin-screen (moderacion:
   reportes de contenido + primeras publicaciones pendientes).
   Solo elementos que existen realmente en la vista: botones de
   accion (aprobar/rechazar/resolver/descartar/borrar/analizar),
   enlaces a[href] (ver post/foro), titulos y textos largos
   (h1/h2/h3/p/span). Los inputs son todos type=hidden, no hay
   <table>, <select>, <textarea> ni campos de texto visibles, por
   eso se omiten esas reglas. Sin color (respeta dark mode). Cero
   regresion en escritorio.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor acotado, sin scroll horizontal de pagina. */
    .reports-admin-screen { width: 100%; max-width: 100%; overflow-x: hidden; }

    /* Botones de moderacion y enlaces (ver contenido reportado) con
       zona tactil comoda >=44px. */
    .reports-admin-screen .btn,
    .reports-admin-screen button,
    .reports-admin-screen a[href] { min-height: 44px; }

    /* Titulos, extractos de contenido reportado y nombres largos
       parten palabra en lugar de desbordar la columna. */
    .reports-admin-screen h1,
    .reports-admin-screen h2,
    .reports-admin-screen h3,
    .reports-admin-screen p,
    .reports-admin-screen span { overflow-wrap: anywhere; word-break: break-word; }
}

@media (max-width: 767.98px) {
    .gsettings-screen { width: 100%; overflow-x: hidden; }
    .gsettings-screen input,
    .gsettings-screen select,
    .gsettings-screen textarea { font-size: 16px; max-width: 100%; }
    .gsettings-screen .btn,
    .gsettings-screen button,
    .gsettings-screen a[href] { min-height: 44px; }
    .gsettings-screen h1,
    .gsettings-screen h2,
    .gsettings-screen h3,
    .gsettings-screen p,
    .gsettings-screen span { overflow-wrap: anywhere; }
}

@media (max-width: 767.98px) {
    /* -----------------------------------------------------------------------
       EJE C - Pasada mobile-first del panel PROYECTOS (crowdfunding) del creador
       (/g/{slug}/admin/proyectos). Bloque ADITIVO acotado a .proyectos-admin-screen
       (clase unica en views/group_admin/proyectos.php; NO colisiona con la vista
       de socio .proyectos-screen). Sin colores (no rompe el modo oscuro) y CERO
       regresion desktop (todo bajo la media query).
       --------------------------------------------------------------------- */
    .proyectos-admin-screen { max-width: 100%; overflow-x: hidden; }

    /* Rejillas de recompensas / metas ampliadas a una sola columna. */
    .proyectos-admin-screen .grid.grid-cols-2 { grid-template-columns: 1fr; }
    .proyectos-admin-screen .grid.grid-cols-2 > .col-span-2 { grid-column: auto; }

    /* Inputs a 16px (evita el zoom automatico de iOS) y sin desbordar. */
    .proyectos-admin-screen input,
    .proyectos-admin-screen select,
    .proyectos-admin-screen textarea { font-size: 16px; max-width: 100%; }
    .proyectos-admin-screen input[type="checkbox"],
    .proyectos-admin-screen input[type="radio"] { min-height: 0; }

    /* Targets tactiles >=44px en botones y enlaces de accion. */
    .proyectos-admin-screen .btn,
    .proyectos-admin-screen button,
    .proyectos-admin-screen a.btn { min-height: 44px; display: inline-flex; align-items: center; }

    /* Editor Quill e imagenes de contenido nunca mas anchos que la pantalla. */
    .proyectos-admin-screen #proy-editor,
    .proyectos-admin-screen .ql-container { max-width: 100%; }
    .proyectos-admin-screen img { max-width: 100%; height: auto; }

    /* Titulos y textos largos parten palabra en vez de desbordar la columna. */
    .proyectos-admin-screen h1,
    .proyectos-admin-screen h2,
    .proyectos-admin-screen h3,
    .proyectos-admin-screen p,
    .proyectos-admin-screen span { overflow-wrap: anywhere; word-break: break-word; }
}
/* ============================================================
   EJE C mobile-first: panel de AUDITORIA de la comunidad del creador
   (/g/{slug}/admin/auditoria -> views/group_admin/audit.php).
   Bloque ADITIVO acotado a .audit-screen (log de las ultimas
   acciones del equipo: moderacion, miembros, reportes). Solo
   elementos que existen realmente en la vista: un buscador
   <input type=search>, enlaces a[href] (exportar CSV), filas
   <div data-audit-row>, titulo (h1), textos y extractos (p/span).
   NO hay <table>, <select>, <textarea> ni <button>, por eso se
   omiten esas reglas (cero CSS muerto). Sin color (respeta dark
   mode). Cero regresion en escritorio.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor acotado, sin scroll horizontal de pagina. */
    .audit-screen { width: 100%; max-width: 100%; overflow-x: hidden; }

    /* Buscador de la auditoria: 16px evita el zoom automatico de
       iOS al enfocar y no desborda la columna. */
    .audit-screen input[type="search"] { font-size: 16px; max-width: 100%; }

    /* Enlace de exportar CSV con zona tactil comoda >=44px. */
    .audit-screen a[href] { min-height: 44px; }

    /* Titulo, detalles y nombres largos parten palabra en lugar
       de desbordar la columna. */
    .audit-screen h1,
    .audit-screen h2,
    .audit-screen h3,
    .audit-screen p,
    .audit-screen span { overflow-wrap: anywhere; word-break: break-word; }
}
/* ============================================================
   EJE C mobile-first: panel de RESERVAS del creador
   (/g/{slug}/admin/reservas -> views/group_admin/reservas.php).
   Bloque ADITIVO acotado a .reservas-admin-screen (NUEVA clase; NO
   usar .reservas-screen, que ya existe para la vista de socio y
   colisionaria). Solo elementos que existen realmente en la vista:
   una <table> de reservas, formularios de alta de recurso/franja
   (input de precio/texto/fecha, select de tipo, textarea de notas),
   botones de accion (crear/cancelar/liberar). No hay a[href] ni
   <img>, por eso se omiten (cero CSS muerto). Sin color (respeta
   dark mode). Cero regresion en escritorio.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor acotado, sin scroll horizontal de pagina. */
    .reservas-admin-screen { max-width: 100%; overflow-x: hidden; }

    /* Campos de los formularios de recurso/franja: 16px evita el zoom
       automatico de iOS al enfocar y ancho fluido anula anchos fijos. */
    .reservas-admin-screen input,
    .reservas-admin-screen select,
    .reservas-admin-screen textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* La tabla de reservas se desplaza en horizontal dentro de su
       propia caja en lugar de desbordar la pagina. */
    .reservas-admin-screen table {
        display: block;
        overflow-x: auto;
    }

    /* Botones «Crear/Cancelar/Liberar franja» con zona tactil >=44px. */
    .reservas-admin-screen .btn,
    .reservas-admin-screen button { min-height: 44px; }

    /* Titulos, textos y nombres largos parten palabra en lugar de
       desbordar la columna. */
    .reservas-admin-screen h1,
    .reservas-admin-screen h2,
    .reservas-admin-screen h3,
    .reservas-admin-screen p,
    .reservas-admin-screen span { overflow-wrap: anywhere; word-break: break-word; }
}
/* ============================================================
   EJE C mobile-first: cola de REEMBOLSOS de plataforma
   (/admin/refunds -> views/admin/refunds.php). Bloque ADITIVO
   acotado a .refunds-screen (usuario, comunidad, importe,
   comision, Charge ID y accion de reembolso). Solo elementos
   que existen realmente en la vista: una <table>, un buscador
   <input type=search> y un <input type=number> (importe parcial),
   <button> de envio, enlaces .btn / a[href] (pestanas, paginacion,
   limpiar), titulo (h1), textos y extractos (p/span). NO hay
   <select> ni <textarea>, por eso se omiten (cero CSS muerto).
   Sin color (respeta dark mode). Cero regresion en escritorio.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor acotado, sin scroll horizontal de pagina. */
    .refunds-screen { width: 100%; max-width: 100%; overflow-x: hidden; }

    /* La tabla de transacciones scrollea en su propio eje X sin
       desbordar la pantalla del movil. */
    .refunds-screen table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

    /* Buscador e importe parcial: 16px evita el zoom automatico de
       iOS al enfocar y no desbordan la columna. */
    .refunds-screen input[type="search"],
    .refunds-screen input[type="number"] { font-size: 16px; max-width: 100%; }

    /* Botones y enlaces de accion con zona tactil comoda >=44px. */
    .refunds-screen .btn,
    .refunds-screen button,
    .refunds-screen a.btn { min-height: 44px; }

    /* Titulo, textos y datos largos (email, Charge ID) parten
       palabra en lugar de desbordar la columna. */
    .refunds-screen h1,
    .refunds-screen p,
    .refunds-screen span { overflow-wrap: anywhere; word-break: break-word; }
}
/* ============================================================
   MOBILE-FIRST (<=767.98px) — Eje C
   Bloque ADITIVO acotado a .communities-screen (panel de
   plataforma: gestion de comunidades, categorias y comision).
   Grep de la vista: hay <input type=search> (buscador), varios
   <input type=number> (comision, precio), <input type=text/email>,
   <select> (categoria/acceso/rol), <textarea> (descripcion),
   <button>, enlaces .btn / a[href] (paginacion), titulos
   (h1/h2/h3) y textos (p/span). NO hay <table> ni <img>, por eso
   se omiten (cero CSS muerto). Sin color (respeta dark mode).
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor acotado, sin scroll horizontal de pagina. */
    .communities-screen { width: 100%; max-width: 100%; overflow-x: hidden; }

    /* Campos de formulario: 16px evita el zoom automatico de iOS al
       enfocar y no desbordan la columna en moviles estrechos. */
    .communities-screen input[type="search"],
    .communities-screen input[type="number"],
    .communities-screen input[type="text"],
    .communities-screen input[type="email"],
    .communities-screen select,
    .communities-screen textarea { font-size: 16px; max-width: 100%; }

    /* Botones y enlaces de accion con zona tactil comoda >=44px. */
    .communities-screen .btn,
    .communities-screen button,
    .communities-screen a.btn { min-height: 44px; }

    /* Titulos, textos y datos largos (slug, email) parten palabra
       en lugar de desbordar la columna. */
    .communities-screen h1,
    .communities-screen h2,
    .communities-screen h3,
    .communities-screen p,
    .communities-screen span { overflow-wrap: break-word; word-break: break-word; }
}
/* ============================================================
   EJE C mobile-first: panel de USUARIOS de plataforma
   (/admin/users -> views/admin/users.php). Bloque ADITIVO
   acotado a .adminusers-screen. Solo elementos que existen
   realmente en la vista: buscador <input type=search>, campos
   <input> text/email/password (modales), <select> (rol/estado),
   <button> y .btn (acciones y modales), titulos h1/h2, textos y
   datos largos (email) en p/span. NO hay <table>, <textarea>,
   <img> ni a.btn -> se omiten (cero CSS muerto). Sin color
   (respeta dark mode). Cero regresion en escritorio.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor acotado, sin scroll horizontal de pagina. */
    .adminusers-screen { width: 100%; max-width: 100%; overflow-x: hidden; }

    /* Buscador, campos de texto y selects: 16px evita el zoom
       automatico de iOS al enfocar y no desbordan la columna. */
    .adminusers-screen input[type="search"],
    .adminusers-screen input[type="text"],
    .adminusers-screen input[type="email"],
    .adminusers-screen input[type="password"],
    .adminusers-screen select { font-size: 16px; max-width: 100%; }

    /* Botones de accion y de los modales con zona tactil >=44px. */
    .adminusers-screen .btn,
    .adminusers-screen button { min-height: 44px; }

    /* Titulos, textos y datos largos (email) parten palabra en
       lugar de desbordar la columna. */
    .adminusers-screen h1,
    .adminusers-screen h2,
    .adminusers-screen p,
    .adminusers-screen span { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   EJE C mobile-first: BORRADORES y PROGRAMADOS del creador
   (/feed/drafts -> views/feed/drafts.php). Bloque ADITIVO
   acotado a .drafts-screen. Solo elementos que existen en la
   vista: .page-header, .post-card/.post-meta/.post-title/
   .post-content, .empty-state, botones/enlaces .btn (Publicar,
   Editar, Previsualizar, Eliminar). Los <form> solo llevan
   inputs hidden -> no hay campos de texto/select/textarea (se
   omiten, cero CSS muerto). Sin color (respeta dark mode).
   Cero regresion en escritorio (todo bajo @media max-width).
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor acotado, sin scroll horizontal de pagina. */
    .drafts-screen { width: 100%; max-width: 100%; overflow-x: hidden; }

    /* Zona tactil >=44px en botones y enlaces de accion; que
       envuelvan en varias filas sin desbordar la tarjeta. */
    .drafts-screen .btn,
    .drafts-screen button,
    .drafts-screen a.btn { min-height: 44px; }
    .drafts-screen .post-actions { flex-wrap: wrap; }

    /* Titulos, textos y etiquetas largas parten palabra en lugar
       de desbordar la columna. */
    .drafts-screen h1,
    .drafts-screen p,
    .drafts-screen .post-title,
    .drafts-screen .post-content,
    .drafts-screen span { overflow-wrap: break-word; word-break: break-word; }
}

/* ── EJE C: pasada mobile-first de «Editar publicación» del creador (.feededit-screen) ── */
@media (max-width: 767.98px) {
    .feededit-screen { width: 100%; overflow-x: hidden; }

    /* Anti-zoom iOS (>=16px) y sin desbordes en campos del formulario. */
    .feededit-screen input,
    .feededit-screen select { font-size: 16px; max-width: 100%; }

    /* Zona tactil >=44px en botones y enlaces de accion. */
    .feededit-screen .btn,
    .feededit-screen button,
    .feededit-screen a.btn { min-height: 44px; }

    /* La imagen actual del post no desborda la columna. */
    .feededit-screen img { max-width: 100%; height: auto; }

    /* Titulos y etiquetas largas parten palabra. */
    .feededit-screen h1,
    .feededit-screen label { overflow-wrap: break-word; word-break: break-word; }
}

/* ── EJE C · mobile-first Stories del feed (.story-screen) ─────────────── */
@media (max-width: 767.98px) {
    .story-screen {
        width: 100%;
        overflow-x: hidden;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    /* La imagen de la historia nunca desborda. */
    .story-screen img { max-width: 100%; height: auto; }
    /* Botones de navegación/borrado como zona táctil ≥ 44px. */
    .story-screen .btn,
    .story-screen button,
    .story-screen a.btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ── EJE C · mobile-first de la vista de LECCIÓN del creador (.lesson-screen) ── */
@media (max-width: 767.98px) {
    /* Contenedor acotado, sin scroll horizontal de página. */
    .lesson-screen { width: 100%; max-width: 100%; overflow-x: hidden; }

    /* Imágenes del contenido enriquecido nunca desbordan la columna. */
    .lesson-screen img { max-width: 100%; height: auto; }

    /* Vídeo embebido (YouTube/Loom/local): fluido conservando el ratio 16:9
       del .video-wrapper (sin tocar su alto absoluto). */
    .lesson-screen .video-wrapper,
    .lesson-screen .video-wrapper iframe,
    .lesson-screen .video-wrapper video { max-width: 100%; }

    /* Anti-zoom iOS (>=16px) y sin desbordes en los campos de la tarea. */
    .lesson-screen input,
    .lesson-screen textarea { font-size: 16px; max-width: 100%; }

    /* Zona táctil >=44px en botones y enlaces de acción. */
    .lesson-screen .btn,
    .lesson-screen button,
    .lesson-screen a.btn { min-height: 44px; }

    /* Títulos, textos y etiquetas largas parten palabra en lugar de desbordar. */
    .lesson-screen h1,
    .lesson-screen h2,
    .lesson-screen h3,
    .lesson-screen p,
    .lesson-screen label,
    .lesson-screen span { overflow-wrap: break-word; word-break: break-word; }
}

/* ===== EJE C ppv: mobile-first de la pantalla de contenido de pago bloqueado (.ppvlocked-screen) ===== */
@media (max-width: 767.98px) {
    /* El contenedor no desborda horizontalmente en movil. */
    .ppvlocked-screen { width: 100%; max-width: 100%; overflow-x: hidden; }

    /* Zona tactil >=44px en botones y enlaces de accion. */
    .ppvlocked-screen .btn,
    .ppvlocked-screen button,
    .ppvlocked-screen a.btn { min-height: 44px; }

    /* Titulos, textos y etiquetas largas parten palabra en lugar de desbordar. */
    .ppvlocked-screen h1,
    .ppvlocked-screen p,
    .ppvlocked-screen span { overflow-wrap: break-word; word-break: break-word; }
}

/* ===== EJE C certificado curso: mobile-first del certificado de finalizacion (.certcurso-screen) ===== */
@media (max-width: 767.98px) {
    /* El contenedor no desborda horizontalmente en movil. */
    .certcurso-screen { width: 100%; max-width: 100%; overflow-x: hidden; }

    /* La barra de acciones envuelve en pantallas estrechas. */
    .certcurso-screen .toolbar { flex-wrap: wrap; }

    /* Zona tactil >=44px en botones y enlaces de accion. */
    .certcurso-screen .btn,
    .certcurso-screen button { min-height: 44px; }

    /* El certificado no sobresale del viewport. */
    .certcurso-screen .certificate { max-width: 100%; }

    /* Nombre, curso y titulo largos parten palabra en lugar de desbordar. */
    .certcurso-screen .cert-name,
    .certcurso-screen .cert-course,
    .certcurso-screen .cert-title { overflow-wrap: break-word; word-break: break-word; }
}
/* ============================================================
   EJE C mobile-first: CUPONES de plataforma
   (/admin/coupons -> views/admin/coupons.php). Bloque ADITIVO
   acotado a .coupons-screen (codigo, comunidad, descuento,
   membresia, usos, caduca, estado y acciones). Solo elementos
   que existen realmente en la vista: una <table>, un buscador
   <input type=search>, inputs de alta (text/number/date), dos
   <select> (comunidad y tipo de descuento) y <button>/.btn de
   crear/activar/eliminar. Titulos y textos largos (codigo,
   nombre de comunidad) parten palabra. Sin color (respeta
   dark mode). Cero regresion en escritorio.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor acotado, sin scroll horizontal de pagina. */
    .coupons-screen { width: 100%; max-width: 100%; overflow-x: hidden; }

    /* La tabla de cupones scrollea en su propio eje X sin
       desbordar la pantalla del movil. */
    .coupons-screen table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

    /* Campos del alta y buscador: 16px evita el zoom automatico
       de iOS al enfocar y no desbordan la columna. */
    .coupons-screen input,
    .coupons-screen select { font-size: 16px; max-width: 100%; }

    /* Botones y enlaces de accion con zona tactil comoda >=44px. */
    .coupons-screen .btn,
    .coupons-screen button,
    .coupons-screen a.btn { min-height: 44px; }

    /* Titulo, textos y datos largos (codigo, comunidad) parten
       palabra en lugar de desbordar la columna. */
    .coupons-screen h1,
    .coupons-screen p,
    .coupons-screen span { overflow-wrap: break-word; word-break: break-word; }
}

/* ============================================================
   EJE C mobile-first: AJUSTES de la comunidad
   (/settings/group -> views/settings/group.php). Bloque ADITIVO
   acotado a .sgroup-screen. Elementos reales de la vista:
   pestanas (.flex.gap-1), formularios con inputs text/number/
   color, una <table> de 9 niveles con overflow-x, <select> no
   hay pero si <button>/.btn de guardar/aprobar/rechazar. Sin
   color (respeta dark mode). Cero regresion en escritorio.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor acotado, sin scroll horizontal de pagina. */
    .sgroup-screen { width: 100%; max-width: 100%; overflow-x: hidden; }

    /* Las pestanas (niveles/miembros/monetizacion) envuelven en
       lugar de desbordar. */
    .sgroup-screen .flex.gap-1 { flex-wrap: wrap; }

    /* La tabla de niveles scrollea en su propio eje X. */
    .sgroup-screen table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

    /* Campos: 16px evita el zoom automatico de iOS y no
       desbordan la columna. */
    .sgroup-screen input,
    .sgroup-screen textarea { font-size: 16px; max-width: 100%; }

    /* Botones y enlaces de accion con zona tactil comoda >=44px. */
    .sgroup-screen .btn,
    .sgroup-screen button { min-height: 44px; }

    /* Titulos, textos y datos largos parten palabra. */
    .sgroup-screen h1,
    .sgroup-screen h2,
    .sgroup-screen h3,
    .sgroup-screen p,
    .sgroup-screen span { overflow-wrap: break-word; word-break: break-word; }
}

@media (max-width: 767.98px) {
    /* EJE C: pasada mobile-first del panel principal del creador (.gadmin-index-screen). */
    .gadmin-index-screen { width: 100%; overflow-x: hidden; }

    /* Las cards de accesos/miembros a una sola columna; los KPIs (grid-cols-2)
       de Tailwind se mantienen en 2 columnas por densidad. */
    .gadmin-index-screen .lg\:grid-cols-2 { grid-template-columns: 1fr; }

    /* Botones y enlaces de accion con zona tactil comoda >=44px. */
    .gadmin-index-screen .btn,
    .gadmin-index-screen button,
    .gadmin-index-screen a.btn { min-height: 44px; }

    /* Titulos, textos y datos largos parten palabra y no desbordan la columna. */
    .gadmin-index-screen h1,
    .gadmin-index-screen h2,
    .gadmin-index-screen p,
    .gadmin-index-screen span { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   Difusion de plataforma (/admin/broadcast): pasada mobile-first.
   Bloque ADITIVO acotado a .broadcast-screen; convive con el bloque
   de difusion del creador (misma clase, mismos valores en propiedades
   compartidas). Sin color: cero regresion en dark mode. Aqui se
   anaden box-sizing y .max-w-2xl que usa esta vista concreta.
   ============================================================ */
@media (max-width: 767.98px) {
    .broadcast-screen { width: 100%; overflow-x: hidden; }
    .broadcast-screen input,
    .broadcast-screen textarea,
    .broadcast-screen select { font-size: 16px; max-width: 100%; box-sizing: border-box; }
    .broadcast-screen .btn,
    .broadcast-screen button { min-height: 44px; }
    .broadcast-screen .max-w-2xl { max-width: 100%; }
    .broadcast-screen h1,
    .broadcast-screen h2,
    .broadcast-screen p,
    .broadcast-screen label { overflow-wrap: anywhere; }
}

/* ============================================================
   EJE C (mobile-first) — pantalla «Encuestas y votaciones» del
   creador (constructor multi-pregunta, censo, quorum, mayorias).
   Bloque ADITIVO acotado a .votaciones-screen: cero regresion en
   escritorio, sin color (respeta dark mode). Razonado a 360/414px.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor acotado, sin scroll horizontal de pagina. */
    .votaciones-screen { max-width: 100%; overflow-x: hidden; }
    /* Campos del constructor (titulo, opciones, fechas, quorum) a 16px
       evita el zoom de iOS al enfocar, y a lo ancho. */
    .votaciones-screen input,
    .votaciones-screen select,
    .votaciones-screen textarea {
        font-size: 16px;
        max-width: 100%;
        box-sizing: border-box;
    }
    /* Botones de accion (crear, publicar, cerrar, eliminar) con zona
       tactil >=44px, incluidos los que no usan .btn (WCAG 2.5.5). */
    .votaciones-screen .btn,
    .votaciones-screen button {
        min-height: 44px;
    }
    /* Titulos y textos largos (titulo de la votacion, opciones): que
       no desborden el ancho a 360px. */
    .votaciones-screen h1,
    .votaciones-screen h2,
    .votaciones-screen h3,
    .votaciones-screen p,
    .votaciones-screen label,
    .votaciones-screen span { overflow-wrap: anywhere; word-break: break-word; }
}


/* ============================================================
   EJE C mobile-first: pantalla de MODERACION DE REPORTES del panel
   de plataforma (/admin/reports). Bloque ADITIVO acotado a
   .adminreports-screen. Sin colores (dark mode intacto). Razonado a
   360px y 414px: pestanas de estado (enlaces .btn), tarjetas de
   reporte con cabecera «texto + botones Resolver/Descartar» en fila
   (flex justify-between que apretaria los botones) y textos largos
   (titulos de post, motivos, comentarios citados). Sin campos
   visibles, sin tablas, sin imagenes en esta vista.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor acotado, sin scroll horizontal de pagina. */
    .adminreports-screen { width: 100%; max-width: 100%; overflow-x: hidden; }

    /* Tarjetas de reporte nunca desbordan el ancho disponible. */
    .adminreports-screen .card { max-width: 100%; box-sizing: border-box; }

    /* Cabecera de cada tarjeta y bloque de acciones: que texto y
       botones se apilen en lugar de comprimirse en una linea. */
    .adminreports-screen .card > div,
    .adminreports-screen .tabs { flex-wrap: wrap; }

    /* Pestanas (enlaces .btn) y botones Resolver/Descartar con zona
       tactil >=44px (WCAG 2.5.5). */
    .adminreports-screen .btn,
    .adminreports-screen a.btn,
    .adminreports-screen button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Titulos, motivos, nombres y comentarios citados (URLs y palabras
       largas) parten palabra en lugar de desbordar la tarjeta. */
    .adminreports-screen h1,
    .adminreports-screen strong,
    .adminreports-screen span,
    .adminreports-screen a { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   EJE C · Feed principal (/feed): pasada mobile-first
   Bloque ADITIVO acotado a .feedhome-screen. Todo bajo la media query:
   cero regresion en escritorio y sin fijar colores (dark mode intacto).
   Targets tactiles >=44px (WCAG 2.5.5). El compositor de post (titulo, URL
   de video, precio PPV, opciones de encuesta y select de categoria) usa 16px
   para evitar el zoom de iOS y se acota al ancho; titulos y contenido de las
   tarjetas parten palabra en lugar de desbordar horizontalmente.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor de la pantalla del feed fluido, sin scroll horizontal de pagina. */
    .feedhome-screen { max-width: 100%; overflow-x: hidden; }

    /* Inputs, textarea y select del compositor a 16px (evita el zoom de iOS),
       acotados al ancho y con box-sizing coherente. */
    .feedhome-screen input,
    .feedhome-screen textarea,
    .feedhome-screen select {
        font-size: 16px;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Zona tactil comoda >=44px en botones/enlaces de accion del feed:
       publicar, IA, filtros de orden, categorias, like/guardar y paginacion. */
    .feedhome-screen .btn,
    .feedhome-screen button,
    .feedhome-screen .sort-btn,
    .feedhome-screen .page-btn {
        min-height: 44px;
    }

    /* Titulos y texto del feed nunca provocan scroll horizontal. */
    .feedhome-screen h1,
    .feedhome-screen p,
    .feedhome-screen .post-title,
    .feedhome-screen .post-content { overflow-wrap: break-word; }
}


/* ============================================================
   Mi cuota (/cuotas): pasada mobile-first (aditiva, sin color).
   Bloque ADITIVO acotado a .micuota-screen. Todo bajo la media query:
   cero regresion en escritorio. No se fijan colores (respeta modo oscuro).
   ============================================================ */
@media (max-width: 767.98px) {
    /* Contenedor del portal del socio fluido, sin scroll horizontal. */
    .micuota-screen { width: 100%; max-width: 100%; overflow-x: hidden; }

    /* Botones de accion (firmar mandato, borrar, pagar con Bizum) con zona
       tactil comoda >=44px (WCAG 2.5.5). */
    .micuota-screen button { min-height: 44px; }

    /* Titulos, texto y referencias largas (huella de firma, mandato) ajustan
       en lugar de forzar scroll horizontal. */
    .micuota-screen h1,
    .micuota-screen p,
    .micuota-screen strong { overflow-wrap: anywhere; }
}

/* Mobile-first: ajustes de plataforma (admin) */
@media (max-width:767.98px){
  .adminsettings-screen{width:100%;overflow-x:hidden}
  .adminsettings-screen input,
  .adminsettings-screen select{font-size:16px;max-width:100%;box-sizing:border-box}
  .adminsettings-screen .btn,
  .adminsettings-screen button{min-height:44px}
  .adminsettings-screen h1,
  .adminsettings-screen p,
  .adminsettings-screen label,
  .adminsettings-screen strong{overflow-wrap:break-word}
}

/* EJE C mobile-first: gestion de modulos del creador (.gadmin-modulos-screen) */
@media (max-width:767.98px){
  .gadmin-modulos-screen{width:100%;overflow-x:hidden}
  .gadmin-modulos-screen input{font-size:16px;max-width:100%;box-sizing:border-box}
  .gadmin-modulos-screen .btn,
  .gadmin-modulos-screen button{min-height:44px}
  .gadmin-modulos-screen h1,
  .gadmin-modulos-screen p,
  .gadmin-modulos-screen label{overflow-wrap:break-word}
}

/* EJE C mobile-first: panel de analitica de plataforma (.adminanalytics-screen) */
@media (max-width:767.98px){
  .adminanalytics-screen{width:100%;overflow-x:hidden}
  .adminanalytics-screen .card{max-width:100%;box-sizing:border-box}
  .adminanalytics-screen .btn,
  .adminanalytics-screen a.btn{min-height:44px}
  .adminanalytics-screen h1,
  .adminanalytics-screen .card-title,
  .adminanalytics-screen span{overflow-wrap:break-word}
  .adminanalytics-screen canvas{max-width:100%}
}

/* Mobile-first — pantalla «Cursos» de plataforma (Eje C, iter 556). Bloque aditivo acotado a .admincourses-screen; solo elementos reales (page-header, card, form inputs/select, table, botones). SIN colores -> dark mode intacto. */
@media (max-width:767.98px){
  .admincourses-screen{max-width:100%;overflow-x:hidden}
  .admincourses-screen .card{max-width:100%;box-sizing:border-box}
  .admincourses-screen input,.admincourses-screen select,.admincourses-screen textarea{font-size:16px;max-width:100%;box-sizing:border-box}
  .admincourses-screen .btn,.admincourses-screen button,.admincourses-screen a.btn{min-height:44px}
  .admincourses-screen table{display:block;overflow-x:auto;max-width:100%}
  .admincourses-screen .page-header h1,.admincourses-screen .card-title,.admincourses-screen label{overflow-wrap:break-word}
}

@media (max-width:767.98px){
  .asambleas-screen{width:100%;max-width:100%;overflow-x:hidden}
  .asambleas-screen select{font-size:16px;max-width:100%;box-sizing:border-box}
  .asambleas-screen h1,.asambleas-screen h2,.asambleas-screen p,.asambleas-screen summary{overflow-wrap:break-word}
}
/* EJE C mobile-first: clasificacion/leaderboard del socio (.leaderboards-screen), iter 557. Bloque aditivo acotado; solo elementos reales de la vista (encabezados, parrafos, tabs de rango como enlaces, botones de reto/tienda). SIN colores -> dark mode intacto. */
@media (max-width:767.98px){
  .leaderboards-screen{width:100%;max-width:100%;overflow-x:hidden}
  .leaderboards-screen .btn,
  .leaderboards-screen button,
  .leaderboards-screen a.btn{min-height:44px}
  .leaderboards-screen .lb-range-tab{min-height:44px;display:inline-flex;align-items:center}
  .leaderboards-screen h1,
  .leaderboards-screen h2,
  .leaderboards-screen p,
  .leaderboards-screen a,
  .leaderboards-screen strong{overflow-wrap:break-word}
}

/* EJE C mobile-first: aula del alumno / listado de cursos (.classroomindex-screen) */
@media (max-width:767.98px){
  .classroomindex-screen{width:100%;overflow-x:hidden}
  .classroomindex-screen .btn,
  .classroomindex-screen button,
  .classroomindex-screen a.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .classroomindex-screen input{font-size:16px;max-width:100%;box-sizing:border-box}
  .classroomindex-screen .courses-grid{grid-template-columns:1fr}
  .classroomindex-screen .course-card{max-width:100%}
  .classroomindex-screen h1,
  .classroomindex-screen h2,
  .classroomindex-screen p,
  .classroomindex-screen a,
  .classroomindex-screen .course-title,
  .classroomindex-screen .course-desc{overflow-wrap:anywhere;word-break:break-word}
}

/* EJE C mobile-first: inventario de bienes del creador/asociacion (.inventario-screen), iter 559. Bloque aditivo acotado; solo elementos reales (form de alta con inputs, buscador, tabla de bienes, botones de accion, filtros como enlaces, encabezados). SIN colores -> dark mode intacto. */
@media (max-width:767.98px){
  .inventario-screen{width:100%;max-width:100%;overflow-x:hidden}
  .inventario-screen input{font-size:16px;max-width:100%;box-sizing:border-box}
  .inventario-screen .btn,
  .inventario-screen button{min-height:44px}
  .inventario-screen table{display:block;overflow-x:auto;max-width:100%}
  .inventario-screen h1,
  .inventario-screen p,
  .inventario-screen label,
  .inventario-screen a{overflow-wrap:anywhere}
}

/* EJE C mobile-first: panel de presupuesto financiero del creador/entidad (.presupuesto-screen). Bloque aditivo acotado; solo elementos reales de la vista (form de alta con inputs y select de tipo, tablas de partidas + ejecucion, botones/.btn, enlaces de ejercicio, encabezados). SIN colores -> dark mode intacto. */
@media (max-width:767.98px){
  .presupuesto-screen{width:100%;max-width:100%;overflow-x:hidden}
  .presupuesto-screen input,
  .presupuesto-screen select{font-size:16px;max-width:100%;box-sizing:border-box}
  .presupuesto-screen .btn,
  .presupuesto-screen button{min-height:44px}
  .presupuesto-screen table{display:block;overflow-x:auto;max-width:100%}
  .presupuesto-screen h1,
  .presupuesto-screen p,
  .presupuesto-screen label,
  .presupuesto-screen a{overflow-wrap:break-word}
}

@media (max-width:767.98px){
  .censo-screen{width:100%;max-width:100%;overflow-x:hidden}
  .censo-screen input{font-size:16px;max-width:100%;box-sizing:border-box}
  .censo-screen .btn-print,
  .censo-screen .btn-csv,
  .censo-screen button{min-height:44px}
  .censo-screen table{display:block;overflow-x:auto}
  .censo-screen h1,
  .censo-screen p,
  .censo-screen label,
  .censo-screen a{overflow-wrap:break-word}
}

/* EJE C mobile-first: panel admin de palabras prohibidas/moderacion (.adminkeywords-screen). Bloque aditivo acotado; solo elementos reales de la vista (formularios de alta con input de texto y buscador, botones/.btn de anadir y eliminar, encabezados y textos). SIN colores -> dark mode intacto. */
@media (max-width:767.98px){
  .adminkeywords-screen{width:100%;max-width:100%;overflow-x:hidden}
  .adminkeywords-screen input{font-size:16px;max-width:100%;box-sizing:border-box}
  .adminkeywords-screen .btn,
  .adminkeywords-screen button{min-height:44px}
  .adminkeywords-screen h1,
  .adminkeywords-screen p,
  .adminkeywords-screen label{overflow-wrap:break-word}
}

/* EJE C mobile-first: Libro mayor del panel del creador/admin (.gadminmayor-screen). Bloque aditivo acotado; solo elementos reales de la vista (form de filtros con select/input numero, boton Ver, enlaces CSV/diario, tabla de apuntes con saldo). SIN colores -> dark mode intacto. */
@media (max-width:767.98px){
  .gadminmayor-screen{width:100%;max-width:100%;overflow-x:hidden}
  .gadminmayor-screen input,
  .gadminmayor-screen select{font-size:16px;max-width:100%;box-sizing:border-box}
  .gadminmayor-screen .btn,
  .gadminmayor-screen button,
  .gadminmayor-screen a.btn{min-height:44px}
  .gadminmayor-screen table{display:block;overflow-x:auto;max-width:100%}
  .gadminmayor-screen h1,
  .gadminmayor-screen p,
  .gadminmayor-screen label,
  .gadminmayor-screen a{overflow-wrap:break-word}
}

/* EJE B paridad Patreon/Substack/Circle: gráfico de evolución de ingresos del panel
   del creador (/g/{slug}/admin/ingresos). SVG inline generado en PHP (sin librerías,
   sin CDN, sin JS). Solo tokens de color existentes -> el modo oscuro funciona por
   herencia de variables, sin colores a pelo. */
.rev-chart { margin: 0; width: 100%; }
.rev-chart svg { display: block; width: 100%; height: auto; max-height: 260px; }
.rev-chart .rev-bar-net { fill: var(--primary); }
.rev-chart .rev-bar-fee { fill: var(--primary-tint); }
.rev-chart .rev-grid { stroke: var(--border); stroke-width: 1; }
.rev-chart .rev-axis-label { fill: var(--text-muted); font-family: inherit; font-size: 11px; }
.rev-chart-legend {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
    margin-top: 10px; font-size: .78rem; color: var(--text-muted);
}
.rev-chart-legend .dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 3px;
    margin-right: 6px; vertical-align: -1px;
}
.rev-chart-legend .dot-net { background: var(--primary); }
.rev-chart-legend .dot-fee { background: var(--primary-tint); }
@media (max-width:767.98px){
    .rev-chart .rev-axis-label { font-size: 14px; }
    .rev-chart-legend { font-size: .85rem; }
}


/* ============================================================
   EJE C mobile-first (complemento): aula del alumno .classroom-screen
   (/classroom/lesson y /classroom/quiz). Bloque ADITIVO: solo geometria
   y zona tactil, CERO colores -> el modo oscuro queda intacto. No repite
   lo ya cubierto mas arriba (.btn, .lesson-link, .courses-grid, inputs a
   16px, video/imagenes fluidos, overflow-wrap de titulos).
   ============================================================ */
@media (max-width: 767.98px) {
    /* Botones sin clase .btn (p. ej. borrar comentario de la leccion) tambien
       con zona tactil >= 44px (WCAG 2.5.5). */
    .classroom-screen button { min-height: 44px; }

    /* Casillas y radios (respuestas del cuestionario, marcar leccion) con un
       objetivo pulsable comodo dentro de su etiqueta. */
    .classroom-screen input[type="radio"],
    .classroom-screen input[type="checkbox"] { min-width: 22px; min-height: 22px; }

    /* Nombres de recurso, comentarios y textos del temario largos ajustan en
       lugar de forzar scroll horizontal. */
    .classroom-screen .lesson-sidebar,
    .classroom-screen .lesson-resources,
    .classroom-screen #lesson-comments { overflow-wrap: anywhere; min-width: 0; }
}

@media (max-width: 480px) {
    /* A 360-414px: navegacion anterior/siguiente y acciones de compartir a
       ancho completo, para que los titulos largos no se aplasten. */
    .classroom-screen #lesson-prev,
    .classroom-screen #lesson-next { flex: 1 1 100%; overflow-wrap: anywhere; }
    .classroom-screen .lesson-share { flex-wrap: wrap; }

    /* Tarjetas de curso a una sola columna, sin desbordar el viewport. */
    .classroom-screen .courses-grid { grid-template-columns: 1fr; }
    .classroom-screen .course-card { max-width: 100%; }
}


/* ============================================================
   EJE C mensajes (complemento v2): zonas tactiles reales >=44x44px en los
   controles concretos de /messages y /messages/{id} (enviar, nueva conversacion,
   personas del panel, caja de texto) + foco visible ajustado.
   Bloque ADITIVO, todo bajo media query movil: CERO regresion en escritorio y
   CERO colores nuevos (el modo oscuro queda intacto).
   ============================================================ */
@media (max-width: 767.98px) {
    /* Boton «+ Nueva conversacion» de la cabecera (era .btn-sm, ~32px de alto). */
    .messages-screen #new-chat-toggle { min-height: 44px; min-width: 44px; }

    /* Boton «Enviar» del hilo: ademas del alto, ancho minimo pulsable. */
    .messages-screen .chat-send { min-height: 44px; min-width: 44px; }

    /* La caja de mensaje trae min-height:40px en linea -> se eleva a 44px.
       Se usa !important porque el estilo en linea gana en especificidad. */
    .messages-screen #chat-input { min-height: 44px !important; }

    /* Cada persona sugerida (autocompletado y listado del panel) es una fila
       pulsable completa, no solo el texto. */
    .messages-screen #new-chat-results a,
    .messages-screen #new-chat-panel a.btn { min-height: 44px; }

    /* Foco de teclado dentro de la fila/flecha sin recortarse por el overflow
       del contenedor (el color del outline lo hereda de la regla global). */
    .messages-screen .conv-row:focus-visible,
    .messages-screen .chat-back:focus-visible { outline-offset: -2px; }
}


/* ============================================================
   EJE C membresias (complemento): zonas tactiles reales >=44x44px en los
   controles de /g/{slug}/admin/membresias que NO son <button> y por tanto no
   estaban cubiertos por la regla previa de .tiers-screen: los desplegables
   <summary> («Editar» / «Acceso a contenido»), las filas de casilla (cursos,
   eventos, categorias del feed, «Membresia gratuita») y la propia casilla.
   Bloque ADITIVO, integro bajo media query movil: CERO regresion en escritorio
   y CERO colores nuevos (el modo oscuro y las variables quedan intactos).
   No se toca `display` de <summary> para no perder el triangulo nativo: la
   zona pulsable se gana con min-height + padding vertical.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Desplegables «Editar» y «Acceso a contenido» de cada plan. */
    .tiers-screen details > summary {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }

    /* Foco de teclado del desplegable sin recortarse dentro de la tarjeta
       (el color del outline lo hereda de la regla global). */
    .tiers-screen details > summary:focus-visible { outline-offset: 2px; }

    /* Filas de casilla: toda la fila (casilla + texto) es pulsable, no solo
       el cuadradito de ~16px. */
    .tiers-screen label.flex {
        min-height: 44px;
        box-sizing: border-box;
    }

    /* La casilla en si crece a 22px: con la fila de 44px queda holgada para
       el dedo sin desalinear el texto (align-items:center ya viene de la vista). */
    .tiers-screen input[type="checkbox"] {
        min-width: 22px;
        min-height: 22px;
    }

    /* Botones de texto dentro de formularios (eliminar membresia, activar/
       desactivar cupon, anular codigo regalo): ademas del alto ya definido,
       ancho minimo pulsable. */
    .tiers-screen form button { min-width: 44px; }
}


/* ===== EJE C · Eventos: zonas tactiles pendientes del detalle (chat del evento)
   Los botones de moderacion del chat (borrar / silenciar) son <button> pelados
   con un emoji dentro (sin .btn), de ~20px: por debajo del minimo tactil de
   WCAG 2.5.5. El campo de texto del chat tampoco tenia alto minimo. Bloque
   ADITIVO acotado a .events-screen y a la media query movil: no altera el
   aspecto de escritorio ni el chat de /messages ni el de /chat. */
@media (max-width: 767.98px) {
    /* Borrar mensaje / silenciar usuario: cuadrado tactil comodo >=44x44px. */
    .events-screen .ec-del,
    .events-screen .ec-mute {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
    }
    /* Campo de texto del chat del evento: alto tactil comodo (el boton Enviar
       ya lo garantiza la regla global de .btn). */
    .events-screen #chat-input { min-height: 44px; }
    /* Fila del formulario del chat: envuelve antes que desbordar el viewport. */
    .events-screen #chat-form { flex-wrap: wrap; max-width: 100%; }
}

/* EJE C mobile-first: panel de win-back del creador (.gadmin-winback-screen),
   ruta /g/{slug}/admin/winback. Bloque ADITIVO acotado a la pantalla y dentro de una
   media query max-width (el escritorio queda intacto). Solo elementos reales de la
   vista: KPIs, chips de periodo, formulario de campana y tabla de ex-socios, que en
   movil se apila como tarjetas usando el data-label de cada celda. SIN colores a
   pelo -> solo tokens existentes, el modo oscuro sigue funcionando por herencia. */
@media (max-width:767.98px){
  .gadmin-winback-screen{width:100%;max-width:100%;overflow-x:hidden}
  .gadmin-winback-screen input,
  .gadmin-winback-screen textarea{font-size:16px;max-width:100%;box-sizing:border-box}
  .gadmin-winback-screen .btn,
  .gadmin-winback-screen button{min-height:44px;width:100%}
  /* Chips de antiguedad de la baja: alto tactil comodo (>=44px) sin tocar color. */
  .gadmin-winback-screen [role="group"] > a{min-height:44px;display:inline-flex;align-items:center}
  .gadmin-winback-screen h1,
  .gadmin-winback-screen h2,
  .gadmin-winback-screen p,
  .gadmin-winback-screen label,
  .gadmin-winback-screen li{overflow-wrap:break-word}
  /* Tabla -> tarjetas apiladas: legible a 360px sin desbordar el layout. */
  .gadmin-winback-screen .wb-table-wrap{overflow-x:visible}
  .gadmin-winback-screen .wb-table-wrap table,
  .gadmin-winback-screen .wb-table-wrap tbody,
  .gadmin-winback-screen .wb-table-wrap tr,
  .gadmin-winback-screen .wb-table-wrap td{display:block;width:100%;box-sizing:border-box}
  .gadmin-winback-screen .wb-table-wrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .gadmin-winback-screen .wb-table-wrap tr{padding:.5rem .25rem;border-bottom:1px solid var(--border)}
  .gadmin-winback-screen .wb-table-wrap tr:last-child{border-bottom:0}
  .gadmin-winback-screen .wb-table-wrap td{padding:.25rem .75rem;display:flex;gap:.75rem;align-items:baseline;justify-content:space-between}
  .gadmin-winback-screen .wb-table-wrap td::before{content:attr(data-label);flex:0 0 auto;font-size:.72rem;color:var(--text-muted)}
  .gadmin-winback-screen .wb-table-wrap td:empty{display:none}
}


/* ============================================================
   EJE C · Tienda (complemento a los bloques .tienda-screen y
   .tienda-admin-screen ya existentes): controles que aquellas pasadas
   NO cubrian y que quedaban por debajo del minimo tactil de WCAG 2.5.5
   a 360-414px. Bloque ADITIVO, integro bajo media query movil:
   CERO regresion en escritorio y CERO colores a pelo (solo tokens),
   asi el modo oscuro sigue funcionando por herencia.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Chips de orden («Novedades», «Precio: menor a mayor»...): viven en un
       <nav>, no dentro de <article>, asi que la regla previa
       `.tienda-screen article a` no los alcanzaba. Con px-3/py-1.5 median
       ~28px de alto. */
    .tienda-screen .tienda-sort-chip {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Foco de teclado del chip sin recortarse (color heredado de la global). */
    .tienda-screen .tienda-sort-chip:focus-visible { outline-offset: 2px; }

    /* Pistas de PWYW: nunca desbordan la tarjeta en pantallas estrechas. */
    .tienda-screen form p { max-width: 100%; overflow-wrap: anywhere; }

    /* Panel del creador: filas de casilla (PWYW, «Generar clave de licencia»)
       pulsables enteras, no solo el cuadradito de ~16px. */
    .tienda-admin-screen label.flex {
        min-height: 44px;
        box-sizing: border-box;
    }
    .tienda-admin-screen input[type="checkbox"] {
        min-width: 22px;
        min-height: 22px;
    }

    /* El bloque previo pone font-size:16px a los inputs; los <select> y el
       <textarea> de descripcion tambien lo necesitan para evitar el zoom
       automatico de iOS al enfocarlos. */
    .tienda-admin-screen select,
    .tienda-admin-screen textarea { font-size: 16px; max-width: 100%; }

    /* La tabla de productos es ahora role=region con tabindex=0: el foco de
       teclado sobre la zona con scroll debe verse. */
    .tienda-admin-screen .st-table-wrap:focus-visible { outline-offset: -2px; }

    /* Pistas (aria-describedby) del formulario: no fuerzan ancho al contenedor. */
    .tienda-admin-screen form p { max-width: 100%; overflow-wrap: anywhere; }
}


/* ============================================================
   EJE C mensajes (complemento v3): remates de la pasada movil de /messages y
   /messages/{id} que las dos pasadas previas no alcanzaban porque el estilo
   afectado va EN LINEA en el HTML (gana en especificidad a la hoja) o porque el
   elemento no existia todavia.
   Bloque ADITIVO, integro bajo media query movil: CERO regresion en escritorio
   y CERO colores nuevos (se usan solo tokens ya existentes).
   Razonado a 360px y 414px.
   ============================================================ */
@media (max-width: 767.98px) {
    /* La caja de escritura del hilo llevaba font-size:0.9rem EN LINEA, asi que la
       regla previa `.messages-screen textarea { font-size:16px }` no llegaba a
       aplicarse: iOS seguia haciendo zoom automatico al enfocarla. */
    .messages-screen #chat-input { font-size: 16px !important; }

    /* Enlace al perfil del interlocutor en la cabecera del hilo: es un <a> suelto
       (no .btn), asi que ninguna regla previa le daba zona tactil. */
    .messages-screen .chat-peer-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Texto de usuario dentro del hilo y de la lista: nombres largos, correos o
       URLs sin espacios ajustan en lugar de estirar el ancho de la pantalla. */
    .messages-screen .chat-msg-name,
    .messages-screen .chat-msg,
    .messages-screen .conv-row { overflow-wrap: anywhere; }

    /* El nombre del interlocutor en cada fila de conversacion comparte linea con
       la insignia «Nueva» y la hora: debe encogerse, no empujar. */
    .messages-screen .conv-row > div { min-width: 0; }

    /* Migas de pan del hilo: sin scroll horizontal de pagina a 360px. */
    .messages-screen .breadcrumbs,
    .messages-screen nav[aria-label] { max-width: 100%; overflow-wrap: anywhere; }
}
/* ============================================================
   EJE C perfil (complemento v3): remates de la superficie /profile que las
   tres pasadas previas (.profile-social-link, .profile-share, .profile-screen)
   no alcanzaban, porque el elemento no tenia clase propia o porque el defecto
   solo se ve al reflowar la rejilla de estadisticas a 2 columnas.
   Bloque ADITIVO integro bajo la media query movil: CERO regresion en
   escritorio y CERO colores a pelo (solo tokens ya existentes), de modo que el
   modo oscuro sigue funcionando por herencia. Razonado a 360px y 414px.
   ============================================================ */
@media (max-width: 767.98px) {
    /* La fila de estadisticas pasa de 4 a 2 columnas en movil, pero el
       `border-r` de Tailwind sigue en las celdas 1 y 3: la celda 2 dibujaba una
       raya suelta contra el borde derecho de la tarjeta. Se corta por columna. */
    .profile-screen .profile-stats-grid > div:nth-child(2n) { border-right: 0; }
    /* Y el par superior necesita separacion del inferior al apilarse. */
    .profile-screen .profile-stats-grid > div:nth-child(-n+2) { padding-bottom: .75rem; }

    /* Los titulares de seccion pasaron a <h2> y los de insignia/post a <h3>:
       la regla previa solo cubria h1/h4/p, asi que un nombre de insignia o un
       titulo de post sin espacios volvia a estirar la tarjeta a 360px. */
    .profile-screen h2,
    .profile-screen h3 { overflow-wrap: anywhere; word-break: break-word; }

    /* Cabecera de cada publicacion: avatar + nombre + categoria comparten linea.
       Sin min-width:0 el nombre largo empuja el chip fuera de la tarjeta. */
    .profile-screen .profile-post-meta { flex-wrap: wrap; row-gap: .25rem; }
    .profile-screen .profile-post-meta > div { min-width: 0; overflow-wrap: anywhere; }
    .profile-screen .category-badge { max-width: 100%; overflow-wrap: anywhere; }

    /* Tarjeta de comunidad dirigida: es un <a> con estilo propio (no .btn), y
       la regla previa de 44px no lo alcanzaba. */
    .profile-screen .profile-managed-card {
        min-height: 44px;
        box-sizing: border-box;
    }
    .profile-screen .profile-managed-card > span { min-width: 0; overflow-wrap: anywhere; }

    /* Tarjeta lateral de progreso de nivel: a ancho completo ya, pero su texto
       («Faltan N pts para Nv. X») debe ajustar en vez de desbordar. */
    .profile-screen .profile-level-card {
        max-width: 100%;
        box-sizing: border-box;
        overflow-wrap: anywhere;
    }

    /* Foco de teclado visible y sin recortarse en los objetivos tactiles del
       perfil (el color del outline lo hereda de la regla global). */
    .profile-screen .profile-social-link:focus-visible,
    .profile-screen .profile-post-title:focus-visible,
    .profile-screen .profile-post-link:focus-visible,
    .profile-screen .profile-managed-card:focus-visible { outline-offset: 2px; }

    /* La caja de «Compartir perfil» es sr-only pero sigue siendo un <input> de
       texto real: 16px evita el zoom de iOS si algun agente le da el foco. */
    .profile-screen #profile-share-url { font-size: 16px; }
}
/* Editor de layout — feed: las tarjetas superiores editables llevan order propio;
   el resto de hijos directos (barra de filtros, posts, paginacion) va despues. */
.feed-screen > *:not([data-lb]) { order: 900; }
.events-screen > *:not([data-lb]) { order: 900; }

/* Editor de layout: bloque oculto por el admin/creador — regla global (sin color).
 * Antes solo existia en layout_editor.css (que solo cargan los editores), asi que
 * los bloques ocultos seguian viendose para el resto de usuarios. */
.lb-hidden { display: none; }