/* ═══════════════════════════════════════════════════════════════
   OPSYS — MOBILE CSS
   Solo se activa con body.mobile-mode (≤ 768px)
   Aislado totalmente del responsive de escritorio
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. RESET BASE MÓVIL ───────────────────────────────────── */
body.mobile-mode {
    overflow: hidden;
    overflow-x: hidden;
    max-width: 100vw;
    -webkit-text-size-adjust: 100%;
}
body.mobile-mode #app { padding-top: 50px; overflow-x: hidden; }

/* ── 2. TOPBAR LIMPIO ──────────────────────────────────────── */
body.mobile-mode #topbar {
    height: 50px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: var(--bg2) !important;
    border-bottom: 2px solid var(--border) !important;
}
body.mobile-mode #topbar > * { display: none !important; }
body.mobile-mode #tb-title {
    display: flex !important;
    align-items: center;
    flex: 1 !important;
    font-size: 11px !important;
    color: var(--turq) !important;
    letter-spacing: .05em !important;
    transform: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2 !important;
}
body.mobile-mode #topbar button[onclick*="toggleTheme"],
body.mobile-mode #topbar button[onclick*="abrirBuscadorGlobal"],
body.mobile-mode #topbar button[onclick*="abrirFavoritos"],
body.mobile-mode #topbar button[onclick*="abrirPersonalizacion"] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 9px 11px !important;
    min-height: 38px;
    min-width: 38px;
    font-size: 13px !important;
}
body.mobile-mode #btn-hamburger { display: none !important; }

/* ── 3. LAYOUT PRINCIPAL ───────────────────────────────────── */
body.mobile-mode #sidebar { display: none !important; }
body.mobile-mode #app-main {
    margin-left: 0 !important;
    width: 100% !important;
    height: calc(100vh - 50px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px 10px 90px !important;
}
body.mobile-mode .page { padding: 0 !important; }
body.mobile-mode #sov { display: none !important; }

/* ── 4. DRAWER MÓVIL ───────────────────────────────────────── */
.mob-drawer {
    position: fixed;
    top: 50px; right: 0; bottom: 0;
    width: min(82vw, 300px);
    background: var(--bg2);
    border-left: 3px solid var(--border);
    box-shadow: -4px 0 0 rgba(0,0,0,.4);
    z-index: 300;
    transform: translateX(105%);
    transition: transform .22s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: none;
    flex-direction: column;
}
body.mobile-mode .mob-drawer { display: flex; }
.mob-drawer.open { transform: translateX(0); }

.mob-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 299;
}
body.mobile-mode .mob-overlay.active { display: block; }

/* ── DRAWER ITEMS — GRUPOS COLAPSABLES, LETRAS GRANDES ─────── */
.mob-drw-grp {
    border-bottom: 1px solid var(--border);
}
.mob-drw-grp:last-child { border-bottom: none; }

/* Header del grupo (click para colapsar/expandir) */
.mob-drw-grp-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 18px;
    cursor: pointer;
    background: var(--bg3);
    border-bottom: 1px solid var(--border);
    -webkit-tap-highlight-color: transparent;
    min-height: 60px;
}
.mob-drw-grp-hdr:active { background: var(--bg); }
.mob-drw-grp-hdr.no-toggle { cursor: default; }
.mob-drw-grp-hdr.no-toggle:active { background: var(--bg3); }

.mob-drw-grp-lbl {
    flex: 1;
    font-size: 13px;
    font-family: var(--font);
    color: var(--turq);
    letter-spacing: .14em;
    font-weight: 900;
    text-transform: uppercase;
    transition: font-size .15s;
}

/* Cuando el grupo está colapsado, el título es MÁS GRANDE */
.mob-drw-grp.col .mob-drw-grp-lbl {
    font-size: 15px;
    color: var(--text);
}
.mob-drw-grp.col .mob-drw-grp-hdr {
    background: var(--bg2);
    border-bottom: 2px solid var(--border);
}

.mob-drw-grp-cnt {
    background: var(--turq);
    color: var(--bg);
    font-size: 11px;
    font-weight: 900;
    min-width: 26px;
    height: 22px;
    padding: 0 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--turq);
    font-family: var(--font);
}
[data-theme="gameboy"] .mob-drw-grp-cnt { border-radius: 0; }

.mob-drw-grp-chev {
    color: var(--dim);
    font-size: 12px;
    width: 16px;
    text-align: center;
    transition: transform .15s;
}

/* Items del grupo (submenús) */
.mob-drw-grp-items {
    display: block;
    background: var(--bg2);
}
.mob-drw-grp.col .mob-drw-grp-items {
    display: none;
}

.mob-drw-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 18px 18px 32px; /* indentado submenú */
    font-size: 14px;
    font-family: var(--font);
    letter-spacing: .06em;
    color: var(--text);
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,.05);
    min-height: 62px;
    -webkit-tap-highlight-color: transparent;
    font-weight: 600;
    text-transform: uppercase;
}
.mob-drw-grp-items > .mob-drw-item:last-child {
    border-bottom: none;
}
.mob-drw-item:active { background: var(--bg3); }
.mob-drw-item i {
    font-size: 18px;
    width: 24px;
    text-align: center;
    color: var(--turq);
    flex-shrink: 0;
}
.mob-drw-item .drw-lbl {
    flex: 1;
    line-height: 1.2;
}
.mob-drw-item .drw-badge {
    margin-left: auto;
    background: var(--text);
    color: var(--bg);
    font-size: 11px;
    font-weight: 900;
    min-width: 26px;
    height: 22px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--text);
    letter-spacing: 0;
    font-family: var(--font);
}
[data-theme="gameboy"] .mob-drw-item .drw-badge { border-radius: 0; }

/* Estrella indicador favorito en item del drawer */
.mob-drw-item .drw-star {
    color: var(--yellow) !important;
    font-size: 13px !important;
    margin-left: auto !important;
    width: auto !important;
}
.mob-drw-item .drw-star.on {
    color: var(--turq) !important;
}
.mob-drw-item .drw-star + .drw-badge { margin-left: 8px !important; }

/* ── 22. PENDIENTES-WO / PROACTIV MÓVIL — ESTILO THINGS ────── */
body.mobile-mode #page-pendientes-wo {
    padding-bottom: 80px !important;
}

/* Header de la página: solo título + botón filtros (icono) */
body.mobile-mode #page-pendientes-wo > div:first-child {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
    padding: 4px 0 12px !important;
    border-bottom: 1px solid var(--border);
    align-items: center !important;
}
body.mobile-mode #page-pendientes-wo > div:first-child > div:first-child {
    font-size: 12px !important;
    flex: 1 !important;
    letter-spacing: .14em !important;
    font-weight: 900 !important;
    color: var(--turq) !important;
}
/* Botón NUEVA TAREA del header — oculto, se reemplaza por FAB */
body.mobile-mode #page-pendientes-wo > div:first-child > button.primary {
    display: none !important;
}
/* Botón filtros — solo icono */
body.mobile-mode #page-pendientes-wo #btn-pend-filtros {
    padding: 11px !important;
    min-height: 44px !important;
    min-width: 44px !important;
    font-size: 0 !important;
    justify-content: center !important;
}
body.mobile-mode #page-pendientes-wo #btn-pend-filtros i {
    font-size: 14px !important;
}

/* Layout 3 columnas → apilado vertical, cada una como sección con header */
body.mobile-mode #page-pendientes-wo > div:nth-child(2) {
    flex-direction: column !important;
    gap: 4px !important;
    padding: 0 !important;
    position: relative !important;
}
body.mobile-mode #page-pendientes-wo > div:nth-child(2) > div:not(#pend-filtros) {
    width: 100% !important;
    flex: 1 1 100% !important;
    background: transparent !important;
    border: none !important;
    margin-bottom: 12px;
}

/* Header de cada sección (TRABAJOS WO / PERSONAL / COMPARTIDO) */
body.mobile-mode #page-pendientes-wo > div:nth-child(2) > div:not(#pend-filtros) > div:first-child {
    font-size: 13px !important;
    padding: 12px 8px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--border) !important;
    cursor: pointer !important;
    margin: 0 0 4px 0 !important;
    letter-spacing: .1em !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    position: relative;
    color: var(--text) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
/* Chevron del colapsable */
body.mobile-mode #page-pendientes-wo > div:nth-child(2) > div:not(#pend-filtros) > div:first-child::after {
    content: "\f078"; /* chevron-down */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 8px;
    color: var(--turq);
    font-size: 11px;
    transition: transform .2s;
}
body.mobile-mode #page-pendientes-wo > div:nth-child(2) > div.col-pend-col > div:first-child::after {
    transform: rotate(-90deg);
}
body.mobile-mode #page-pendientes-wo > div:nth-child(2) > div.col-pend-col > div:nth-child(2) {
    display: none !important;
}
body.mobile-mode #page-pendientes-wo > div:nth-child(2) > div:not(#pend-filtros) > div:nth-child(2) {
    padding: 4px 0 !important;
}

/* ───────────────────────────────────────────────────────────
   PROACTIV — VISTA DE LISTA SIMPLE (móvil)
   Una sola fila por tarea: solo título + íconos al final.
   ─────────────────────────────────────────────────────────── */
