/* ==========================================================================
   TABLAS COMO TARJETAS EN CELULAR (<= 768px) — compartido por las listas del sistema
   Uso: el contenedor de la tabla lleva class="tt-wrap tt-<lista>", cada fila class="tt-row"
   y cada celda una clase ga-<zona> (dónde va en la tarjeta) + utilidades tt-*.
   La distribución de cada lista se define abajo con grid-template-areas.
   En computadora la tabla no cambia.
   ========================================================================== */
@media (max-width: 768px) {
    .tt-wrap { overflow: visible !important; border: none !important; background: transparent !important; box-shadow: none !important; }
    /* Si la tabla estaba dentro de una "card", la card deja de dibujar su marco: las tarjetas ya lo tienen */
    :has(> .tt-wrap) { overflow: visible !important; }
    .admin-card:has(> .tt-wrap),
    .sc-table-card:has(> .tt-wrap) { background: transparent !important; border: none !important; box-shadow: none !important; }
    .tt-wrap table,
    .tt-wrap tbody { display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; }
    .tt-wrap thead { display: none !important; }

    .tt-wrap tbody tr.tt-row {
        display: grid !important;
        column-gap: 8px; row-gap: 6px; align-items: center;
        padding: 12px !important; margin-bottom: 10px;
        background: var(--card-bg, rgba(15, 23, 42, 0.85)) !important;
        border: 1px solid var(--border-color, #1e293b) !important; border-radius: 12px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    }
    .tt-wrap tbody tr.tt-row > td {
        display: block !important; width: auto !important; max-width: none !important; min-width: 0 !important;
        padding: 0 !important; border: none !important; background: transparent !important;
        text-align: left !important; white-space: normal !important; overflow-wrap: anywhere;
    }
    .tt-wrap tbody tr.tt-row > td:empty { display: none !important; }
    /* Fila "sin resultados" */
    .tt-wrap tbody tr:not(.tt-row) { display: block !important; }
    .tt-wrap tbody tr:not(.tt-row) > td { display: block !important; border: none !important; }

    /* Utilidades */
    /* :not(#tt) sube la prioridad: styles.css pinta de verde la columna del ID con selectores muy específicos;
       en la tarjeta el ID y la fecha van en gris para que resalte solo la OT */
    .tt-wrap tbody tr.tt-row > td.tt-muted:not(#tt) { font-size: 0.75rem !important; color: var(--text-muted, #8e9a91) !important; font-weight: 600 !important; text-shadow: none !important; background: transparent !important; }
    .tt-wrap tbody tr.tt-row > td.tt-title { font-size: 0.95rem !important; font-weight: 700; overflow: visible !important; }
    .tt-wrap tbody tr.tt-row > td.tt-sep { padding-top: 8px !important; border-top: 1px dashed var(--border-color, rgba(255, 255, 255, 0.1)) !important; }
    .tt-wrap tbody tr.tt-row > td.tt-end { text-align: right !important; justify-self: end; }
    .tt-wrap tbody tr.tt-row > td.tt-flex { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
    .tt-wrap tbody tr.tt-row > td.tt-flex.tt-end { justify-content: flex-end; }
    .tt-wrap tbody tr.tt-row > td.tt-flex br { display: none; }
    .tt-wrap tbody tr.tt-row > td.tt-flex > div { flex-wrap: wrap !important; }
    .tt-wrap tbody tr.tt-row > td.tt-clamp { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; }
    .tt-wrap tbody tr.tt-row > td.tt-ot { font-family: 'Orbitron', monospace; font-size: 1rem !important; }
    .tt-wrap tbody tr.tt-row > td.tt-id::before { content: '#'; }
    .tt-wrap tbody tr.tt-row > td.tt-show { display: block !important; }
    /* Ícono delante del dato (Font Awesome) */
    .tt-wrap tbody tr.tt-row > td[class*='tt-i-']::before { font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free'; font-weight: 900; margin-right: 6px; color: #0a84ff; }
    .tt-wrap tbody tr.tt-row > td.tt-i-loc::before { content: '\f3c5'; }
    .tt-wrap tbody tr.tt-row > td.tt-i-tel::before { content: '\f095'; }
    .tt-wrap tbody tr.tt-row > td.tt-i-mail::before { content: '\f0e0'; }
    .tt-wrap tbody tr.tt-row > td.tt-i-eq::before { content: '\f109'; }
    .tt-wrap tbody tr.tt-row > td.tt-i-user::before { content: '\f007'; }
    .tt-wrap tbody tr.tt-row > td.tt-i-falla::before { content: '\f0ad'; color: #ff9500; }
    /* Botón de opciones: más grande para el dedo */
    .tt-wrap tbody tr.tt-row > td.tt-opc .btn-view { width: 38px !important; height: 38px; min-height: 38px !important; margin: 0 !important; padding: 0 !important; font-size: 0.9rem !important; }
    .tt-wrap tbody tr.tt-row > td.tt-acc .btn-view,
    .tt-wrap tbody tr.tt-row > td.tt-acc button,
    .tt-wrap tbody tr.tt-row > td.tt-acc a { min-height: 36px !important; }
    .tt-wrap tbody tr.tt-row > td input[type='checkbox'] { width: 20px !important; height: 20px !important; margin: 0; vertical-align: middle; }

    /* Zonas de la tarjeta */
    .tt-wrap .ga-check { grid-area: check; }
    .tt-wrap .ga-id { grid-area: id; }
    .tt-wrap .ga-ot { grid-area: ot; }
    .tt-wrap .ga-cod { grid-area: cod; }
    .tt-wrap .ga-estado { grid-area: estado; }
    .tt-wrap .ga-opc { grid-area: opc; }
    .tt-wrap .ga-nom { grid-area: nom; }
    .tt-wrap .ga-cli { grid-area: cli; }
    .tt-wrap .ga-doc { grid-area: doc; }
    .tt-wrap .ga-eq { grid-area: eq; }
    .tt-wrap .ga-falla { grid-area: falla; }
    .tt-wrap .ga-fecha { grid-area: fecha; }
    .tt-wrap .ga-pago { grid-area: pago; }
    .tt-wrap .ga-total { grid-area: total; }
    .tt-wrap .ga-area { grid-area: area; }
    .tt-wrap .ga-dir { grid-area: dir; }
    .tt-wrap .ga-tel { grid-area: tel; }
    .tt-wrap .ga-mail { grid-area: mail; }
    .tt-wrap .ga-vig { grid-area: vig; }
    .tt-wrap .ga-resp { grid-area: resp; }
    .tt-wrap .ga-tipo { grid-area: tipo; }
    .tt-wrap .ga-tit { grid-area: tit; }
    .tt-wrap .ga-cont { grid-area: cont; }
    .tt-wrap .ga-wa { grid-area: wa; }
    .tt-wrap .ga-acc { grid-area: acc; }

    /* Lista de tickets de local (ticket_lista.php) */
    .tt-tickets tbody tr.tt-row {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        grid-template-areas:
            "id ot estado opc"
            "nom nom nom nom"
            "eq eq eq eq"
            "falla falla falla falla"
            "cli fecha pago pago";
    }
    /* Tickets de campo (ticket_lista_campo.php) */
    .tt-campo tbody tr.tt-row {
        grid-template-columns: auto auto minmax(0, 1fr) auto auto;
        grid-template-areas:
            "check id ot estado opc"
            "nom nom nom nom nom"
            "cli cli cli fecha fecha"
            "dir dir dir dir dir"
            "total total total pago pago";
    }
    .tt-campo tbody tr.tt-row:not(:has(.ga-pago)) > td.ga-total { grid-column: 1 / -1; }
    /* Clientes (cliente_lista.php) */
    .tt-clientes tbody tr.tt-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "cod doc opc"
            "nom nom nom"
            "tel tel tel"
            "mail mail mail"
            "dir dir dir"
            "id fecha fecha";
    }
    /* Tickets CAS (ticket_lista_cas.php) */
    .tt-cas tbody tr.tt-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "ot tipo"
            "vig vig"
            "falla falla"
            "resp fecha"
            "estado acc";
    }
    /* Cotizaciones de soporte (soporte_cotizaciones.php) */
    .tt-cotiz tbody tr.tt-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "cod estado"
            "cli cli"
            "tit tit"
            "ot cont"
            "total acc";
    }
    /* Tickets de software (ticket_lista_software.php) */
    .tt-software tbody tr.tt-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "ot fecha"
            "falla falla"
            "cli cli"
            "estado resp"
            "acc acc";
    }
    /* Seguimiento comercial (seguimiento_ventas_vista.php) */
    .tt-seguimiento tbody tr.tt-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "check ot estado"
            "cli cli cli"
            "eq eq eq"
            "wa wa wa"
            "fecha fecha acc";
    }
}