/* MEDICAL LAUDOS - FASE 13 - Interface e Triagem de Tickets */
.ml-tickets-page {
    padding: 4px 2px 24px 2px;
}

.ml-tickets-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.ml-tickets-header h2 {
    margin-bottom: 4px;
}

.ml-tickets-subtitulo {
    margin: 0;
    color: #687280;
    font-size: 13px;
}

.ml-tickets-header-acoes {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ml-tickets-contexto-banner {
    border: 1px solid #bcd8f5;
    background: #eef7ff;
    color: #265f95;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: 13px;
}

.ml-tickets-filtros {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr)) auto;
    gap: 10px;
    align-items: end;
    background: #fff;
    border: 1px solid #e4e9ef;
    border-radius: 9px;
    padding: 12px;
    margin-bottom: 14px;
}

.ml-tickets-filtro label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #66707b;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.ml-tickets-filtro .form-select,
.ml-tickets-filtro .form-control {
    min-height: 38px;
}

.ml-tickets-filtro-limpar .btn {
    min-height: 38px;
    white-space: nowrap;
}

.ml-tickets-tabela-wrap {
    background: #fff;
    border: 1px solid #e4e9ef;
    border-radius: 9px;
    padding: 10px;
    overflow: hidden;
}

.ml-ticket-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.ml-ticket-status--aberto { background: #eaf4ff; color: #0b67b2; }
.ml-ticket-status--atendimento { background: #fff3db; color: #986200; }
.ml-ticket-status--aguardando { background: #f2edff; color: #6846a6; }
.ml-ticket-status--resolvido { background: #e8f7ee; color: #267744; }

.ml-ticket-idade {
    font-weight: 700;
    color: #4c5662;
    white-space: nowrap;
}

.ml-ticket-idade--alta {
    color: #a13b32;
}

.ml-ticket-responsavel-vazio {
    color: #8a929c;
    font-style: italic;
}

.ml-ticket-categoria {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 7px;
    border-radius: 5px;
    background: #f1f4f8;
    color: #475361;
}

.ml-ticket-modal {
    padding: 18px;
    max-width: 980px;
    margin: 0 auto;
}

.ml-ticket-modal h3 {
    margin: 0 0 4px 0;
    color: #1678c8;
    font-weight: 800;
}

.ml-ticket-modal__subtitulo {
    margin: 0 0 18px 0;
    color: #6f7883;
    font-size: 13px;
}

.ml-ticket-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ml-ticket-form-campo--full {
    grid-column: 1 / -1;
}

.ml-ticket-form-campo label,
.ml-ticket-detalhe-acao label {
    display: block;
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 5px;
    color: #4b5561;
}

.ml-ticket-form-campo textarea,
.ml-ticket-detalhe-acao textarea {
    min-height: 125px;
    resize: vertical;
}

.ml-ticket-registro-box {
    position: relative;
}

.ml-ticket-registro-resultados {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 1px solid #d8dfe7;
    border-radius: 7px;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
    max-height: 260px;
    overflow-y: auto;
}

.ml-ticket-registro-item {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #edf0f4;
    background: #fff;
    text-align: left;
    padding: 10px 12px;
    cursor: pointer;
}

.ml-ticket-registro-item:hover {
    background: #f7fbff;
}

.ml-ticket-registro-item:last-child {
    border-bottom: 0;
}

.ml-ticket-registro-item strong {
    display: block;
    margin-bottom: 2px;
}

.ml-ticket-registro-item small {
    color: #6d7680;
}

.ml-ticket-registro-selecionado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 7px;
    padding: 8px 10px;
    background: #edf7ff;
    border: 1px solid #cfe7f9;
    border-radius: 6px;
    font-size: 12px;
}

.ml-ticket-form-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.ml-ticket-detalhe-topo {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    border-bottom: 1px solid #e9edf2;
    padding-bottom: 12px;
    margin-bottom: 14px;
}

.ml-ticket-detalhe-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.ml-ticket-detalhe-item {
    background: #f7f9fb;
    border: 1px solid #e6ebf0;
    border-radius: 7px;
    padding: 9px 10px;
    min-width: 0;
}

.ml-ticket-detalhe-item span {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 800;
    color: #7a838e;
    margin-bottom: 3px;
}

.ml-ticket-detalhe-item strong {
    display: block;
    font-size: 13px;
    color: #303943;
    word-break: break-word;
}

.ml-ticket-descricao {
    background: #fff;
    border: 1px solid #e2e7ec;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    white-space: pre-wrap;
    line-height: 1.5;
}

.ml-ticket-acoes-admin,
.ml-ticket-comentario-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid #e3e8ee;
    border-radius: 8px;
    padding: 12px;
    margin: 12px 0;
}

.ml-ticket-comentario-box {
    grid-template-columns: 1fr;
}

.ml-ticket-detalhe-acao .btn {
    margin-top: 7px;
}

.ml-ticket-timeline {
    margin-top: 18px;
}

.ml-ticket-timeline h4 {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 10px;
}

.ml-ticket-evento {
    position: relative;
    border-left: 3px solid #d8e6f3;
    padding: 0 0 14px 14px;
    margin-left: 5px;
}

.ml-ticket-evento:last-child {
    padding-bottom: 0;
}

.ml-ticket-evento__cabecalho {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    margin-bottom: 4px;
}

.ml-ticket-evento__tipo {
    font-weight: 800;
    font-size: 12px;
    color: #266b9d;
}

.ml-ticket-evento__hora,
.ml-ticket-evento__autor {
    color: #7a838e;
    font-size: 11px;
}

.ml-ticket-evento__mensagem {
    font-size: 13px;
    color: #404852;
    white-space: pre-wrap;
}

.ml-tickets-rodape-nota {
    margin-top: 10px;
    color: #8a929b;
    font-size: 11px;
}


.ml-ticket-registro-selecionado > span {
    min-width: 0;
    flex: 1;
}

.ml-ticket-registro-selecionado > span > strong,
.ml-ticket-registro-selecionado > span > small {
    display: block;
}

.ml-ticket-registro-selecionado > span > strong {
    margin-bottom: 3px;
}

.ml-ticket-registro-selecionado > span > small {
    color: #6d7680;
    line-height: 1.35;
}

.ml-ticket-solicitante {
    display: -webkit-box;
    max-width: 260px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 1.35;
    word-break: break-word;
}

.ml-ticket-descricao {
    color: #404852;
}

.ml-ticket-descricao__rotulo {
    display: block;
    margin-bottom: 6px;
    color: #7a838e;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.ml-ticket-descricao__texto {
    color: #303943;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
}

.ml-ticket-btn-admin {
    min-width: 132px;
}

@media (max-width: 1100px) {
    .ml-tickets-filtros {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }
    .ml-tickets-filtro-limpar {
        grid-column: 1 / -1;
    }
    .ml-ticket-detalhe-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .ml-tickets-page {
        padding: 2px 0 18px 0;
    }
    .ml-tickets-header {
        flex-direction: column;
        align-items: stretch;
    }
    .ml-tickets-header-acoes .btn {
        width: 100%;
    }
    .ml-tickets-filtros,
    .ml-ticket-form-grid,
    .ml-ticket-acoes-admin,
    .ml-ticket-detalhe-grid {
        grid-template-columns: 1fr;
    }
    .ml-ticket-form-campo--full,
    .ml-tickets-filtro-limpar {
        grid-column: auto;
    }
    .ml-ticket-modal {
        padding: 12px 9px;
    }
    .ml-ticket-form-acoes {
        flex-direction: column-reverse;
    }
    .ml-ticket-form-acoes .btn,
    .ml-ticket-detalhe-acao .btn {
        width: 100%;
    }
    .ml-ticket-detalhe-topo {
        flex-direction: column;
    }
    #ml_tickets_table_wrapper .dataTables_filter,
    #ml_tickets_table_wrapper .dataTables_length {
        float: none;
        text-align: left;
        margin-bottom: 8px;
    }
    #ml_tickets_table_wrapper .dataTables_filter input {
        width: 100%;
        margin-left: 0;
        margin-top: 5px;
    }
}

