/* Módulo de Tareas — SOLO lo propio de esta pantalla.
   El aspecto del tablero es el estilo compartido de la casa y vive en `personalizados.css`
   (`.kanban-app`). Acá va lo que no comparte con nadie: sus filtros, los colores de prioridad
   y fecha, el alto de columna que pidió Mario, sus catálogos y el pie.
   ⚠ Depender de `personalizados.css` no rompe la independencia del módulo —es del NÚCLEO—; lo que
   no puede es depender de otro módulo, como `whatsapp.css`. */

/* ⚠ El ancho de los filtros se fija ACÁ y no con `w-auto` del tema: esa clase NO existe en el
   `app.min.css` desplegado —comprobado, cero coincidencias—, así que el `form-select` se estiraba
   al ancho completo y cada filtro caía en su propia fila. */
.tareas-app .form-select { width: auto; min-width: 160px; }

/* ── La pantalla de lista ────────────────────────────────────────────────────────────────────
   Mismo motivo que arriba: sin esto los siete filtros caen cada uno en su propia fila y la
   cabecera ocupa media pantalla. ⚠ Reglas propias y no las de `.tareas-app`: el selector de filas
   por página también es un `form-select` y con `min-width:160px` ocupaba el ancho de un filtro
   para mostrar el número «10». */
.tareas-lista .card-header .form-select { width: auto; min-width: 150px; }
.tareas-lista .card-header .app-search .form-control { width: 280px; }
.tareas-lista .card-header [data-table-set-rows-per-page] { min-width: 76px; }

@media (max-width: 575.98px) {
  /* En el teléfono sí conviene la fila entera: apretados no se leen. */
  .tareas-lista .card-header .form-select,
  .tareas-lista .card-header .app-search,
  .tareas-lista .card-header .app-search .form-control { width: 100%; min-width: 0; }
}
.tareas-app .card-header .app-search { width: auto; }
.tareas-app .card-header .app-search .form-control { width: 220px; }

@media (max-width: 575.98px) {
  /* En el teléfono sí conviene que ocupen la fila entera: apretados no se leen. */
  .tareas-app .form-select,
  .tareas-app .card-header .app-search,
  .tareas-app .card-header .app-search .form-control { width: 100%; min-width: 0; }
}

/* ⚠ Las reglas del tablero —columnas, cabecera, borde punteado de la tarjeta, asa, gesto de
   arrastre— NO están acá: viven en `personalizados.css` bajo `.kanban-app`, compartidas con el
   tablero de WhatsApp y con cualquier otro que venga. Tenerlas duplicadas fue lo que hizo que los
   dos tableros se separaran sin que nadie lo notara. Se piden poniendo `kanban-app` —la clase del tema— en
   el contenedor de la pantalla; acá solo queda lo propio de Tareas.

   Depender de `personalizados.css` sí es válido aunque el módulo se venda suelto: es del NÚCLEO.
   Lo prohibido es depender de otro módulo —`whatsapp.css`—, porque quitar WhatsApp rompería esto. */

/* ⚠ El ALTO del tablero ya no está acá. Era `min-height: 450px` sobre el grupo, y los otros dos
   tableros tenían cada uno su propia cuenta: los tres se veían distintos. Ahora lo pone
   `personalizados.css` bajo `.kanban-app` —el tablero llega hasta el pie— y lo comparten. */

/* ⚠ La tarjeta se abre con DOBLE clic —y con dos toques en el teléfono, decisión de Mario del
   2026-09-05—. `touch-action: manipulation` es lo que hace que el segundo toque llegue: sin esto
   el navegador móvil se queda esperando por si el gesto era el doble toque para HACER ZOOM, se
   traga el evento o lo entrega tarde. Permite seguir desplazando y haciendo pinza; lo único que
   apaga es el zoom por doble toque, que sobre una tarjeta no le sirve a nadie. */
.tareas-app .tarea-card { touch-action: manipulation; }

/* Prioridad y fecha son `badge` del tema: acá SOLO va el color. Darles forma propia —píldora,
   otro tamaño de letra— era lo que las hacía desentonar del resto de la fila, donde el tipo, el
   canal y el responsable sí son badges del tema. Un ícono más en la tarjeta compite con la fecha,
   que es el dato que de verdad se busca de un vistazo. */
