/* css/tasks.css — App ✅ Tareas (F2.13/F2.15, épica Aluna Workspace F2)
   Aditivo, después de mail-composer.css. Reusa .pghd/.pghd-title/.pghd-actions, .home-task-row/
   .home-task-ck/.home-task-title/.home-task-due (css/app.css, ya definidas para el widget de Home)
   y .acct-card/.btn/.ytk-cfg-* (engrane de listas, ver js/tasks.js#openListsManager) — solo se
   define aquí lo que es GENUINAMENTE nuevo de la app Tareas. */

.tsk-tabs{ display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--bg-border); padding-bottom:2px; margin-bottom:14px; }
/* AND-6 (auditoría F2.13): 48dp mínimo M3 (antes 44px de alto real). */
.tsk-tab{ border:none; background:none; font:inherit; font-size:13px; font-weight:600; color:var(--text-muted); padding:8px 12px; min-height:48px; border-radius:8px 8px 0 0; cursor:pointer; }
.tsk-tab:hover{ background:var(--bg-raised); color:var(--text); }
.tsk-tab:active{ opacity:.6; } /* AND-10: feedback táctil, patrón de css/app.css:696 */
.tsk-tab.active{ color:var(--yt-orange,#EC6628); box-shadow:inset 0 -2px 0 var(--yt-orange,#EC6628); }

/* PG-1/PG-3 (auditoría F2.13/F2.15, pantallas-grandes): 920px fijo dejaba 45-73% de la
   pantalla en negro y sin centrar en monitores ≥1920px (medido en vivo: 48% usado @1920,
   36% @2560, 27% @3440 — tests/audit-live/pantallas-grandes-tasks.spec.js). El rediseño
   .yt-split maestro/detalle recomendado por el auditor queda FUERA de alcance de esta pasada
   (cambio arquitectónico grande) — en su lugar, el tope crece proporcional al viewport
   (clamp, nunca baja de 920px, tope 1400px) y el bloque se centra en el espacio sobrante. */
.tsk-body{ max-width:clamp(920px, 62vw, 1400px); margin-inline:auto; }

/* PG-7 (auditoría F2.13/F2.15, pantallas-grandes): vista "Listas" apilaba secciones en una
   sola columna incluso con .tsk-body ya ensanchado por el fix de arriba. Rejilla responsiva
   SOLO desde el breakpoint canónico "desktop" (1280px, ver css/app.css:2930) — por debajo
   sigue apilado en una columna, sin cambio de comportamiento en laptop/tablet/móvil. */
.tsk-lists-grid{ display:block; }
@media (min-width:1280px){
  .tsk-lists-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(360px, 1fr)); gap:16px; align-items:start; }
  .tsk-lists-grid .tsk-list-sec{ margin-bottom:0; }
}
.tsk-empty{ padding:36px 12px; text-align:center; font-size:13px; color:var(--text-muted); }
.tsk-empty-sm{ padding:8px 4px; font-size:12.5px; color:var(--text-muted); }

.tsk-quickadd{ margin-bottom:10px; }
.tsk-quickadd-inline{ margin:6px 0 14px; }
/* IOS-2/3 (auditoría F2.13/F2.15): font-size<16px en un input dispara auto-zoom al enfocar en
   iOS Safari (patrón ya corregido en otras partes de la app, ver css/app.css:2942
   .spk-inp/.au-time/#au-loc). Subido de 13px a 16px; padding vertical reducido 1px para
   compensar la caja más alta que deja el texto más grande. */