body.mobile-mode .tarea-row {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 14px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(127,127,127,.18) !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    cursor: pointer !important;
    min-height: 52px !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-tap-highlight-color: transparent;
    margin: 0 !important;
}
body.mobile-mode .tarea-row-titulo {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
body.mobile-mode .tarea-row-icos {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    font-size: 13px;
    padding-top: 2px;
}
body.mobile-mode .tarea-row-icos i {
    color: var(--turq);
}
body.mobile-mode .tarea-row-icos i.fa-envelope {
    color: var(--yellow);
}
/* COMPLETADA: gris claro, tachado */
body.mobile-mode .tarea-row.tarea-completada {
    opacity: .55;
}
body.mobile-mode .tarea-row.tarea-completada .tarea-row-titulo {
    text-decoration: line-through;
    color: var(--dim);
}

/* ─── FORMULARIO RECURRENCIA ──────────────────────────────── */
body.mobile-mode .rec-tipo-row,
body.mobile-mode .rec-fin-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
body.mobile-mode .rec-tipo-btn,
body.mobile-mode .rec-fin-btn {
    padding: 12px 8px;
    background: var(--bg3);
    border: 2px solid var(--border);
    color: var(--text);
    font-family: var(--font);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    cursor: pointer;
    border-radius: 0;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
body.mobile-mode .rec-tipo-btn.on,
body.mobile-mode .rec-fin-btn.on {
    background: var(--turq);
    color: #0D1117;
    border-color: var(--turq);
}
body.mobile-mode .rec-tipo-btn.on i,
body.mobile-mode .rec-fin-btn.on i {
    color: #0D1117;
}
body.mobile-mode .rec-dias-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
body.mobile-mode .rec-dia-btn {
    padding: 10px 0;
    background: var(--bg3);
    border: 2px solid var(--border);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    border-radius: 0;
    min-height: 44px;
}
body.mobile-mode .rec-dia-btn.on {
    background: var(--turq);
    color: #0D1117;
    border-color: var(--turq);
}

/* Versión escritorio (para que también se vea bien) */
body:not(.mobile-mode) .rec-tipo-row,
body:not(.mobile-mode) .rec-fin-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
body:not(.mobile-mode) .rec-tipo-btn,
body:not(.mobile-mode) .rec-fin-btn {
    padding: 8px 14px;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    cursor: pointer;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body:not(.mobile-mode) .rec-tipo-btn.on,
body:not(.mobile-mode) .rec-fin-btn.on {
    background: var(--turq);
    color: #0D1117;
    border-color: var(--turq);
}
body:not(.mobile-mode) .rec-dias-row {
    display: flex;
    gap: 4px;
}
body:not(.mobile-mode) .rec-dia-btn {
    width: 36px;
    height: 36px;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font);
    font-weight: 700;
    cursor: pointer;
    border-radius: 3px;
}
body:not(.mobile-mode) .rec-dia-btn.on {
    background: var(--turq);
    color: #0D1117;
    border-color: var(--turq);
}
body.mobile-mode .tarea-grupo {
    margin-bottom: 8px;
}
body.mobile-mode .tarea-grupo.no-header > .tarea-grupo-hd {
    display: none;
}
body.mobile-mode .tarea-grupo-hd {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
    cursor: pointer;
    font-family: var(--font);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
    color: var(--text);
    text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
}
body.mobile-mode .tarea-grupo-hd > i:first-child {
    font-size: 14px;
    width: 18px;
    text-align: center;
}
body.mobile-mode .tarea-grupo-hd span:first-of-type {
    flex: 1;
}
body.mobile-mode .tarea-grupo-cnt {
    font-size: 10px;
    color: var(--dim);
    font-weight: 700;
}
body.mobile-mode .tarea-grupo-arrow {
    color: var(--turq);
    font-size: 12px;
    transition: transform .2s;
}
body.mobile-mode .tarea-grupo.collapsed .tarea-grupo-arrow {
    transform: rotate(-90deg);
}
body.mobile-mode .tarea-grupo.collapsed .tarea-grupo-body {
    display: none;
}
body.mobile-mode .tarea-grupo-body {
    background: var(--bg);
}


/* Versión escritorio (cards normales): tachado y color verde */
body:not(.mobile-mode) .lev-card.tarea-completada {
    opacity: .65;
    border-left-color: #8b9442 !important;
}
body:not(.mobile-mode) .lev-card.tarea-completada .lev-card-hd span:nth-child(2) {
    text-decoration: line-through;
    color: #8b9442 !important;
}

/* ── MENÚ CONTEXTUAL DE TAREA (long-press) ──────────────────── */
.mob-ctx-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 2100;
    align-items: flex-end;
    justify-content: center;
    padding: 0 16px 16px;
}
.mob-ctx-overlay.active { display: flex; animation: mobCtxFade .15s ease-out; }
@keyframes mobCtxFade { from { opacity: 0; } to { opacity: 1; } }
.mob-ctx-box {
    width: 100%;
    max-width: 420px;
    background: var(--bg2);
    border: 3px solid var(--border);
    border-radius: 0;
    box-shadow: 0 -8px 30px rgba(0,0,0,.7);
    animation: mobpendin .2s ease-out;
}
.mob-ctx-head {
    padding: 14px 18px;
    border-bottom: 2px solid var(--border);
    background: var(--bg3);
    font-family: var(--font);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    color: var(--dim);
    text-transform: uppercase;
    text-align: center;
}
.mob-ctx-list {
    display: flex;
    flex-direction: column;
    padding: 8px;
    gap: 6px;
}
.mob-ctx-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: var(--bg3);
    border: 2px solid var(--border);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    cursor: pointer;
    text-transform: uppercase;
    text-align: left;
    min-height: 54px;
    border-radius: 0;
    box-shadow: 2px 2px 0 rgba(0,0,0,.3);
}
.mob-ctx-btn:active {
    transform: translate(1px,1px);
    box-shadow: 1px 1px 0 rgba(0,0,0,.3);
}
.mob-ctx-btn i {
    width: 22px;
    text-align: center;
    color: var(--turq);
    font-size: 16px;
}
.mob-ctx-btn.ok {
    background: var(--green);
    border-color: var(--green);
    color: #0D1117;
}
.mob-ctx-btn.ok i { color: #0D1117; }
.mob-ctx-btn.warn {
    background: var(--yellow);
    border-color: var(--yellow);
    color: #0D1117;
}
.mob-ctx-btn.warn i { color: #0D1117; }
.mob-ctx-btn.danger {
    border-color: var(--red);
    color: var(--red);
}
.mob-ctx-btn.danger i { color: var(--red); }
.mob-ctx-btn.cancel {
    background: var(--bg2);
    border-color: var(--border);
    color: var(--dim);
}
.mob-ctx-btn.cancel i { color: var(--dim); }

/* ── DRAWER VISTAS PROACTIV (móvil, izquierda) ──────────────── */
.pend-views-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 348;
}
.pend-views-overlay.open { display: block; }
.pend-views-drawer {
    position: fixed;
    top: 50px; /* debajo del topbar */
    left: 0;
    width: 80vw;
    max-width: 280px;
    height: calc(100vh - 50px);
    background: var(--bg2);
    border-right: 2px solid var(--border);
    transform: translateX(-100%);
    transition: transform .25s ease-out;
    z-index: 349;
    display: flex;
    flex-direction: column;
}
.pend-views-drawer.open { transform: translateX(0); }
body:not(.mobile-mode) .pend-views-drawer,
body:not(.mobile-mode) .pend-views-overlay,
body:not(.mobile-mode) .pend-views-fab { display: none !important; }

.pend-views-hd {
    padding: 20px 18px;
    border-bottom: 2px solid var(--border);
    background: var(--bg3);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .12em;
    color: var(--turq);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}
.pend-views-hd i { font-size: 18px; }

.pend-views-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
.pend-view-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,.04);
    min-height: 58px;
    -webkit-tap-highlight-color: transparent;
}
.pend-view-item i {
    width: 22px;
    font-size: 16px;
    text-align: center;
    color: var(--dim);
}
.pend-view-item.active {
    background: var(--bg3);
    color: var(--turq);
    border-left: 3px solid var(--turq);
    padding-left: 17px;
}
.pend-view-item.active i { color: var(--turq); }
.pend-view-item:active { background: var(--bg3); }

/* FAB que abre el drawer — ya NO es flotante. Se inyecta inline en el header */
.pend-views-fab {
    display: none;
}
body:not(.mobile-mode) .pend-views-fab,
body:not(.mobile-mode) .pend-views-drawer,
body:not(.mobile-mode) .pend-views-overlay { display: none !important; }

/* Botón de vistas dentro del header de la página, a la izquierda del filtro — SOLO móvil */
.pend-views-btn-inline {
    display: none !important;
    padding: 11px;
    min-height: 44px;
    min-width: 44px;
    background: var(--bg2);
    border: 2px solid var(--border);
    color: var(--turq);
    font-size: 14px;
    cursor: pointer;
    border-radius: 0;
    align-items: center;
    justify-content: center;
}
body.mobile-mode .pend-views-btn-inline { display: inline-flex !important; }
body.mobile-mode .pend-views-btn-inline:active {
    background: var(--bg3);
}
body:not(.mobile-mode) .pend-views-btn-inline,
body:not(.mobile-mode) #btn-pend-vistas { display: none !important; }

/* Vista LOG: ya no usa una clase global. El filtrado por vista oculta lo que no es completada. */

/* En móvil ocultar SIEMPRE los headers de columna (TRABAJOS WO/PERSONAL/COMPARTIDO).
   La lista se ve plana — no agrupada. */
body.mobile-mode .pend-col-hd {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* En móvil columnas se apilan verticalmente y ocupan todo el ancho */
body.mobile-mode #pend-cols-wrap {
    flex-direction: column !important;
    gap: 0 !important;
}
body.mobile-mode #pend-cols-wrap .pend-col {
    width: 100% !important;
    flex: 1 1 100% !important;
}
/* En móvil empty-st se oculta — no queremos "SIN TRABAJOS" / "SIN PENDIENTES" */
body.mobile-mode #pend-trab-list .empty-st,
body.mobile-mode #pend-pers-list .empty-st,
body.mobile-mode #pend-glob-list .empty-st {
    display: none !important;
}

/* En vistas custom (no TODO) EN MÓVIL: ocultar las 2 columnas auxiliares y los headers de columna */
/* Usamos nth-of-type porque hay un <aside> antes que cuenta en nth-child */
body.mobile-mode[data-pend-vista="hoy"] #pend-cols-wrap .pend-col:nth-of-type(n+2),
body.mobile-mode[data-pend-vista="prog"] #pend-cols-wrap .pend-col:nth-of-type(n+2),
body.mobile-mode[data-pend-vista="alg"] #pend-cols-wrap .pend-col:nth-of-type(n+2),
body.mobile-mode[data-pend-vista="log"] #pend-cols-wrap .pend-col:nth-of-type(n+2) {
    display: none !important;
}
body.mobile-mode[data-pend-vista="hoy"] .pend-col-hd,
body.mobile-mode[data-pend-vista="prog"] .pend-col-hd,
body.mobile-mode[data-pend-vista="alg"] .pend-col-hd,
body.mobile-mode[data-pend-vista="log"] .pend-col-hd {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Ocultar empty-st cuando hay vista custom EN MÓVIL (el render custom maneja su propio empty) */
body.mobile-mode[data-pend-vista="hoy"] #pend-trab-list .empty-st,
body.mobile-mode[data-pend-vista="prog"] #pend-trab-list .empty-st,
body.mobile-mode[data-pend-vista="alg"] #pend-trab-list .empty-st,
body.mobile-mode[data-pend-vista="log"] #pend-trab-list .empty-st {
    display: none !important;
}
/* La primera columna ocupa todo el ancho en vista custom EN MÓVIL */
body.mobile-mode[data-pend-vista="hoy"] #pend-cols-wrap .pend-col:first-of-type,
body.mobile-mode[data-pend-vista="prog"] #pend-cols-wrap .pend-col:first-of-type,
body.mobile-mode[data-pend-vista="alg"] #pend-cols-wrap .pend-col:first-of-type,
body.mobile-mode[data-pend-vista="log"] #pend-cols-wrap .pend-col:first-of-type {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
}
/* Padding inferior generoso para que las tareas no se traslapen con FAB ni hamburger */
body.mobile-mode #page-pendientes-wo {
    padding-bottom: 180px !important;
}
body.mobile-mode #pend-trab-list,
body.mobile-mode #pend-pers-list,
body.mobile-mode #pend-glob-list {
    padding-bottom: 16px !important;
}
/* La última card también respira */
body.mobile-mode #page-pendientes-wo .pend-vista-grupo:last-child {
    margin-bottom: 100px !important;
}

