/* TaskFlow — responsive móvil (≤767px) */

@media (max-width: 767px) {

    /* Stats: 3 columnas compactas en móvil */
    .tf-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .tf-stats .stat-card {
        padding: 8px 6px;
        gap: 2px;
    }

    .tf-stats .stat-label {
        font-size: 0.6rem;
        letter-spacing: 0;
    }

    .tf-stats .stat-value {
        font-size: 1.3rem;
    }

    /* Filtros: grid 2 cols, wrap ocupa fila completa, selects de a 2 */
    .tf-filtros {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        align-items: center;
    }

    /* Fila del buscador: ocupa las 2 columnas */
    .tf-buscar-wrap {
        grid-column: 1 / -1;
        display: flex;
        gap: 6px;
        align-items: center;
    }

    .tf-buscar-wrap .tf-filtro-input {
        flex: 1;
        min-width: 0;
    }

    /* Selects: 1 por columna (2 por fila) */
    .tf-filtros .tf-filtro-select {
        min-width: 0;
    }

    /* Estado: fila completa */
    .tf-filtros #tf-f-estado {
        grid-column: 1 / -1;
    }

    /* Ocultar el botón Limpiar en móvil — lo reemplaza el × */
    .tf-filtros .tf-btn-limpiar {
        display: none;
    }

    .tf-buscar-clear {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        min-height: 36px;
        font-size: 1rem;
        font-family: inherit;
        line-height: 1;
        background: #f3f4f6;
        border: 1px solid #d1d5db;
        border-radius: var(--radius);
        color: #6b7280;
        cursor: pointer;
        padding: 0;
        transition: background 0.15s, color 0.15s;
        flex-shrink: 0;
    }

    .tf-buscar-clear:hover {
        background: #e5e7eb;
        color: #111827;
    }

    /* Selects: 1 por columna (se reparten de a 2) */
    .tf-filtros .tf-filtro-select {
        min-width: 0;
        font-size: 0.8rem;
    }

    /* Botón limpiar: alineado con el último select */
    .tf-filtros .tf-btn-limpiar {
        min-width: 0;
        font-size: 0.8rem;
        padding: 7px 8px;
    }

    /* Tablero: columnas apiladas verticalmente, sin altura mínima fija */
    .tf-tablero {
        flex-direction: column;
        overflow-x: visible;
        min-height: 0;
    }

    .tf-columna {
        flex: none;
        width: 100%;
    }

    /* Cuerpo de columna: altura según contenido, sin mínimo fijo */
    .tf-col-body {
        flex: none;
        min-height: 0;
    }

    /* Panel de detalle de tarea: pantalla completa en móvil */
    .tf-panel {
        padding: 0;
        align-items: stretch;
    }

    .tf-panel-box {
        width: 100%;
        max-width: 100%;
        height: 100dvh;           /* dvh: descuenta barra de navegador móvil */
        max-height: 100dvh;
        border-radius: 0;
    }

    /* Scroll interno correcto dentro del flex-column */
    .tf-panel-content {
        min-height: 0;
        padding: 10px 12px;
    }

    /* Header: wrap si hay muchos botones */
    .tf-panel-header {
        padding: 12px 12px 10px;
        flex-wrap: wrap;
        gap: 6px;
    }

    .tf-panel-header-acciones {
        flex-wrap: wrap;
        gap: 4px;
    }

    /* Metadatos: 3 columnas en móvil */
    .tf-panel-meta {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
    }

    .tf-meta-campo {
        flex: unset;
        padding: 8px 6px 8px 0;
        margin-right: 0;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }

    /* 2 columnas (adjuntos + comentarios) → 1 columna */
    .tf-panel-2col {
        grid-template-columns: 1fr;
    }

    .tf-panel-2col .tf-panel-section:last-child {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid #f3f4f6;
        padding-top: 10px;
    }

    /* Etiquetas + Personas: mantener 2 columnas en móvil, alineadas al tope */
    .tf-panel-2col--etiq-pers {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .tf-panel-2col--etiq-pers .tf-panel-section {
        padding-top: 10px;
        border-top: none;
    }

    .tf-panel-2col--etiq-pers .tf-panel-section:last-child {
        border-left: 1px solid #f3f4f6;
        padding-left: 10px;
        border-top: none;
        padding-top: 10px;
    }

    /* Checklist: campo agregar — input ancho completo, botón + fijo */
    .tf-checklist-add {
        width: 100%;
    }

    .tf-checklist-add .tf-checklist-input {
        flex: 1;
        min-width: 0;
    }

    .tf-checklist-add .tf-checklist-btn-add {
        flex-shrink: 0;
        width: 36px !important;
        height: 36px;
        padding: 0;
        font-size: 1.3rem;
    }

    /* Checklist: descripción en fila 1, acciones en fila 2 */
    .tf-chk-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .tf-chk-acciones {
        margin-left: 0;
        flex-wrap: wrap;
        gap: 4px;
    }

    /* Chips de fecha en wrap */
    .tf-chk-chips {
        flex-wrap: wrap;
    }

    /* Modal ancho reducido */
    .modal-box--wide {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
    }

    /* Modal de tarea en móvil: body scrollable, footer siempre al pie */
    #modal-tf .modal-box {
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }

    #modal-tf .modal-body {
        padding: 16px;
    }

    #modal-tf .modal-footer {
        padding: 12px 16px;
    }

    /* Acciones de tarjeta siempre visibles en móvil */
    .tf-card-acciones {
        display: flex;
    }

    /* Planes: una columna */
    .tf-planes-grid {
        grid-template-columns: 1fr;
    }

    /* Botones de plan siempre visibles en móvil */
    .tf-plan-card-acciones {
        display: flex;
    }

    /* Última fila de metadatos: sin borde inferior */
    .tf-meta-campo:nth-last-child(-n+3) {
        border-bottom: none;
    }

    /* Estado: al lado de Prioridad (Prioridad=1col + Estado=2cols) */
    .tf-meta-campo--estado {
        grid-column: span 2;
        border-top: none;
        border-bottom: 1px solid #e5e7eb;
        padding-top: 8px;
        margin-top: 0;
    }

    .tf-meta-campo--estado .tf-panel-estados {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }

    .tf-meta-campo--estado .tf-estado-btn {
        text-align: center;
        justify-content: center;
        font-size: 0.68rem;
        padding: 5px 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    /* Prioridad: sin borde inferior si Estado lo tiene */
    .tf-meta-campo:has(+ .tf-meta-campo--estado) {
        border-bottom: 1px solid #e5e7eb;
    }

    /* Header tablero en móvil: título arriba, botones abajo en grid 2x2 */
    .mod-taskflow .mod-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* ← Planes al lado del título en la misma fila */
    .tf-header-left {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    /* Botón ← Planes: compacto, no crece */
    .tf-header-left .tf-btn-volver {
        flex-shrink: 0;
        font-size: 0.72rem;
        padding: 5px 8px;
        white-space: nowrap;
    }

    /* Bloque título + subtítulo: ocupa el espacio restante */
    .tf-header-left > div {
        flex: 1;
        min-width: 0;
    }

    .tf-header-left .mod-title {
        font-size: 1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tf-header-left .mod-subtitle {
        font-size: 0.72rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tf-header-acciones {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .tf-header-acciones .btn {
        font-size: 0.78rem;
        padding: 7px 8px;
        text-align: center;
        justify-content: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Ocultar "+ Crear tarjeta" en móvil — ya aparece en el tablero vacío */
    .tf-header-acciones #tf-btn-tarjetas { display: none; }

    /* Orden visual: Nueva tarea | Etiquetas | Reportes */
    .tf-header-acciones #tf-btn-nueva    { order: 1; }
    .tf-header-acciones #tf-btn-etiquetas{ order: 2; }
    .tf-header-acciones #tf-btn-reportes { order: 3; }

    /* Picker de asignados: columna */
    .tf-asignados-picker {
        max-height: 200px;
    }

    .tf-picker-item {
        min-width: 0;
        width: 100%;
    }

    /* Adjuntos: botones en una sola fila */
    .tf-adjuntos-acciones {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 6px;
    }

    .tf-adjuntos-acciones .btn {
        flex: 1;
        font-size: 0.78rem;
        padding: 7px 6px;
        text-align: center;
        justify-content: center;
        white-space: nowrap;
    }

    /* Preview imagen más pequeña */
    .tf-adjunto-img-preview {
        max-width: 120px;
        max-height: 90px;
    }

    /* Form etiquetas / tarjetas: input más alto, color ocupa fila */
    .tf-etiq-form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .tf-etiq-input {
        height: 52px;
        font-size: 0.9rem;
        border-radius: 4px;
    }

    .tf-etiq-color {
        width: 100%;
        height: 36px;
    }

    /* Botones Agregar + Cancelar pequeños y centrados */
    .tf-etiq-form-btns {
        flex-direction: row;
        justify-content: center;
    }

    .tf-etiq-form-btns .btn {
        flex: none !important;
        width: auto !important;
        padding: 5px 14px !important;
        font-size: 0.78rem;
    }

    /* Modal etiquetas: ancho completo */
    .modal-box--etiquetas {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0;
    }

    /* Time picker: centrado en móvil, ignora top/left del JS */
    .tf-chk-time-picker {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%);
        width: calc(100vw - 32px);
        min-width: 0;
        max-width: 320px;
    }

    /* Reportes: columna única */
    .tf-rep-layout {
        grid-template-columns: 1fr;
    }

    .tf-rep-tipos-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .tf-rep-tipo-btn::after {
        left: auto;
        right: 0;
        transform: none;
        width: 180px;
    }

    .tf-rep-fechas {
        grid-template-columns: 1fr;
    }

    .tf-rep-canvas-wrap {
        max-height: 300px;
    }

    .tf-rep-canvas-wrap canvas {
        max-height: 300px;
    }
}