/* FASE 13 R3 - leitura, notificacoes e pendencias */
#menu_tickets {
    position: relative !important;
    overflow: visible !important;
}

/*
 * REV2 VISUAL DO BADGE
 * O menu legado estiliza qualquer `.menu span` como um botao de largura total.
 * Por isso o contador NAO pode ser um <span> filho. O badge e o ponto de
 * pendencia sao pseudo-elementos do proprio item Tickets.
 */
#menu_tickets::before,
#menu_tickets::after {
    pointer-events: none;
    box-sizing: border-box;
}

#menu_tickets.ml-ticket-menu--has-unread::after {
    content: attr(data-ticket-badge);
    position: absolute;
    top: 5px;
    right: 6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ef5362;
    color: #fff;
    border: 2px solid #fff;
    font-family: gotham-bold, Arial, sans-serif;
    font-size: 10px !important;
    font-weight: 800;
    line-height: 16px !important;
    letter-spacing: 0;
    text-align: center;
    box-shadow: 0 3px 9px rgba(109, 26, 38, .28);
    z-index: 20;
}

#menu_tickets.ml-ticket-menu--has-pending::before {
    content: "";
    position: absolute;
    top: 7px;
    right: 8px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #f0aa22;
    border: 2px solid #fff;
    box-shadow: 0 2px 7px rgba(126, 81, 0, .24);
    z-index: 20;
}