/* ── VISTAS CUSTOM DE PROACTIV (HOY/PROG/ALG/LOG) ──────────── */
body.mobile-mode .pend-vista-grupo {
    margin-bottom: 16px;
}
body.mobile-mode .pend-vista-grupo-hd {
    font-family: var(--font);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    padding: 14px 12px 8px;
    color: var(--turq);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}

/* Cards en vistas custom — usar el mismo estilo que vista TODO */
body.mobile-mode #page-pendientes-wo .pend-vista-grupo .lev-card {
    display: block !important;
    padding: 14px 12px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
    min-height: 56px !important;
    height: auto !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
}
body.mobile-mode #page-pendientes-wo .pend-vista-grupo .lev-card > * {
    display: block !important;
}
body.mobile-mode #page-pendientes-wo .pend-vista-grupo .lev-card .lev-card-hd {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}
body.mobile-mode #page-pendientes-wo .pend-vista-grupo .lev-card::after,
body.mobile-mode #page-pendientes-wo .pend-vista-grupo .lev-card::before {
    content: none !important;
    display: none !important;
}
body.mobile-mode #page-pendientes-wo .pend-vista-grupo .lev-card:active {
    background: var(--bg3) !important;
}

/* Fecha límite: ancho razonable en móvil */
body.mobile-mode #mo-tarea .tar-fecha-input {
    width: 100% !important;
    max-width: 200px !important;
    font-size: 16px !important;
    padding: 14px !important;
    min-height: 52px !important;
}
/* Botón asignado-a en lugar de select */
body.mobile-mode #mo-tarea .tar-asg-btn {
    width: 100% !important;
    padding: 14px !important;
    min-height: 52px !important;
    background: var(--bg2) !important;
    border: 2px solid var(--border) !important;
    color: var(--text) !important;
    font-family: var(--font);
    font-size: 14px !important;
    cursor: pointer;
    border-radius: 0 !important;
}
body.mobile-mode #mo-tarea .tar-asg-btn:active {
    background: var(--bg3) !important;
}
/* Picker de asignado: bottom sheet */
.picker-asg-list {
    display: flex;
    flex-direction: column;
    max-height: 60vh;
    overflow-y: auto;
}
.picker-asg-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: var(--bg2);
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    text-align: left;
    min-height: 54px;
    text-transform: uppercase;
}
.picker-asg-item:active {
    background: var(--bg3);
}
.picker-asg-item i {
    width: 20px;
    text-align: center;
    font-size: 14px;
}

/* ── BLOQUE COLAPSABLE DETALLES DE TAREA ───────────────────── */
.tar-det-wrap {
    background: var(--bg2);
    border: 2px solid var(--border);
    border-radius: 0;
    overflow: hidden;
    margin-top: 8px;
}
.tar-det-hd {
    padding: 16px 14px;
    background: var(--bg3);
    border-bottom: 2px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .1em;
    color: var(--text);
    cursor: pointer;
    text-transform: uppercase;
}
.tar-det-hd i:first-child { font-size: 15px; }
.tar-det-hd span { flex: 1; }
.tar-det-arrow {
    color: var(--turq);
    font-size: 12px;
    transition: transform .2s;
}
.tar-det-wrap.collapsed .tar-det-arrow { transform: rotate(-90deg); }
.tar-det-wrap.collapsed .tar-det-body { display: none !important; }
.tar-det-body {
    padding: 14px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

/* ── ENLACES EDITABLES ────────────────────────────────────── */
.tar-enlace-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg3);
    border: 2px solid var(--border);
    padding: 10px;
    margin-bottom: 6px;
}
.tar-enlace-url {
    flex: 1;
    min-width: 0;
    font-size: 12px !important;
    padding: 10px !important;
    min-height: 44px !important;
    text-transform: none !important;
}
.tar-enlace-rm {
    background: transparent;
    border: 2px solid var(--red);
    color: var(--red);
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    flex-shrink: 0;
}
.tar-enlace-rm:active {
    background: var(--red);
    color: #fff;
}

/* ── SUB-TAREAS ───────────────────────────────────────────── */
.tar-subt-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg2);
    border: 2px solid var(--border);
    padding: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.tar-subt-item.completada .tar-subt-titulo {
    text-decoration: line-through;
    color: #8b9442;
    opacity: .65;
}
.tar-subt-check {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    font-size: 18px;
    flex-shrink: 0;
}
.tar-subt-titulo {
    flex: 1;
    min-width: 0;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 10px !important;
    min-height: 42px !important;
}
.tar-subt-fecha {
    width: 130px !important;
    font-size: 12px !important;
    padding: 8px !important;
    min-height: 42px !important;
}
.tar-subt-rm {
    background: transparent;
    border: 2px solid var(--red);
    color: var(--red);
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    flex-shrink: 0;
}

/* ── BOTONES MINI HEADER ───────────────────────────────────── */
.tar-mini-btn {
    background: transparent !important;
    border: 2px solid var(--border) !important;
    color: var(--text) !important;
    cursor: pointer;
}
.tar-mini-guardar { color: var(--turq) !important; border-color: var(--turq) !important; }
.tar-mini-borrar { color: #000 !important; border-color: var(--red) !important; }

/* ── FOOTER COMPLETAR/REABRIR — full width ─────────────────── */
body.mobile-mode #mo-tarea .mo-foot {
    display: block !important;
    padding: 12px !important;
}
.tar-foot-completar {
    width: 100% !important;
    min-height: 60px !important;
    background: #8b9442 !important;
    border: 3px solid #8b9442 !important;
    color: #0D1117 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: .1em !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 rgba(0,0,0,.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    cursor: pointer !important;
}
.tar-foot-completar i { color: #0D1117 !important; font-size: 16px !important; }
.tar-foot-completar:active {
    background: #6e7635 !important;
    transform: translate(2px,2px);
    box-shadow: 1px 1px 0 rgba(0,0,0,.4) !important;
}
.tar-foot-reabrir {
    width: 100% !important;
    min-height: 60px !important;
    background: var(--yellow) !important;
    border: 3px solid var(--yellow) !important;
    color: #0D1117 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: .1em !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 rgba(0,0,0,.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    cursor: pointer !important;
}
.tar-foot-reabrir i { color: #0D1117 !important; }

/* TAREA COMPLETADA en vista LOG: gris claro + tachado */
body.mobile-mode #page-pendientes-wo .pend-vista-grupo .lev-card.tarea-completada {
    opacity: .6;
}
body.mobile-mode #page-pendientes-wo .pend-vista-grupo .lev-card.tarea-completada .lev-body > div {
    color: var(--dim) !important;
    text-decoration: line-through !important;
}

/* Botón borrar todas las completadas */
.pend-vista-borrar-btn {
    width: 100%;
    background: var(--bg2);
    border: 3px solid var(--red);
    color: var(--red);
    padding: 18px;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    cursor: pointer;
    text-transform: uppercase;
    min-height: 56px;
    border-radius: 0;
    box-shadow: 3px 3px 0 rgba(0,0,0,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.pend-vista-borrar-btn:active {
    transform: translate(2px,2px);
    box-shadow: 1px 1px 0 rgba(0,0,0,.4);
    background: var(--red);
    color: #fff;
}

/* Headers de grupo (TAREA, NOTA, LLAMADA...) dentro de Personal/Compartido */
body.mobile-mode #pend-pers-list > div > div:first-child,
body.mobile-mode #pend-glob-list > div > div:first-child,
body.mobile-mode #pend-trab-list > div > div:first-child {
    font-size: 10px !important;
    color: var(--dim) !important;
    letter-spacing: .1em !important;
    padding: 8px 10px 4px !important;
    text-transform: uppercase;
    display: block !important;
}

/* ── FILTROS PROACTIV: bottom sheet con header y botón cerrar ── */
/* OCULTO por default en móvil */
body.mobile-mode #pend-filtros {
    display: none !important;
}
body.mobile-mode #pend-filtros.mob-open {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - 130px) !important;
    height: auto !important;
    border-radius: 16px 16px 0 0 !important;
    z-index: 350 !important;
    padding: 0 !important;
    background: var(--bg2) !important;
    border: 2px solid var(--border) !important;
    border-bottom: none !important;
    box-shadow: 0 -8px 30px rgba(0,0,0,.6);
    animation: mobpendin .22s ease-out;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
[data-theme="gameboy"] body.mobile-mode #pend-filtros.mob-open { border-radius: 0 !important; }

/* Insertar header con título y botón cerrar mediante :before y un wrapper extra via JS */
body.mobile-mode #pend-filtros.mob-open::before {
    content: "";
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 50px; height: 4px;
    background: var(--dim);
    border-radius: 2px;
    opacity: .5;
    pointer-events: none;
}

/* Selectores adentro full-width */
body.mobile-mode #pend-filtros.mob-open .fsel { width: 100% !important; min-height: 44px; font-size: 16px !important; }

/* Wrapper interno con padding y scroll */
body.mobile-mode #pend-filtros.mob-open > * {
    padding-left: 16px;
    padding-right: 16px;
}
body.mobile-mode #pend-filtros.mob-open > div:first-of-type {
    padding-top: 24px !important;
}
body.mobile-mode #pend-filtros.mob-open .flbl {
    font-size: 9px !important;
    letter-spacing: .12em !important;
    color: var(--dim) !important;
    margin-bottom: 4px !important;
    display: block !important;
}

/* Body scrolleable de los filtros */
body.mobile-mode #pend-filtros.mob-open.with-foot {
    padding-bottom: 80px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Botón cerrar inyectado */
.pend-filt-foot {
    display: none;
}
body.mobile-mode .pend-filt-foot.show {
    display: flex !important;
    position: fixed !important;
    bottom: 0; left: 0; right: 0;
    background: var(--bg2);
    border-top: 2px solid var(--border);
    padding: 12px 16px;
    z-index: 351 !important;
    gap: 10px;
}
.pend-filt-foot button {
    flex: 1;
    padding: 14px !important;
    font-size: 11px !important;
    min-height: 48px !important;
    justify-content: center !important;
    font-weight: 900;
    letter-spacing: .1em;
}

/* Overlay del bottom sheet */
.pend-filt-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 349;
}
body.mobile-mode .pend-filt-overlay.show { display: block; }