.tarea-prio.baja    { background: #e9ecef; color: #495057; }
.tarea-prio.media   { background: #d0ebff; color: #1971c2; }
.tarea-prio.alta    { background: #ffe8cc; color: #d9480f; }
.tarea-prio.urgente { background: #ffe3e3; color: #c92a2a; }

/* La fecha se pinta sola: vencida en rojo, hoy en ámbar, el resto en gris. Es el único dato de la
   tarjeta que cambia de significado con el paso del tiempo, así que se lee por color. */
.tarea-fecha         { background: var(--ins-tertiary-bg, #f1f3f5); color: var(--bs-secondary-color, #6c757d); }
.tarea-fecha.vencida { background: #ffe3e3; color: #c92a2a; font-weight: 600; }
.tarea-fecha.hoy     { background: #ffe8cc; color: #e8590c; font-weight: 600; }

/* `.col-vacia` —el «Nada por acá» de una columna vacía— se mudó a `personalizados.css`: los
   otros dos tableros no decían nada y con el papel tapiz parecían estar cargando todavía. */

/* Punto de color en la tabla de catálogos: el color se elige para que se distinga de un vistazo
   en la tarjeta, así que en la lista tiene que verse igual de claro. */
.tc-punto { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }

/* ── Menú de filtros ────────────────────────────────────────────────────────────────────────
   Flotante y de dos niveles. Antes era un panel que se desplegaba hacia abajo y empujaba el
   tablero media pantalla: en el teléfono había que bajar para volver a ver las tarjetas. */
.tq-menu { min-width: 260px; max-width: 300px; padding: 6px; }
.tq-menu .dropdown-item { border-radius: 6px; font-size: .84rem; }

/* Cada fila del primer nivel: rótulo a la izquierda, lo elegido a la derecha y la flecha al
   final. Ver el valor puesto sin entrar es lo que evita ir abriendo filtros uno por uno para
   averiguar cuál está tocado. */
.tq-menu .tq-fila { display: flex; align-items: center; gap: 8px; }
.tq-menu .tq-fila .rot { flex-shrink: 0; }
.tq-menu .tq-fila .val {
  margin-left: auto; font-size: .76rem; color: var(--bs-secondary-color, #6c757d);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px;
}
.tq-menu .tq-fila .val.puesto { color: var(--bs-primary, #6c5ffc); font-weight: 600; }
.tq-menu .tq-fila .ti { flex-shrink: 0; color: var(--bs-secondary-color, #adb5bd); }

.tq-menu .tq-volver { font-weight: 600; }
.tq-menu .dropdown-item.activo { background: var(--ins-tertiary-bg, #f1f3f5); font-weight: 600; }
.tq-menu .tq-punto {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px;
}

/* El segundo nivel puede tener muchas opciones —clientes, etiquetas—: se desplaza dentro del
   menú en vez de estirarlo fuera de la pantalla. */
#tqNivel2 { max-height: 320px; overflow-y: auto; }

/* ── Reordenar los catálogos arrastrando ────────────────────────────────────────────────────
   ⚠ Acá el asa SÍ es el único punto de agarre, a diferencia de las tarjetas del tablero: la fila
   lleva botones de editar y borrar, y arrastrar desde cualquier parte haría imposible tocarlos
   sin moverla sin querer. */
#tcLista .tc-asa { cursor: move; color: var(--bs-secondary-color, #adb5bd); text-align: center; }
#tcLista .tc-asa:hover { color: var(--bs-primary, #6c5ffc); }
#tcLista tr.tc-fantasma { opacity: .4; background: var(--ins-tertiary-bg, #f1f3f5); }

/* ── El pie, al fondo ────────────────────────────────────────────────────────────────────────
   Con el tablero corto, el pie quedaba pegado al contenido y debajo sobraba una franja gris.
   La barra superior mide 70 px y el contenido arranca justo debajo (medido), así que el área de
   contenido se estira hasta el borde de la ventana y el pie se va al final con `margin-top:auto`.
   ⚠ Es `min-height` y no `height`: con contenido largo la página tiene que poder crecer y que el
   pie quede abajo del todo, no fijo tapando tarjetas. */
.pagina-tareas .content-page {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 70px);
}
.pagina-tareas .content-page > .container-fluid { flex: 1 0 auto; }
/* ⚠ Sin `>`: el pie NO es hijo directo de `.content-page` en todas las pantallas, y con el
   selector de hijo directo la regla no lo alcanzaba —el pie subía en vez de bajar—. */
.pagina-tareas .footer { margin-top: auto; }

/* El clon de la fila mientras se arrastra. ⚠ Va colgado del `body`, así que pierde el ancho que
   tenía dentro de la tabla: se le fija uno para que no se desarme en una tira de celdas sueltas. */
body > tr.sortable-fallback {
  display: table; width: auto; max-width: 520px;
  background: #fff; box-shadow: 0 10px 24px rgba(11, 20, 26, .22);
  border-radius: 6px; opacity: 1;
}
body > tr.sortable-fallback td { padding: 8px 10px; }

/* ── El aviso flotante ───────────────────────────────────────────────────────────────────────
   ⚠ El desenfoque se apaga desde el CONTENEDOR. SweetAlert2 ignora `backdrop:false` en los
   toasts y le pone igual la clase con la que el tema aplica el `backdrop-filter`. */
.swal2-container.tq-toast-cont {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
  /* Sin esto el contenedor sigue cubriendo la pantalla y se come los clics de abajo mientras
     dura el aviso: se toca una tarjeta y no pasa nada. */
  pointer-events: none;
}
.swal2-container.tq-toast-cont .swal2-toast { pointer-events: auto; }
.tq-toast { width: auto; max-width: min(420px, 92vw); }
.tq-toast .swal2-title { font-size: 14.5px; }
.tq-toast .swal2-html-container { font-size: 13px; line-height: 18px; margin: 2px 0 0; }

/* Etiquetas del formulario: casillas con su color, no un desplegable múltiple —con ese hay que
   saber que se elige con la tecla de control, y nadie lo sabe—. */
.mt-etiq {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--ins-border-color, #e9edef); border-radius: 999px;
  padding: 4px 12px 4px 10px; font-size: .82rem; user-select: none;
}
.mt-etiq input { margin: 0; }
.mt-etiq .punto { width: 9px; height: 9px; border-radius: 50%; }
.mt-etiq.marcada { border-color: var(--bs-primary, #6c5ffc); background: rgba(108, 95, 252, .06); }

/* ── Las plantillas ──────────────────────────────────────────────────────────────────────────
   Un molde es la RECETA de una tarea que se repite, no trabajo pendiente. Está escondido salvo
   que se pida con el filtro «Plantillas», y cuando aparece se pinta APAGADO para que no se
   confunda con una tarjeta que alguien tiene que hacer.

   ⚠ Va en el CSS del módulo y no en `personalizados.css`: las plantillas son de Tareas, el
   tablero de WhatsApp no las tiene. Lo compartido es el aspecto del tablero, no esto. */
.tareas-app .kanban-item[data-id].tarea-molde .card {
  /* Punteado más tenue que el azul del tablero y fondo apenas gris: se lee «esto no es una
     tarjeta normal» antes de leer una sola palabra. */
  border-style: dashed;
  border-color: var(--bs-secondary-color, #adb5bd) !important;
  background: var(--ins-tertiary-bg, #f6f7fb);
  opacity: .82;
}
/* Sin mano de arrastre: `draggable` ya lo excluye en Sortable, pero el cursor lo prometía igual y
   una promesa que el sistema no cumple es peor que no hacerla.
   ⚠ El selector repite `[data-id]` para EMPATAR en especificidad con la regla de
   `personalizados.css` (`.kanban-app .kanban-item[data-id] { cursor: grab }`) y ganarle por orden
   de carga. Sin eso la mía tenía una clase menos y perdía en silencio — medido: seguía en `grab`. */
.tareas-app .kanban-item[data-id].tarea-molde { cursor: default; }
.tareas-app .kanban-item[data-id].tarea-molde:hover .card { box-shadow: none !important; }

/* Cada cuánto se repite, donde las demás llevan su fecha límite. */
.tarea-cada {
  background: var(--ins-tertiary-bg, #eef0f4);
  color: var(--bs-secondary-color, #6c757d);
  font-size: .62rem;
}

/* En la lista basta con apagar la fila: la tabla ya distingue por el ícono del título. */
.tareas-lista tr.tarea-fila-molde { background: var(--ins-tertiary-bg, #fafbfd); }
.tareas-lista tr.tarea-fila-molde td { opacity: .85; }

/* Los días de la semana en la modal, con el mismo aspecto que las casillas de etiquetas. */
#mtDias .mt-etiq { min-width: 52px; justify-content: center; }