/* No menu comprimido, o indicador fica no canto do botao sem cobrir o icone. */
.page.tela-full #menu_tickets.ml-ticket-menu--has-unread::after,
.tela-full #menu_tickets.ml-ticket-menu--has-unread::after {
    top: 3px;
    right: 3px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 9px !important;
    line-height: 14px !important;
}

.page.tela-full #menu_tickets.ml-ticket-menu--has-pending::before,
.tela-full #menu_tickets.ml-ticket-menu--has-pending::before {
    top: 5px;
    right: 5px;
    width: 10px;
    height: 10px;
}

.ml-tickets-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px 0;
}

.ml-ticket-quick-btn {
    border: 1px solid #dfe6ed;
    background: #fff;
    color: #4b5865;
    border-radius: 999px;
    padding: 7px 11px;
    min-height: 34px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.ml-ticket-quick-btn:hover {
    border-color: #bad7ef;
    background: #f7fbff;
}

.ml-ticket-quick-btn.is-active {
    border-color: #1685dc;
    color: #126bad;
    background: #edf7ff;
    box-shadow: inset 0 0 0 1px rgba(22,133,220,.08);
}

.ml-ticket-quick-count {
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef2f5;
    color: #53606c;
    font-size: 10px;
    font-weight: 800;
}

.ml-ticket-quick-btn.is-active .ml-ticket-quick-count {
    background: #dcefff;
    color: #1168a9;
}

.ml-ticket-quick-dot,
.ml-ticket-row-dot {
    display: inline-block;
    flex: 0 0 auto;
    border-radius: 50%;
}

.ml-ticket-quick-dot {
    width: 8px;
    height: 8px;
}

.ml-ticket-quick-dot--novo,
.ml-ticket-row-dot--novo {
    background: #e45454;
}

.ml-ticket-quick-dot--acao,
.ml-ticket-row-dot--acao {
    background: #e5a11a;
}

.ml-ticket-row-dot {
    width: 9px;
    height: 9px;
    margin-right: 7px;
    vertical-align: 1px;
    box-shadow: 0 0 0 2px #fff;
}

#ml_tickets_table tbody tr.ml-ticket-row--unread td {
    background-color: #fbfdff;
}

#ml_tickets_table tbody tr.ml-ticket-row--unread td:nth-child(4) strong {
    font-weight: 800;
}

#ml_tickets_table tbody tr.ml-ticket-row--acao td:first-child {
    box-shadow: inset 3px 0 0 #e5a11a;
}

.ml-ticket-modal {
    position: relative;
}

.ml-ticket-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: 1px solid #dde5ec;
    border-radius: 50%;
    background: #fff;
    color: #687480;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 3px 12px rgba(21,45,67,.08);
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}

.ml-ticket-modal-close:hover {
    background: #f3f8fc;
    border-color: #bed8ed;
    color: #1678c8;
    transform: translateY(-1px);
}

.ml-ticket-modal-close:focus {
    outline: 2px solid rgba(22,120,200,.25);
    outline-offset: 2px;
}

@media (max-width: 760px) {
    .ml-tickets-quick {
        gap: 6px;
    }
    .ml-ticket-quick-btn {
        flex: 1 1 calc(50% - 6px);
        justify-content: center;
    }
    .ml-ticket-modal-close {
        top: 8px;
        right: 8px;
    }
}

/* reserva visual para o X superior sem sobrepor badge/status */
.ml-ticket-detalhe-topo {
    padding-right: 52px;
}

@media (max-width: 760px) {
    .ml-ticket-detalhe-topo {
        padding-right: 48px;
    }
}