@keyframes mobpendin {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* FAB NUEVA TAREA — fondo del color del tema (turquesa), texto contrastante */
.pend-mob-nuevo {
    display: none;
    position: fixed;
    bottom: 18px;
    left: 18px;
    right: 88px;
    height: 56px;
    background: var(--turq);
    color: #0D1117;
    border: 3px solid var(--turq);
    font-size: 14px;
    font-weight: 900;
    font-family: var(--font);
    letter-spacing: .1em;
    z-index: 245;
    cursor: pointer;
    box-shadow: 3px 3px 0 rgba(0,0,0,.5);
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.pend-mob-nuevo i { color: #0D1117; }
body.mobile-mode .pend-mob-nuevo.show { display: flex; }
.pend-mob-nuevo:active {
    transform: translate(2px,2px);
    box-shadow: 1px 1px 0 rgba(0,0,0,.5);
    background: var(--turq);
    filter: brightness(.85);
}
[data-theme="gameboy"] .pend-mob-nuevo { border-radius: 0; }

/* Item solo sin grupo (DASHBOARD, etc) — sin indentado */
.mob-drw-item-solo {
    padding: 18px 18px !important;
    border-bottom: 1px solid var(--border) !important;
    background: var(--bg2);
}
.mob-drw-item-solo:active { background: var(--bg3); }

/* ── MODAL FAVORITOS (global, escritorio + móvil) ──────────── */
.favs-list { display: flex; flex-direction: column; }
.favs-list .fav-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 22px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    font-family: var(--font);
    font-size: 14px;
    letter-spacing: .06em;
    color: var(--text);
    text-transform: uppercase;
    min-height: 76px;
    -webkit-tap-highlight-color: transparent;
    transition: background .12s;
}
.favs-list .fav-item:active,
.favs-list .fav-item:hover { background: var(--bg3); }
.favs-list .fav-item:last-child { border-bottom: none; }
.favs-list .fav-item > i:first-child {
    font-size: 22px;
    width: 32px;
    text-align: center;
    color: var(--turq);
}
.favs-list .fav-lbl {
    flex: 1;
    font-weight: 700;
    font-size: 14px;
}
.favs-list .fav-cnt {
    background: var(--turq);
    color: var(--bg);
    font-size: 11px;
    font-weight: 900;
    min-width: 28px;
    height: 24px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--turq);
}
[data-theme="gameboy"] .favs-list .fav-cnt { border-radius: 0; }
.favs-list .fav-chev {
    color: var(--dim);
    font-size: 14px;
    margin-left: 6px;
}

/* Modal favoritos: ajustado al contenido en móvil */
body.mobile-mode #mo-favs.active {
    align-items: center !important;
    padding: 20px !important;
}
body.mobile-mode #mo-favs .mo-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 85vh !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
body.mobile-mode #mo-favs .mo-head {
    padding: 18px 20px !important;
    font-size: 15px !important;
}
body.mobile-mode #mo-favs .mo-head h3 {
    font-size: 15px !important;
}
/* Botón cerrar Game Boy: marco negro + grande */
body.mobile-mode #mo-favs .mo-x,
body.mobile-mode #mo-favs-pick .mo-x,
body.mobile-mode #mo-favs button[onclick*="mo-favs"],
body.mobile-mode #mo-favs-pick button[onclick*="mo-favs"] {
    background: var(--bg2) !important;
    border: 3px solid var(--text) !important;
    color: var(--text) !important;
    padding: 12px 14px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    font-size: 18px !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 rgba(0,0,0,.5) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body.mobile-mode #mo-favs .mo-x:active,
body.mobile-mode #mo-favs-pick .mo-x:active,
body.mobile-mode #mo-favs button[onclick*="mo-favs"]:active,
body.mobile-mode #mo-favs-pick button[onclick*="mo-favs"]:active {
    transform: translate(2px,2px) !important;
    box-shadow: 1px 1px 0 rgba(0,0,0,.5) !important;
}

/* Modal picker — mismo tamaño que mo-favs */
body.mobile-mode #mo-favs-pick.active {
    align-items: center !important;
    padding: 20px !important;
}
body.mobile-mode #mo-favs-pick .mo-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 85vh !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
body.mobile-mode #mo-favs-pick .mo-head {
    padding: 18px 20px !important;
    font-size: 14px !important;
}
body.mobile-mode #mo-favs-pick .mo-head h3 {
    font-size: 14px !important;
}
body.mobile-mode #mo-favs-pick .mo-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 0 !important;
}
body.mobile-mode #mo-favs .mo-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 0 !important;
}

/* Botón AGREGAR FAVORITO en el footer del modal */
.fav-add-btn {
    width: 100%;
    background: var(--bg2);
    border: 3px solid var(--turq);
    color: var(--turq);
    padding: 18px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .12em;
    cursor: pointer;
    text-transform: uppercase;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 3px 3px 0 rgba(0,0,0,.4);
}
.fav-add-btn:active {
    transform: translate(2px,2px);
    box-shadow: 1px 1px 0 rgba(0,0,0,.4);
}
[data-theme="gameboy"] .fav-add-btn { border-radius: 0; }

/* Picker de módulos */
.fav-picker-list {
    display: flex;
    flex-direction: column;
}
.fav-picker-list .fav-pick-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    min-height: 64px;
    -webkit-tap-highlight-color: transparent;
}
.fav-picker-list .fav-pick-item:active {
    background: var(--bg3);
}
.fav-picker-list .fav-pick-item > i:first-child {
    width: 28px;
    font-size: 18px;
    text-align: center;
    color: var(--turq);
}
.fav-picker-list .fav-pick-item .fav-pick-lbl {
    flex: 1;
    font-weight: 600;
}
.fav-picker-list .fav-pick-item .fav-pick-star {
    color: var(--yellow);
    font-size: 18px;
}
.fav-picker-list .fav-pick-item .fav-pick-star.off {
    color: var(--dim);
    opacity: .4;
}

/* ── BUSCADOR GLOBAL ────────────────────────────────────────── */
body.mobile-mode #mo-buscar-global.active {
    align-items: stretch !important;
    padding: 0 !important;
}
body.mobile-mode #mo-buscar-global .mo-box {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
body.mobile-mode #mo-buscar-global .mo-head {
    padding: 14px 16px !important;
}
body.mobile-mode #mo-buscar-global .mo-x {
    background: var(--bg2) !important;
    border: 3px solid var(--text) !important;
    color: var(--text) !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 rgba(0,0,0,.5) !important;
}
body.mobile-mode #mo-buscar-global .mo-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}
body.mobile-mode #mo-buscar-global #bg-resultados {
    flex: 1 1 auto !important;
    max-height: none !important;
}

/* Items de resultado */
.bg-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    min-height: 64px;
}
.bg-item:active { background: var(--bg3); }
.bg-item > i:first-child {
    font-size: 18px;
    width: 26px;
    text-align: center;
}
.bg-item .bg-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.bg-item .bg-titulo {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.bg-item .bg-meta {
    font-size: 10px;
    color: var(--dim);
    letter-spacing: .06em;
    margin-top: 2px;
    text-transform: uppercase;
}

/* ── PERSONALIZACIÓN — MÓVIL FULLSCREEN ─────────────────────── */
body.mobile-mode #mo-personalizacion.active {
    align-items: stretch !important;
    padding: 0 !important;
}
body.mobile-mode #mo-personalizacion .mo-box {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
body.mobile-mode #mo-personalizacion .mo-head {
    padding: 14px 16px !important;
    flex-shrink: 0 !important;
}
body.mobile-mode #mo-personalizacion .mo-head h3 {
    font-size: 14px !important;
    flex: 1 !important;
}
body.mobile-mode #mo-personalizacion .mo-x {
    background: var(--bg2) !important;
    border: 3px solid var(--text) !important;
    color: var(--text) !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 rgba(0,0,0,.5) !important;
    font-size: 18px !important;
}
body.mobile-mode #mo-personalizacion .mo-x:active {
    transform: translate(2px,2px) !important;
    box-shadow: 1px 1px 0 rgba(0,0,0,.5) !important;
}
body.mobile-mode #mo-personalizacion .mo-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 16px !important;
}
body.mobile-mode #mo-personalizacion .mo-body > div,
body.mobile-mode #mo-personalizacion .mo-body > section {
    margin-bottom: 18px !important;
}
/* Las grids de temas/colores en móvil → más compactas */
body.mobile-mode #mo-personalizacion .mo-body [style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
}
/* Botones y labels más grandes touch-friendly */
body.mobile-mode #mo-personalizacion button,
body.mobile-mode #mo-personalizacion .ibtn {
    min-height: 48px !important;
    font-size: 12px !important;
    padding: 12px 14px !important;
}
body.mobile-mode #mo-personalizacion label {
    font-size: 12px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
body.mobile-mode #mo-personalizacion input[type="checkbox"],
body.mobile-mode #mo-personalizacion input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    accent-color: var(--turq) !important;
}
body.mobile-mode #mo-personalizacion select,
body.mobile-mode #mo-personalizacion input[type="text"],
body.mobile-mode #mo-personalizacion input[type="number"] {
    font-size: 14px !important;
    min-height: 48px !important;
    padding: 12px !important;
}

/* ── DROPDOWN CUSTOM MÓVIL ──────────────────────────────────── */
.mob-dd-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 2000;
    align-items: flex-end;
    justify-content: center;
}
.mob-dd-overlay.active { display: flex; }
.mob-dd-box {
    width: 100%;
    max-width: 100%;
    max-height: 75vh;
    background: var(--bg2);
    border: 3px solid var(--border);
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    display: flex;
    flex-direction: column;
    animation: mobpendin .22s ease-out;
    box-shadow: 0 -8px 30px rgba(0,0,0,.7);
}
[data-theme="gameboy"] .mob-dd-box { border-radius: 0; }
.mob-dd-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 2px solid var(--border);
    background: var(--bg3);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .08em;
    color: var(--turq);
    text-transform: uppercase;
    flex-shrink: 0;
}
.mob-dd-head > span {
    flex: 1;
}
.mob-dd-x {
    background: var(--bg2);
    border: 3px solid var(--text);
    color: var(--text);
    padding: 10px 12px;
    min-width: 44px;
    min-height: 44px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 3px 3px 0 rgba(0,0,0,.5);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mob-dd-x:active {
    transform: translate(2px,2px);
    box-shadow: 1px 1px 0 rgba(0,0,0,.5);
}
.mob-dd-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0;
}
.mob-dd-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    font-family: var(--font);
    font-size: 14px;
    color: var(--text);
    letter-spacing: .04em;
    cursor: pointer;
    min-height: 56px;
    -webkit-tap-highlight-color: transparent;
}
.mob-dd-item:active {
    background: var(--bg3);
}
.mob-dd-item.sel {
    color: var(--turq);
    font-weight: 700;
    background: rgba(143,205,194,.08);
}
.mob-dd-item > i {
    color: var(--turq);
    font-size: 16px;
    width: 22px;
}
.mob-dd-item .mob-dd-spacer {
    width: 22px;
    flex-shrink: 0;
}
.mob-dd-item .mob-dd-lbl {
    flex: 1;
    text-transform: uppercase;
}

/* ── MODAL DETALLE DE TAREA — REDISEÑO MÓVIL ──────────────── */
body.mobile-mode #mo-tarea.active {
    align-items: stretch !important;
    padding: 0 !important;
}
body.mobile-mode #mo-tarea .mo-box {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    border: none !important;
}