.tsk-qa-inp{ width:100%; box-sizing:border-box; padding:8px 12px; border:1px dashed var(--bg-border); border-radius:9px; background:var(--bg-page); color:var(--text); font:inherit; font-size:16px; }
.tsk-qa-inp:focus{ outline:none; border-style:solid; border-color:var(--yt-orange,#EC6628); }

.tsk-sec-h{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin:16px 0 4px; }
.tsk-sec-h:first-of-type{ margin-top:4px; }
.tsk-sec-h-overdue{ color:var(--err,#dc2626); }

/* PG-4 (auditoría F2.13): la fila entera no tenía :hover, solo el título (.home-task-title:hover
   en css/app.css, subraya el texto) — sin señal en el fondo/checkbox/badges. */
.tsk-row:hover{ background:var(--row-hover, var(--bg-raised)); border-radius:8px; }
.tsk-row .tsk-badges{ display:flex; align-items:center; gap:4px; flex:0 0 auto; }
.tsk-badge{ font-size:11px; color:var(--text-muted); white-space:nowrap; }
.tsk-badge-list{ font-weight:600; padding:1px 7px; border-radius:99px; }

/* ── Listas ── */
.tsk-lists-hd{ display:flex; justify-content:flex-end; margin-bottom:10px; }
.tsk-list-sec{ margin-bottom:18px; }
.tsk-list-sec-h{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--text); margin-bottom:2px; }
.tsk-list-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.tsk-list-count{ font-weight:400; color:var(--text-muted); font-size:12px; }

/* ── Kanban ── */
.tsk-kanban-toolbar{ display:flex; gap:6px; margin-bottom:12px; }
.tsk-kanban-wrap .ytk{ min-height:320px; }
/* PCH-1 (auditoría F2.13): .ytk-board (css/app.css) trae una altura fija compartida con OTROS
   kanbans (ponentes/patrocinadores) que se pintan directo bajo .pghd, sin el chrome extra que
   Tareas apila encima (.tsk-tabs + .tsk-kanban-toolbar, ~118px medidos en vivo a 1280×720). Se
   sobreescribe SOLO aquí (selector con id, no toca a los demás consumidores de .ytk-board). */
#tsk-kanban-wrap .ytk-board{
  height:calc(100dvh - 258px);
  /* PCH-3 (auditoría F2.13/F2.15, pantallas-chicas): sin pista visual de que hay más columnas
     a la derecha al hacer scroll horizontal, a diferencia de .app-rail (css/rail.css:38-43,
     mismo patrón ya establecido para scroll vertical). Sombra inset permanente, CSS-only —
     inocua cuando no hay overflow (solo un borde sombreado de 8px). */
  box-shadow:inset -12px 0 8px -8px rgba(0,0,0,.18);
}
/* PG-2 (auditoría F2.13/F2.15, pantallas-grandes): .ytk-col (css/app.css) es ancho FIJO
   (232px) — componente COMPARTIDO con otros kanbans de la casa (ponentes/patrocinadores),
   NO se toca globalmente. Override con id-scope SOLO dentro del kanban de Tareas: columnas
   flexibles que aprovechan el ancho extra en monitores grandes sin afectar a los demás
   consumidores de .ytk-col. */
#tsk-kanban-wrap .ytk-col{ flex:1 1 260px; max-width:320px; }
.tsk-kcard-t{ font-size:13px; font-weight:600; color:var(--text); margin-bottom:3px; }
.tsk-kcard-m{ font-size:11.5px; color:var(--text-muted); display:flex; gap:6px; flex-wrap:wrap; }
.tsk-kcard-overdue{ color:var(--err,#dc2626); font-weight:700; }

/* ── Inteligentes (pills) ── */
.tsk-pills{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
/* AND-6: min-height 48dp (antes 44px real). */
.tsk-pill{ border:1px solid var(--bg-border); background:var(--bg-surface); color:var(--text-2,var(--text)); font:inherit; font-size:12.5px; font-weight:600; padding:6px 13px; min-height:48px; box-sizing:border-box; border-radius:99px; cursor:pointer; }
.tsk-pill:hover{ background:var(--bg-raised); }
.tsk-pill:active{ opacity:.6; } /* AND-10 */
.tsk-pill.active{ background:var(--yt-orange,#EC6628); border-color:var(--yt-orange,#EC6628); color:#fff; }

/* ── Eisenhower ── */
.tsk-eisen-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:640px){ .tsk-eisen-grid{ grid-template-columns:1fr; } }
.tsk-eisen-q{ background:var(--bg-surface); border:1px solid var(--bg-border); border-radius:12px; padding:10px; min-height:160px; display:flex; flex-direction:column; }
.tsk-eisen-h{ margin-bottom:8px; }
.tsk-eisen-h b{ font-size:13px; color:var(--text); display:block; }
.tsk-eisen-h span{ font-size:11px; color:var(--text-muted); }
/* PG-8/PCH-2 (auditoría F2.13): sin tope, un cuadrante con muchas tareas (típicamente "Algún día",
   el bucket catch-all) crecía sin límite y forzaba scroll de PÁGINA completa en vez de scrollear
   internamente — igual que ya hace .ytk-col-b en Kanban (css/app.css, flex:1;overflow-y:auto). */
.tsk-eisen-b{ flex:1; display:flex; flex-direction:column; gap:6px; min-height:60px; max-height:calc(100dvh - 320px); overflow-y:auto; border-radius:8px; padding:2px; transition:background .15s; }
.tsk-eisen-b.over{ background:color-mix(in srgb, var(--yt-orange,#EC6628) 12%, transparent); }
.tsk-eisen-card{ background:var(--bg-page); border:1px solid var(--bg-border); border-radius:8px; padding:8px 10px; font-size:12.5px; color:var(--text); cursor:grab; }
.tsk-eisen-card:active{ cursor:grabbing; }
.tsk-eisen-card.dragging{ opacity:.4; }

/* ════════════════════════════════════════════════════════════════════════════════════════════
   F2.18 — "sensación nativa" del toolbar móvil de Tareas (MISMO tratamiento que Correo F1.26/
   Agenda F2.17/Contactos F3.12; Tareas es el 4º consumidor real de css/native-materials.css).
   Reparto completo + por qué documentado en js/tasks.js#render — aquí solo el CSS de soporte.
   Base desktop-safe: `#tsk-more-trigger` (fabricado, mismo criterio que `#ag-more-trigger` de
   Agenda — Tareas tampoco tenía un dropdown "Más" preexistente que reusar) no existe visualmente
   hasta el breakpoint móvil; en escritorio `.pghd`/`.tsk-tabs` siguen exactamente igual que antes.
   ════════════════════════════════════════════════════════════════════════════════════════════ */
.tsk-more-trigger{ display:none; }
@media (max-width:879px), (max-height:500px) and (pointer:coarse) and (max-width:960px) {
  /* Mismo umbral EXACTO que css/native-materials.css (879px, o landscape angosto de teléfono con
     tope de 960px — PC-1, evita el "phone takeover" en un 2-en-1/Split View de escritorio real).
     #tsk-new (acción primaria "＋ Nueva tarea") queda reemplazado por el FAB #tsk-fab-new (misma
     función, mismo handler openEditor(null,render)) — ocultarlo aquí es la mitad del trabajo que
     el panel de auditores encontró faltante en Contactos F3 (docs/AUDITORES_ALUNA_WORKSPACE.md,
     lección "consistencia-cableado" 2026-07-15): agregar la capa flotante nueva SIN quitar el
     control de escritorio equivalente deja ambos visibles/apilados a la vez. */
  #tsk-new{ display:none; }
  /* AND-F4-1 (panel de auditores, CONFIRMADO): 48px (no 44px) — mismo mínimo M3 que este archivo
     ya aplicó a .tsk-tab/.tsk-pill (ver AND-6 arriba); este elemento es NUEVO de esta fase y había
     regresado al valor que el propio archivo ya identificó como incorrecto para Android.
     UXU-2 (panel de auditores, CONFIRMADO): radius 7px, no 9px — alinea con el gemelo real de este
     mismo botón, `.ag-ico` de Agenda (css/app.css), que ya usa el mismo color/borde/fondo con
     radius 7px; quedaba una esquina perceptiblemente más redondeada sin motivo. */
  .tsk-more-trigger{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border:1px solid var(--bg-border); background:var(--bg-surface); color:var(--text-2); border-radius:7px; cursor:pointer; flex:none; }
  .tsk-more-trigger:hover{ background:var(--bg-raised); }
  .tsk-more-trigger:active{ opacity:.6; }
  /* AND-F4-2 (panel de auditores, CONFIRMADO): opacity:.6 es el lenguaje de feedback táctil de
     iOS (mismo origen que .tsk-tab:active, ver AND-10 arriba, "patrón de css/app.css:696... no el
     'ripple' de Material") — a diferencia de #tsk-fab-new/#tsk-more-sheet (que heredan su propio
     state-layer de css/native-materials.css), este elemento es fabricado a mano y se había quedado
     sin su rama Android. State-layer de fondo, sin encoger/atenuar el elemento completo. */
  :root[data-os="android"] .tsk-more-trigger:active{ opacity:1; background:color-mix(in srgb, currentColor 12%, var(--bg-surface)); }
  /* UXU-1 (misma lección ya aplicada en Correo/Agenda/Contactos): el contenedor de scroll real de
     Tareas en móvil es la PÁGINA (.main, css/app.css) para las vistas Mi día/Listas/Inteligentes
     — mismo criterio que #cts-list de Contactos (Tareas tampoco tiene panel interno propio con
     overflow-y para esas 3 vistas); se reserva el mismo cálculo compartido (--native-float-y +
     alto del FAB 56px + 12px de aire) en el ÚLTIMO bloque de contenido visible, #tsk-body. Kanban
     y Eisenhower SÍ tienen su propio scroll interno anidado (.ytk-col-b de <yt-kanban>/
     .tsk-eisen-b de este archivo) — el padding-bottom de #tsk-body no llega ahí adentro, así que
     se reserva por separado en cada uno (mismo criterio de override con id-scope ya usado por
     PG-2/PCH-1 arriba en este archivo para #tsk-kanban-wrap .ytk-col, sin tocar la clase
     compartida .ytk-col-b de css/app.css globalmente). */
  #tsk-body{ padding-bottom:calc(var(--native-float-y) + 56px + 12px); }
  #tsk-kanban-wrap .ytk-col-b{ padding-bottom:calc(var(--native-float-y) + 56px + 12px); }
  .tsk-eisen-b{ padding-bottom:calc(var(--native-float-y) + 56px + 12px); }
  /* IOS-2 (panel de auditores, CONFIRMADO): el padding-bottom de arriba solo protege el eje
     VERTICAL de cada columna — el tablero completo (.ytk-board) scrollea horizontalmente como un
     solo bloque, así que la última columna puede quedar bajo el footprint FIJO del FAB (bottom-
     right, 56px + 16px de aire). Mismo cálculo de hueco que .native-float-pill ya usa para dejarle
     espacio a un FAB hermano (css/native-materials.css). scroll-padding-right para que el navegador
     nunca "ancle" el final del scroll justo debajo del FAB. */
  #tsk-kanban-wrap .ytk-board{ scroll-padding-right:72px; padding-right:72px; }
}