/* FASE 13 R4 - Tickets direcionados e selects pesquisaveis */
.ml-ticket-fluxo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 320px;
    color: #3f4b57;
    font-size: 12px;
    line-height: 1.3;
}

.ml-ticket-fluxo__parte {
    display: inline-block;
    max-width: 138px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.ml-ticket-fluxo__seta {
    flex: 0 0 auto;
    color: #7f8b97;
    font-size: 11px;
}

.ml-ticket-detalhe-item--registro {
    grid-column: 2 / -1;
}

.ml-ticket-form-campo .select2-container,
.ml-ticket-detalhe-acao .select2-container,
.ml-tickets-filtro .select2-container {
    width: 100% !important;
}

.ml-ticket-form-campo .select2-container .select2-selection--single,
.ml-ticket-detalhe-acao .select2-container .select2-selection--single,
.ml-tickets-filtro .select2-container .select2-selection--single {
    min-height: 38px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #fff;
}

.ml-ticket-form-campo .select2-container .select2-selection--single .select2-selection__rendered,
.ml-ticket-detalhe-acao .select2-container .select2-selection--single .select2-selection__rendered,
.ml-tickets-filtro .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
    padding-left: 12px;
    padding-right: 30px;
    color: #303943;
}

.ml-ticket-form-campo .select2-container .select2-selection--single .select2-selection__arrow,
.ml-ticket-detalhe-acao .select2-container .select2-selection--single .select2-selection__arrow,
.ml-tickets-filtro .select2-container .select2-selection--single .select2-selection__arrow {
    height: 36px;
    right: 4px;
}

.box-modal .select2-container--open,
.box-modal .select2-dropdown {
    z-index: 10050 !important;
}

.box-modal .select2-search--dropdown {
    padding: 8px;
}

.box-modal .select2-search--dropdown .select2-search__field {
    min-height: 36px;
    border: 1px solid #cfd8e1;
    border-radius: 5px;
    padding: 7px 9px;
}

.box-modal .select2-results__option {
    padding: 8px 10px;
    line-height: 1.35;
}

#ml_ticket_destino_convenio_wrap,
#ml_ticket_destino_medico_wrap {
    min-width: 0;
}

@media (max-width: 1100px) {
    .ml-ticket-detalhe-item--registro {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .ml-ticket-fluxo {
        max-width: 220px;
    }
    .ml-ticket-fluxo__parte {
        max-width: 92px;
    }
    .ml-ticket-detalhe-item--registro {
        grid-column: auto;
    }
}

/* FASE 13 R4 REV3 - Select2 estavel dentro do modal legado.
   O site global força dropdown width:max-content; em Tickets o popup precisa seguir
   exatamente a largura do campo que o abriu. */
.ml-ticket-select2-popup {
    z-index: 10050 !important;
}

.ml-ticket-select2-popup .select2-dropdown {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.ml-ticket-select2-popup .select2-results__option {
    white-space: normal;
    word-break: break-word;
}

/* F13_R4_REV8_MODAL_CLOSE_MOBILE
   Isola o X superior dos modais de Tickets de regras responsivas genéricas de button/.btn. */
@media (max-width: 760px) {
    .box-modal .ml-ticket-modal {
        position: relative !important;
    }

    .box-modal .ml-ticket-modal > button.ml-ticket-modal-close,
    .box-modal button.ml-ticket-modal-close {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        left: auto !important;
        bottom: auto !important;

        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;

        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 38px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border: 1px solid #dde5ec !important;
        border-radius: 999px !important;
        background: #fff !important;
        color: #687480 !important;
        box-shadow: 0 3px 12px rgba(21,45,67,.10) !important;

        font-size: 14px !important;
        line-height: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        z-index: 30 !important;
    }

    .box-modal .ml-ticket-modal > button.ml-ticket-modal-close i,
    .box-modal button.ml-ticket-modal-close i {
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        pointer-events: none !important;
    }

    .box-modal .ml-ticket-modal > button.ml-ticket-modal-close:hover,
    .box-modal button.ml-ticket-modal-close:hover {
        background: #f3f8fc !important;
        border-color: #bed8ed !important;
        color: #1678c8 !important;
    }

    .box-modal .ml-ticket-modal > h3,
    .box-modal .ml-ticket-detalhe-topo {
        padding-right: 52px !important;
    }
}