/* Header — título centrado + X grande Game Boy */
body.mobile-mode #mo-tarea .mo-head {
    padding: 14px 16px !important;
    border-bottom: 2px solid var(--border) !important;
    background: var(--bg2) !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    position: relative !important;
}
body.mobile-mode #mo-tarea .mo-head > i:first-child {
    font-size: 16px !important;
    color: var(--turq) !important;
}
body.mobile-mode #mo-tarea .mo-head h3 {
    font-size: 14px !important;
    flex: 1 !important;
    letter-spacing: .08em !important;
    margin: 0 !important;
}
body.mobile-mode #mo-tarea .mo-head .mo-x {
    background: var(--bg2) !important;
    border: 3px solid var(--text) !important;
    color: var(--text) !important;
    padding: 0 !important;
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 18px !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 rgba(0,0,0,.5) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body.mobile-mode #mo-tarea .mo-head .mo-x:active {
    transform: translate(2px,2px) !important;
    box-shadow: 1px 1px 0 rgba(0,0,0,.5) !important;
}

/* Body — scrolleable */
body.mobile-mode #mo-tarea .mo-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 16px !important;
}

/* La fgrid pasa a 1 columna en móvil */
body.mobile-mode #mo-tarea .fgrid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}
body.mobile-mode #mo-tarea .fg.sp2,
body.mobile-mode #mo-tarea .fg {
    width: 100% !important;
}

/* TÍTULO grande, centrado, sin label visible (la label se queda chiquita arriba) */
body.mobile-mode #mo-tarea .flbl {
    font-size: 10px !important;
    color: var(--dim) !important;
    letter-spacing: .12em !important;
    margin-bottom: 6px !important;
    display: block !important;
}
body.mobile-mode #mo-tarea #tar-titulo {
    font-size: 18px !important;
    text-align: center !important;
    padding: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .03em !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--border) !important;
    border-radius: 0 !important;
    min-height: 56px !important;
}

/* DESCRIPCIÓN — más alta */
body.mobile-mode #mo-tarea #tar-desc {
    min-height: 220px !important;
    font-size: 14px !important;
    padding: 14px !important;
    line-height: 1.5 !important;
    resize: vertical !important;
}

/* PRIORIDAD — botonera (4 botones, no dropdown) */
body.mobile-mode #mo-tarea .fg:has(#tar-pri) {
    grid-column: 1 / -1 !important;
}
body.mobile-mode #mo-tarea #tar-pri {
    display: none !important;
}
.tar-pri-row {
    display: none;
}
body.mobile-mode .tar-pri-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
}
.tar-pri-row .tar-pri-btn {
    padding: 14px 4px !important;
    background: var(--bg2) !important;
    border: 2px solid var(--border) !important;
    color: var(--text) !important;
    font-family: var(--font) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    cursor: pointer !important;
    text-align: center !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    min-height: 50px !important;
}
.tar-pri-row .tar-pri-btn[data-p="URGENTE"].on { background: var(--red); color: #fff; border-color: var(--red); }
.tar-pri-row .tar-pri-btn[data-p="ALTA"].on { background: var(--yellow); color: #000; border-color: var(--yellow); }
.tar-pri-row .tar-pri-btn[data-p="MEDIA"].on { background: var(--turq); color: #000; border-color: var(--turq); }
.tar-pri-row .tar-pri-btn[data-p="BAJA"].on { background: var(--dim); color: #fff; border-color: var(--dim); }

/* FECHA — más grande */
body.mobile-mode #mo-tarea #tar-fecha {
    font-size: 16px !important;
    padding: 14px !important;
    min-height: 54px !important;
}

/* ASIGNADO + VISIBILIDAD: cards horizontales con icono grande */
body.mobile-mode #mo-tarea .fg:has(#tar-asg) .flbl,
body.mobile-mode #mo-tarea .fg:has(#tar-vis) .flbl {
    /* dejar label visible */
}

/* Visibilidad: 3 botones grandes en lugar de dropdown */
.tar-vis-row {
    display: none;
}
body.mobile-mode .tar-vis-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
}
.tar-vis-row .tar-vis-btn {
    padding: 14px 8px !important;
    background: var(--bg2) !important;
    border: 2px solid var(--border) !important;
    color: var(--text) !important;
    font-family: var(--font) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    cursor: pointer !important;
    text-align: center !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    min-height: 64px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
}
.tar-vis-row .tar-vis-btn i {
    font-size: 18px !important;
    color: var(--dim);
}
.tar-vis-row .tar-vis-btn.on {
    background: #8b9442 !important;
    color: #0D1117 !important;
    border-color: #8b9442 !important;
}
.tar-vis-row .tar-vis-btn.on i { color: #0D1117 !important; }
/* En temas no-gameboy usar el verde institucional */
[data-theme="modern"] .tar-vis-row .tar-vis-btn.on,
[data-theme="console"] .tar-vis-row .tar-vis-btn.on,
[data-theme="crt-soft"] .tar-vis-row .tar-vis-btn.on,
[data-theme="crt-green"] .tar-vis-row .tar-vis-btn.on,
[data-theme="midnight"] .tar-vis-row .tar-vis-btn.on,
[data-theme="solar"] .tar-vis-row .tar-vis-btn.on,
[data-theme="zen"] .tar-vis-row .tar-vis-btn.on,
[data-theme="femme"] .tar-vis-row .tar-vis-btn.on,
[data-theme="stranger"] .tar-vis-row .tar-vis-btn.on {
    background: var(--green) !important;
    border-color: var(--green) !important;
    color: #0D1117 !important;
}
body.mobile-mode #mo-tarea #tar-vis { display: none !important; }

/* Usuarios específicos: colapsable + checkboxes grandes */
body.mobile-mode #mo-tarea #tar-users-wrap {
    background: var(--bg2);
    border: 2px solid var(--border);
    border-radius: 0;
    overflow: hidden;
}
body.mobile-mode #mo-tarea #tar-users-wrap .flbl {
    padding: 14px 16px !important;
    margin: 0 !important;
    background: var(--bg3) !important;
    border-bottom: 2px solid var(--border) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 11px !important;
    color: var(--text) !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    position: relative !important;
}
body.mobile-mode #mo-tarea #tar-users-wrap .flbl::after {
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: auto;
    color: var(--turq);
    font-size: 12px;
    transition: transform .2s;
}
body.mobile-mode #mo-tarea #tar-users-wrap.collapsed .flbl::after {
    transform: rotate(-90deg);
}
body.mobile-mode #mo-tarea #tar-users-wrap.collapsed > div:not(.flbl) {
    display: none !important;
}
body.mobile-mode #mo-tarea #tar-users-wrap > div:not(.flbl) {
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    max-height: 280px;
    overflow-y: auto;
}
body.mobile-mode #mo-tarea #tar-users-wrap label {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px !important;
    background: var(--bg3) !important;
    border: 2px solid var(--border) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    font-size: 13px !important;
    text-transform: none !important;
    min-height: 50px !important;
}
body.mobile-mode #mo-tarea #tar-users-wrap input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    accent-color: var(--turq) !important;
    margin: 0 !important;
}
body.mobile-mode #mo-tarea #tar-users-wrap label:has(input:checked) {
    background: var(--bg3) !important;
    border-color: var(--turq) !important;
    color: var(--turq) !important;
}

/* Footer: 4 botones grandes con iconos */
body.mobile-mode #mo-tarea .mo-foot {
    padding: 14px 16px !important;
    background: var(--bg2) !important;
    border-top: 2px solid var(--border) !important;
    flex-shrink: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr auto auto auto !important;
    gap: 8px !important;
    align-items: stretch !important;
}
body.mobile-mode #mo-tarea .mo-foot button {
    min-height: 56px !important;
    padding: 14px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 rgba(0,0,0,.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: var(--bg2) !important;
    border: 3px solid var(--border) !important;
    color: var(--text) !important;
}
body.mobile-mode #mo-tarea .mo-foot button:active {
    transform: translate(2px,2px) !important;
    box-shadow: 1px 1px 0 rgba(0,0,0,.4) !important;
}
/* GUARDAR — verde militar full-width arriba */
body.mobile-mode #mo-tarea .mo-foot button.primary {
    grid-column: 1 / -1 !important;
    background: #8b9442 !important;
    color: #0D1117 !important;
    border-color: #8b9442 !important;
    font-size: 14px !important;
}
body.mobile-mode #mo-tarea .mo-foot button.primary i {
    color: #0D1117 !important;
}
body.mobile-mode #mo-tarea .mo-foot button.primary:active {
    background: #6e7635 !important;
    color: #0D1117 !important;
}
body.mobile-mode #mo-tarea .mo-foot button.primary:active i {
    color: #0D1117 !important;
}
/* CANCELAR — gris */
body.mobile-mode #mo-tarea .mo-foot button[onclick*="cerrarTarea"] {
    background: var(--bg2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    grid-column: 1 !important;
}
/* BORRAR — rojo outline */
body.mobile-mode #mo-tarea .mo-foot button[onclick*="_borrarTarea"] {
    background: var(--bg2) !important;
    border-color: var(--red) !important;
    color: var(--red) !important;
    min-width: 56px !important;
    padding: 14px 12px !important;
}
body.mobile-mode #mo-tarea .mo-foot button[onclick*="_borrarTarea"] i {
    color: var(--red) !important;
}
/* COMPLETAR — verde militar con texto oscuro legible */
body.mobile-mode #mo-tarea .mo-foot button[onclick*="_completarTarea"] {
    background: #8b9442 !important;
    border-color: #8b9442 !important;
    color: #0D1117 !important;
    min-width: 56px !important;
    padding: 14px 12px !important;
}
body.mobile-mode #mo-tarea .mo-foot button[onclick*="_completarTarea"] i {
    color: #0D1117 !important;
}
body.mobile-mode #mo-tarea .mo-foot button[onclick*="_completarTarea"]:active {
    background: #6e7635 !important;
    color: #0D1117 !important;
}
body.mobile-mode #mo-tarea .mo-foot button[onclick*="_completarTarea"]:active i {
    color: #0D1117 !important;
}
/* REABRIR — amarillo */
body.mobile-mode #mo-tarea .mo-foot button[onclick*="_reabrirTarea"] {
    background: var(--yellow) !important;
    border-color: var(--yellow) !important;
    color: #0D1117 !important;
    min-width: 56px !important;
    padding: 14px 12px !important;
}
body.mobile-mode #mo-tarea .mo-foot button[onclick*="_reabrirTarea"] i {
    color: #0D1117 !important;
}

/* ── 5. BOTONES FLOTANTES ──────────────────────────────────── */
.mob-fab-menu {
    display: none;
    position: fixed;
    bottom: 18px; right: 18px;
    width: 52px; height: 52px;
    background: var(--turq);
    color: var(--bg);
    border: 3px solid var(--turq);
    font-size: 19px;
    align-items: center;
    justify-content: center;
    z-index: 250;
    cursor: pointer;
    box-shadow: 3px 3px 0 rgba(0,0,0,.5);
    font-weight: 900;
}
body.mobile-mode .mob-fab-menu { display: flex; }
.mob-fab-menu:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(0,0,0,.5); }

