/* * Tickets. * * ⚠ Acá va SOLO lo propio de estas pantallas. El aspecto de las columnas del tablero —fondo, * ancho, separación, papel tapiz— lo pone `personalizados.css` colgado de `.kanban-app`, que es la * clase del TEMA: por eso el markup del tablero la lleva. Repetir ese estilo acá es cómo se * separaron las copias del tablero de WhatsApp y el de tareas. */ /* El pin. `leaflet-div-icon` trae fondo blanco y borde de Leaflet, pensados para una etiqueta: acá adentro va un SVG con su propia silueta y esos dos lo enmarcarían en un cuadrito. */ .tk-pin { background: transparent; border: 0; } /* El mapa de la ubicación. Alto fijo: Leaflet mide su contenedor y con alto automático se quedaría en cero píxeles y no dibujaría nada. */ .tk-mapa { height: 300px; border-radius: var(--bs-border-radius, .375rem); border: 1px solid var(--ins-border-color); } @media (max-width: 575.98px) { .tk-mapa { height: 220px; } } /* El asa de arrastre de una fila de estado. ⚠ Existe porque la fila lleva un campo de texto y un selector de color adentro: si se pudiera arrastrar desde cualquier parte, querer seleccionar el nombre con el mouse arrastraría la fila. `cursor: grab` y el tono apagado la anuncian sin gritar. */ .tk-asa { cursor: grab; color: var(--ins-secondary-color); opacity: .55; line-height: 1; /* Área de toque decente en el teléfono sin agrandar la fila. */ padding: 4px 2px; touch-action: none; } .tk-asa:hover { opacity: 1; } .tk-asa:active { cursor: grabbing; } /* Las tres del esqueleto: su candado en vez del asa, apagado. No se arrastran. */ .tk-asa-fija { cursor: default; opacity: .35; } .tk-asa-fija:hover { opacity: .35; } /* La fila mientras se arrastra. */ .tk-fila-fantasma { opacity: .35; } /* El selector de color de un estado, dentro de su fila: chiquito y sin ocupar media fila. ⚠ Es el `` del navegador —la gama entera, pedido de Mario el 2026-09-10— y no una lista de colores del tema: por eso el color se guarda como `#rrggbb`. */ .tk-color-fila { width: 38px; min-width: 38px; padding: 2px; } /* Los filtros de la cabecera. ⚠ Con `max-width` y no con `w-auto`. Un `.form-select` es `display: block` y, como hijo de un contenedor flex, el navegador lo blockifica igual —`d-inline-block` no lo salva—, así que `width: auto` termina significando «llená lo que haya». Medido: 504 px por filtro, uno por fila, con el título flotando al lado. Un tope de ancho es lo único que lo sujeta. */ .tk-filtro { max-width: 190px; } /* El número de ticket. Tabular para que los folios queden alineados en columna aunque tengan distinta cantidad de dígitos. */ .tk-folio { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ins-secondary-color); } /* La banderita de «esto ya se cerró una vez y se reabrió». Discreta a propósito: es un dato de contexto, no una alarma — el ticket está abierto y lo que manda es su estado actual. */ .tk-reabierto { color: var(--ins-warning); font-size: .8em; vertical-align: middle; } /* Un ticket al que se le pasó la fecha de compromiso. Solo el texto de la fecha, no la fila entera: con veinte vencidos, veinte filas rojas dejan de significar nada. */ .tk-vencido { color: var(--ins-danger); font-weight: 600; } /* ── Tarjeta del tablero ────────────────────────────────────────────────────────────────── */ .tk-tarjeta { /* ⚠ Blanca y con el borde PUNTEADO, como las de los otros dos tableros. Antes era gris con borde continuo: sobre el papel tapiz gris de la columna se despegaba menos, y el punteado —que en esta casa quiere decir «esto se arrastra»— lo tenían las otras dos y esta no. El color lo pone `--gr-tablero-borde`, el token compartido de `personalizados.css`. */ list-style: none; background: #fff; border: 1px dashed var(--gr-tablero-borde); border-radius: var(--bs-border-radius, .375rem); padding: 10px 12px; /* La mano abierta, y el puño mientras se arrastra: las mismas señas del tablero compartido. */ cursor: grab; transition: box-shadow .12s, border-color .12s; /* La franja de la izquierda lleva el color de la PRIORIDAD. Es el único color de la tarjeta: el estado ya lo dice la columna en la que está, y repetirlo sería teñir dos veces lo mismo. Continua y no punteada: es un dato, no una seña de arrastre. */ border-left: 3px solid var(--ins-border-color); } .tk-tarjeta:active { cursor: grabbing; } .tk-tarjeta:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, .10); } .tk-tarjeta.prio-baja { border-left-color: var(--ins-border-color); } .tk-tarjeta.prio-media { border-left-color: var(--ins-info); } .tk-tarjeta.prio-alta { border-left-color: var(--ins-warning); } .tk-tarjeta.prio-critica { border-left-color: var(--ins-danger); } .tk-tarjeta-asunto { font-weight: 600; font-size: .8125rem; line-height: 1.35; /* Dos líneas y corta: un asunto largo no puede estirar la tarjeta hasta empujar a las demás fuera de la columna. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tk-tarjeta-pie { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .6875rem; color: var(--ins-secondary-color); } /* Mientras se arrastra: lo pone el TEMA, pedido desde el JS con `ghostClass`/`chosenClass`, como en los otros dos tableros. Acá queda solo el giro, que el tema aplica a `.sortable-fallback .card` y estas tarjetas no llevan un `.card` adentro. */ .kanban-app .sortable-fallback.tk-tarjeta { transform: rotate(10deg); } /* ⚠ Acá NO va el alto de las columnas ni el scroll de su cuerpo. Los ponía este archivo con un `calc` propio, Tareas con `min-height: 450px` y el de conversaciones con el del tema: tres cuentas del mismo alto para tres tableros que dicen ser el mismo. Ahora viven en `personalizados.css` bajo `.kanban-app` y llegan solas. Por eso la columna de tickets pasó a armarse con el markup compartido —`kanban-item` de cabecera y `kanban-board-group` con su `