/* Estilo de los grids del sitio de Tickets de Soporte.

   Vive aqui y NO en el <style> de cada pantalla porque son dos grids casi identicos —Mis Tickets y
   la Bandeja de Sistemas— y una copia por pantalla se desincroniza a la primera que alguien toque.
   Es el mismo criterio del CSS del paginador y del foco de los modales, que ya son globales (ver el
   CLAUDE.md de la raiz).

   Lo UNICO que se queda en cada pantalla son las etiquetas de la vista movil
   (.mud-table-cell:nth-child(N)::before), porque dependen del orden de columnas de esa pantalla y
   los dos grids no tienen las mismas.

   Se carga desde App.razor. Al ser un .css de verdad, aqui @media se escribe con una sola arroba:
   la doble es solo dentro de un .razor, donde Razor se come la primera. */

.grid-bordered .mud-table-cell {
    border-right: 1px solid var(--mud-palette-table-lines);
    padding: 3px 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.grid-bordered .mud-table-cell:last-child {
    border-right: none;
}

.grid-bordered th.mud-table-cell {
    border-right: 1px solid var(--mud-palette-table-lines);
    padding: 4px 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.grid-bordered th.mud-table-cell:last-child {
    border-right: none;
}

.grid-bordered thead th.mud-table-cell {
    background: linear-gradient(90deg, var(--brand-grad-start, #1e293b) 0%, var(--brand-grad-end, #0f172a) 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-right-color: rgba(255, 255, 255, 0.15) !important;
    position: sticky;
    top: 0;
    z-index: 2;
}

.grid-bordered thead th.mud-table-cell:last-child {
    border-right: none !important;
}

.grid-bordered .mud-table-pagination,
.grid-bordered tfoot,
.grid-bordered tfoot tr,
.grid-bordered tfoot td,
.grid-bordered .mud-table-pagination-toolbar {
    background: linear-gradient(90deg, var(--brand-grad-start, #1e293b) 0%, var(--brand-grad-end, #0f172a) 100%) !important;
    color: #ffffff !important;
}

.grid-bordered .mud-table-pagination-caption,
.grid-bordered .mud-table-pagination-select,
.grid-bordered .mud-select,
.grid-bordered .mud-select-input,
.grid-bordered .mud-input-root {
    color: rgba(255, 255, 255, 0.85) !important;
}

.grid-bordered .mud-table-pagination .mud-icon-button,
.grid-bordered tfoot .mud-icon-button {
    color: rgba(255, 255, 255, 0.85) !important;
}

.grid-bordered .mud-table-pagination .mud-icon-button:hover,
.grid-bordered tfoot .mud-icon-button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.grid-bordered .mud-table-pagination .mud-icon-button:disabled,
.grid-bordered tfoot .mud-icon-button:disabled {
    color: rgba(255, 255, 255, 0.35) !important;
}

.grid-bordered .mud-select-icon {
    color: rgba(255, 255, 255, 0.7) !important;
}

.grid-bordered table {
    table-layout: auto !important;
}

.col-auto {
    width: 1px !important;
    white-space: nowrap !important;
}

/* El titulo es la columna elastica: es texto libre de hasta 150 y es lo unico que se lee de verdad
   en la lista. Las demas quedan pegadas a su contenido. */
.col-titulo {
    white-space: normal !important;
    min-width: 220px;
}

/* Renglon que se abre con un clic (2026-10-30: el cliente quito la columna Acciones de las listas
   de tickets). La clase la pone RowClassFunc de cada grid; en la Cola solo la llevan los tickets
   que quien mira puede abrir. */
.grid-bordered tbody tr.fila-abre {
    cursor: pointer;
}

/* Avisos sin leer de la campanita para ESE ticket, junto al folio. Se limpia sola al abrir el
   ticket (TicketConversacion marca como leidos sus avisos). */
.aviso-ticket {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 9px;
    background: #ef4444;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

/* ── Vista movil: el grid se vuelve tarjetas apiladas ─────────────────────────────────────
   Aqui va todo menos las etiquetas ::before, que son de cada pantalla. */
@media (max-width: 600px) {
    .grid-bordered table {
        table-layout: fixed !important;
    }

    .grid-bordered thead {
        display: none;
    }

    .grid-bordered tbody tr {
        display: block;
        margin-bottom: 8px;
        border-bottom: 2px solid #1e293b;
    }

    .grid-bordered tbody td.mud-table-cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right !important;
        border-right: none !important;
        padding: 6px 12px;
        width: 100% !important;
        white-space: normal !important;
        box-sizing: border-box;
    }

    .grid-bordered tbody td.mud-table-cell::before {
        font-weight: 600;
        text-align: left;
        margin-right: 8px;
        flex-shrink: 0;
    }

    .grid-bordered tbody td.mud-table-cell .mud-text,
    .grid-bordered tbody td.mud-table-cell .mud-stack {
        text-align: right;
    }

    .grid-bordered .mud-table-cell,
    .grid-bordered .mud-typography {
        font-size: 16px !important;
    }

    /* Area tactil comoda en telefono (~44x44) para los botones de Acciones. */
    .grid-bordered tbody td.mud-table-cell .mud-icon-button {
        width: 44px !important;
        height: 44px !important;
        padding: 8px !important;
    }

    .grid-bordered tbody td.mud-table-cell .mud-icon-button .mud-icon-root {
        font-size: 1.6rem !important;
    }
}

/* ── Escritorio: la pagina no hace scroll, lo hace el grid por dentro ─────────────────── */
@media (min-width: 1024px) {
    .page-no-scroll {
        height: calc(100dvh - 64px - 1rem);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .grid-scroll-container {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .grid-scroll-container .mud-table {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .grid-scroll-container .mud-table-container {
        flex: 1;
        overflow-y: auto !important;
        min-height: 0;
    }
}