.mob-fab-calc {
    display: none;
    position: fixed;
    bottom: 18px; left: 18px;
    width: 52px; height: 52px;
    background: var(--bg3);
    color: var(--text);
    border: 2px solid var(--border);
    font-size: 17px;
    align-items: center;
    justify-content: center;
    z-index: 250;
    cursor: pointer;
    box-shadow: 3px 3px 0 rgba(0,0,0,.4);
}
.mob-fab-calc:active { transform: translate(2px, 2px); }

[data-theme="gameboy"] .mob-fab-menu,
[data-theme="gameboy"] .mob-fab-calc { border-radius: 0; }

/* ── 6. FILTROS COLAPSABLES ────────────────────────────────── */
body.mobile-mode .fbar { display: none !important; }
body.mobile-mode .fbar.mob-visible {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px !important;
    background: var(--bg2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    margin-bottom: 12px !important;
    animation: mob-slidedown .2s ease-out;
}
@keyframes mob-slidedown {
    from { opacity:0; transform:translateY(-6px); }
    to   { opacity:1; transform:translateY(0); }
}
body.mobile-mode .fbar.mob-visible .finp,
body.mobile-mode .fbar.mob-visible .fsel {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    padding: 12px !important;
    min-height: 46px !important;
    min-width: 0 !important;
}
body.mobile-mode .fbar.mob-visible .spacer { display: none !important; }
body.mobile-mode .fbar.mob-visible .ibtn.primary {
    width: 100% !important;
    padding: 14px !important;
    font-size: 12px !important;
    justify-content: center !important;
    min-height: 50px !important;
}

/* ── 7. BARRA DE ACCIONES MÓDULO ───────────────────────────── */
.mob-mod-bar {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 4px 0 12px;
}
body.mobile-mode .mob-mod-bar { display: flex; }
.mob-mod-bar .ibtn {
    padding: 11px 14px !important;
    min-height: 44px !important;
    font-size: 13px !important;
}
.mob-mod-bar .mob-mod-title {
    flex: 1;
    font-size: 10px;
    letter-spacing: .12em;
    color: var(--dim);
    font-weight: 700;
}

/* Botón Nueva OT MÓVIL — full-width grande */
body.mobile-mode .mob-btn-nuevo {
    display: flex !important;
    width: 100% !important;
    padding: 16px !important;
    font-size: 14px !important;
    letter-spacing: .1em !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 12px !important;
    min-height: 56px !important;
    font-weight: 900 !important;
}
body:not(.mobile-mode) .mob-btn-nuevo { display: none !important; }

/* ── 8. TABS COMO DROPDOWN ─────────────────────────────────── */
body.mobile-mode .tabs { display: none !important; }
.mob-tabs-dd {
    display: none;
    width: 100%;
    margin-bottom: 12px;
    position: relative;
}
body.mobile-mode .mob-tabs-dd { display: block; }
.mob-tabs-trigger {
    width: 100%;
    background: var(--bg2);
    border: 2px solid var(--border);
    color: var(--text);
    padding: 14px 16px;
    font-size: 12px;
    font-family: var(--font);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
}
.mob-tabs-trigger i.fa-chevron-down {
    color: var(--turq);
    font-size: 11px;
    transition: transform .2s;
}
.mob-tabs-dd.open .mob-tabs-trigger i.fa-chevron-down { transform: rotate(180deg); }
.mob-tabs-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--bg2);
    border: 2px solid var(--border);
    border-top: none;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
.mob-tabs-dd.open .mob-tabs-list { display: block; }
.mob-tabs-opt {
    padding: 14px 16px;
    font-size: 11px;
    font-family: var(--font);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    color: var(--text);
    border-bottom: 1px solid rgba(255,255,255,.04);
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.mob-tabs-opt:last-child { border-bottom: none; }
.mob-tabs-opt:active { background: var(--bg3); }
.mob-tabs-opt.active { background: var(--turq); color: var(--bg); }
.mob-tabs-opt i { width: 18px; text-align: center; }

/* ── 9. WORK ORDERS — CARDS ESTILO FICHA ───────────────────── */
body.mobile-mode .tbl-wrap { display: none !important; }
body.mobile-mode .wo-cards {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
}
body:not(.mobile-mode) .wo-cards { display: none !important; }

/* Card como ficha — más alta, info mejor distribuida */
.wo-card {
    background: var(--bg2);
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 14px 14px 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 3px 3px 0 rgba(0,0,0,.35);
    position: relative;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.wo-card:active {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 rgba(0,0,0,.35);
}
.wo-card.cerrada { opacity: .55; }

/* Línea 1: número + fecha en esquinas */
.wo-card-hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: var(--turq);
    font-weight: 900;
    letter-spacing: .08em;
    font-family: var(--font);
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--border);
}
.wo-card-hdr .wo-fecha {
    color: var(--dim);
    font-weight: 700;
    font-size: 9px;
}

/* Empresa grande y central */
.wo-card-empresa {
    font-size: 14px;
    font-weight: 900;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: .03em;
    line-height: 1.25;
    margin-top: 2px;
    word-break: break-word;
}

/* Contacto en verde militar (turquesa Game Boy) */
.wo-card-contacto {
    font-size: 11px;
    color: var(--turq);
    letter-spacing: .04em;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 2px;
}

/* Pills inferiores: tipo / estatus / prioridad */
.wo-card-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.wo-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 9px;
    border: 2px solid var(--border);
    background: var(--bg3);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text);
    border-radius: 4px;
    white-space: nowrap;
}
.wo-pill i { font-size: 9px; opacity: .7; }
.wo-pill.est-pendiente   { color: var(--yellow); border-color: var(--yellow); }
.wo-pill.est-proceso     { color: var(--turq);   border-color: var(--turq);   background: rgba(200,216,112,.08); }
.wo-pill.est-completada  { color: var(--green);  border-color: var(--green);  }
.wo-pill.est-cancelada   { color: var(--red);    border-color: var(--red);    }
.wo-pill.pri-alta        { color: var(--red);    border-color: var(--red);    }
.wo-pill.pri-urgente     { color: var(--red);    border-color: var(--red);    background: rgba(220,80,80,.1); }
.wo-pill.pri-media       { color: var(--yellow); border-color: var(--yellow); }

/* Linea técnico */
.wo-card-tec {
    font-size: 10px;
    color: var(--dim);
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}
.wo-card-tec i {
    color: var(--turq);
    font-size: 11px;
}

[data-theme="gameboy"] .wo-card,
[data-theme="gameboy"] .wo-pill {
    border-radius: 0;
}

/* ── 10. INPUTS TÁCTILES ───────────────────────────────────── */
body.mobile-mode input[type="text"],
body.mobile-mode input[type="number"],
body.mobile-mode input[type="date"],
body.mobile-mode input[type="email"],
body.mobile-mode input[type="tel"],
body.mobile-mode select,
body.mobile-mode textarea {
    font-size: 16px !important;
    min-height: 44px;
}
body.mobile-mode .ibtn,
body.mobile-mode button { min-height: 40px; }

/* ── 11. MODALES FULL SCREEN ───────────────────────────────── */
body.mobile-mode .mo-box {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
body.mobile-mode .mo-head { position: sticky; top: 0; z-index: 5; }
body.mobile-mode .mo-foot {
    position: sticky; bottom: 0; z-index: 5;
    flex-wrap: wrap;
    gap: 6px;
}
body.mobile-mode .mo-foot .ibtn {
    flex: 1;
    min-width: 100px;
    justify-content: center;
}

/* ── 12. OCULTAR ELEMENTOS DE ESCRITORIO EN MÓVIL ──────────── */
body.mobile-mode #tb-leftbar,
body.mobile-mode #left-bar,
body.mobile-mode #btn-hamburger,
body.mobile-mode .s-toggle,
body.mobile-mode #sov {
    display: none !important;
    visibility: hidden !important;
}

/* ── 15. DETALLE WORK ORDER MÓVIL ──────────────────────────── */
body.mobile-mode #page-ot-detail .det-hdr {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px !important;
    position: sticky;
    top: 0;
    background: var(--bg2);
    z-index: 50;
    border-bottom: 2px solid var(--border);
    margin-bottom: 12px;
}
/* Header compacto: solo VOLVER + número + tipo (sin selectores grandes) */
body.mobile-mode #page-ot-detail .det-hdr .ibtn {
    padding: 9px 11px !important;
    min-height: 38px !important;
    font-size: 11px !important;
}
body.mobile-mode #page-ot-detail .det-num {
    font-size: 11px !important;
    color: var(--turq);
    letter-spacing: .08em;
    font-weight: 900;
    flex: 1;
    text-align: center;
}
body.mobile-mode #page-ot-detail .det-tipo {
    display: none !important; /* lo metemos en el dashboard */
}
body.mobile-mode #page-ot-detail .det-hdr .spacer { display: none !important; }
/* El selector de estatus en línea propia */
body.mobile-mode #page-ot-detail #det-est-sel {
    flex-basis: 100%;
    width: 100%;
    margin: 4px 0 0 0 !important;
    font-size: 14px !important;
    padding: 10px !important;
    min-height: 44px !important;
}
/* Botones de header en línea propia */
body.mobile-mode #page-ot-detail #btn-ot-completar,
body.mobile-mode #page-ot-detail #btn-edit-ot {
    flex: 1;
    padding: 11px !important;
    font-size: 11px !important;
    min-height: 44px !important;
    justify-content: center;
}
body.mobile-mode #page-ot-detail #btn-del-ot {
    padding: 11px 14px !important;
    min-height: 44px !important;
}

/* Tabs como dropdown en móvil */
body.mobile-mode #page-ot-detail .tab-bar {
    display: none !important;
}
body.mobile-mode .mob-tabs-ot-detail {
    display: block;
    margin: 0 0 12px;
}

/* Grid de cards en una sola columna */
body.mobile-mode #page-ot-detail .det-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}
body.mobile-mode #page-ot-detail .det-card {
    padding: 14px !important;
    border-radius: 8px !important;
    background: var(--bg2) !important;
    border: 2px solid var(--border) !important;
    box-shadow: 3px 3px 0 rgba(0,0,0,.3);
}
[data-theme="gameboy"] body.mobile-mode #page-ot-detail .det-card { border-radius: 0 !important; }

body.mobile-mode #page-ot-detail .det-card h4 {
    font-size: 10px !important;
    letter-spacing: .14em !important;
    margin: 0 0 12px 0 !important;
    color: var(--turq);
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border);
}
body.mobile-mode #page-ot-detail .det-card h4 i {
    margin-right: 6px;
}

/* Cada det-row como mini-card amplia */
body.mobile-mode #page-ot-detail .det-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
    background: var(--bg3) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    border-left: 3px solid var(--turq) !important;
}
[data-theme="gameboy"] body.mobile-mode #page-ot-detail .det-row {
    border-radius: 0 !important;
}
body.mobile-mode #page-ot-detail .det-row:last-child {
    margin-bottom: 0 !important;
}
body.mobile-mode #page-ot-detail .det-lbl {
    font-size: 8px !important;
    color: var(--dim) !important;
    letter-spacing: .15em !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    min-width: 0 !important;
    flex: none !important;
}
body.mobile-mode #page-ot-detail .det-val {
    font-size: 13px !important;
    color: var(--text) !important;
    word-break: break-word !important;
    width: 100% !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
}
body.mobile-mode #page-ot-detail .det-val a {
    color: var(--turq) !important;
}

/* Estampas (wo-stamp) más legibles — full width en móvil */
body.mobile-mode #page-ot-detail .wo-stamp {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 10px !important;
    padding: 9px 12px !important;
    letter-spacing: .06em;
    margin-bottom: 6px;
    justify-content: flex-start;
    gap: 8px;
}
body.mobile-mode #page-ot-detail .wo-stamp:last-child {
    margin-bottom: 0;
}

/* Comentarios, historial, deal, invoicer — ajustes generales */
body.mobile-mode #page-ot-detail .tab-content {
    padding: 0 !important;
}
body.mobile-mode #page-ot-detail h4 {
    font-size: 10px !important;
    letter-spacing: .12em !important;
}
body.mobile-mode #page-ot-detail .det-full {
    padding: 12px !important;
}
body.mobile-mode #page-ot-detail .upload-zone {
    padding: 12px !important;
}
body.mobile-mode #page-ot-detail textarea {
    font-size: 14px !important;
    min-height: 70px !important;
}

/* Lista de trabajos: header compacto */
body.mobile-mode #otab-lev-c > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
}
body.mobile-mode #otab-lev-c #tw-buscador {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 14px !important;
    padding: 10px 12px !important;
    min-height: 42px;
}
body.mobile-mode #btn-lev-add {
    width: 100% !important;
    padding: 13px !important;
    min-height: 48px !important;
    font-size: 12px !important;
    letter-spacing: .08em;
    justify-content: center;
}

/* Comentarios: botón ENVIAR full-width */
body.mobile-mode #otab-coment-c > div:first-child > div:last-child {
    justify-content: stretch !important;
}
body.mobile-mode #otab-coment-c .ibtn.primary {
    width: 100% !important;
    padding: 14px !important;
    font-size: 12px !important;
    min-height: 48px !important;
    justify-content: center !important;
    letter-spacing: .08em !important;
}

/* DEAL e INVOICER: botones full-width */
body.mobile-mode #otab-deal-c .ibtn,
body.mobile-mode #otab-inv-c .ibtn,
body.mobile-mode #otab-deal-c button,
body.mobile-mode #otab-inv-c button {
    width: 100% !important;
    padding: 13px !important;
    font-size: 11px !important;
    min-height: 46px !important;
    justify-content: center !important;
    letter-spacing: .06em !important;
    margin-top: 8px !important;
}
body.mobile-mode #otab-deal-c .typeahead-dd,
body.mobile-mode #otab-inv-c .typeahead-dd {
    width: 100% !important;
}

/* ── 17. DASHBOARD PRINCIPAL MÓVIL ─────────────────────────── */
/* Cards apiladas en una columna, más grandes y amplias */
body.mobile-mode #page-dashboard .dash-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
}
body.mobile-mode #page-dashboard .stat-card {
    padding: 16px 18px !important;
    border-radius: 8px !important;
    border-left-width: 4px !important;
    box-shadow: 3px 3px 0 rgba(0,0,0,.3) !important;
}
[data-theme="gameboy"] body.mobile-mode #page-dashboard .stat-card {
    border-radius: 0 !important;
}
body.mobile-mode #page-dashboard .stat-lbl {
    font-size: 9px !important;
    letter-spacing: .12em !important;
    margin-bottom: 4px;
}
body.mobile-mode #page-dashboard .stat-val {
    font-size: 28px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
}
body.mobile-mode #page-dashboard .stat-sub {
    font-size: 9px !important;
    margin-top: 6px;
    letter-spacing: .08em;
}

/* Tabla de OTs recientes → ocultar y mostrar cards móvil */
body.mobile-mode #page-dashboard .tbl-wrap {
    display: none !important;
}
body.mobile-mode #page-dashboard .dash-rec-mob {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}
body:not(.mobile-mode) #page-dashboard .dash-rec-mob {
    display: none !important;
}
body.mobile-mode .dash-rec-hdr {
    font-size: 10px;
    letter-spacing: .14em;
    color: var(--turq);
    font-weight: 900;
    padding: 8px 4px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 4px;
}

/* ── 20. PANTALLA DE LOGIN MÓVIL ───────────────────────────── */
body.mobile-mode #login-screen {
    padding: 16px 14px 30px !important;
    justify-content: flex-start !important;
}
body.mobile-mode #login-screen .l-wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}
body.mobile-mode #login-screen .l-bar {
    font-size: 22px !important;
    padding: 14px 14px !important;
    letter-spacing: .25em !important;
    font-weight: 900 !important;
    color: var(--turq) !important;
}
body.mobile-mode #login-screen .l-tag-line {
    font-size: 25px !important;
    text-align: center;
    padding: 18px 8px 22px;
    letter-spacing: .14em !important;
    color: var(--turq) !important;
    font-family: 'Press Start 2P', monospace !important;
    font-weight: 400 !important;
    opacity: 1 !important;
    text-shadow: 3px 3px 0 rgba(0,0,0,.5);
    line-height: 1.1;
}
/* Logo más compacto en móvil */
body.mobile-mode #login-screen .l-wrap > div[style*="text-align:center"] {
    padding: 8px 0 !important;
}
body.mobile-mode #login-screen .l-wrap img,
body.mobile-mode #login-screen #login-logo-img {
    max-width: 90px !important;
    width: 28% !important;
}
body.mobile-mode #login-screen #login-logo-pixel {
    width: 90px !important;
    height: 90px !important;
}
/* Boot sequence + release notes colapsables en móvil */
body.mobile-mode #login-screen .l-asciibox {
    display: none !important;
}
body.mobile-mode #login-screen .l-asciibox.mob-open {
    display: block !important;
    font-size: 8px !important;
    padding: 8px !important;
    overflow-x: auto;
}
/* Section title release oculto en móvil (lo controla el toggle) */
body.mobile-mode #login-screen .l-section-title {
    display: none !important;
}
body.mobile-mode #login-screen .l-section-title.mob-open {
    display: block !important;
}
/* Toggle para abrir boot sequence */
.l-mob-toggle {
    display: none;
    width: 100%;
    background: var(--bg2);
    border: 2px solid var(--border);
    color: var(--text);
    padding: 12px 14px;
    font-family: var(--font);
    font-size: 10px;
    letter-spacing: .1em;
    cursor: pointer;
    margin: 8px 0;
    text-align: left;
    align-items: center;
    gap: 10px;
}
body.mobile-mode .l-mob-toggle { display: flex; }
.l-mob-toggle i.fa-chevron-down { margin-left: auto; transition: transform .2s; }
.l-mob-toggle.open i.fa-chevron-down { transform: rotate(180deg); }

/* Card de acceso al sistema más prominente */
body.mobile-mode #login-screen .l-card-retro {
    padding: 20px 18px !important;
    margin-top: 12px !important;
}
body.mobile-mode #login-screen .l-card-retro h2 {
    font-size: 13px !important;
    margin-bottom: 12px !important;
    text-align: center;
}
body.mobile-mode #login-screen .l-card-retro p {
    font-size: 10px !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
}
body.mobile-mode #login-screen .btn-google {
    width: 100% !important;
    padding: 18px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    min-height: 60px !important;
    justify-content: center !important;
    gap: 12px;
}

/* ── 21. LOGO PIXEL ART GAME BOY (CSS, sin imagen) ─────────── */
/* Cuadro isométrico tipo Game Boy hecho con gradientes — sin texto */
.pixel-logo-gb {
    display: inline-block;
    width: 200px;
    height: 200px;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    position: relative;
    background:
        /* Cara superior: líneas horizontales */
        linear-gradient(0deg,
            transparent 0%,
            transparent 92%,
            var(--text) 92%,
            var(--text) 96%,
            transparent 96%
        ),
        /* Cuadro principal con sombra */
        linear-gradient(135deg,
            var(--text) 0%,
            var(--text) 50%,
            transparent 50%,
            transparent 100%
        );
}
/* El logo CSS lo construimos con un SVG inline */
.pixel-logo-gb svg {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ── 19. PROQUOTE / CRM MÓVIL ──────────────────────────────── */

/* Toolbar de PROQUOTE — botones de vista grandes, filtros ocultos */
body.mobile-mode #page-proquote .pq-toolbar {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0 !important;
}

/* Botones PIPELINE/GANADOS/PERDIDOS/LISTA — más grandes, scrolleable horizontal */
body.mobile-mode #page-proquote .pq-toggle {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
body.mobile-mode #page-proquote .pq-toggle::-webkit-scrollbar { display: none; }
body.mobile-mode #page-proquote .pq-tog {
    padding: 11px 14px !important;
    font-size: 10px !important;
    min-height: 44px !important;
    white-space: nowrap !important;
    letter-spacing: .04em !important;
    flex-shrink: 0;
}

/* Ocultar filtros y TC widget en móvil — los abrimos con botón filtro */
body.mobile-mode #page-proquote #f-pq-vend,
body.mobile-mode #page-proquote #f-pq-q,
body.mobile-mode #page-proquote #pq-tc-widget,
body.mobile-mode #page-proquote .pq-toolbar > .spacer,
body.mobile-mode #page-proquote .pq-toolbar > .ibtn.primary {
    display: none !important;
}
/* Cuando los filtros están abiertos */
body.mobile-mode #page-proquote.pq-mob-filt #f-pq-vend,
body.mobile-mode #page-proquote.pq-mob-filt #f-pq-q,
body.mobile-mode #page-proquote.pq-mob-filt #pq-tc-widget {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    padding: 11px 12px !important;
    min-height: 44px !important;
    align-items: center;
}
body.mobile-mode #page-proquote.pq-mob-filt #pq-tc-widget {
    background: var(--bg3) !important;
    border: 2px solid var(--border) !important;
}

/* Barra móvil con botones filtro/stats arriba */
.pq-mob-bar {
    display: none;
    gap: 8px;
    padding: 8px 0;
    margin-bottom: 6px;
}
body.mobile-mode .pq-mob-bar { display: flex; }
.pq-mob-bar .ibtn {
    padding: 10px 14px !important;
    min-height: 42px !important;
    min-width: 42px !important;
    font-size: 13px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pq-mob-bar .pq-mob-title {
    flex: 1;
    font-size: 9px;
    letter-spacing: .14em;
    color: var(--dim);
    font-weight: 900;
    align-self: center;
}
.pq-mob-bar .ibtn.active {
    background: var(--turq) !important;
    color: var(--bg) !important;
    border-color: var(--turq) !important;
}

/* Stats / dashboard cards — ocultas por default en móvil */
body.mobile-mode #pq-stats {
    display: none !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-bottom: 10px;
}
body.mobile-mode #page-proquote.pq-mob-stats #pq-stats {
    display: grid !important;
}
body.mobile-mode #pq-stats .pq-dash-card {
    padding: 14px !important;
    border-radius: 8px !important;
}
[data-theme="gameboy"] body.mobile-mode #pq-stats .pq-dash-card {
    border-radius: 0 !important;
}

/* Botón flotante NUEVO DEAL — fondo del color del tema */
.pq-mob-nuevo {
    display: none;
    position: fixed;
    bottom: 18px;
    left: 88px;
    right: 88px;
    height: 56px;
    background: var(--turq);
    color: #0D1117;
    border: 3px solid var(--turq);
    font-size: 14px;
    font-weight: 900;
    font-family: var(--font);
    letter-spacing: .1em;
    z-index: 245;
    cursor: pointer;
    box-shadow: 3px 3px 0 rgba(0,0,0,.5);
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.pq-mob-nuevo i { color: #0D1117; }
body.mobile-mode #page-proquote.active ~ .pq-mob-nuevo,
body.mobile-mode .pq-mob-nuevo.show { display: flex; }
.pq-mob-nuevo:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(0,0,0,.5); filter: brightness(.85); }
[data-theme="gameboy"] .pq-mob-nuevo { border-radius: 0; }

/* Padding inferior extra cuando estamos en proquote para no chocar con FABs */
body.mobile-mode #page-proquote.active {
    padding-bottom: 90px !important;
}
body.mobile-mode #app-main:has(#page-proquote.active) {
    padding-bottom: 100px !important;
}

/* Hint de swipe horizontal */
.pq-mob-swipe-hint {
    display: none;
    text-align: center;
    font-size: 9px;
    color: var(--dim);
    letter-spacing: .15em;
    padding: 4px 0 8px;
    font-weight: 700;
}
body.mobile-mode .pq-mob-swipe-hint { display: block; }

/* ── KANBAN MÓVIL ──────────────────────────────────────────── */
body.mobile-mode #pq-kanban-view {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

body.mobile-mode #pq-kanban-view .kanban-wrap {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
body.mobile-mode #pq-kanban-view .kanban-wrap::-webkit-scrollbar { display: none; }

body.mobile-mode #pq-kanban-view .kanban-board {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    padding: 0 !important;
    width: max-content !important;
    align-items: flex-start !important;
}

/* Cada columna (.k-col) — ancho dinámico controlado por JS con variable --k-w */
body.mobile-mode #pq-kanban-view .k-col {
    flex: 0 0 var(--k-w, 100%) !important;
    width: var(--k-w, 100%) !important;
    min-width: var(--k-w, 100%) !important;
    max-width: var(--k-w, 100%) !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border: 2px solid var(--border) !important;
    border-radius: 10px !important;
    background: var(--bg2) !important;
    height: calc(100vh - 285px) !important;
    max-height: calc(100vh - 285px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    contain: layout size style !important;
}
[data-theme="gameboy"] body.mobile-mode #pq-kanban-view .k-col { border-radius: 0 !important; }

/* Header de columna */
body.mobile-mode #pq-kanban-view .k-col-hdr {
    padding: 14px !important;
    background: var(--bg3) !important;
    border-bottom: 2px solid var(--border) !important;
    flex-shrink: 0 !important;
    gap: 6px !important;
    text-align: center;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
body.mobile-mode #pq-kanban-view .k-col-name {
    font-size: 13px !important;
    letter-spacing: .1em !important;
    font-weight: 900 !important;
    color: var(--text) !important;
    justify-content: center !important;
    text-transform: uppercase;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
body.mobile-mode #pq-kanban-view .k-col-meta {
    font-size: 11px !important;
    color: var(--turq) !important;
    font-weight: 700 !important;
}

/* Body de la columna — área scrolleable */
body.mobile-mode #pq-kanban-view .k-col-body {
    padding: 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: 10px !important;
    scrollbar-width: none;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: center !important;
    display: flex !important;
    flex-direction: column !important;
}
body.mobile-mode #pq-kanban-view .k-col-body::-webkit-scrollbar { display: none; }

/* k-card dentro — 80% del ancho de la columna padre */
body.mobile-mode #pq-kanban-view .k-card {
    width: 90% !important;
    max-width: 90% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}
/* Texto largo dentro de las cards no debe expandir el ancho */
body.mobile-mode #pq-kanban-view .k-card-empresa,
body.mobile-mode #pq-kanban-view .k-card-contacto {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    width: 100% !important;
}

/* Cuando el usuario abre stats o filtros, ocultar el kanban para evitar overlap */
body.mobile-mode #page-proquote.pq-mob-stats #pq-kanban-view,
body.mobile-mode #page-proquote.pq-mob-stats .pq-mob-swipe-hint,
body.mobile-mode #page-proquote.pq-mob-filt #pq-kanban-view,
body.mobile-mode #page-proquote.pq-mob-filt .pq-mob-swipe-hint {
    display: none !important;
}

/* ── VISTAS GANADOS/PERDIDOS/LISTA EN MÓVIL — CARDS ────────── */
body.mobile-mode #pq-ganados-view .tbl-wrap,
body.mobile-mode #pq-perdidos-view .tbl-wrap,
body.mobile-mode #pq-lista-view .tbl-wrap {
    display: none !important;
}
body.mobile-mode .pq-mob-list {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding-bottom: 100px;
}
body:not(.mobile-mode) .pq-mob-list { display: none !important; }
.pq-mob-list .deal-card {
    background: var(--bg2);
    border: 2px solid var(--border);
    border-left: 4px solid var(--turq);
    border-radius: 8px;
    padding: 14px;
    cursor: pointer;
    box-shadow: 2px 2px 0 rgba(0,0,0,.3);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
[data-theme="gameboy"] .pq-mob-list .deal-card { border-radius: 0; }
.pq-mob-list .deal-card.ganado { border-left-color: var(--green); }
.pq-mob-list .deal-card.perdido { border-left-color: var(--red); }
.pq-mob-list .deal-card:active {
    transform: translate(1px,1px);
    box-shadow: 1px 1px 0 rgba(0,0,0,.3);
}
.pq-mob-list .dc-hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 9px;
    color: var(--turq);
    letter-spacing: .08em;
    font-weight: 900;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--border);
}
.pq-mob-list .dc-hdr .dc-monto {
    color: var(--green);
    font-size: 12px;
}
.pq-mob-list .dc-titulo {
    font-size: 13px;
    font-weight: 900;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-top: 2px;
}
.pq-mob-list .dc-empresa {
    font-size: 11px;
    color: var(--turq);
    letter-spacing: .04em;
    font-weight: 700;
}
.pq-mob-list .dc-meta {
    display: flex;
    gap: 12px;
    font-size: 9px;
    color: var(--dim);
    letter-spacing: .04em;
    flex-wrap: wrap;
    margin-top: 4px;
}
.pq-mob-list .dc-meta i { color: var(--turq); }
.pq-mob-list .dc-motivo {
    font-size: 10px;
    color: var(--red);
    margin-top: 2px;
    font-style: italic;
}

/* ── 18. TRABAJOS DENTRO DE WO — CARDS FULL-WIDTH ──────────── */
body.mobile-mode .lev-card {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 8px !important;
    padding: 12px 14px !important;
    background: var(--bg2) !important;
    border: 2px solid var(--border) !important;
    border-radius: 6px !important;
    box-shadow: 2px 2px 0 rgba(0,0,0,.3);
}
[data-theme="gameboy"] body.mobile-mode .lev-card { border-radius: 0 !important; }

/* Ocultar botones SETUP / BORRAR en móvil — pasan al long-press */
body.mobile-mode .lev-card > div:last-child[style*="border-top"] {
    display: none !important;
}

body.mobile-mode .lev-card-hd {
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
}
body.mobile-mode .lev-body {
    padding-top: 4px !important;
}
body.mobile-mode .lev-body > div:first-child {
    font-size: 12px !important;
    line-height: 1.3 !important;
}
body.mobile-mode .lev-body div {
    gap: 8px !important;
}
body.mobile-mode .lev-meta {
    font-size: 9px !important;
}

/* ── 14. CONTEXT MENU MÓVIL (long-press) ───────────────────── */
@keyframes mobctxin {
    from { background: rgba(0,0,0,0); }
    to   { background: rgba(0,0,0,.7); }
}
#mob-ctx-menu > div {
    animation: mobctxslide .2s ease-out;
}
@keyframes mobctxslide {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
.ctx-mob-opt:active {
    transform: translate(1px,1px);
    background: var(--bg) !important;
}
/* Por default abajo izquierda. En Work Orders se queda a la izquierda
   también para no sobreponerse con el menú hamburguesa (derecha) */

/* ── MINI-CALCULADORA FLOTANTE ─────────────────────────────── */
#mob-calc-panel {
    position: fixed;
    bottom: 80px;
    left: 18px;
    width: 240px;
    background: var(--bg2);
    border: 3px solid var(--turq);
    box-shadow: 4px 4px 0 rgba(0,0,0,.6);
    z-index: 400;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: mobcalcin .15s ease-out;
}
@keyframes mobcalcin {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
[data-theme="gameboy"] #mob-calc-panel { border-radius: 0; }

#mob-calc-panel .mob-calc-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    color: var(--turq);
    letter-spacing: .12em;
    font-weight: 900;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
#mob-calc-panel .mob-calc-hdr button {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    width: 26px;
    height: 26px;
    cursor: pointer;
    min-height: 26px;
    font-size: 11px;
    padding: 0;
}
#mob-calc-panel #mob-calc-display {
    width: 100% !important;
    box-sizing: border-box;
    background: var(--bg3) !important;
    border: 2px solid var(--border) !important;
    color: var(--turq) !important;
    font-size: 22px !important;
    text-align: right;
    padding: 10px 12px !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 900;
    min-height: 44px !important;
    letter-spacing: .03em;
}
#mob-calc-panel .mob-calc-keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}
#mob-calc-panel .mob-calc-keys button {
    background: var(--bg3);
    border: 2px solid var(--border);
    color: var(--text);
    padding: 12px 0;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    font-family: var(--font);
    min-height: 42px;
}
#mob-calc-panel .mob-calc-keys button:active {
    transform: translate(1px,1px);
    background: var(--bg);
}
#mob-calc-panel .mob-calc-keys button.op {
    color: var(--turq);
    border-color: var(--turq);
}
#mob-calc-panel .mob-calc-keys button.eq {
    background: var(--turq);
    color: var(--bg);
    border-color: var(--turq);
}
#mob-calc-panel .mob-calc-keys button.dbl {
    grid-column: span 2;
}
[data-theme="gameboy"] #mob-calc-panel .mob-calc-keys button {
    border-radius: 0;
}

/* ── CALCULADORA FLOTANTE EN CRM (izquierda) ───────────────── */
/* Por default oculta. JS la activa solo en módulos CRM */
body.mobile-mode .mob-fab-calc {
    display: none !important;
}
body.mobile-mode .mob-fab-calc.visible {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    left: 18px !important;
    right: auto !important;
}
/* La calculadora vieja de PROCOST (#btn-calc) sigue prohibida en móvil */
body.mobile-mode #btn-calc,
body.mobile-mode #calc-mini,
body.mobile-mode .calc-floating {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}