* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f4f7fb;
    color: #172033;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

button {
    cursor: pointer;
}

.app {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 250px;
    background: #111827;
    color: white;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 10px 30px;
}

.logo-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
}

.logo strong {
    display: block;
    font-size: 18px;
}

.logo span {
    color: #94a3b8;
    font-size: 12px;
}

nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.menu {
    width: 100%;
    border: 0;
    background: transparent;
    color: #cbd5e1;
    text-align: left;
    padding: 13px 14px;
    border-radius: 9px;
    font-size: 14px;
}

.menu:hover,
.menu.active {
    background: #1e293b;
    color: white;
}

.sidebar-bottom {
    margin-top: auto;
    padding: 15px 10px;
    border-top: 1px solid #293548;
    color: #94a3b8;
}

.sidebar-bottom span,
.sidebar-bottom small {
    display: block;
}

.sidebar-bottom small {
    margin-top: 4px;
}

.main {
    margin-left: 250px;
    width: calc(100% - 250px);
    min-height: 100vh;
}

.topbar {
    background: white;
    border-bottom: 1px solid #e5e7eb;
    padding: 25px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topbar h1 {
    font-size: 24px;
}

.topbar p {
    margin-top: 5px;
    color: #64748b;
    font-size: 14px;
}

.system-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #64748b;
}

#status-dot {
    width: 9px;
    height: 9px;
    background: #22c55e;
    border-radius: 50%;
}

.page {
    display: none;
    padding: 30px;
}

.page.active {
    display: block;
}

.cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

.card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.card-icon {
    width: 48px;
    height: 48px;
    background: #eff6ff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.card span {
    display: block;
    color: #64748b;
    font-size: 13px;
}

.card strong {
    display: block;
    font-size: 26px;
    margin-top: 5px;
}

.section {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 25px;
}

.section-header {
    margin-bottom: 20px;
}

.section-header h2 {
    font-size: 19px;
}

.section-header p {
    color: #64748b;
    font-size: 13px;
    margin-top: 5px;
}

.clients-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.primary-button {
    border: 0;
    background: #2563eb;
    color: white;
    padding: 11px 17px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

.primary-button:hover {
    background: #1d4ed8;
}

.secondary-button {
    border: 1px solid #d1d5db;
    background: white;
    color: #374151;
    padding: 11px 17px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

.secondary-button:hover {
    background: #f8fafc;
}

.search-bar {
    margin-bottom: 20px;
}

.search-bar input {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid #dbe1ea;
    border-radius: 9px;
    outline: none;
    font-size: 14px;
}

.search-bar input:focus {
    border-color: #2563eb;
}

.table-wrapper {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 13px 12px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
    font-size: 13px;
}

th {
    color: #64748b;
    font-weight: 600;
    background: #f8fafc;
}

tbody tr:hover {
    background: #f8fafc;
}

.badge {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.badge-green {
    background: #dcfce7;
    color: #166534;
}

.badge-red {
    background: #fee2e2;
    color: #991b1b;
}

.loading {
    color: #64748b;
    padding: 20px 0;
}

.error {
    color: #b91c1c;
    background: #fee2e2;
    padding: 15px;
    border-radius: 8px;
}

.cto-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.cto-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px;
}

.cto-card h3 {
    font-size: 16px;
}

.cto-card p {
    color: #64748b;
    font-size: 13px;
    margin: 6px 0 16px;
}

.cto-stats {
    display: flex;
    gap: 8px;
}

.stat {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    background: #f8fafc;
}

.stat strong {
    display: block;
    font-size: 18px;
}

.stat span {
    font-size: 11px;
    color: #64748b;
}


/* MODAL */

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1000;
    padding: 30px;
    overflow-y: auto;
}

.modal-overlay.show {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.modal {
    width: 100%;
    max-width: 780px;
    background: white;
    border-radius: 16px;
    margin: 20px auto;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px;
    border-bottom: 1px solid #e5e7eb;
}

.modal-header h2 {
    font-size: 20px;
}

.modal-header p {
    margin-top: 5px;
    color: #64748b;
    font-size: 13px;
}

.close-button {
    border: 0;
    background: transparent;
    font-size: 30px;
    line-height: 1;
    color: #64748b;
    padding: 0 5px;
}

.close-button:hover {
    color: #111827;
}

.form-section {
    padding: 22px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.form-section h3 {
    font-size: 15px;
    margin-bottom: 18px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.form-group.full {
    grid-column: 1 / -1;
}

.form-group label {
    font-size: 12px;
    color: #475569;
    font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    border: 1px solid #dbe1ea;
    border-radius: 8px;
    padding: 11px 12px;
    font-size: 13px;
    outline: none;
    background: white;
}

.form-group textarea {
    resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #2563eb;
}

.form-error {
    display: none;
    margin: 15px 24px 0;
    padding: 12px;
    border-radius: 8px;
    background: #fee2e2;
    color: #991b1b;
    font-size: 13px;
}

.form-error.show {
    display: block;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px 24px;
}


/* RESPONSIVO */

@media (max-width: 1000px) {

    .cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .cto-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {

    .sidebar {
        width: 70px;
        padding: 15px 8px;
    }

    .logo {
        justify-content: center;
        padding: 0 0 20px;
    }

    .logo > div:last-child {
        display: none;
    }

    .menu span {
        display: none;
    }

    .menu {
        text-align: center;
        padding: 14px 5px;
        font-size: 18px;
    }

    .sidebar-bottom {
        display: none;
    }

    .main {
        margin-left: 70px;
        width: calc(100% - 70px);
    }

    .topbar {
        padding: 20px;
    }

    .page {
        padding: 20px;
    }

    .cards {
        grid-template-columns: 1fr;
    }

    .cto-grid {
        grid-template-columns: 1fr;
    }

    .clients-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-group.full {
        grid-column: auto;
    }

    .modal-overlay {
        padding: 10px;
    }
}

/* =========================================
   FORMULÁRIO DE EDIÇÃO DE CLIENTE
   ========================================= */

.ficha-edicao input,
.ficha-edicao select,
.ficha-edicao textarea {
    box-sizing: border-box;
    width: 100%;
    display: block;
    padding: 12px 14px;
    margin-top: 7px;
    border: 1px solid #d7e0ec;
    border-radius: 8px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    pointer-events: auto;
    user-select: text;
    cursor: text;
}

.ficha-edicao select {
    cursor: pointer;
}

.ficha-edicao textarea {
    min-height: 110px;
    resize: vertical;
}

.ficha-edicao input:focus,
.ficha-edicao select:focus,
.ficha-edicao textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.ficha-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.ficha-form-grid label {
    display: block;
    color: #53657d;
    font-size: 13px;
    font-weight: 600;
}

.ficha-form-grid label.campo-largo {
    grid-column: 1 / -1;
}

.ficha-edicao .ficha-secao {
    margin-bottom: 24px;
}

.ficha-edicao .ficha-rodape {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.btn-salvar {
    border: none;
    border-radius: 8px;
    padding: 11px 18px;
    background: #2563eb;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.btn-salvar:hover {
    background: #1d4ed8;
}

.btn-salvar:active {
    transform: translateY(1px);
}

.btn-editar {
    border: 1px solid #2563eb;
    border-radius: 8px;
    padding: 10px 16px;
    background: #ffffff;
    color: #2563eb;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.btn-editar:hover {
    background: #eff6ff;
}

@media (max-width: 700px) {
    .ficha-form-grid {
        grid-template-columns: 1fr;
    }

    .ficha-form-grid label.campo-largo {
        grid-column: auto;
    }
}


/* =========================================
   CORREÇÃO - MODAL DE EDIÇÃO
   ========================================= */

#modal-editar-cliente {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
}

#modal-editar-cliente .ficha-box {
    position: relative !important;
    z-index: 1000000 !important;
    pointer-events: auto !important;
}

#modal-editar-cliente .ficha-corpo,
#modal-editar-cliente .ficha-secao,
#modal-editar-cliente .ficha-form-grid,
#modal-editar-cliente label {
    pointer-events: auto !important;
}

#modal-editar-cliente input,
#modal-editar-cliente select,
#modal-editar-cliente textarea {
    position: relative !important;
    z-index: 1000001 !important;
    pointer-events: auto !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    cursor: text !important;
}

#modal-editar-cliente select {
    cursor: pointer !important;
}

#modal-editar-cliente input:focus,
#modal-editar-cliente textarea:focus,
#modal-editar-cliente select:focus {
    outline: 2px solid #2563eb !important;
    outline-offset: 1px;
}


/* =========================================================
   MODAL DE EDIÇÃO DE CLIENTE - LAYOUT DEFINITIVO
   ========================================================= */

#modal-editar-cliente {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

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

    padding: 24px !important;
    box-sizing: border-box !important;

    background: rgba(15, 23, 42, 0.58) !important;

    z-index: 999999 !important;

    overflow-y: auto !important;
}

/* Caixa principal */
#modal-editar-cliente .ficha-box {
    position: relative !important;

    width: min(1100px, 100%) !important;
    max-width: 1100px !important;

    max-height: calc(100vh - 48px) !important;

    margin: 0 auto !important;

    background: #ffffff !important;

    border-radius: 16px !important;

    box-shadow:
        0 25px 60px rgba(0,0,0,0.25) !important;

    overflow: hidden !important;

    display: flex !important;
    flex-direction: column !important;

    pointer-events: auto !important;
}

/* Cabeçalho */
#modal-editar-cliente .ficha-topo {
    flex-shrink: 0 !important;

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

    padding: 22px 28px !important;

    border-bottom: 1px solid #e5e7eb !important;

    background: #ffffff !important;
}

/* Corpo com rolagem */
#modal-editar-cliente .ficha-corpo {
    flex: 1 1 auto !important;

    overflow-y: auto !important;

    padding: 24px 28px !important;

    background: #ffffff !important;
}

/* Seções */
#modal-editar-cliente .ficha-secao {
    margin-bottom: 22px !important;

    padding: 20px !important;

    background: #ffffff !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 12px !important;
}

#modal-editar-cliente .ficha-secao h3 {
    margin: 0 0 18px 0 !important;

    font-size: 18px !important;

    color: #0f172a !important;
}

/* GRID DOS CAMPOS */
#modal-editar-cliente .ficha-form-grid {
    display: grid !important;

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 18px !important;

    width: 100% !important;

    box-sizing: border-box !important;
}

/* Labels */
#modal-editar-cliente .ficha-form-grid label {
    display: flex !important;

    flex-direction: column !important;

    gap: 7px !important;

    width: 100% !important;

    min-width: 0 !important;

    color: #475569 !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    box-sizing: border-box !important;
}

/* Campos */
#modal-editar-cliente .ficha-form-grid input,
#modal-editar-cliente .ficha-form-grid select,
#modal-editar-cliente .ficha-form-grid textarea {
    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    height: 44px !important;

    padding: 10px 13px !important;

    box-sizing: border-box !important;

    border: 1px solid #cbd5e1 !important;

    border-radius: 8px !important;

    background: #ffffff !important;

    color: #0f172a !important;

    font-size: 14px !important;

    font-family: inherit !important;

    outline: none !important;

    pointer-events: auto !important;

    cursor: text !important;
}

#modal-editar-cliente .ficha-form-grid select {
    cursor: pointer !important;
}

#modal-editar-cliente .ficha-form-grid textarea {
    height: 100px !important;

    resize: vertical !important;
}

#modal-editar-cliente .ficha-form-grid input:focus,
#modal-editar-cliente .ficha-form-grid select:focus,
#modal-editar-cliente .ficha-form-grid textarea:focus {
    border-color: #2563eb !important;

    box-shadow: 0 0 0 3px rgba(37,99,235,0.12) !important;
}

/* Campos que devem ocupar a linha inteira */
#modal-editar-cliente .campo-full,
#modal-editar-cliente label.campo-full {
    grid-column: 1 / -1 !important;
}

/* Rodapé */
#modal-editar-cliente .ficha-rodape {
    flex-shrink: 0 !important;

    display: flex !important;

    justify-content: flex-end !important;

    align-items: center !important;

    gap: 12px !important;

    padding: 18px 28px !important;

    border-top: 1px solid #e5e7eb !important;

    background: #ffffff !important;
}

/* Botão salvar */
#modal-editar-cliente .btn-salvar {
    border: 0 !important;

    border-radius: 8px !important;

    padding: 12px 22px !important;

    background: #2563eb !important;

    color: white !important;

    font-size: 14px !important;

    font-weight: 700 !important;

    cursor: pointer !important;
}

#modal-editar-cliente .btn-salvar:hover {
    background: #1d4ed8 !important;
}

/* Botão cancelar */
#modal-editar-cliente .btn-cancelar {
    border: 1px solid #cbd5e1 !important;

    border-radius: 8px !important;

    padding: 11px 20px !important;

    background: #ffffff !important;

    color: #334155 !important;

    font-size: 14px !important;

    font-weight: 600 !important;

    cursor: pointer !important;
}

/* Tela pequena */
@media (max-width: 700px) {

    #modal-editar-cliente {
        padding: 10px !important;
    }

    #modal-editar-cliente .ficha-box {
        max-height: calc(100vh - 20px) !important;

        border-radius: 12px !important;
    }

    #modal-editar-cliente .ficha-form-grid {
        grid-template-columns: 1fr !important;
    }

    #modal-editar-cliente .ficha-corpo {
        padding: 16px !important;
    }

    #modal-editar-cliente .ficha-secao {
        padding: 16px !important;
    }

}



/* =========================================================
   EDIÇÃO COMPLETA DO CLIENTE
   ========================================================= */

#modal-editar-cliente {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(15, 23, 42, 0.62);

    box-sizing: border-box;
}


/* Caixa principal */

#modal-editar-cliente .ficha-box {
    width: min(1100px, 96vw);
    max-height: 94vh;

    display: flex;
    flex-direction: column;

    background: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.28);
}


/* Cabeçalho */

#modal-editar-cliente .ficha-topo {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 22px 28px;

    border-bottom: 1px solid #e2e8f0;

    background: #ffffff;
}


/* Corpo com rolagem */

#modal-editar-cliente .ficha-corpo {
    flex: 1 1 auto;

    overflow-y: auto;

    padding: 24px 28px;

    background: #f8fafc;
}


/* Seções */

#modal-editar-cliente .ficha-secao {
    margin-bottom: 22px;

    padding: 20px;

    background: #ffffff;

    border: 1px solid #dbe3ef;

    border-radius: 14px;

    box-sizing: border-box;
}


/* Títulos */

#modal-editar-cliente .ficha-secao h3 {
    margin: 0 0 18px 0;

    font-size: 18px;

    color: #0f172a;
}


/* Grid dos campos */

#modal-editar-cliente .ficha-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}


/* Campo ocupando linha inteira */

#modal-editar-cliente .campo-largo {
    grid-column: 1 / -1;
}


/* Labels */

#modal-editar-cliente .ficha-form-grid label,
#modal-editar-cliente .ficha-secao > label {

    display: flex;

    flex-direction: column;

    gap: 7px;

    min-width: 0;

    font-size: 13px;

    font-weight: 600;

    color: #475569;
}


/* Inputs */

#modal-editar-cliente input,
#modal-editar-cliente select,
#modal-editar-cliente textarea {

    width: 100%;

    box-sizing: border-box;

    padding: 11px 13px;

    border: 1px solid #cbd5e1;

    border-radius: 9px;

    background: #ffffff;

    color: #0f172a;

    font-family: inherit;

    font-size: 14px;

    outline: none;

    transition:
        border-color .15s,
        box-shadow .15s;
}


#modal-editar-cliente input:focus,
#modal-editar-cliente select:focus,
#modal-editar-cliente textarea:focus {

    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.12);
}


/* Textarea */

#modal-editar-cliente textarea {

    resize: vertical;

    min-height: 100px;
}


/* Campos desabilitados */

#modal-editar-cliente input:disabled {

    background: #f1f5f9;

    color: #64748b;

    cursor: not-allowed;
}


/* Rodapé */

#modal-editar-cliente .ficha-rodape {

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 12px;

    padding: 18px 28px;

    border-top: 1px solid #e2e8f0;

    background: #ffffff;
}


/* Botões */

#modal-editar-cliente .btn-fechar,
#modal-editar-cliente .btn-salvar {

    min-height: 42px;

    padding: 0 20px;

    border-radius: 9px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;
}


#modal-editar-cliente .btn-fechar {

    border: 1px solid #cbd5e1;

    background: #ffffff;

    color: #334155;
}


#modal-editar-cliente .btn-salvar {

    border: none;

    background: #2563eb;

    color: #ffffff;
}


#modal-editar-cliente .btn-salvar:hover {

    background: #1d4ed8;
}


/* Aviso quando não existe instalação */

#modal-editar-cliente .ficha-vazio {

    padding: 18px;

    border-radius: 10px;

    background: #f8fafc;

    border: 1px dashed #cbd5e1;

    color: #64748b;

    text-align: center;
}


/* Botão cadastrar instalação */

#modal-editar-cliente .btn-cadastrar-instalacao {

    margin-top: 14px;

    padding: 10px 16px;

    border: none;

    border-radius: 8px;

    background: #2563eb;

    color: #ffffff;

    font-weight: 600;

    cursor: pointer;
}


/* Responsivo */

@media (max-width: 700px) {

    #modal-editar-cliente {
        padding: 8px;
    }

    #modal-editar-cliente .ficha-box {
        width: 100%;
        max-height: 98vh;
        border-radius: 12px;
    }

    #modal-editar-cliente .ficha-corpo {
        padding: 16px;
    }

    #modal-editar-cliente .ficha-form-grid {
        grid-template-columns: 1fr;
    }

    #modal-editar-cliente .campo-largo {
        grid-column: auto;
    }

    #modal-editar-cliente .ficha-rodape {
        padding: 14px 16px;
    }

}



/* =====================================================
   FINANCEIRO
===================================================== */

.financeiro-resumo {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.financeiro-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
    min-height: 120px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.financeiro-card-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.financeiro-card-titulo {
    font-size: 14px;
    color: #64748b;
    font-weight: 600;
}

.financeiro-card-icone {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.financeiro-card-valor {
    font-size: 25px;
    font-weight: 700;
    color: #0f172a;
}

.financeiro-card-receber .financeiro-card-icone {
    background: #dbeafe;
}

.financeiro-card-recebido .financeiro-card-icone {
    background: #dcfce7;
}

.financeiro-card-vencido .financeiro-card-icone {
    background: #fee2e2;
}

.financeiro-card-pendente .financeiro-card-icone {
    background: #fef3c7;
}


/* CABEÇALHO */

.financeiro-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.financeiro-header h2 {
    margin: 0;
    font-size: 24px;
    color: #0f172a;
}

.financeiro-header p {
    margin: 5px 0 0;
    color: #64748b;
}


/* BOTÃO NOVA COBRANÇA */

.btn-nova-cobranca {
    border: none;
    border-radius: 10px;
    padding: 11px 18px;
    background: #2563eb;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.22);
    transition: 0.2s;
}

.btn-nova-cobranca:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}


/* ÁREA DE COBRANÇAS */

.financeiro-lista-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.financeiro-lista-header {
    padding: 18px 20px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.financeiro-lista-header h3 {
    margin: 0;
    font-size: 17px;
    color: #0f172a;
}

.financeiro-lista-header span {
    font-size: 13px;
    color: #64748b;
}


/* TABELA */

.financeiro-table {
    width: 100%;
    border-collapse: collapse;
}

.financeiro-table th {
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 13px 16px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.financeiro-table td {
    padding: 15px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    font-size: 14px;
}

.financeiro-table tbody tr:hover {
    background: #f8fafc;
}

.financeiro-cliente {
    font-weight: 700;
    color: #0f172a;
}

.financeiro-valor {
    font-weight: 700;
    color: #0f172a;
}


/* STATUS */

.financeiro-status {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.financeiro-status-pendente {
    background: #fef3c7;
    color: #92400e;
}

.financeiro-status-pago {
    background: #dcfce7;
    color: #166534;
}

.financeiro-status-vencido {
    background: #fee2e2;
    color: #991b1b;
}

.financeiro-status-cancelado {
    background: #e2e8f0;
    color: #475569;
}


/* ESTADO VAZIO */

.financeiro-vazio {
    padding: 55px 20px;
    text-align: center;
}

.financeiro-vazio-icone {
    font-size: 42px;
    margin-bottom: 12px;
}

.financeiro-vazio h3 {
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 18px;
}

.financeiro-vazio p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}


/* RESPONSIVO */

@media (max-width: 1100px) {

    .financeiro-resumo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 700px) {

    .financeiro-resumo {
        grid-template-columns: 1fr;
    }

    .financeiro-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .financeiro-lista-box {
        overflow-x: auto;
    }

    .financeiro-table {
        min-width: 800px;
    }

}

/* =====================================================
   MODAL DE COBRANÇA
===================================================== */

#modal-cobranca {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.58);
    box-sizing: border-box;
}

#modal-cobranca > div {
    width: min(1060px, 100%);
    max-height: calc(100vh - 48px);
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 25px 70px rgba(15, 23, 42, 0.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Cabeçalho */

#modal-cobranca .modal-header {
    padding: 26px 30px 22px;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
}

#modal-cobranca .modal-header h2 {
    margin: 0;
    font-size: 25px;
    font-weight: 700;
    color: #0f172a;
}

#modal-cobranca .modal-header p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 15px;
}

/* Corpo */

#modal-cobranca .modal-body {
    padding: 26px 30px;
    overflow-y: auto;
}

/* Formulário */

#modal-cobranca .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

#modal-cobranca .form-group {
    min-width: 0;
}

#modal-cobranca .form-group.full,
#modal-cobranca .campo-largo {
    grid-column: 1 / -1;
}

#modal-cobranca label {
    display: block;
    margin-bottom: 8px;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
}

#modal-cobranca input,
#modal-cobranca select,
#modal-cobranca textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font-size: 15px;
    padding: 12px 14px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

#modal-cobranca input,
#modal-cobranca select {
    min-height: 48px;
}

#modal-cobranca textarea {
    min-height: 105px;
    resize: vertical;
}

#modal-cobranca input:focus,
#modal-cobranca select:focus,
#modal-cobranca textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

#modal-cobranca input::placeholder,
#modal-cobranca textarea::placeholder {
    color: #94a3b8;
}

/* Rodapé */

#modal-cobranca .modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 18px 30px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

#modal-cobranca .btn-cancelar {
    min-height: 46px;
    padding: 0 20px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #334155;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

#modal-cobranca .btn-cancelar:hover {
    background: #f1f5f9;
}

#modal-cobranca .btn-salvar {
    min-height: 46px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    background: #2563eb;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.20);
}

#modal-cobranca .btn-salvar:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

#modal-cobranca .form-erro {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 14px;
}

/* Responsivo */

@media (max-width: 760px) {

    #modal-cobranca {
        padding: 12px;
    }

    #modal-cobranca > div {
        max-height: calc(100vh - 24px);
        border-radius: 14px;
    }

    #modal-cobranca .modal-header,
    #modal-cobranca .modal-body,
    #modal-cobranca .modal-footer {
        padding-left: 18px;
        padding-right: 18px;
    }

    #modal-cobranca .form-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    #modal-cobranca .form-group.full,
    #modal-cobranca .campo-largo {
        grid-column: auto;
    }

    #modal-cobranca .modal-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    #modal-cobranca .btn-cancelar,
    #modal-cobranca .btn-salvar {
        width: 100%;
    }
}


/* =====================================================
   BOTÕES — MODAL NOVA COBRANÇA
   ===================================================== */

#modal-cobranca button {
    font-family: inherit;
    cursor: pointer;
}

/* Botão cancelar */
#modal-cobranca button[onclick*="fechar"],
#modal-cobranca button.btn-cancelar {
    min-height: 46px;
    padding: 0 20px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #334155;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
}

/* Hover cancelar */
#modal-cobranca button[onclick*="fechar"]:hover,
#modal-cobranca button.btn-cancelar:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

/* Botão salvar */
#modal-cobranca button[type="submit"],
#modal-cobranca button.btn-salvar {
    min-height: 46px;
    padding: 0 22px;
    border: none;
    border-radius: 10px;
    background: #2563eb;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.20);
}

/* Hover salvar */
#modal-cobranca button[type="submit"]:hover,
#modal-cobranca button.btn-salvar:hover {
    background: #1d4ed8;
    color: #ffffff;
}

/* Espaçamento entre os botões */
#modal-cobranca .modal-footer button {
    margin-left: 8px;
}


#modal-cobranca .btn-salvar {
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    min-width: 180px;
    transition: all 0.2s ease;
}

#modal-cobranca .btn-salvar:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

#modal-cobranca .btn-salvar:active {
    transform: translateY(0);
}


#modal-cobranca .btn-primary {
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    min-width: 180px;
    transition: all 0.2s ease;
}

#modal-cobranca .btn-primary:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

#modal-cobranca .btn-primary:active {
    transform: translateY(0);
}


/* Botão de baixa financeira */
#cobrancas-lista .btn-baixar-cobranca {
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

#cobrancas-lista .btn-baixar-cobranca:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}

#cobrancas-lista .btn-baixar-cobranca:active {
    transform: translateY(0);
}


/* Botão de baixa financeira */
#cobrancas-lista .btn-baixar-cobranca {
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

#cobrancas-lista .btn-baixar-cobranca:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}

#cobrancas-lista .btn-baixar-cobranca:active {
    transform: translateY(0);
}


/* =====================================================
   MODAL BAIXA DE COBRANÇA
===================================================== */

#modal-baixa-cobranca {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.55);
    box-sizing: border-box;
}

#modal-baixa-cobranca .modal {
    width: min(900px, 100%);
    max-height: 90vh;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#modal-baixa-cobranca .modal-header {
    padding: 24px 28px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-shrink: 0;
}

#modal-baixa-cobranca .modal-header h2 {
    margin: 0;
    font-size: 26px;
    color: #0f172a;
}

#modal-baixa-cobranca .modal-header p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 15px;
}

#modal-baixa-cobranca .modal-body {
    padding: 24px 28px;
    overflow-y: auto;
}

#modal-baixa-cobranca .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
}

#modal-baixa-cobranca .form-grid > div {
    min-width: 0;
}

#modal-baixa-cobranca .campo-largo,
#modal-baixa-cobranca .full {
    grid-column: 1 / -1;
}

#modal-baixa-cobranca label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

#modal-baixa-cobranca input,
#modal-baixa-cobranca select,
#modal-baixa-cobranca textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #ffffff;
    color: #0f172a;
    font-size: 15px;
    font-family: inherit;
}

#modal-baixa-cobranca textarea {
    min-height: 100px;
    resize: vertical;
}

#modal-baixa-cobranca input:disabled {
    background: #f8fafc;
    color: #475569;
}

#modal-baixa-cobranca input:focus,
#modal-baixa-cobranca select:focus,
#modal-baixa-cobranca textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

#modal-baixa-cobranca .modal-footer {
    padding: 18px 28px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    background: #ffffff;
}

#modal-baixa-cobranca .btn-secondary,
#modal-baixa-cobranca .btn-primary {
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

#modal-baixa-cobranca .btn-secondary {
    background: #ffffff;
    color: #334155;
    border: 1px solid #cbd5e1;
}

#modal-baixa-cobranca .btn-secondary:hover {
    background: #f8fafc;
}

#modal-baixa-cobranca .btn-primary {
    background: #2563eb;
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
}

#modal-baixa-cobranca .btn-primary:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

#modal-baixa-cobranca .btn-fechar {
    width: 36px;
    height: 36px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

#modal-baixa-cobranca .btn-fechar:hover {
    background: #f1f5f9;
}

@media (max-width: 700px) {

    #modal-baixa-cobranca {
        padding: 12px;
    }

    #modal-baixa-cobranca .modal {
        max-height: 94vh;
        border-radius: 14px;
    }

    #modal-baixa-cobranca .form-grid {
        grid-template-columns: 1fr;
    }

    #modal-baixa-cobranca .campo-largo,
    #modal-baixa-cobranca .full {
        grid-column: auto;
    }

    #modal-baixa-cobranca .modal-header,
    #modal-baixa-cobranca .modal-body,
    #modal-baixa-cobranca .modal-footer {
        padding-left: 18px;
        padding-right: 18px;
    }

    #modal-baixa-cobranca .modal-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    #modal-baixa-cobranca .btn-secondary,
    #modal-baixa-cobranca .btn-primary {
        width: 100%;
    }
}


/* =====================================================
   MODAL EDITAR COBRANÇA
===================================================== */

#modal-editar-cobranca {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.55);
    box-sizing: border-box;
}

#modal-editar-cobranca .modal {
    width: min(900px, 100%);
    max-height: 90vh;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#modal-editar-cobranca .modal-header {
    padding: 24px 28px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-shrink: 0;
}

#modal-editar-cobranca .modal-header h2 {
    margin: 0;
    font-size: 26px;
    color: #0f172a;
}

#modal-editar-cobranca .modal-header p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 15px;
}

#modal-editar-cobranca .modal-body {
    padding: 24px 28px;
    overflow-y: auto;
}

#modal-editar-cobranca .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
}

#modal-editar-cobranca .form-grid > div {
    min-width: 0;
}

#modal-editar-cobranca .campo-largo,
#modal-editar-cobranca .full {
    grid-column: 1 / -1;
}

#modal-editar-cobranca label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

#modal-editar-cobranca input,
#modal-editar-cobranca select,
#modal-editar-cobranca textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #ffffff;
    color: #0f172a;
    font-size: 15px;
    font-family: inherit;
}

#modal-editar-cobranca textarea {
    min-height: 100px;
    resize: vertical;
}

#modal-editar-cobranca input:disabled {
    background: #f8fafc;
    color: #475569;
}

#modal-editar-cobranca input:focus,
#modal-editar-cobranca select:focus,
#modal-editar-cobranca textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

#modal-editar-cobranca .modal-footer {
    padding: 18px 28px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    background: #ffffff;
}

#modal-editar-cobranca .btn-secondary,
#modal-editar-cobranca .btn-primary {
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

#modal-editar-cobranca .btn-secondary {
    background: #ffffff;
    color: #334155;
    border: 1px solid #cbd5e1;
}

#modal-editar-cobranca .btn-secondary:hover {
    background: #f8fafc;
}

#modal-editar-cobranca .btn-primary {
    background: #2563eb;
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
}

#modal-editar-cobranca .btn-primary:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

#modal-editar-cobranca .btn-fechar {
    width: 36px;
    height: 36px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

#modal-editar-cobranca .btn-fechar:hover {
    background: #f1f5f9;
}

@media (max-width: 700px) {

    #modal-editar-cobranca {
        padding: 12px;
    }

    #modal-editar-cobranca .modal {
        max-height: 94vh;
        border-radius: 14px;
    }

    #modal-editar-cobranca .form-grid {
        grid-template-columns: 1fr;
    }

    #modal-editar-cobranca .campo-largo,
    #modal-editar-cobranca .full {
        grid-column: auto;
    }

    #modal-editar-cobranca .modal-header,
    #modal-editar-cobranca .modal-body,
    #modal-editar-cobranca .modal-footer {
        padding-left: 18px;
        padding-right: 18px;
    }

    #modal-editar-cobranca .modal-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    #modal-editar-cobranca .btn-secondary,
    #modal-editar-cobranca .btn-primary {
        width: 100%;
    }
}


/* Botão Editar cobrança */
.btn-editar-cobranca {
    background: #ffffff;
    color: #2563eb;
    border: 1px solid #2563eb;
    border-radius: 8px;
    padding: 9px 16px;
    min-height: 40px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-editar-cobranca:hover {
    background: #2563eb;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.20);
}

.btn-editar-cobranca:active {
    transform: translateY(0);
}

.acoes-cobranca {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* =====================================================
   LOGO RORAILINK
===================================================== */

.sidebar .logo.logo-imagem {
    width: 100%;
    height: 150px;
    padding: 10px 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.sidebar .logo.logo-imagem img {
    display: block;
    width: 100%;
    max-width: 240px;
    max-height: 140px;
    object-fit: contain;
}


.sidebar .logo.logo-imagem {
    width: 100%;
    height: 170px;
    padding: 8px 18px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: transparent;
}

.sidebar .logo.logo-imagem img {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    max-height: 155px;
    object-fit: contain;
    background: transparent;
}


/* =====================================================
   TELA DE LOGIN
===================================================== */

.tela-login {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;
    box-sizing: border-box;

    background: #f1f5f9;
}

.login-box {
    width: min(420px, 100%);

    padding: 38px 36px 28px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 18px;

    box-shadow:
        0 20px 50px rgba(15, 23, 42, 0.12);
}

.login-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 18px;
}

.login-logo img {
    display: block;

    width: 220px;
    max-width: 100%;
    height: auto;

    object-fit: contain;
}

.login-titulo {
    text-align: center;
    margin-bottom: 28px;
}

.login-titulo h1 {
    margin: 0;

    color: #0f172a;

    font-size: 25px;
    font-weight: 700;
}

.login-titulo p {
    margin: 7px 0 0;

    color: #64748b;

    font-size: 14px;
}

.login-campo {
    margin-bottom: 18px;
}

.login-campo label {
    display: block;

    margin-bottom: 7px;

    color: #334155;

    font-size: 14px;
    font-weight: 600;
}

.login-campo input {
    width: 100%;
    height: 46px;

    padding: 0 13px;

    box-sizing: border-box;

    border: 1px solid #cbd5e1;
    border-radius: 9px;

    background: #ffffff;

    color: #0f172a;

    font-size: 15px;

    outline: none;
}

.login-campo input:focus {
    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.12);
}

.login-senha-box {
    position: relative;
}

.login-senha-box input {
    padding-right: 48px;
}

#btn-mostrar-senha {
    position: absolute;

    right: 8px;
    top: 50%;

    width: 34px;
    height: 34px;

    transform: translateY(-50%);

    border: none;
    border-radius: 7px;

    background: transparent;

    cursor: pointer;

    font-size: 16px;
}

#btn-mostrar-senha:hover {
    background: #f1f5f9;
}

.btn-login {
    width: 100%;
    height: 46px;

    margin-top: 5px;

    border: none;
    border-radius: 9px;

    background: #2563eb;
    color: #ffffff;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;
}

.btn-login:hover {
    background: #1d4ed8;

    transform: translateY(-1px);

    box-shadow:
        0 5px 14px rgba(37, 99, 235, 0.22);
}

.btn-login:disabled {
    opacity: 0.65;
    cursor: wait;
    transform: none;
}

.login-erro {
    margin-bottom: 15px;

    padding: 11px 13px;

    border: 1px solid #fecaca;
    border-radius: 8px;

    background: #fef2f2;

    color: #b91c1c;

    font-size: 13px;
}

.login-rodape {
    margin-top: 25px;

    text-align: center;

    color: #94a3b8;

    font-size: 12px;
}

@media (max-width: 480px) {

    .tela-login {
        padding: 15px;
    }

    .login-box {
        padding: 30px 22px 24px;
    }

    .login-logo img {
        width: 190px;
    }

}


/* =====================================================
   BOTÃO SAIR
===================================================== */

.sidebar-bottom .btn-sair {
    width: 100%;
    margin-top: 12px;
    padding: 9px 12px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;

    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;
}

.sidebar-bottom .btn-sair:hover {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.35);
}

.sidebar-bottom .btn-sair:active {
    transform: translateY(1px);
}


/* =====================================================
   CHAMADOS
===================================================== */

.chamados-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:24px;
}

.chamados-header h2 {
    margin:0;
    color:#0f172a;
    font-size:28px;
}

.chamados-header p {
    margin:6px 0 0;
    color:#64748b;
}

.btn-atualizar-chamados {
    border:1px solid #dbe3ef;
    background:#fff;
    color:#334155;
    padding:11px 18px;
    border-radius:10px;
    cursor:pointer;
    font-weight:700;
}

.chamados-resumo {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:14px;
    margin-bottom:18px;
}

.chamado-filtro {
    border:1px solid #e2e8f0;
    background:#fff;
    border-radius:14px;
    padding:16px;
    text-align:left;
    cursor:pointer;
}

.chamado-filtro.ativo {
    border-color:#2563eb;
    box-shadow:0 0 0 2px rgba(37,99,235,.08);
}

.chamado-filtro strong {
    display:block;
    font-size:25px;
    color:#0f172a;
}

.chamado-filtro span {
    display:block;
    margin-top:4px;
    color:#64748b;
    font-size:12px;
}

.chamados-toolbar {
    display:flex;
    gap:12px;
    margin-bottom:18px;
}

.chamados-toolbar input,
.chamados-toolbar select {
    height:44px;
    border:1px solid #dbe3ef;
    border-radius:10px;
    padding:0 14px;
    background:#fff;
    font-size:14px;
}

.chamados-toolbar input {
    flex:1;
}

.chamados-table-wrapper {
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:16px;
    overflow-x:auto;
}

.chamados-table {
    width:100%;
    border-collapse:collapse;
}

.chamados-table th {
    background:#f8fafc;
    color:#64748b;
    font-size:12px;
    text-transform:uppercase;
    padding:14px 16px;
    text-align:left;
}

.chamados-table td {
    padding:16px;
    border-top:1px solid #eef2f7;
    color:#334155;
    font-size:13px;
    vertical-align:middle;
}

.chamados-table tbody tr:hover {
    background:#f8fbff;
}

.chamado-cliente strong,
.chamado-assunto strong {
    display:block;
    color:#0f172a;
}

.chamado-cliente small,
.chamado-assunto span {
    display:block;
    margin-top:4px;
    color:#64748b;
}

.chamado-assunto span {
    max-width:280px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.chamado-status,
.chamado-prioridade {
    display:inline-flex;
    align-items:center;
    padding:5px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
}

.chamado-status-aberto {
    background:#fff7ed;
    color:#c2410c;
}

.chamado-status-atendimento {
    background:#eff6ff;
    color:#1d4ed8;
}

.chamado-status-resolvido {
    background:#ecfdf5;
    color:#047857;
}

.chamado-status-cancelado {
    background:#f1f5f9;
    color:#64748b;
}

.chamado-prioridade-baixa {
    background:#f0fdf4;
    color:#15803d;
}

.chamado-prioridade-normal {
    background:#eff6ff;
    color:#1d4ed8;
}

.chamado-prioridade-alta {
    background:#fff7ed;
    color:#c2410c;
}

.chamado-prioridade-urgente {
    background:#fef2f2;
    color:#b91c1c;
}

.chamado-acoes {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.chamado-acoes button {
    border:0;
    padding:7px 10px;
    border-radius:8px;
    cursor:pointer;
    font-size:11px;
    font-weight:700;
}

.btn-chamado-atender {
    background:#eff6ff;
    color:#1d4ed8;
}

.btn-chamado-resolver {
    background:#ecfdf5;
    color:#047857;
}

.btn-chamado-cancelar {
    background:#fef2f2;
    color:#b91c1c;
}

.btn-chamado-detalhes {
    background:#f1f5f9;
    color:#334155;
}

.chamados-vazio {
    padding:60px 20px;
    text-align:center;
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:16px;
}

.chamados-vazio-icone {
    font-size:42px;
}

.chamados-vazio h3 {
    margin:12px 0 0;
    color:#0f172a;
}

.chamados-vazio p {
    margin:8px 0 0;
    color:#64748b;
}

.modal-chamado-overlay {
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.58);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:999999;
}

.modal-chamado-box {
    width:min(760px,95vw);
    max-height:90vh;
    overflow-y:auto;
    background:#fff;
    border-radius:18px;
    box-shadow:0 25px 70px rgba(15,23,42,.28);
}

.modal-chamado-header {
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:22px 24px;
    border-bottom:1px solid #e2e8f0;
}

.modal-chamado-header small {
    color:#64748b;
}

.modal-chamado-header h2 {
    margin:5px 0 0;
    color:#0f172a;
}

.modal-chamado-fechar {
    width:38px;
    height:38px;
    border:0;
    border-radius:50%;
    background:#f1f5f9;
    cursor:pointer;
    font-size:24px;
}

.modal-chamado-corpo {
    padding:24px;
}

.modal-chamado-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

.modal-chamado-grid > div {
    padding:14px;
    border-radius:10px;
    background:#f8fafc;
}

.modal-chamado-grid span,
.modal-chamado-descricao span {
    display:block;
    font-size:11px;
    color:#64748b;
    margin-bottom:5px;
}

.modal-chamado-grid strong {
    color:#0f172a;
}

.modal-chamado-descricao {
    margin-top:16px;
    padding:16px;
    border-radius:12px;
    background:#f8fafc;
}

.modal-chamado-descricao p {
    margin:0;
    color:#334155;
    line-height:1.6;
    white-space:pre-wrap;
}

.modal-chamado-footer {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    padding:18px 24px;
    border-top:1px solid #e2e8f0;
}

@media (max-width:900px) {

    .chamados-resumo {
        grid-template-columns:repeat(2,1fr);
    }

    .chamados-toolbar {
        flex-direction:column;
    }

    .modal-chamado-grid {
        grid-template-columns:1fr;
    }
}

/* =====================================================
   CHAT DO CHAMADO
===================================================== */

.chat-admin {
    margin-top: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    background: #f8fafc;
}

.chat-admin-header {
    padding: 16px 18px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.chat-admin-header strong {
    display: block;
    color: #0f172a;
    font-size: 14px;
}

.chat-admin-header small {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
}

.chat-mensagens-admin {
    height: 330px;
    overflow-y: auto;
    padding: 18px;
}

.chat-loading,
.chat-vazio,
.chat-erro {
    padding: 30px;
    text-align: center;
    color: #64748b;
    font-size: 13px;
}

.chat-msg-row {
    display: flex;
    margin-bottom: 12px;
}

.chat-msg-admin {
    justify-content: flex-end;
}

.chat-msg-cliente {
    justify-content: flex-start;
}

.chat-msg-bubble {
    max-width: 78%;
    padding: 11px 14px;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}

.chat-msg-admin .chat-msg-bubble {
    background: #2563eb;
    color: #ffffff;
    border-bottom-right-radius: 4px;
}

.chat-msg-cliente .chat-msg-bubble {
    background: #ffffff;
    color: #334155;
    border: 1px solid #e2e8f0;
    border-bottom-left-radius: 4px;
}

.chat-msg-nome {
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 5px;
}

.chat-msg-texto {
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.chat-msg-data {
    margin-top: 6px;
    font-size: 10px;
    opacity: .75;
}

.chat-compose {
    padding: 14px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
}

.chat-compose textarea {
    width: 100%;
    resize: vertical;
    min-height: 78px;
    box-sizing: border-box;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    padding: 12px;
    font: inherit;
    outline: none;
}

.chat-compose textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.08);
}

.btn-chat-enviar {
    margin-top: 10px;
    border: 0;
    border-radius: 10px;
    background: #2563eb;
    color: #ffffff;
    padding: 10px 16px;
    font-weight: 700;
    cursor: pointer;
}

.btn-chat-enviar:hover {
    background: #1d4ed8;
}

.btn-chat-enviar:disabled {
    opacity: .6;
    cursor: not-allowed;
}


/* =====================================================
   MODAL NOVA CTO
===================================================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 9999;
}

.modal-content {
    width: 100%;
    max-width: 760px;
    max-height: 90vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.20);
    padding: 24px;
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.modal-header h2 {
    margin: 0;
    font-size: 22px;
}

.modal-header p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 14px;
}

.modal-close {
    border: 0;
    background: #f1f5f9;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 25px;
    cursor: pointer;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

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

.form-group label {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    padding: 11px 12px;
    font-size: 14px;
    background: #ffffff;
    color: #0f172a;
    outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.10);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

.btn-primary,
.btn-secondary {
    border: 0;
    border-radius: 9px;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.btn-primary {
    background: #2563eb;
    color: #ffffff;
}

.btn-primary:hover {
    background: #1d4ed8;
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary {
    background: #e2e8f0;
    color: #334155;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}


@media (max-width: 700px) {

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-full {
        grid-column: auto;
    }

    .section-header {
        flex-direction: column;
        align-items: stretch;
    }

    .modal-content {
        padding: 18px;
    }

}

/* =========================================================
   MODAL NOVO VENDEDOR - CORREÇÃO DEFINITIVA
   ========================================================= */

#modal-novo-vendedor {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    box-sizing: border-box !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 30px !important;
    background: rgba(15, 23, 42, 0.55) !important;
    z-index: 1000000 !important;
    overflow-y: auto !important;
}

#modal-novo-vendedor.show {
    display: flex !important;
}

#modal-novo-vendedor .modal {
    width: 100% !important;
    max-width: 900px !important;
    margin: 20px auto !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25) !important;
}


/* =========================================================
   AJUSTE VISUAL - MODAL NOVO VENDEDOR
   ========================================================= */

#modal-novo-vendedor .modal {
    width: 100% !important;
    max-width: 820px !important;
    margin: 20px auto !important;
}

#modal-novo-vendedor .modal-header {
    padding: 22px 28px !important;
}

#modal-novo-vendedor form {
    padding: 22px 28px 24px !important;
}

#modal-novo-vendedor .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 20px !important;
}

#modal-novo-vendedor .modal-footer {
    margin-top: 20px !important;
}

@media (max-width: 700px) {

    #modal-novo-vendedor {
        padding: 15px !important;
    }

    #modal-novo-vendedor .modal {
        max-width: 100% !important;
        margin: 10px auto !important;
    }

    #modal-novo-vendedor .form-grid {
        grid-template-columns: 1fr !important;
    }

}



/* =========================================================
   MODAL NOVO CLIENTE - CORREÇÃO DEFINITIVA
   ========================================================= */

#modal-cliente {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    display: none;
    align-items: center !important;
    justify-content: center !important;

    padding: 20px !important;
    box-sizing: border-box !important;

    background: rgba(15, 23, 42, 0.58) !important;

    z-index: 999999 !important;

    overflow: hidden !important;
}

#modal-cliente.show {
    display: flex !important;
}

#modal-cliente .modal {
    position: relative !important;

    width: min(950px, 100%) !important;
    max-width: 950px !important;

    height: min(90vh, 850px) !important;
    max-height: 90vh !important;

    margin: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    background: #ffffff !important;

    border-radius: 16px !important;

    overflow: hidden !important;

    box-shadow:
        0 25px 60px rgba(0,0,0,0.25) !important;
}

/* Cabeçalho fica sempre visível */
#modal-cliente .modal-header {
    flex: 0 0 auto !important;

    position: relative !important;

    padding: 22px 24px !important;

    background: #ffffff !important;

    border-bottom: 1px solid #e5e7eb !important;
}

/* Botão fechar */
#modal-cliente .close-button {
    position: absolute !important;

    top: 18px !important;
    right: 20px !important;

    width: 42px !important;
    height: 42px !important;

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

    border: none !important;
    background: transparent !important;

    color: #64748b !important;

    font-size: 30px !important;
    line-height: 1 !important;

    cursor: pointer !important;

    z-index: 10 !important;
}

#modal-cliente .close-button:hover {
    color: #0f172a !important;
    background: #f1f5f9 !important;

    border-radius: 8px !important;
}

/* Formulário ocupa o restante */
#modal-cliente #form-cliente {
    flex: 1 1 auto !important;

    min-height: 0 !important;

    overflow-y: auto !important;

    overflow-x: hidden !important;
}

/* Rodapé sempre acessível */
#modal-cliente .modal-footer {
    flex: 0 0 auto !important;

    background: #ffffff !important;

    border-top: 1px solid #e5e7eb !important;

    padding: 16px 24px !important;

    position: relative !important;

    z-index: 5 !important;
}


/* Em telas menores */
@media (max-width: 700px) {

    #modal-cliente {
        padding: 10px !important;
    }

    #modal-cliente .modal {
        width: 100% !important;
        height: 95vh !important;
        max-height: 95vh !important;

        border-radius: 12px !important;
    }

}


/* =====================================================
   FILA DE INSTALAÇÕES
===================================================== */

.instalacoes-dashboard {
    display: flex;
    flex-direction: column;
    gap: 22px;
}


/* =========================
   RESUMO
========================= */

.instalacoes-resumo {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.instalacoes-resumo-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.instalacoes-resumo-card span {
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
}

.instalacoes-resumo-card strong {
    color: #0f172a;
    font-size: 28px;
    line-height: 1;
}


/* =========================
   BLOCOS
========================= */

.instalacoes-bloco {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
}

.instalacoes-bloco-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.instalacoes-bloco-header h3 {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
}

.instalacoes-bloco-header p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 13px;
}


/* =========================
   CARD PENDENTE
========================= */

.instalacao-pendente-card {
    border: 1px solid #fed7aa;
    border-left: 5px solid #f97316;
    background: #fffaf5;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 14px;
}

.instalacao-pendente-card:last-child {
    margin-bottom: 0;
}

.instalacao-pendente-topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
}

.instalacao-pendente-topo h3 {
    margin: 8px 0 0;
    color: #0f172a;
    font-size: 20px;
}

.instalacao-pendente-topo > strong {
    color: #64748b;
    font-size: 13px;
    white-space: nowrap;
}

.instalacao-pendente-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffedd5;
    color: #c2410c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .3px;
}


/* =========================
   DADOS DA INSTALAÇÃO
========================= */

.instalacao-pendente-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.instalacao-pendente-grid > div {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    padding: 12px 14px;
}

.instalacao-pendente-grid span {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 5px;
}

.instalacao-pendente-grid strong {
    display: block;
    color: #0f172a;
    font-size: 14px;
}


/* =========================
   AÇÕES
========================= */

.instalacao-pendente-acoes {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.instalacao-pendente-acoes .btn-primary {
    border: none;
    border-radius: 8px;
    padding: 11px 18px;
    background: #2563eb;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
}

.instalacao-pendente-acoes .btn-primary:hover {
    background: #1d4ed8;
}


/* =========================
   NENHUMA INSTALAÇÃO
========================= */

.instalacoes-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 45px 20px;
    text-align: center;
    color: #64748b;
}

.instalacoes-vazio-icone {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 12px;
}

.instalacoes-vazio strong {
    color: #334155;
    font-size: 15px;
}

.instalacoes-vazio span {
    margin-top: 5px;
    font-size: 13px;
}


/* =========================
   RESPONSIVO
========================= */

@media (max-width: 900px) {

    .instalacoes-resumo {
        grid-template-columns: 1fr;
    }

    .instalacao-pendente-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 600px) {

    .instalacoes-bloco {
        padding: 14px;
    }

    .instalacao-pendente-card {
        padding: 15px;
    }

    .instalacao-pendente-topo {
        flex-direction: column;
        gap: 10px;
    }

    .instalacao-pendente-grid {
        grid-template-columns: 1fr;
    }

    .instalacao-pendente-acoes {
        justify-content: stretch;
    }

    .instalacao-pendente-acoes .btn-primary {
        width: 100%;
    }

}


/* =====================================================
   MODAL - CONCLUIR INSTALAÇÃO
===================================================== */

#modal-concluir-instalacao {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background: rgba(15, 23, 42, 0.58);

    overflow-y: auto;
}


#modal-concluir-instalacao .modal-box {
    width: min(100%, 980px);
    max-height: calc(100vh - 48px);

    display: flex;
    flex-direction: column;

    background: #ffffff;

    border-radius: 16px;

    box-shadow:
        0 20px 50px rgba(15, 23, 42, 0.22);

    overflow: hidden;
}


/* CABEÇALHO */

#modal-concluir-instalacao .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 22px 28px;

    border-bottom: 1px solid #e2e8f0;

    background: #ffffff;
}


#modal-concluir-instalacao .modal-header h2 {
    margin: 0;

    font-size: 22px;
    line-height: 1.3;

    font-weight: 700;

    color: #0f172a;
}


#modal-concluir-instalacao .modal-header p {
    margin: 5px 0 0;

    font-size: 14px;

    color: #64748b;
}


#modal-concluir-instalacao .modal-close {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 10px;

    background: #f1f5f9;

    color: #0f172a;

    font-size: 25px;
    line-height: 1;

    cursor: pointer;

    transition: 0.2s;
}


#modal-concluir-instalacao .modal-close:hover {
    background: #e2e8f0;
}


/* CORPO */

#modal-concluir-instalacao .instalacao-ficha {
    padding: 24px 28px;

    overflow-y: auto;
}


/* SEÇÕES */

#modal-concluir-instalacao .instalacao-ficha-secao {
    margin-bottom: 24px;
}


#modal-concluir-instalacao .instalacao-ficha-secao:last-child {
    margin-bottom: 0;
}


#modal-concluir-instalacao .instalacao-ficha-secao h3 {
    margin: 0 0 14px;

    font-size: 16px;

    font-weight: 700;

    color: #0f172a;
}


/* INFORMAÇÕES DO CLIENTE / INFRAESTRUTURA */

#modal-concluir-instalacao .instalacao-ficha-info {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}


#modal-concluir-instalacao .instalacao-ficha-info > div {
    min-width: 0;

    padding: 14px 16px;

    border: 1px solid #e2e8f0;

    border-radius: 10px;

    background: #f8fafc;
}


#modal-concluir-instalacao .instalacao-ficha-info span {
    display: block;

    margin-bottom: 5px;

    font-size: 12px;

    font-weight: 600;

    color: #64748b;
}


#modal-concluir-instalacao .instalacao-ficha-info strong {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 15px;

    color: #0f172a;
}


/* DADOS TÉCNICOS */

#modal-concluir-instalacao .instalacao-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}


#modal-concluir-instalacao .instalacao-form-grid .campo {
    min-width: 0;
}


#modal-concluir-instalacao .instalacao-form-grid .campo-largo {
    grid-column: 1 / -1;
}


#modal-concluir-instalacao .instalacao-form-grid label {
    display: block;

    margin-bottom: 7px;

    font-size: 13px;

    font-weight: 600;

    color: #334155;
}


#modal-concluir-instalacao .instalacao-form-grid input,
#modal-concluir-instalacao .instalacao-form-grid textarea {
    box-sizing: border-box;

    width: 100%;

    border: 1px solid #cbd5e1;

    border-radius: 9px;

    background: #ffffff;

    color: #0f172a;

    font-family: inherit;

    font-size: 14px;

    outline: none;

    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}


#modal-concluir-instalacao .instalacao-form-grid input {
    height: 44px;

    padding: 0 13px;
}


#modal-concluir-instalacao .instalacao-form-grid textarea {
    min-height: 100px;

    padding: 12px 13px;

    resize: vertical;
}


#modal-concluir-instalacao .instalacao-form-grid input::placeholder,
#modal-concluir-instalacao .instalacao-form-grid textarea::placeholder {
    color: #94a3b8;
}


#modal-concluir-instalacao .instalacao-form-grid input:focus,
#modal-concluir-instalacao .instalacao-form-grid textarea:focus {
    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.12);
}


/* RODAPÉ */

#modal-concluir-instalacao .modal-footer {
    display: flex;

    justify-content: flex-end;

    gap: 10px;

    padding: 18px 28px;

    border-top: 1px solid #e2e8f0;

    background: #ffffff;
}


#modal-concluir-instalacao .modal-footer button {
    min-height: 44px;

    padding: 0 20px;

    border-radius: 9px;

    font-family: inherit;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    transition: 0.2s;
}


#modal-concluir-instalacao .modal-footer .btn-secondary {
    border: 1px solid #cbd5e1;

    background: #ffffff;

    color: #334155;
}


#modal-concluir-instalacao .modal-footer .btn-secondary:hover {
    background: #f8fafc;
}


#modal-concluir-instalacao .modal-footer .btn-primary {
    border: 1px solid #2563eb;

    background: #2563eb;

    color: #ffffff;
}


#modal-concluir-instalacao .modal-footer .btn-primary:hover {
    background: #1d4ed8;
}


/* RESPONSIVO */

@media (max-width: 700px) {

    #modal-concluir-instalacao {
        padding: 10px;
    }


    #modal-concluir-instalacao .modal-box {
        width: 100%;

        max-height: calc(100vh - 20px);

        border-radius: 14px;
    }


    #modal-concluir-instalacao .modal-header {
        padding: 18px;
    }


    #modal-concluir-instalacao .instalacao-ficha {
        padding: 18px;
    }


    #modal-concluir-instalacao .instalacao-ficha-info,
    #modal-concluir-instalacao .instalacao-form-grid {
        grid-template-columns: 1fr;
    }


    #modal-concluir-instalacao .instalacao-form-grid .campo-largo {
        grid-column: auto;
    }


    #modal-concluir-instalacao .modal-footer {
        padding: 14px 18px;

        flex-direction: column-reverse;
    }


    #modal-concluir-instalacao .modal-footer button {
        width: 100%;
    }

}



/* =====================================================
   AÇÕES DAS TABELAS
===================================================== */

.acoes-tabela {

    display: flex;

    align-items: center;

    gap: 8px;

    white-space: nowrap;

}


/* Botão EDITAR */

.acoes-tabela .btn-secondary {

    padding: 7px 12px;

    border-radius: 6px;

    border: 1px solid #cbd5e1;

    background: #ffffff;

    color: #334155;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;

}


.acoes-tabela .btn-secondary:hover {

    background: #f1f5f9;

    border-color: #94a3b8;

}


/* Botão EXCLUIR */

.acoes-tabela .btn-danger {

    padding: 7px 12px;

    border-radius: 6px;

    border: 1px solid #fecaca;

    background: #ffffff;

    color: #dc2626;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;

}


.acoes-tabela .btn-danger:hover {

    background: #fef2f2;

    border-color: #fca5a5;

    color: #b91c1c;

}


/* =====================================================
   RESPONSIVO
===================================================== */

@media (max-width: 700px) {

    .acoes-tabela {

        flex-direction: column;

        align-items: stretch;

        gap: 5px;

    }

    .acoes-tabela button {

        width: 100%;

    }

}


/* =========================================
   CENTRALIZAR MODAL DE NOVO/EDITAR PLANO
========================================= */

#modal-novo-plano,
#modal-editar-plano {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 20px !important;

    box-sizing: border-box !important;

    z-index: 9999 !important;
}

/* Caixa do modal */
#modal-novo-plano > div,
#modal-editar-plano > div {
    margin: 0 auto !important;

    position: relative !important;

    max-width: 980px !important;
    width: 100% !important;

    max-height: 90vh !important;

    overflow-y: auto !important;

    box-sizing: border-box !important;
}

/* Responsivo */
@media (max-width: 700px) {

    #modal-novo-plano,
    #modal-editar-plano {
        padding: 12px !important;
    }

    #modal-novo-plano > div,
    #modal-editar-plano > div {
        width: 100% !important;
        max-height: 95vh !important;
    }

}

/* =====================================================
   MODAL DE PLANOS — CONFIGURAÇÃO FINAL
===================================================== */

#modal-plano {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    box-sizing: border-box !important;

    display: none !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 20px !important;

    background: rgba(15, 23, 42, 0.55) !important;

    z-index: 9999999 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#modal-plano.show {
    display: flex !important;
}

/* CAIXA DO MODAL */

#modal-plano > .modal {
    position: relative !important;

    width: 100% !important;
    max-width: 780px !important;

    min-width: 0 !important;

    max-height: calc(100vh - 40px) !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    border-radius: 16px !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.20) !important;
}

/* CABEÇALHO */

#modal-plano .modal-header {
    display: flex !important;

    align-items: flex-start !important;
    justify-content: space-between !important;

    width: 100% !important;

    box-sizing: border-box !important;

    padding: 24px 30px !important;
}

/* FORMULÁRIO */

#modal-plano #form-plano {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    box-sizing: border-box !important;

    padding: 0 30px 24px !important;
}

/* CAMPOS */

#modal-plano .form-grid {
    display: grid !important;

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 18px 24px !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
}

#modal-plano .form-group {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    box-sizing: border-box !important;
}

#modal-plano .form-group label {
    display: block !important;

    width: 100% !important;

    margin-bottom: 7px !important;

    box-sizing: border-box !important;
}

#modal-plano input,
#modal-plano select,
#modal-plano textarea {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    box-sizing: border-box !important;
}

/* RODAPÉ */

#modal-plano .modal-footer {
    display: flex !important;

    justify-content: flex-end !important;
    align-items: center !important;

    gap: 12px !important;

    width: 100% !important;

    box-sizing: border-box !important;

    padding: 24px 0 0 !important;

    margin: 0 !important;
}

/* =====================================================
   TELAS MENORES
===================================================== */

@media screen and (max-width: 800px) {

    #modal-plano {
        padding: 12px !important;
    }

    #modal-plano > .modal {
        width: 100% !important;
        max-width: 100% !important;

        max-height: calc(100vh - 24px) !important;

        border-radius: 14px !important;
    }

    #modal-plano .modal-header {
        padding: 20px !important;
    }

    #modal-plano #form-plano {
        padding: 0 20px 20px !important;
    }

    #modal-plano .form-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    #modal-plano .modal-footer {
        flex-direction: column-reverse !important;
        align-items: stretch !important;

        padding-top: 20px !important;
    }

    #modal-plano .modal-footer button {
        width: 100% !important;
    }
}



/* =====================================================
   RORAILINK SGP
   LOGIN — LAYOUT TECNOLÓGICO
===================================================== */

#tela-login.tela-login {

    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    min-height: 100vh !important;

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

    padding: 30px !important;
    box-sizing: border-box !important;

    overflow-y: auto !important;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(0, 153, 255, .30),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(0, 210, 255, .18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #031126 0%,
            #071d3d 45%,
            #063b73 100%
        ) !important;

    z-index: 999999 !important;

}


/* Grade tecnológica */

#tela-login.tela-login::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .12;

    background-image:
        linear-gradient(
            rgba(255,255,255,.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.05) 1px,
            transparent 1px
        );

    background-size: 42px 42px;

}


/* Brilho de fibra */

#tela-login.tela-login::after {

    content: "";

    position: absolute;

    width: 70vw;
    height: 140px;

    left: -10vw;
    bottom: 4%;

    border-radius: 50%;

    border-top: 3px solid rgba(0, 210, 255, .65);

    box-shadow:
        0 -20px 45px rgba(0, 180, 255, .25),
        0 -45px 80px rgba(0, 100, 255, .15);

    transform: rotate(-10deg);

    opacity: .65;

    pointer-events: none;

}


/* =====================================================
   CARD
===================================================== */

#tela-login .login-box {

    position: relative !important;

    z-index: 10 !important;

    width: 100% !important;

    max-width: 510px !important;

    margin: auto !important;

    padding: 38px 42px 28px !important;

    box-sizing: border-box !important;

    border-radius: 28px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.97),
            rgba(239,247,255,.94)
        ) !important;

    border: 1px solid rgba(255,255,255,.75) !important;

    box-shadow:
        0 30px 90px rgba(0,0,0,.42),
        0 0 50px rgba(0,153,255,.14) !important;

}


/* =====================================================
   MARCA
===================================================== */

#tela-login .login-brand {

    text-align: center;

    margin-bottom: 22px;

}


/* Área da logo */

#tela-login .login-brand-mark {

    width: 190px !important;
    height: 90px !important;

    margin: 0 auto 8px !important;

    padding: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;

    border: 0 !important;

    border-radius: 0 !important;

    box-shadow: none !important;

}


/* Logo */

#tela-login .login-brand-mark img {

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    display: block !important;

}


/* Nome */

#tela-login .login-brand h1 {

    margin: 0 !important;

    color: #0b2342 !important;

    font-size: 31px !important;

    line-height: 1 !important;

    font-weight: 900 !important;

    letter-spacing: -1.2px !important;

}


/* SGP */

#tela-login .login-brand-sgp {

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin-top: 9px !important;

    padding: 5px 22px !important;

    border-radius: 999px !important;

    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            #087cf0,
            #0047d9
        ) !important;

    font-size: 13px !important;

    font-weight: 900 !important;

    letter-spacing: 2px !important;

    box-shadow:
        0 7px 20px rgba(0,91,220,.25) !important;

}


#tela-login .login-brand p {

    margin: 10px 0 0 !important;

    color: #64748b !important;

    font-size: 13px !important;

}


/* =====================================================
   BOAS-VINDAS
===================================================== */

#tela-login .login-welcome {

    margin-bottom: 22px !important;

}


#tela-login .login-welcome h2 {

    margin: 0 !important;

    color: #10233f !important;

    font-size: 22px !important;

    font-weight: 800 !important;

}


#tela-login .login-welcome p {

    margin: 5px 0 0 !important;

    color: #64748b !important;

    font-size: 13px !important;

}


/* =====================================================
   CAMPOS
===================================================== */

#tela-login .login-campo {

    margin-bottom: 17px !important;

}


#tela-login .login-campo label {

    display: block !important;

    margin-bottom: 7px !important;

    color: #253b59 !important;

    font-size: 13px !important;

    font-weight: 800 !important;

}


#tela-login .login-input-wrapper {

    position: relative !important;

    display: flex !important;

    align-items: center !important;

    width: 100% !important;

}


#tela-login .login-input-icon {

    position: absolute !important;

    left: 16px !important;

    z-index: 3 !important;

    font-size: 17px !important;

    opacity: .7 !important;

    pointer-events: none !important;

}


#tela-login .login-input-wrapper input {

    width: 100% !important;

    height: 55px !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    padding: 0 48px !important;

    border: 1px solid #cbd9ea !important;

    border-radius: 13px !important;

    background: #ffffff !important;

    color: #10233f !important;

    font-size: 14px !important;

    outline: none !important;

    transition: .2s ease !important;

}


#tela-login .login-input-wrapper input::placeholder {

    color: #94a3b8 !important;

}


#tela-login .login-input-wrapper input:focus {

    border-color: #087cf0 !important;

    box-shadow:
        0 0 0 4px rgba(8,124,240,.10) !important;

}


/* =====================================================
   MOSTRAR SENHA
===================================================== */

#tela-login .login-senha-box input {

    padding-right: 55px !important;

}


#tela-login #btn-mostrar-senha {

    position: absolute !important;

    right: 7px !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    width: 40px !important;

    height: 40px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    border: 0 !important;

    border-radius: 10px !important;

    background: transparent !important;

    cursor: pointer !important;

}


/* =====================================================
   ERRO
===================================================== */

#tela-login .login-erro {

    margin: -2px 0 15px !important;

    padding: 11px 13px !important;

    border-radius: 10px !important;

    border: 1px solid #fecaca !important;

    background: #fff1f2 !important;

    color: #b91c1c !important;

    font-size: 13px !important;

}


/* =====================================================
   BOTÃO
===================================================== */

#tela-login .btn-login {

    width: 100% !important;

    height: 56px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 10px !important;

    border: 0 !important;

    border-radius: 13px !important;

    background:
        linear-gradient(
            135deg,
            #087cf0 0%,
            #0754e8 55%,
            #003ecb 100%
        ) !important;

    color: white !important;

    font-size: 14px !important;

    font-weight: 900 !important;

    text-transform: none !important;

    cursor: pointer !important;

    box-shadow:
        0 12px 28px rgba(0,91,220,.30) !important;

    transition: .2s ease !important;

}


#tela-login .btn-login:hover {

    transform: translateY(-2px) !important;

    box-shadow:
        0 17px 35px rgba(0,91,220,.38) !important;

}


#tela-login .btn-login:active {

    transform: translateY(0) !important;

}


#tela-login .btn-login:disabled {

    opacity: .65 !important;

    cursor: wait !important;

}


#tela-login .btn-login-icon {

    width: 27px !important;
    height: 27px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    background: rgba(255,255,255,.18) !important;

    font-size: 19px !important;

}


/* =====================================================
   SEGURANÇA
===================================================== */

#tela-login .login-security {

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;

    margin-top: 20px !important;

    color: #31506f !important;

    font-size: 11px !important;

}


/* =====================================================
   RODAPÉ
===================================================== */

#tela-login .login-rodape {

    margin-top: 19px !important;

    padding-top: 17px !important;

    border-top: 1px solid #dce6f1 !important;

    text-align: center !important;

    color: #8091a7 !important;

    font-size: 11px !important;

}


/* =====================================================
   RESPONSIVO
===================================================== */

@media (max-width: 650px) {

    #tela-login.tela-login {

        padding: 16px !important;

    }

    #tela-login .login-box {

        max-width: 440px !important;

        padding: 30px 24px 23px !important;

        border-radius: 22px !important;

    }

    #tela-login .login-brand-mark {

        width: 155px !important;
        height: 75px !important;

    }

    #tela-login .login-brand h1 {

        font-size: 28px !important;

    }

}


@media (max-height: 700px) {

    #tela-login.tela-login {

        align-items: flex-start !important;

        padding-top: 15px !important;

        padding-bottom: 15px !important;

    }

}


/* =====================================================
   MARCA RORAILINK — LOGIN SGP
===================================================== */

#tela-login .login-brand {
    text-align: center;
    margin-bottom: 28px;
}

#tela-login .login-brand h1 {
    margin: 0 !important;

    font-family: Arial, Helvetica, sans-serif !important;

    font-size: 42px !important;
    line-height: 1 !important;

    font-weight: 900 !important;
    letter-spacing: -2px !important;

    background: linear-gradient(
        135deg,
        #071d3d 10%,
        #087cf0 55%,
        #00b7ff 100%
    ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;

    -webkit-text-fill-color: transparent !important;

    text-shadow: 0 5px 18px rgba(8,124,240,.10);
}

#tela-login .login-brand h1::after {
    content: "";
    display: block;

    width: 58px;
    height: 4px;

    margin: 10px auto 0;

    border-radius: 20px;

    background: linear-gradient(
        90deg,
        #087cf0,
        #00c6ff
    );

    box-shadow:
        0 0 12px rgba(0,198,255,.35);
}

#tela-login .login-brand-sgp {
    margin-top: 13px !important;
}

@media (max-width: 600px) {

    #tela-login .login-brand h1 {
        font-size: 36px !important;
    }

}

/* ============================================================
   FICHA DO TÉCNICO - NOVO VISUAL
   ============================================================ */

#modalAcompanhamentoTecnico {
    padding: 20px !important;
    backdrop-filter: blur(3px);
    background: rgba(15, 23, 42, 0.58) !important;
}

#modalAcompanhamentoTecnico .modal-content {
    width: min(1180px, 96vw) !important;
    max-width: 1180px !important;
    max-height: 94vh !important;

    padding: 28px 30px !important;

    border-radius: 20px !important;

    background: #ffffff !important;

    box-shadow:
        0 25px 70px rgba(15, 23, 42, 0.22),
        0 8px 25px rgba(15, 23, 42, 0.10) !important;

    overflow-y: auto !important;
}

/* ------------------------------------------------------------
   CABEÇALHO
------------------------------------------------------------ */

#modalAcompanhamentoTecnico .modal-header {
    padding-bottom: 20px !important;
    margin-bottom: 22px !important;

    border-bottom: 1px solid #e2e8f0 !important;
}

#modalAcompanhamentoTecnico .modal-header h2 {
    color: #172033 !important;

    font-size: 25px !important;
    font-weight: 800 !important;

    letter-spacing: -0.4px;
}

#modalAcompanhamentoTecnico .modal-header p {
    color: #64748b !important;

    font-size: 14px !important;

    margin-top: 5px !important;
}

#modalAcompanhamentoTecnico .modal-close {
    width: 44px !important;
    height: 44px !important;

    border-radius: 12px !important;

    background: #f1f5f9 !important;

    color: #0f172a !important;

    font-size: 26px !important;

    transition:
        background .2s ease,
        transform .2s ease !important;
}

#modalAcompanhamentoTecnico .modal-close:hover {
    background: #e2e8f0 !important;

    transform: scale(1.05);
}

/* ------------------------------------------------------------
   CARDS DE RESUMO
------------------------------------------------------------ */

#modalAcompanhamentoTecnico .modal-content > div:nth-of-type(2) {
    display: grid !important;

    grid-template-columns:
        repeat(5, minmax(0, 1fr)) !important;

    gap: 14px !important;

    margin: 0 0 28px 0 !important;
}

#modalAcompanhamentoTecnico .card {
    min-height: 88px;

    padding: 17px 18px !important;

    border:
        1px solid #e2e8f0 !important;

    border-radius: 14px !important;

    background: #ffffff !important;

    box-shadow:
        0 2px 6px rgba(15, 23, 42, 0.04) !important;

    display: flex;
    flex-direction: column;
    justify-content: center;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

#modalAcompanhamentoTecnico .card:hover {
    transform: translateY(-2px);

    border-color: #cbd5e1 !important;

    box-shadow:
        0 7px 18px rgba(15, 23, 42, 0.08) !important;
}

#modalAcompanhamentoTecnico .card small {
    display: block;

    margin-bottom: 7px !important;

    color: #64748b !important;

    font-size: 13px !important;

    font-weight: 600 !important;
}

#modalAcompanhamentoTecnico .card strong {
    color: #172033 !important;

    font-size: 25px !important;

    line-height: 1.1 !important;

    font-weight: 800 !important;
}

/* ------------------------------------------------------------
   STATUS
------------------------------------------------------------ */

#modalAcompanhamentoTecnico .status-tecnico {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    width: fit-content;

    min-height: 32px;

    padding: 5px 11px !important;

    border-radius: 999px !important;

    font-size: 12px !important;

    font-weight: 800 !important;

    letter-spacing: .2px;
}

#modalAcompanhamentoTecnico .status-tecnico.disponivel {
    background: #dcfce7 !important;
    color: #15803d !important;
}

#modalAcompanhamentoTecnico .status-tecnico.em-campo {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
}

#modalAcompanhamentoTecnico .status-tecnico.agendado {
    background: #fef3c7 !important;
    color: #b45309 !important;
}

#modalAcompanhamentoTecnico .status-tecnico.pendente {
    background: #fee2e2 !important;
    color: #b91c1c !important;
}

#modalAcompanhamentoTecnico .status-tecnico.finalizada {
    background: #dcfce7 !important;
    color: #15803d !important;
}

#modalAcompanhamentoTecnico .status-tecnico.cancelada {
    background: #f1f5f9 !important;
    color: #475569 !important;
}

/* ------------------------------------------------------------
   ATIVIDADE ATUAL
------------------------------------------------------------ */

#modalAcompanhamentoTecnico .modal-content > div {
    box-sizing: border-box;
}

#modalAcompanhamentoTecnico h3 {
    color: #172033 !important;

    font-weight: 800 !important;

    letter-spacing: -.2px;
}

#modalAcompanhamentoTecnico small {
    color: #64748b;
}

/* Destaque da atividade atual */

#modalAcompanhamentoTecnico [style*="border:2px solid #2563eb"] {
    border:
        1px solid #bfdbfe !important;

    border-left:
        4px solid #2563eb !important;

    background:
        linear-gradient(
            135deg,
            #eff6ff 0%,
            #ffffff 75%
        ) !important;

    border-radius: 16px !important;

    padding: 22px !important;

    box-shadow:
        0 5px 18px rgba(37, 99, 235, .08);
}

/* ------------------------------------------------------------
   CARDS DAS ATIVIDADES
------------------------------------------------------------ */

#modalAcompanhamentoTecnico
    [style*="border:1px solid #e2e8f0"] {

    border:
        1px solid #e2e8f0 !important;

    border-radius: 16px !important;

    background: #ffffff !important;

    box-shadow:
        0 3px 12px rgba(15, 23, 42, .045) !important;

    transition:
        box-shadow .2s ease,
        transform .2s ease,
        border-color .2s ease;
}

#modalAcompanhamentoTecnico
    [style*="border:1px solid #e2e8f0"]:hover {

    border-color: #cbd5e1 !important;

    box-shadow:
        0 8px 22px rgba(15, 23, 42, .08) !important;
}

/* Informações da instalação */

#modalAcompanhamentoTecnico
    [style*="border:1px solid #e2e8f0"]
    > div {

    color: #334155;
}

#modalAcompanhamentoTecnico
    [style*="border:1px solid #e2e8f0"]
    strong {

    display: block;

    margin-top: 5px;

    color: #172033 !important;

    font-size: 15px;

    line-height: 1.4;
}

#modalAcompanhamentoTecnico
    [style*="border:1px solid #e2e8f0"]
    small {

    font-size: 12px;

    font-weight: 600;

    color: #64748b !important;

    text-transform: uppercase;

    letter-spacing: .3px;
}

/* ------------------------------------------------------------
   MEDIÇÕES
------------------------------------------------------------ */

#modalAcompanhamentoTecnico
    [style*="background:#f8fafc"] {

    border:
        1px solid #e2e8f0;

    background: #f8fafc !important;

    border-radius: 12px !important;

    color: #334155;
}

#modalAcompanhamentoTecnico
    [style*="background:#f8fafc"] small {
    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .3px;
}

/* ------------------------------------------------------------
   TÍTULO DO HISTÓRICO
------------------------------------------------------------ */

#modalAcompanhamentoTecnico
    h3 + p {

    color: #64748b !important;

    font-size: 14px !important;
}

/* ------------------------------------------------------------
   BOTÃO FECHAR
------------------------------------------------------------ */

#modalAcompanhamentoTecnico
    .btn-secondary {

    min-height: 42px;

    padding: 0 20px !important;

    border-radius: 10px !important;

    font-weight: 700 !important;

    transition:
        background .2s ease,
        transform .2s ease;
}

#modalAcompanhamentoTecnico
    .btn-secondary:hover {

    transform: translateY(-1px);
}

/* ------------------------------------------------------------
   SCROLLBAR
------------------------------------------------------------ */

#modalAcompanhamentoTecnico
    .modal-content::-webkit-scrollbar {

    width: 8px;
}

#modalAcompanhamentoTecnico
    .modal-content::-webkit-scrollbar-track {

    background: transparent;
}

#modalAcompanhamentoTecnico
    .modal-content::-webkit-scrollbar-thumb {

    background: #cbd5e1;

    border-radius: 20px;
}

#modalAcompanhamentoTecnico
    .modal-content::-webkit-scrollbar-thumb:hover {

    background: #94a3b8;
}

/* ------------------------------------------------------------
   RESPONSIVIDADE
------------------------------------------------------------ */

@media (max-width: 1000px) {

    #modalAcompanhamentoTecnico
        .modal-content > div:nth-of-type(2) {

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 700px) {

    #modalAcompanhamentoTecnico {
        padding: 8px !important;
    }

    #modalAcompanhamentoTecnico
        .modal-content {

        width: 100% !important;

        max-width: none !important;

        max-height: 96vh !important;

        padding: 20px 16px !important;

        border-radius: 16px !important;
    }

    #modalAcompanhamentoTecnico
        .modal-content > div:nth-of-type(2) {

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;
    }

    #modalAcompanhamentoTecnico .card {
        min-height: 76px;

        padding: 13px !important;
    }

    #modalAcompanhamentoTecnico .card strong {
        font-size: 21px !important;
    }

    #modalAcompanhamentoTecnico .modal-header h2 {
        font-size: 21px !important;
    }
}

@media (max-width: 430px) {

    #modalAcompanhamentoTecnico
        .modal-content > div:nth-of-type(2) {

        grid-template-columns:
            1fr !important;
    }

    #modalAcompanhamentoTecnico .modal-header {
        align-items: flex-start !important;
    }

    #modalAcompanhamentoTecnico
        [style*="grid-template-columns"] {

        grid-template-columns:
            1fr !important;
    }
}


/* ============================================================
   RORAILINK SGP
   DESPACHO TÉCNICO / GANTT
============================================================ */

.despacho-tecnico {
    width: 100%;
    margin-top: 24px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}

.despacho-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border-bottom: 1px solid #eef0f3;
    background: #ffffff;
}

.despacho-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #172033;
}

.despacho-header p {
    margin: 6px 0 0;
    color: #7b8495;
    font-size: 13px;
}

.despacho-controles {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.despacho-controles input,
.despacho-controles select {
    height: 38px;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    padding: 0 11px;
    background: #ffffff;
    color: #273142;
    font-size: 13px;
    outline: none;
}

.despacho-controles input:focus,
.despacho-controles select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.despacho-legenda {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    padding: 13px 24px;
    border-bottom: 1px solid #eef0f3;
    background: #fafbfc;
}

.despacho-legenda span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #667085;
    font-size: 12px;
    font-weight: 600;
}

.despacho-legenda-cor {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.despacho-legenda-cor.agendada {
    background: #f59e0b;
}

.despacho-legenda-cor.campo {
    background: #2563eb;
}

.despacho-legenda-cor.pendente {
    background: #ef4444;
}

.despacho-legenda-cor.finalizada {
    background: #16a34a;
}


/* ============================================================
   GANTT
============================================================ */

.despacho-gantt {
    width: 100%;
    overflow-x: auto;
    background: #ffffff;
}

.despacho-gantt-header,
.despacho-gantt-row {
    display: grid;
    grid-template-columns: 220px minmax(900px, 1fr);
    min-width: 1120px;
}

.despacho-gantt-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #f8fafc;
    border-bottom: 1px solid #dfe3e8;
}

.despacho-tecnico-coluna {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-right: 1px solid #e5e7eb;
    color: #667085;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.despacho-horarios {
    display: grid;
    grid-template-columns: repeat(12, minmax(75px, 1fr));
}

.despacho-hora {
    padding: 12px 8px;
    text-align: center;
    border-right: 1px solid #edf0f3;
    color: #7b8495;
    font-size: 11px;
    font-weight: 700;
}

.despacho-gantt-row {
    min-height: 82px;
    border-bottom: 1px solid #edf0f3;
}

.despacho-gantt-row:hover {
    background: #fbfcfe;
}

.despacho-tecnico-info {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 14px;
    border-right: 1px solid #e5e7eb;
    cursor: pointer;
    background: #ffffff;
}

.despacho-tecnico-info:hover {
    background: #f8fafc;
}

.despacho-tecnico-avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eef4ff;
    font-size: 20px;
}

.despacho-tecnico-dados {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.despacho-tecnico-dados strong {
    color: #172033;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.despacho-status {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 800;
}

.despacho-status.disponivel {
    color: #166534;
    background: #dcfce7;
}

.despacho-status.agendada {
    color: #92400e;
    background: #fef3c7;
}

.despacho-status.campo {
    color: #1d4ed8;
    background: #dbeafe;
}

.despacho-status.pendente {
    color: #b91c1c;
    background: #fee2e2;
}


/* ============================================================
   LINHA DO TEMPO
============================================================ */

.despacho-timeline {
    position: relative;
    min-height: 82px;
    background:
        linear-gradient(
            to right,
            transparent calc(100% - 1px),
            #edf0f3 calc(100% - 1px)
        );
    background-size: calc(100% / 12) 100%;
}

.despacho-grid-col {
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(100% / 12);
    border-right: 1px solid #edf0f3;
    pointer-events: none;
}

.despacho-grid-col:nth-child(1) {
    left: 0;
}

.despacho-grid-col:nth-child(2) {
    left: calc(100% / 12);
}

.despacho-grid-col:nth-child(3) {
    left: calc(100% / 12 * 2);
}

.despacho-grid-col:nth-child(4) {
    left: calc(100% / 12 * 3);
}

.despacho-grid-col:nth-child(5) {
    left: calc(100% / 12 * 4);
}

.despacho-grid-col:nth-child(6) {
    left: calc(100% / 12 * 5);
}

.despacho-grid-col:nth-child(7) {
    left: calc(100% / 12 * 6);
}

.despacho-grid-col:nth-child(8) {
    left: calc(100% / 12 * 7);
}

.despacho-grid-col:nth-child(9) {
    left: calc(100% / 12 * 8);
}

.despacho-grid-col:nth-child(10) {
    left: calc(100% / 12 * 9);
}

.despacho-grid-col:nth-child(11) {
    left: calc(100% / 12 * 10);
}

.despacho-grid-col:nth-child(12) {
    left: calc(100% / 12 * 11);
}


/* ============================================================
   ATIVIDADES
============================================================ */

.despacho-atividade {
    position: absolute;
    top: 12px;
    min-width: 70px;
    height: 58px;
    padding: 7px 10px;
    box-sizing: border-box;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    border-left: 4px solid transparent;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.10);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.despacho-atividade:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.16);
    z-index: 10;
}

.despacho-atividade strong,
.despacho-atividade span,
.despacho-atividade small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.despacho-atividade strong {
    font-size: 11px;
    font-weight: 800;
}

.despacho-atividade span {
    font-size: 10px;
    opacity: 0.88;
}

.despacho-atividade small {
    font-size: 9px;
    opacity: 0.75;
}


/* Agendada */

.despacho-atividade.agendada {
    background: #fff7df;
    color: #8a5700;
    border-left-color: #f59e0b;
}


/* Em campo */

.despacho-atividade.campo {
    background: #eaf2ff;
    color: #1d4ed8;
    border-left-color: #2563eb;
}


/* Pendente */

.despacho-atividade.pendente {
    background: #fff0f0;
    color: #b42318;
    border-left-color: #ef4444;
}


/* Finalizada */

.despacho-atividade.finalizada {
    background: #eaf8ef;
    color: #16713a;
    border-left-color: #16a34a;
}


/* ============================================================
   ESTADOS
============================================================ */

.despacho-loading {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #667085;
    font-size: 13px;
}

.despacho-empty {
    min-height: 220px;
    padding: 40px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.despacho-empty-icon {
    font-size: 42px;
    margin-bottom: 10px;
}

.despacho-empty h3 {
    margin: 0;
    color: #172033;
    font-size: 17px;
}

.despacho-empty p {
    margin: 7px 0 18px;
    color: #7b8495;
    font-size: 13px;
}

.despacho-sem-atividades {
    padding: 18px;
    text-align: center;
    color: #8a93a3;
    font-size: 12px;
    border-top: 1px solid #edf0f3;
}


/* ============================================================
   RESPONSIVO
============================================================ */

@media (max-width: 1100px) {

    .despacho-header {
        flex-direction: column;
    }

    .despacho-controles {
        width: 100%;
        justify-content: flex-start;
    }

}

@media (max-width: 700px) {

    .despacho-header {
        padding: 18px;
    }

    .despacho-legenda {
        padding: 11px 18px;
        gap: 11px;
    }

    .despacho-controles {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }

    .despacho-controles input,
    .despacho-controles select,
    .despacho-controles button {
        width: 100%;
    }

}



/* ============================================================
   ACOMPANHAMENTO V2
   Ocultar lista antiga de técnicos
   O Gantt passa a ser a interface principal.
   ============================================================ */

#tecnicos-lista {
    display: none !important;
}


/* ============================================================
   GANTT - ATIVIDADES CLICÁVEIS
   ============================================================ */

.despacho-atividade {
    cursor: pointer;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease;
}

.despacho-atividade:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14);
    filter: brightness(0.98);
}


/* ============================================================
   MODAL DA FICHA DA ATIVIDADE
   ============================================================ */

#modal-ficha-atividade-despacho {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;
    box-sizing: border-box;

    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(4px);
}


/* Caixa principal da ficha */

#modal-ficha-atividade-despacho > div {
    width: min(920px, 100%);
    max-height: calc(100vh - 48px);

    overflow-y: auto;

    background: #ffffff;
    border-radius: 20px;

    box-shadow:
        0 25px 70px rgba(15, 23, 42, 0.28);

    padding: 0;

    box-sizing: border-box;
}


/* ============================================================
   BLOCOS DA FICHA
   ============================================================ */

#modal-ficha-atividade-despacho .ficha-bloco {
    margin: 0 28px 18px;
    padding: 22px;

    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}

#modal-ficha-atividade-despacho .ficha-bloco:first-of-type {
    margin-top: 24px;
}


/* Títulos */

#modal-ficha-atividade-despacho h2,
#modal-ficha-atividade-despacho h3 {
    color: #172033;
    margin-top: 0;
}


/* Labels */

#modal-ficha-atividade-despacho .ficha-bloco span {
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
}


/* Valores */

#modal-ficha-atividade-despacho .ficha-bloco strong {
    color: #172033;
}


/* ============================================================
   RODAPÉ DA FICHA
   ============================================================ */

#modal-ficha-atividade-despacho button {
    border: 0;
    border-radius: 10px;

    min-height: 44px;
    padding: 0 20px;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        opacity 0.15s ease;
}

#modal-ficha-atividade-despacho button:hover {
    transform: translateY(-1px);
}

#modal-ficha-atividade-despacho button:active {
    transform: translateY(0);
}


/* Botão transferir */

#modal-ficha-atividade-despacho
button[onclick*="abrirTransferenciaAtividadeDespacho"] {
    background: #2563eb;
    color: #ffffff;
}

#modal-ficha-atividade-despacho
button[onclick*="abrirTransferenciaAtividadeDespacho"]:hover {
    background: #1d4ed8;
}


/* Botão fechar */

#modal-ficha-atividade-despacho
button[onclick*="fecharFichaAtividadeDespacho"] {
    background: #e2e8f0;
    color: #334155;
}


/* ============================================================
   TÉCNICO ATUAL
   ============================================================ */

#modal-ficha-atividade-despacho .ficha-tecnico-atual {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 700px) {

    #modal-ficha-atividade-despacho {
        padding: 10px;
        align-items: flex-end;
    }

    #modal-ficha-atividade-despacho > div {
        max-height: calc(100vh - 20px);
        border-radius: 18px 18px 0 0;
    }

    #modal-ficha-atividade-despacho .ficha-bloco {
        margin-left: 14px;
        margin-right: 14px;
        padding: 16px;
    }

}


/* ============================================================
   DESPACHO TÉCNICO - MODAL DE TRANSFERÊNCIA
   ============================================================ */

#modal-transferencia-atividade {
    position: fixed !important;
    inset: 0 !important;

    z-index: 100000 !important;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    box-sizing: border-box;

    background: rgba(15, 23, 42, 0.62);

    backdrop-filter: blur(5px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.18s ease,
        visibility 0.18s ease;
}


/* Modal aberto */

#modal-transferencia-atividade.show {
    opacity: 1;
    visibility: visible;
}


/* ============================================================
   CONTAINER INTERNO
   ============================================================ */

#modal-transferencia-atividade > div {
    width: min(500px, 100%);

    background: #ffffff;

    border-radius: 18px;

    box-shadow:
        0 25px 70px rgba(15, 23, 42, 0.30);

    overflow: hidden;

    transform: translateY(12px) scale(0.98);

    transition:
        transform 0.18s ease;
}


#modal-transferencia-atividade.show > div {
    transform: translateY(0) scale(1);
}


/* ============================================================
   CABEÇALHO
   ============================================================ */

#modal-transferencia-atividade .transferencia-header {
    position: relative;

    padding: 26px 28px 22px;

    border-bottom: 1px solid #e5e7eb;

    background: #ffffff;
}


#modal-transferencia-atividade .transferencia-header
    > div:first-child {
    color: #64748b;

    font-size: 13px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    margin-bottom: 5px;
}


#modal-transferencia-atividade .transferencia-header
    h2 {
    margin: 0;

    color: #172033;

    font-size: 25px;

    line-height: 1.2;
}


/* ============================================================
   BOTÃO FECHAR
   ============================================================ */

#modal-transferencia-atividade
button[aria-label="Fechar"] {

    position: absolute;

    top: 18px;
    right: 20px;

    width: 38px;
    height: 38px;

    min-height: 38px;

    padding: 0;

    border: 0;

    border-radius: 10px;

    background: #f1f5f9;

    color: #334155;

    font-size: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
}


#modal-transferencia-atividade
button[aria-label="Fechar"]:hover {
    background: #e2e8f0;
}


/* ============================================================
   CORPO
   ============================================================ */

#modal-transferencia-atividade .transferencia-body {
    padding: 26px 28px;
}


/* Informação da atividade */

#modal-transferencia-atividade .transferencia-info {
    display: flex;

    flex-direction: column;

    gap: 5px;

    margin-bottom: 22px;

    padding: 15px 16px;

    border-radius: 12px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;
}


#modal-transferencia-atividade .transferencia-info span {
    color: #64748b;

    font-size: 13px;

    font-weight: 600;
}


#modal-transferencia-atividade .transferencia-info strong {
    color: #172033;

    font-size: 18px;
}


/* ============================================================
   LABEL
   ============================================================ */

#modal-transferencia-atividade .transferencia-label {
    display: block;

    margin-bottom: 8px;

    color: #334155;

    font-size: 14px;

    font-weight: 700;
}


/* ============================================================
   SELECT
   ============================================================ */

#modal-transferencia-atividade .transferencia-select {
    width: 100%;

    min-height: 48px;

    padding: 0 14px;

    border: 1px solid #cbd5e1;

    border-radius: 10px;

    background: #ffffff;

    color: #172033;

    font-size: 15px;

    outline: none;

    box-sizing: border-box;

    cursor: pointer;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


#modal-transferencia-atividade .transferencia-select:focus {
    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.12);
}


/* ============================================================
   ERRO
   ============================================================ */

#modal-transferencia-atividade .transferencia-erro {
    margin-top: 12px;

    padding: 11px 13px;

    border-radius: 9px;

    background: #fef2f2;

    border: 1px solid #fecaca;

    color: #b91c1c;

    font-size: 13px;

    font-weight: 600;
}


/* ============================================================
   RODAPÉ
   ============================================================ */

#modal-transferencia-atividade .transferencia-footer {
    display: flex;

    justify-content: flex-end;

    gap: 10px;

    padding: 18px 28px 24px;

    border-top: 1px solid #e5e7eb;

    background: #ffffff;
}


/* ============================================================
   BOTÕES
   ============================================================ */

#modal-transferencia-atividade
.transferencia-footer button {
    min-height: 44px;

    padding: 0 20px;

    border: 0;

    border-radius: 10px;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}


#modal-transferencia-atividade
.transferencia-footer .btn-secondary {
    background: #e2e8f0;

    color: #334155;
}


#modal-transferencia-atividade
.transferencia-footer .btn-secondary:hover {
    background: #cbd5e1;
}


#modal-transferencia-atividade
.transferencia-footer .btn-primary {
    background: #2563eb;

    color: #ffffff;

    box-shadow:
        0 5px 12px rgba(37, 99, 235, 0.20);
}


#modal-transferencia-atividade
.transferencia-footer .btn-primary:hover {
    background: #1d4ed8;

    transform: translateY(-1px);
}


/* ============================================================
   FICHA DA ATIVIDADE
   ============================================================ */

#modal-ficha-atividade-despacho {
    position: fixed !important;

    inset: 0 !important;

    z-index: 99999 !important;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    box-sizing: border-box;

    background: rgba(15, 23, 42, 0.62);

    backdrop-filter: blur(5px);
}


#modal-ficha-atividade-despacho > div {
    width: min(900px, 100%);

    max-height: calc(100vh - 40px);

    overflow-y: auto;

    background: #ffffff;

    border-radius: 20px;

    box-shadow:
        0 25px 80px rgba(15, 23, 42, 0.30);

    box-sizing: border-box;
}


/* ============================================================
   CABEÇALHO DA FICHA
   ============================================================ */

#modal-ficha-atividade-despacho
.ficha-header {
    position: sticky;

    top: 0;

    z-index: 5;

    padding: 24px 28px 20px;

    background: #ffffff;

    border-bottom: 1px solid #e5e7eb;
}


#modal-ficha-atividade-despacho
.ficha-header h2 {
    margin: 0;

    color: #172033;

    font-size: 27px;
}


#modal-ficha-atividade-despacho
.ficha-header .ficha-status {
    display: inline-flex;

    margin-top: 8px;

    padding: 5px 10px;

    border-radius: 999px;

    background: #dcfce7;

    color: #166534;

    font-size: 12px;

    font-weight: 800;
}


/* ============================================================
   BLOCOS DA FICHA
   ============================================================ */

#modal-ficha-atividade-despacho
.ficha-bloco {
    margin: 18px 28px;

    padding: 20px;

    border: 1px solid #e2e8f0;

    border-radius: 14px;

    background: #f8fafc;
}


#modal-ficha-atividade-despacho
.ficha-bloco h3 {
    margin: 0 0 14px;

    color: #172033;

    font-size: 19px;
}


#modal-ficha-atividade-despacho
.ficha-bloco > div {
    color: #334155;
}


#modal-ficha-atividade-despacho
.ficha-bloco span {
    color: #64748b;

    font-size: 13px;

    font-weight: 600;
}


#modal-ficha-atividade-despacho
.ficha-bloco strong {
    color: #172033;
}


/* ============================================================
   RODAPÉ DA FICHA
   ============================================================ */

#modal-ficha-atividade-despacho
.ficha-footer {
    position: sticky;

    bottom: 0;

    z-index: 5;

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    padding: 18px 28px 22px;

    background: #ffffff;

    border-top: 1px solid #e5e7eb;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 650px) {

    #modal-transferencia-atividade {
        padding: 10px;

        align-items: flex-end;
    }

    #modal-transferencia-atividade > div {
        width: 100%;

        border-radius: 18px 18px 0 0;
    }

    #modal-transferencia-atividade
    .transferencia-header,
    #modal-transferencia-atividade
    .transferencia-body,
    #modal-transferencia-atividade
    .transferencia-footer {
        padding-left: 18px;
        padding-right: 18px;
    }

    #modal-transferencia-atividade
    .transferencia-footer {
        flex-direction: column;
    }

    #modal-transferencia-atividade
    .transferencia-footer button {
        width: 100%;
    }

    #modal-ficha-atividade-despacho {
        padding: 8px;

        align-items: flex-end;
    }

    #modal-ficha-atividade-despacho > div {
        max-height: calc(100vh - 8px);

        border-radius: 18px 18px 0 0;
    }

    #modal-ficha-atividade-despacho
    .ficha-bloco {
        margin-left: 12px;
        margin-right: 12px;
    }

}


/* ============================================================
   FICHA DA INSTALAÇÃO - AJUSTE VISUAL FINAL
   SOMENTE CSS
   ============================================================ */


/* ============================================================
   MODAL PRINCIPAL
   ============================================================ */

#modal-ficha-atividade-despacho {
    position: fixed !important;
    inset: 0 !important;

    z-index: 99999 !important;

    width: 100vw !important;
    height: 100vh !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 20px !important;

    box-sizing: border-box !important;

    background: rgba(15, 23, 42, 0.62) !important;

    backdrop-filter: blur(5px);

    overflow: hidden !important;
}


/* ============================================================
   CAIXA DA FICHA
   ============================================================ */

#modal-ficha-atividade-despacho > div {

    width: min(920px, calc(100vw - 40px)) !important;

    max-width: 920px !important;

    height: auto !important;

    max-height: calc(100vh - 40px) !important;

    margin: 0 auto !important;

    padding: 0 !important;

    overflow-x: hidden !important;

    overflow-y: auto !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    border-radius: 18px !important;

    box-shadow:
        0 25px 70px rgba(15, 23, 42, 0.30) !important;

    color: #172033 !important;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif !important;
}


/* ============================================================
   RESET DOS ELEMENTOS
   ============================================================ */

#modal-ficha-atividade-despacho * {
    box-sizing: border-box;
}


/* ============================================================
   CABEÇALHO
   ============================================================ */

#modal-ficha-atividade-despacho h2 {

    margin: 0 !important;

    padding: 0 !important;

    color: #172033 !important;

    font-size: 26px !important;

    line-height: 1.2 !important;

    font-weight: 750 !important;
}


#modal-ficha-atividade-despacho h3 {

    margin: 0 0 14px 0 !important;

    color: #172033 !important;

    font-size: 19px !important;

    line-height: 1.25 !important;

    font-weight: 700 !important;
}


/* ============================================================
   BOTÃO FECHAR DA FICHA
   ============================================================ */

/*
   O primeiro botão da ficha é tratado como botão de fechar.
*/

#modal-ficha-atividade-despacho > div > button:first-of-type {

    position: absolute !important;

    top: 18px !important;
    right: 18px !important;

    width: 42px !important;
    height: 42px !important;

    min-width: 42px !important;
    min-height: 42px !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 10px !important;

    background: #f1f5f9 !important;

    color: #334155 !important;

    font-size: 20px !important;

    font-weight: 700 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;

    z-index: 20 !important;
}


#modal-ficha-atividade-despacho > div > button:first-of-type:hover {

    background: #e2e8f0 !important;

    color: #0f172a !important;
}


/* ============================================================
   BLOCOS DA FICHA
   ============================================================ */

#modal-ficha-atividade-despacho .ficha-bloco {

    width: auto !important;

    height: auto !important;

    min-height: 0 !important;

    margin: 16px 24px !important;

    padding: 18px 20px !important;

    border-radius: 14px !important;

    border: 1px solid #e2e8f0 !important;

    background: #f8fafc !important;

    box-shadow: none !important;

    overflow: visible !important;
}


/* Primeiro bloco */

#modal-ficha-atividade-despacho .ficha-bloco:first-of-type {

    margin-top: 20px !important;
}


/* Último bloco */

#modal-ficha-atividade-despacho .ficha-bloco:last-of-type {

    margin-bottom: 20px !important;
}


/* ============================================================
   CONTEÚDO DOS BLOCOS
   ============================================================ */

#modal-ficha-atividade-despacho
.ficha-bloco > div {

    height: auto !important;

    min-height: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    color: #334155 !important;

    font-size: 14px !important;

    line-height: 1.45 !important;
}


/* ============================================================
   LABELS
   ============================================================ */

#modal-ficha-atividade-despacho
.ficha-bloco span {

    display: inline-block !important;

    margin: 0 !important;

    color: #64748b !important;

    font-size: 13px !important;

    line-height: 1.35 !important;

    font-weight: 600 !important;
}


/* ============================================================
   VALORES
   ============================================================ */

#modal-ficha-atividade-despacho
.ficha-bloco strong {

    color: #172033 !important;

    font-size: 14px !important;

    line-height: 1.4 !important;

    font-weight: 700 !important;
}


/* ============================================================
   GRID DAS INFORMAÇÕES
   ============================================================ */

#modal-ficha-atividade-despacho
.ficha-bloco .ficha-grid {

    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 12px 24px !important;

    width: 100% !important;
}


/* Cada informação */

#modal-ficha-atividade-despacho
.ficha-grid > div {

    min-width: 0 !important;

    height: auto !important;

    padding: 0 !important;

    margin: 0 !important;
}


/* ============================================================
   TÍTULO DOS BLOCOS
   ============================================================ */

#modal-ficha-atividade-despacho
.ficha-bloco h3 {

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    margin-bottom: 14px !important;
}


/* ============================================================
   CABEÇALHO INTERNO
   ============================================================ */

#modal-ficha-atividade-despacho
.ficha-header {

    position: relative !important;

    width: 100% !important;

    padding: 24px 76px 18px 24px !important;

    margin: 0 !important;

    background: #ffffff !important;

    border-bottom: 1px solid #e5e7eb !important;
}


/* ============================================================
   STATUS
   ============================================================ */

#modal-ficha-atividade-despacho
.ficha-status {

    display: inline-flex !important;

    align-items: center !important;

    margin-top: 7px !important;

    padding: 5px 10px !important;

    border-radius: 999px !important;

    background: #dcfce7 !important;

    color: #166534 !important;

    font-size: 12px !important;

    font-weight: 800 !important;
}


/* ============================================================
   LINHAS DE INFORMAÇÃO
   ============================================================ */

#modal-ficha-atividade-despacho
.ficha-bloco p {

    margin: 4px 0 !important;

    padding: 0 !important;

    color: #334155 !important;

    font-size: 14px !important;

    line-height: 1.4 !important;
}


/* ============================================================
   TÉCNICO ATUAL
   ============================================================ */

#modal-ficha-atividade-despacho
.ficha-tecnico-atual {

    display: flex !important;

    flex-direction: column !important;

    gap: 3px !important;

    min-height: 0 !important;

    margin: 0 !important;

    padding: 0 !important;
}


#modal-ficha-atividade-despacho
.ficha-tecnico-atual strong {

    font-size: 15px !important;
}


/* ============================================================
   RODAPÉ
   ============================================================ */

#modal-ficha-atividade-despacho
.ficha-footer {

    position: sticky !important;

    bottom: 0 !important;

    z-index: 10 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: flex-end !important;

    gap: 10px !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 16px 24px !important;

    background: #ffffff !important;

    border-top: 1px solid #e5e7eb !important;
}


/* ============================================================
   BOTÕES DO RODAPÉ
   ============================================================ */

#modal-ficha-atividade-despacho
.ficha-footer button {

    min-height: 44px !important;

    padding: 0 18px !important;

    border: 0 !important;

    border-radius: 10px !important;

    font-size: 14px !important;

    font-weight: 700 !important;

    cursor: pointer !important;
}


/* Fechar */

#modal-ficha-atividade-despacho
.ficha-footer .btn-secondary {

    background: #e2e8f0 !important;

    color: #334155 !important;
}


/* Transferir */

#modal-ficha-atividade-despacho
.ficha-footer .btn-primary {

    background: #2563eb !important;

    color: #ffffff !important;

    box-shadow:
        0 5px 12px rgba(37, 99, 235, 0.20) !important;
}


/* ============================================================
   CORRIGIR ESPAÇOS EXCESSIVOS
   ============================================================ */

#modal-ficha-atividade-despacho
.ficha-bloco br {

    line-height: 1 !important;
}


/* Evita elementos herdando alturas absurdas */

#modal-ficha-atividade-despacho
.ficha-bloco section,
#modal-ficha-atividade-despacho
.ficha-bloco article {

    height: auto !important;

    min-height: 0 !important;

    margin: 0 !important;
}


/* ============================================================
   SCROLLBAR
   ============================================================ */

#modal-ficha-atividade-despacho > div::-webkit-scrollbar {

    width: 8px;
}


#modal-ficha-atividade-despacho > div::-webkit-scrollbar-track {

    background: #f1f5f9;
}


#modal-ficha-atividade-despacho > div::-webkit-scrollbar-thumb {

    background: #cbd5e1;

    border-radius: 999px;
}


/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 700px) {

    #modal-ficha-atividade-despacho {

        padding: 8px !important;

        align-items: flex-end !important;
    }


    #modal-ficha-atividade-despacho > div {

        width: 100% !important;

        max-width: 100% !important;

        max-height: calc(100vh - 8px) !important;

        border-radius: 18px 18px 0 0 !important;
    }


    #modal-ficha-atividade-despacho
    .ficha-bloco {

        margin-left: 12px !important;

        margin-right: 12px !important;

        padding: 16px !important;
    }


    #modal-ficha-atividade-despacho
    .ficha-bloco .ficha-grid {

        grid-template-columns: 1fr !important;
    }


    #modal-ficha-atividade-despacho
    .ficha-footer {

        flex-direction: column !important;
    }


    #modal-ficha-atividade-despacho
    .ficha-footer button {

        width: 100% !important;
    }

}


/* ============================================================
   CORREÇÃO DEFINITIVA - FICHA DE INSTALAÇÃO
   SOMENTE CSS
   ============================================================ */

#modal-ficha-atividade-despacho {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;

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

    width: 100vw !important;
    height: 100vh !important;

    padding: 18px !important;
    box-sizing: border-box !important;

    background: rgba(15, 23, 42, 0.62) !important;
    backdrop-filter: blur(4px) !important;
}


/* ============================================================
   CAIXA PRINCIPAL
   ============================================================ */

#modal-ficha-atividade-despacho > .ficha-atividade-despacho {

    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    width: min(980px, calc(100vw - 36px)) !important;
    max-width: 980px !important;

    height: auto !important;
    max-height: calc(100vh - 36px) !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #ffffff !important;

    border-radius: 18px !important;

    box-shadow:
        0 25px 70px rgba(15, 23, 42, 0.30) !important;

    box-sizing: border-box !important;
}


/* ============================================================
   CABEÇALHO REAL
   ============================================================ */

#modal-ficha-atividade-despacho
.ficha-atividade-header {

    position: relative !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 20px 68px 16px 24px !important;

    background: #ffffff !important;

    border-bottom: 1px solid #e5e7eb !important;

    box-sizing: border-box !important;
}


/* Conteúdo do cabeçalho */

#modal-ficha-atividade-despacho
.ficha-atividade-header > div:first-child {

    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* DESPACHO TÉCNICO */

#modal-ficha-atividade-despacho
.ficha-atividade-kicker {

    margin: 0 0 2px 0 !important;

    color: #475569 !important;

    font-size: 13px !important;
    line-height: 1.2 !important;

    font-weight: 600 !important;
}


/* Título */

#modal-ficha-atividade-despacho
.ficha-atividade-header h2 {

    margin: 0 !important;
    padding: 0 !important;

    color: #172033 !important;

    font-size: 26px !important;
    line-height: 1.2 !important;

    font-weight: 750 !important;
}


/* Status */

#modal-ficha-atividade-despacho
.ficha-atividade-header .ficha-status {

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

    width: fit-content !important;

    margin: 7px 0 0 0 !important;
    padding: 5px 10px !important;

    border-radius: 999px !important;

    background: #dcfce7 !important;
    color: #166534 !important;

    font-size: 12px !important;
    line-height: 1.2 !important;

    font-weight: 800 !important;
}


/* ============================================================
   BOTÃO X
   ============================================================ */

#modal-ficha-atividade-despacho
.ficha-atividade-header
.ficha-fechar {

    position: absolute !important;

    top: 18px !important;
    right: 18px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 40px !important;
    height: 40px !important;

    min-width: 40px !important;
    min-height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 10px !important;

    background: #e2e8f0 !important;
    color: #334155 !important;

    font-size: 20px !important;
    line-height: 1 !important;

    cursor: pointer !important;

    z-index: 20 !important;
}


#modal-ficha-atividade-despacho
.ficha-atividade-header
.ficha-fechar:hover {

    background: #cbd5e1 !important;
    color: #0f172a !important;

    transform: none !important;
}


/* ============================================================
   CORPO
   ============================================================ */

#modal-ficha-atividade-despacho
.ficha-atividade-body {

    flex: 1 1 auto !important;

    min-height: 0 !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 18px 24px !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    box-sizing: border-box !important;
}


/* ============================================================
   BLOCOS
   ============================================================ */

#modal-ficha-atividade-despacho
.ficha-bloco {

    width: 100% !important;

    min-height: 0 !important;

    margin: 0 0 14px 0 !important;

    padding: 16px 20px !important;

    box-sizing: border-box !important;

    border: 1px solid #dbe3ec !important;

    border-radius: 14px !important;

    background: #f8fafc !important;

    box-shadow: none !important;

    overflow: visible !important;
}


#modal-ficha-atividade-despacho
.ficha-bloco:last-child {

    margin-bottom: 0 !important;
}


/* ============================================================
   TÍTULOS
   ============================================================ */

#modal-ficha-atividade-despacho
.ficha-bloco h3 {

    display: flex !important;
    align-items: center !important;

    gap: 8px !important;

    margin: 0 0 12px 0 !important;
    padding: 0 !important;

    color: #172033 !important;

    font-size: 19px !important;
    line-height: 1.25 !important;

    font-weight: 700 !important;
}


/* ============================================================
   GRID
   ============================================================ */

#modal-ficha-atividade-despacho
.ficha-bloco .ficha-grid {

    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    column-gap: 36px !important;
    row-gap: 9px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Cada campo */

#modal-ficha-atividade-despacho
.ficha-grid > div {

    min-width: 0 !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Endereço ocupa linha inteira */

#modal-ficha-atividade-despacho
.ficha-grid > .ficha-coluna-completa {

    grid-column: 1 / -1 !important;
}


/* ============================================================
   LABELS
   ============================================================ */

#modal-ficha-atividade-despacho
.ficha-bloco span {

    display: inline !important;

    margin: 0 4px 0 0 !important;
    padding: 0 !important;

    color: #64748b !important;

    font-size: 13px !important;

    line-height: 1.35 !important;

    font-weight: 600 !important;
}


/* ============================================================
   VALORES
   ============================================================ */

#modal-ficha-atividade-despacho
.ficha-bloco strong {

    display: inline !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #172033 !important;

    font-size: 14px !important;

    line-height: 1.4 !important;

    font-weight: 700 !important;

    word-break: break-word !important;
}


/* ============================================================
   TÉCNICO
   ============================================================ */

#modal-ficha-atividade-despacho
.ficha-tecnico-atual {

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ============================================================
   OBSERVAÇÕES
   ============================================================ */

#modal-ficha-atividade-despacho
.ficha-observacao {

    margin: 0 !important;
    padding: 10px 12px !important;

    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;

    background: #ffffff !important;

    color: #334155 !important;

    font-size: 14px !important;
    line-height: 1.45 !important;
}


/* ============================================================
   RODAPÉ REAL
   ============================================================ */

#modal-ficha-atividade-despacho
.ficha-atividade-footer {

    flex: 0 0 auto !important;

    display: flex !important;

    align-items: center !important;
    justify-content: flex-end !important;

    gap: 10px !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 14px 24px !important;

    background: #ffffff !important;

    border-top: 1px solid #e5e7eb !important;

    box-sizing: border-box !important;
}


/* ============================================================
   BOTÕES
   ============================================================ */

#modal-ficha-atividade-despacho
.ficha-atividade-footer button {

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-width: 100px !important;

    min-height: 42px !important;

    margin: 0 !important;
    padding: 0 18px !important;

    border: 0 !important;
    border-radius: 10px !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    cursor: pointer !important;

    transform: none !important;
}


/* Fechar */

#modal-ficha-atividade-despacho
.ficha-atividade-footer
.btn-secondary {

    background: #e2e8f0 !important;
    color: #334155 !important;
}


/* Transferir */

#modal-ficha-atividade-despacho
.ficha-atividade-footer
.btn-primary {

    background: #2563eb !important;
    color: #ffffff !important;

    box-shadow:
        0 4px 10px rgba(37, 99, 235, 0.18) !important;
}


/* ============================================================
   SCROLLBAR
   ============================================================ */

#modal-ficha-atividade-despacho
.ficha-atividade-body::-webkit-scrollbar {

    width: 7px !important;
}


#modal-ficha-atividade-despacho
.ficha-atividade-body::-webkit-scrollbar-track {

    background: transparent !important;
}


#modal-ficha-atividade-despacho
.ficha-atividade-body::-webkit-scrollbar-thumb {

    background: #cbd5e1 !important;

    border-radius: 999px !important;
}


/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 700px) {

    #modal-ficha-atividade-despacho {

        padding: 8px !important;

        align-items: flex-end !important;
    }


    #modal-ficha-atividade-despacho
    > .ficha-atividade-despacho {

        width: 100% !important;

        max-width: 100% !important;

        max-height: calc(100vh - 8px) !important;

        border-radius: 18px 18px 0 0 !important;
    }


    #modal-ficha-atividade-despacho
    .ficha-atividade-header {

        padding: 18px 60px 14px 18px !important;
    }


    #modal-ficha-atividade-despacho
    .ficha-atividade-body {

        padding: 12px !important;
    }


    #modal-ficha-atividade-despacho
    .ficha-bloco {

        margin-bottom: 10px !important;

        padding: 14px 15px !important;
    }


    #modal-ficha-atividade-despacho
    .ficha-bloco .ficha-grid {

        grid-template-columns: 1fr !important;

        row-gap: 8px !important;
    }


    #modal-ficha-atividade-despacho
    .ficha-atividade-footer {

        flex-direction: column !important;

        padding: 12px !important;
    }


    #modal-ficha-atividade-despacho
    .ficha-atividade-footer button {

        width: 100% !important;
    }
}


/* ============================================================
   MODAL COBRANCA MANUAL
============================================================ */

#modal-cobranca-manual {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(2px);
}

#modal-cobranca-manual .modal-box {
    width: min(720px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    background: #ffffff;
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

#modal-cobranca-manual .modal-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 28px 18px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

#modal-cobranca-manual .modal-header h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    color: #0f172a;
}

#modal-cobranca-manual .modal-header p {
    margin: 6px 0 0;
    color: #52627a;
}

#modal-cobranca-manual .modal-close {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 10px;
    background: #f1f5f9;
    color: #0f172a;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

#modal-cobranca-manual .modal-close:hover {
    background: #e2e8f0;
}

#modal-cobranca-manual .instalacao-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 24px 28px;
}

#modal-cobranca-manual .campo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#modal-cobranca-manual .campo-largo {
    grid-column: 1 / -1;
}

#modal-cobranca-manual label {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}

#modal-cobranca-manual input,
#modal-cobranca-manual select,
#modal-cobranca-manual textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font-size: 14px;
    outline: none;
}

#modal-cobranca-manual textarea {
    min-height: 96px;
    resize: vertical;
}

#modal-cobranca-manual input:focus,
#modal-cobranca-manual select:focus,
#modal-cobranca-manual textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#modal-cobranca-manual .modal-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 18px 28px 24px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
}

#modal-cobranca-manual .btn-secondary,
#modal-cobranca-manual .btn-primary {
    min-height: 44px;
    padding: 0 22px;
    border-radius: 10px;
    font-weight: 800;
}

@media (max-width: 720px) {
    #modal-cobranca-manual {
        align-items: flex-start;
        padding: 12px;
    }

    #modal-cobranca-manual .instalacao-form-grid {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    #modal-cobranca-manual .modal-header,
    #modal-cobranca-manual .modal-footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    #modal-cobranca-manual .modal-footer {
        flex-direction: column-reverse;
    }

    #modal-cobranca-manual .btn-secondary,
    #modal-cobranca-manual .btn-primary {
        width: 100%;
    }
}


/* ============================================================
   TECNICOS - EDITAR / EXCLUIR
============================================================ */

.tecnicos-grid {
    display: grid;
    gap: 12px;
}

.tecnico-item-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #ffffff;
}

.tecnico-item-card.tecnico-inativo {
    opacity: 0.62;
}

.tecnico-item-avatar {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e0ecff;
    color: #1d4ed8;
    font-weight: 900;
    font-size: 18px;
}

.tecnico-item-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tecnico-item-info strong {
    color: #0f172a;
}

.tecnico-item-info span,
.tecnico-item-info small {
    color: #52627a;
}

.tecnico-item-acoes {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-tecnico-editar,
.btn-tecnico-excluir {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-weight: 800;
    cursor: pointer;
}

.btn-tecnico-editar {
    color: #1d4ed8;
    background: #e0ecff;
    border-color: #bfdbfe;
}

.btn-tecnico-excluir {
    color: #b91c1c;
    background: #fee2e2;
    border-color: #fecaca;
}

.modal-tecnico-box {
    width: min(520px, calc(100vw - 32px));
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #dbe3ef;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

.modal-tecnico-body {
    display: grid;
    gap: 16px;
    padding: 22px 28px;
}

.modal-tecnico-body .campo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal-tecnico-body label {
    font-size: 13px;
    font-weight: 800;
    color: #334155;
}

.modal-tecnico-body input[type="text"] {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 14px;
}

.tecnico-check {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #334155;
}

@media (max-width: 720px) {
    .tecnico-item-card {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .tecnico-item-acoes {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}


/* ============================================================
   TECNICOS - EDITAR / EXCLUIR
============================================================ */

.tecnicos-grid {
    display: grid;
    gap: 12px;
}

.tecnico-item-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #ffffff;
}

.tecnico-item-card.tecnico-inativo {
    opacity: 0.62;
}

.tecnico-item-avatar {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e0ecff;
    color: #1d4ed8;
    font-weight: 900;
    font-size: 18px;
}

.tecnico-item-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tecnico-item-info strong {
    color: #0f172a;
}

.tecnico-item-info span,
.tecnico-item-info small {
    color: #52627a;
}

.tecnico-item-acoes {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-tecnico-editar,
.btn-tecnico-excluir {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-weight: 800;
    cursor: pointer;
}

.btn-tecnico-editar {
    color: #1d4ed8;
    background: #e0ecff;
    border-color: #bfdbfe;
}

.btn-tecnico-excluir {
    color: #b91c1c;
    background: #fee2e2;
    border-color: #fecaca;
}

.modal-tecnico-box {
    width: min(520px, calc(100vw - 32px));
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #dbe3ef;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

.modal-tecnico-body {
    display: grid;
    gap: 16px;
    padding: 22px 28px;
}

.modal-tecnico-body .campo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal-tecnico-body label {
    font-size: 13px;
    font-weight: 800;
    color: #334155;
}

.modal-tecnico-body input[type="text"] {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 14px;
}

.tecnico-check {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #334155;
}

@media (max-width: 720px) {
    .tecnico-item-card {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .tecnico-item-acoes {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}


/* === TECNICOS CRUD CODEX === */

.tecnicos-grid {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.tecnico-item-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #ffffff;
}

.tecnico-item-card.tecnico-inativo {
    opacity: 0.62;
}

.tecnico-item-avatar {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e0ecff;
    color: #1d4ed8;
    font-weight: 900;
    font-size: 18px;
}

.tecnico-item-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tecnico-item-info strong {
    color: #0f172a;
}

.tecnico-item-info span,
.tecnico-item-info small {
    color: #52627a;
}

.tecnico-item-acoes {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-tecnico-editar,
.btn-tecnico-excluir {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-weight: 800;
    cursor: pointer;
}

.btn-tecnico-editar {
    color: #1d4ed8;
    background: #e0ecff;
    border-color: #bfdbfe;
}

.btn-tecnico-excluir {
    color: #b91c1c;
    background: #fee2e2;
    border-color: #fecaca;
}

#modal-tecnico-crud {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.58);
}

.modal-tecnico-box {
    width: min(520px, calc(100vw - 32px));
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #dbe3ef;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

.modal-tecnico-body {
    display: grid;
    gap: 16px;
    padding: 22px 28px;
}

.modal-tecnico-body .campo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal-tecnico-body label {
    font-size: 13px;
    font-weight: 800;
    color: #334155;
}

.modal-tecnico-body input[type="text"],
.modal-tecnico-body input[type="password"] {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 14px;
}

.modal-tecnico-body small {
    color: #64748b;
}

.tecnico-check {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #334155;
}

@media (max-width: 720px) {
    .tecnico-item-card {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .tecnico-item-acoes {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}


/* === ACOES DO TECNICO NO GANTT === */

.despacho-tecnico-info-crud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.despacho-tecnico-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    cursor: pointer;
}

.despacho-tecnico-acoes {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.despacho-tecnico-acoes .btn-tecnico-editar,
.despacho-tecnico-acoes .btn-tecnico-excluir {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.despacho-tecnico-acoes .btn-tecnico-editar {
    color: #1d4ed8;
    background: #e0ecff;
    border-color: #bfdbfe;
}

.despacho-tecnico-acoes .btn-tecnico-excluir {
    color: #b91c1c;
    background: #fee2e2;
    border-color: #fecaca;
}

.despacho-tecnico-acoes .btn-tecnico-editar:hover {
    background: #bfdbfe;
}

.despacho-tecnico-acoes .btn-tecnico-excluir:hover {
    background: #fecaca;
}


/* === BOTOES TECNICO NO GANTT - FORCADO === */

.despacho-tecnico-info-com-acoes {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.despacho-tecnico-acoes-crud {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.despacho-tecnico-acoes-crud .btn-tecnico-editar,
.despacho-tecnico-acoes-crud .btn-tecnico-excluir {
    min-height: 28px;
    padding: 0 9px;
    border-radius: 7px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.despacho-tecnico-acoes-crud .btn-tecnico-editar {
    color: #1d4ed8;
    background: #e0ecff;
    border-color: #bfdbfe;
}

.despacho-tecnico-acoes-crud .btn-tecnico-excluir {
    color: #b91c1c;
    background: #fee2e2;
    border-color: #fecaca;
}


/* === TECNICOS CADASTRADOS - ABA SEPARADA === */

.tecnicos-cadastrados-box {
    margin-bottom: 22px;
    padding: 18px;
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    background: #ffffff;
}

.tecnicos-cadastrados-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.tecnicos-cadastrados-header h3 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
}

.tecnicos-cadastrados-header p {
    margin: 4px 0 0;
    color: #52627a;
}

.tecnicos-cadastrados-grid {
    display: grid;
    gap: 12px;
}

.tecnico-cadastro-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}

.tecnico-cadastro-card.inativo {
    opacity: 0.62;
}

.tecnico-cadastro-avatar {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e0ecff;
    color: #1d4ed8;
    font-weight: 900;
}

.tecnico-cadastro-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tecnico-cadastro-info strong {
    color: #0f172a;
}

.tecnico-cadastro-info span,
.tecnico-cadastro-info small {
    color: #52627a;
}

.tecnico-cadastro-acoes {
    display: flex;
    gap: 8px;
}

.tecnico-cadastro-acoes .btn-tecnico-editar,
.tecnico-cadastro-acoes .btn-tecnico-excluir {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-weight: 800;
    cursor: pointer;
}

.tecnico-cadastro-acoes .btn-tecnico-editar {
    color: #1d4ed8;
    background: #e0ecff;
    border-color: #bfdbfe;
}

.tecnico-cadastro-acoes .btn-tecnico-excluir {
    color: #b91c1c;
    background: #fee2e2;
    border-color: #fecaca;
}

@media (max-width: 720px) {
    .tecnico-cadastro-card {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .tecnico-cadastro-acoes {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}


/* === BOX TECNICOS CADASTRADOS ACIMA DO DESPACHO === */

#box-tecnicos-cadastrados {
    margin-bottom: 18px;
}

.tecnicos-cadastrados-box {
    padding: 18px;
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    background: #ffffff;
}

.tecnicos-cadastrados-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.tecnicos-cadastrados-header h3 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
}

.tecnicos-cadastrados-header p {
    margin: 4px 0 0;
    color: #52627a;
}

.tecnicos-cadastrados-grid {
    display: grid;
    gap: 12px;
}

.tecnico-cadastro-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}

.tecnico-cadastro-card.inativo {
    opacity: 0.62;
}

.tecnico-cadastro-avatar {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e0ecff;
    color: #1d4ed8;
    font-weight: 900;
}

.tecnico-cadastro-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tecnico-cadastro-info strong {
    color: #0f172a;
}

.tecnico-cadastro-info span,
.tecnico-cadastro-info small {
    color: #52627a;
}

.tecnico-cadastro-acoes {
    display: flex;
    gap: 8px;
}

.tecnico-cadastro-acoes .btn-tecnico-editar,
.tecnico-cadastro-acoes .btn-tecnico-excluir {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-weight: 800;
    cursor: pointer;
}

.tecnico-cadastro-acoes .btn-tecnico-editar {
    color: #1d4ed8;
    background: #e0ecff;
    border-color: #bfdbfe;
}

.tecnico-cadastro-acoes .btn-tecnico-excluir {
    color: #b91c1c;
    background: #fee2e2;
    border-color: #fecaca;
}


/* === ABAS TECNICOS === */

.tecnicos-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.tecnicos-tab {
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #52627a;
    font-weight: 800;
    cursor: pointer;
}

.tecnicos-tab.ativo {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

.tecnicos-tab:hover {
    color: #1d4ed8;
}


/* === HEADER ACOES TECNICOS CADASTRADOS === */

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

@media (max-width: 720px) {
    .tecnicos-cadastrados-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .tecnicos-cadastrados-header-acoes {
        width: 100%;
        flex-wrap: wrap;
    }
}


/* === MODAL CTO CODEX === */

#modal-cto-codex {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.58);
}

#modal-cto-codex .modal-cto-box {
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #dbe3ef;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

#modal-cto-codex .modal-cto-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 22px 28px;
}

#modal-cto-codex .campo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#modal-cto-codex .campo-largo {
    grid-column: 1 / -1;
}

#modal-cto-codex label {
    font-size: 13px;
    font-weight: 800;
    color: #334155;
}

#modal-cto-codex input,
#modal-cto-codex textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 14px;
}

#modal-cto-codex textarea {
    resize: vertical;
}

@media (max-width: 720px) {
    #modal-cto-codex .modal-cto-body {
        grid-template-columns: 1fr;
    }
}


/* === MODAL PLANO CODEX === */

#modal-plano-codex {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.58);
}

#modal-plano-codex .modal-plano-box {
    width: min(620px, calc(100vw - 32px));
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #dbe3ef;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

#modal-plano-codex .modal-plano-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 22px 28px;
}

#modal-plano-codex .campo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#modal-plano-codex .campo-largo {
    grid-column: 1 / -1;
}

#modal-plano-codex label {
    font-size: 13px;
    font-weight: 800;
    color: #334155;
}

#modal-plano-codex input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 14px;
}

#modal-plano-codex .plano-check {
    display: flex;
    align-items: center;
    gap: 10px;
}

#modal-plano-codex .plano-check input {
    width: auto;
    min-height: auto;
}

@media (max-width: 720px) {
    #modal-plano-codex .modal-plano-body {
        grid-template-columns: 1fr;
    }
}



/* DASHBOARD MODERNA */
.dashboard-page { background: #f4f7fb; }
.dashboard-hero { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; margin-bottom: 22px; align-items: stretch; }
.dashboard-hero-copy, .dashboard-health-card, .metric-card, .insight-card, .dashboard-section, .dashboard-cto-card { box-shadow: 0 18px 45px rgba(15, 23, 42, 0.07); }
.dashboard-hero-copy { min-height: 180px; border-radius: 18px; padding: 30px; background: linear-gradient(135deg, #071833 0%, #0f3f74 56%, #0b8f8a 100%); color: #fff; display: flex; flex-direction: column; justify-content: center; overflow: hidden; position: relative; }
.dashboard-hero-copy::after { content: ""; position: absolute; inset: auto -60px -120px auto; width: 260px; height: 260px; border-radius: 50%; border: 42px solid rgba(255,255,255,0.10); }
.dashboard-kicker, .section-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dashboard-kicker { color: #9ee8db; margin-bottom: 12px; }
.dashboard-hero-copy h2 { font-size: 32px; line-height: 1.12; max-width: 560px; margin: 0; }
.dashboard-hero-copy p { color: rgba(255,255,255,.78); max-width: 560px; margin-top: 12px; font-size: 15px; }
.dashboard-health-card { background: #ffffff; border: 1px solid #dbe4ef; border-radius: 18px; padding: 24px; display: flex; flex-direction: column; justify-content: center; }
.dashboard-health-card span, .insight-card span, .metric-card span { color: #52637a; font-size: 13px; font-weight: 700; }
.dashboard-health-card strong { margin-top: 8px; font-size: 30px; color: #061a38; }
.dashboard-health-card small, .insight-card small, .metric-card small { color: #73849a; font-size: 12px; }
.dashboard-health-track, .cto-progress { height: 8px; background: #e9eef6; border-radius: 999px; overflow: hidden; }
.dashboard-health-track { margin: 18px 0 10px; }
.dashboard-health-track div, .cto-progress div { height: 100%; background: linear-gradient(90deg, #20c997, #2f80ed); border-radius: inherit; transition: width .25s ease; }
.dashboard-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.metric-card { min-height: 112px; border-radius: 16px; border-color: #dbe4ef; position: relative; overflow: hidden; }
.metric-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: #2f80ed; }
.metric-clientes::before { background: #6f42c1; } .metric-ctos::before { background: #2f80ed; } .metric-instalacoes::before { background: #0aa2c0; } .metric-portas::before { background: #20c997; }
.metric-card .card-icon { width: 52px; height: 52px; border-radius: 14px; background: #edf4ff; }
.metric-card strong { color: #061a38; font-size: 30px; line-height: 1; }
.dashboard-insights { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 18px; margin: -4px 0 24px; }
.insight-card { background: #ffffff; border: 1px solid #dbe4ef; border-radius: 16px; padding: 20px 22px; }
.insight-card strong { display: block; margin: 8px 0 4px; font-size: 28px; color: #061a38; }
.insight-wide { background: linear-gradient(135deg, #ffffff 0%, #eef7f7 100%); }
.dashboard-section { border-color: #dbe4ef; border-radius: 18px; padding: 28px; }
.dashboard-section-header { margin-bottom: 22px; }
.section-eyebrow { display: inline-block; color: #0b8f8a; margin-bottom: 8px; }
.dashboard-cto-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.dashboard-cto-card { padding: 20px; border-color: #dbe4ef; background: #fff; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.dashboard-cto-card:hover { transform: translateY(-2px); border-color: #b9c8db; box-shadow: 0 22px 50px rgba(15, 23, 42, 0.10); }
.cto-card-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.cto-status { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; color: #0f766e; background: #dff7ef; font-size: 12px; font-weight: 800; }
.cto-progress { margin: 16px 0; }
.dashboard-cto-card .cto-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dashboard-cto-card .stat { padding: 12px 8px; background: #f6f8fb; }
.dashboard-cto-card .stat strong { color: #061a38; font-size: 20px; }
.stat-livre strong { color: #0f9f6e !important; } .stat-ocupada strong { color: #2f80ed !important; } .stat-manutencao strong { color: #b7791f !important; }
@media (max-width: 1200px) { .dashboard-hero, .dashboard-insights { grid-template-columns: 1fr; } .dashboard-metrics, .dashboard-cto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .dashboard-hero-copy { padding: 24px; min-height: 160px; } .dashboard-hero-copy h2 { font-size: 26px; } .dashboard-metrics, .dashboard-cto-grid, .dashboard-insights { grid-template-columns: 1fr; } .dashboard-section { padding: 20px; } }

/* GANTT TECNICOS MODERNO */
#tecnicos > .section {
    border-color: #dbe4ef;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
}

#tecnicos .section-header:first-child {
    align-items: center;
    padding-bottom: 6px;
}

.tecnicos-resumo {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 22px 0 26px;
}

.tecnico-card {
    min-height: 98px;
    padding: 18px;
    border: 1px solid #dbe4ef;
    border-radius: 16px;
    background: linear-gradient(135deg, #ffffff 0%, #f5f8fc 100%);
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.tecnico-card-icone {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #edf4ff;
    font-size: 21px;
}

.tecnico-card span {
    color: #52637a;
    font-size: 13px;
    font-weight: 700;
}

.tecnico-card strong {
    display: block;
    margin-top: 4px;
    color: #061a38;
    font-size: 28px;
    line-height: 1;
}

.despacho-tecnico {
    border: 1px solid #d8e2ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.09);
}

.despacho-header {
    padding: 24px;
    background: linear-gradient(135deg, #071833 0%, #123f74 62%, #0b8f8a 100%);
    color: #ffffff;
    border-bottom: 0;
}

.despacho-header h3 {
    color: #ffffff;
    font-size: 22px;
}

.despacho-header p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
}

.despacho-controles .btn-secondary,
.despacho-controles input,
.despacho-controles select {
    height: 40px;
    border: 1px solid rgba(255,255,255,0.24);
    border-radius: 10px;
    background: rgba(255,255,255,0.12);
    color: #ffffff;
    box-shadow: none;
}

.despacho-controles input,
.despacho-controles select {
    color-scheme: dark;
}

.despacho-controles select option {
    color: #172033;
}

.despacho-controles .btn-secondary:hover,
.despacho-controles input:focus,
.despacho-controles select:focus {
    background: rgba(255,255,255,0.20);
    border-color: rgba(255,255,255,0.45);
}

.despacho-legenda {
    padding: 14px 24px;
    background: #f7f9fc;
    border-bottom: 1px solid #e5edf6;
}

.despacho-legenda span {
    padding: 7px 10px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e5edf6;
    color: #52637a;
}

.despacho-legenda-cor {
    width: 10px;
    height: 10px;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.05);
}

.despacho-gantt-header,
.despacho-gantt-row {
    grid-template-columns: 240px minmax(960px, 1fr);
    min-width: 1200px;
}

.despacho-gantt-header {
    background: #f8fafc;
    border-bottom: 1px solid #dbe4ef;
}

.despacho-tecnico-coluna,
.despacho-hora {
    color: #60708a;
    font-size: 11px;
    letter-spacing: .04em;
}

.despacho-hora {
    padding: 14px 8px;
    background: #f8fafc;
}

.despacho-gantt-row {
    min-height: 92px;
    border-bottom: 1px solid #e7eef6;
}

.despacho-gantt-row:hover {
    background: #f8fbff;
}

.despacho-tecnico-info {
    padding: 16px;
    gap: 13px;
    background: #ffffff;
}

.despacho-tecnico-info:hover {
    background: #f4f8ff;
}

.despacho-tecnico-avatar {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, #edf4ff, #e3fbf5);
    box-shadow: inset 0 0 0 1px #d8e6f5;
}

.despacho-tecnico-dados strong {
    color: #061a38;
    font-size: 14px;
}

.despacho-status {
    margin-top: 3px;
    padding: 5px 9px;
    font-size: 10px;
    letter-spacing: .02em;
}

.despacho-timeline {
    min-height: 92px;
    background-color: #ffffff;
    background-image: linear-gradient(to right, rgba(96,112,138,0.11) 1px, transparent 1px);
    background-size: calc(100% / 12) 100%;
}

.despacho-grid-col {
    border-right: 1px solid rgba(96,112,138,0.10);
}

.despacho-atividade {
    top: 15px;
    height: 62px;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-left-width: 5px;
    border-radius: 13px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.14);
}

.despacho-atividade:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.20);
}

.despacho-atividade strong {
    font-size: 12px;
}

.despacho-atividade span {
    font-size: 10px;
}

.despacho-atividade small {
    display: inline-flex;
    width: fit-content;
    margin-top: 2px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.55);
    font-size: 9px;
    font-weight: 800;
}

.despacho-atividade.agendada {
    background: linear-gradient(135deg, #fff8df, #ffe9a8);
    border-color: #f59e0b;
}

.despacho-atividade.campo {
    background: linear-gradient(135deg, #eaf2ff, #cfe1ff);
    border-color: #2563eb;
}

.despacho-atividade.pendente {
    background: linear-gradient(135deg, #fff0f0, #ffd5d5);
    border-color: #ef4444;
}

.despacho-atividade.finalizada {
    background: linear-gradient(135deg, #eaf8ef, #c9f1d6);
    border-color: #16a34a;
}

.despacho-sem-atividades {
    padding: 22px;
    background: #fbfcfe;
    color: #7a8aa0;
}

@media (max-width: 1100px) {
    .tecnicos-resumo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .tecnicos-resumo {
        grid-template-columns: 1fr;
    }

    .despacho-header {
        padding: 20px;
    }
}

/* FINANCEIRO MODERNO */
#financeiro > .section {
    border-color: #dbe4ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

#financeiro > .section::before {
    content: "";
    display: block;
    height: 5px;
    background: linear-gradient(90deg, #071833, #2f80ed, #20c997);
}

.financeiro-header {
    margin: 0 0 24px;
    padding: 6px 0 2px;
}

.financeiro-header h2 {
    color: #061a38;
    font-size: 28px;
    letter-spacing: 0;
}

.financeiro-header p {
    color: #52637a;
    font-size: 15px;
}

.btn-nova-cobranca {
    min-height: 46px;
    padding: 0 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2563eb, #0f7de8);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24);
}

.btn-nova-cobranca:hover {
    background: linear-gradient(135deg, #1d4ed8, #0b68c7);
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.30);
}

.financeiro-resumo {
    gap: 18px;
    margin-bottom: 28px;
}

.financeiro-card {
    min-height: 132px;
    padding: 22px 24px;
    border-color: #dbe4ef;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #f7faff 100%);
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.07);
    position: relative;
    overflow: hidden;
}

.financeiro-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: #2f80ed;
}

.financeiro-card::after {
    content: "";
    position: absolute;
    right: -38px;
    bottom: -46px;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: rgba(47, 128, 237, 0.08);
}

.financeiro-card-receber::before { background: #2f80ed; }
.financeiro-card-recebido::before { background: #20c997; }
.financeiro-card-vencido::before { background: #ef4444; }
.financeiro-card-pendente::before { background: #f59e0b; }

.financeiro-card-topo,
.financeiro-card-valor {
    position: relative;
    z-index: 1;
}

.financeiro-card-titulo {
    color: #52637a;
    font-size: 13px;
    font-weight: 800;
}

.financeiro-card-icone {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55);
}

.financeiro-card-valor {
    margin-top: 6px;
    color: #061a38;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 0;
}

.financeiro-card-receber .financeiro-card-icone { background: #dbeafe; }
.financeiro-card-recebido .financeiro-card-icone { background: #d8f8e6; }
.financeiro-card-vencido .financeiro-card-icone { background: #ffe0df; }
.financeiro-card-pendente .financeiro-card-icone { background: #fff0bd; }

.financeiro-lista-box {
    border-color: #dbe4ef;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
}

.financeiro-lista-header {
    padding: 20px 24px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border-bottom-color: #dbe4ef;
}

.financeiro-lista-header h3 {
    color: #061a38;
    font-size: 19px;
    font-weight: 900;
}

.financeiro-lista-header span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    background: #eef4ff;
    color: #315780;
    font-size: 13px;
    font-weight: 800;
}

.financeiro-tabela-wrap {
    width: 100%;
    overflow-x: auto;
    background: #ffffff;
}

.financeiro-tabela {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.financeiro-tabela th {
    background: #f6f8fb !important;
    color: #52637a !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    border-bottom: 1px solid #dbe4ef !important;
    padding: 15px 16px !important;
}

.financeiro-tabela td {
    padding: 16px !important;
    border-bottom: 1px solid #edf2f7 !important;
    color: #172033 !important;
    vertical-align: middle !important;
}

.financeiro-tabela tbody tr:hover {
    background: #f8fbff !important;
}

.financeiro-tabela td:nth-child(1) {
    color: #061a38 !important;
    font-weight: 850;
}

.financeiro-tabela td:nth-child(5) {
    color: #061a38 !important;
    font-weight: 900;
}

.financeiro-tabela td:nth-child(6) {
    font-weight: 900;
}

.financeiro-tabela td:nth-child(7) a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8 !important;
    font-weight: 900;
    text-decoration: none !important;
}

.financeiro-tabela td:nth-child(7) a:hover {
    background: #dbeafe;
}

.financeiro-vazio {
    min-height: 300px;
    padding: 72px 20px;
    background:
        radial-gradient(circle at 50% 20%, rgba(47,128,237,0.08), transparent 30%),
        #ffffff;
}

.financeiro-vazio-icone {
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, #edf4ff, #e3fbf5);
    box-shadow: inset 0 0 0 1px #d8e6f5;
    font-size: 30px;
}

.financeiro-vazio h3 {
    color: #061a38;
    font-size: 20px;
    font-weight: 900;
}

.financeiro-vazio p {
    margin-top: 8px;
    color: #52637a;
    font-size: 15px;
}

@media (max-width: 1100px) {
    .financeiro-resumo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .financeiro-header {
        align-items: stretch;
        flex-direction: column;
    }

    .btn-nova-cobranca {
        width: 100%;
    }

    .financeiro-resumo {
        grid-template-columns: 1fr;
    }

    .financeiro-card {
        min-height: 118px;
    }

    .financeiro-lista-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .financeiro-tabela {
        min-width: 860px;
    }
}

/* VENDAS MODERNA */
#vendas > .section {
    border-color: #dbe4ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

#vendas > .section::before {
    content: "";
    display: block;
    height: 5px;
    background: linear-gradient(90deg, #071833, #2f80ed, #20c997);
}

#vendas .section-header {
    align-items: center;
    margin-bottom: 22px;
    padding: 6px 0 2px;
}

#vendas .section-header h2 {
    color: #061a38;
    font-size: 28px;
    letter-spacing: 0;
}

#vendas .section-header p {
    color: #52637a;
    font-size: 15px;
}

#vendas .section-header .btn-primary {
    min-height: 46px;
    padding: 0 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2563eb, #0f7de8);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24);
}

#vendas .section-header .btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8, #0b68c7);
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.30);
}

.vendas-resumo {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 22px 0 28px;
}

.vendas-card {
    min-height: 118px;
    padding: 22px 24px;
    border: 1px solid #dbe4ef;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #f7faff 100%);
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.07);
    position: relative;
    overflow: hidden;
}

.vendas-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: #2f80ed;
}

.vendas-card::after {
    content: "";
    position: absolute;
    right: -38px;
    bottom: -46px;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: rgba(47, 128, 237, 0.08);
}

.vendas-card:nth-child(1)::before { background: #f59e0b; }
.vendas-card:nth-child(2)::before { background: #2f80ed; }
.vendas-card:nth-child(3)::before { background: #20c997; }
.vendas-card:nth-child(4)::before { background: #ef4444; }

.vendas-card span,
.vendas-card strong {
    position: relative;
    z-index: 1;
}

.vendas-card span {
    display: block;
    color: #52637a;
    font-size: 13px;
    font-weight: 800;
}

.vendas-card strong {
    display: block;
    margin-top: 12px;
    color: #061a38;
    font-size: 32px;
    line-height: 1;
    font-weight: 900;
}

#vendas-lista {
    margin-top: 4px;
    border: 1px solid #dbe4ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

#vendas-lista .table-wrapper {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow-x: auto;
}

#vendas-lista table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

#vendas-lista table th {
    background: #f6f8fb !important;
    color: #52637a !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    border-bottom: 1px solid #dbe4ef !important;
    padding: 15px 16px !important;
}

#vendas-lista table td {
    padding: 16px !important;
    border-bottom: 1px solid #edf2f7 !important;
    color: #172033 !important;
    vertical-align: middle !important;
}

#vendas-lista table tbody tr:hover {
    background: #f8fbff !important;
}

#vendas-lista table td:nth-child(1),
#vendas-lista table td:nth-child(5) {
    color: #061a38 !important;
    font-weight: 900;
}

#vendas-lista .badge {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}

#vendas-lista .btn-sm {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 12px;
}

.vendas-vazio {
    min-height: 300px;
    padding: 72px 20px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 20%, rgba(47,128,237,0.08), transparent 30%),
        #ffffff;
}

.vendas-vazio-icone {
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, #edf4ff, #e3fbf5);
    box-shadow: inset 0 0 0 1px #d8e6f5;
    font-size: 30px;
}

.vendas-vazio h3 {
    margin: 0;
    color: #061a38;
    font-size: 20px;
    font-weight: 900;
}

.vendas-vazio p {
    margin: 8px 0 0;
    color: #52637a;
    font-size: 15px;
}

@media (max-width: 1100px) {
    .vendas-resumo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    #vendas .section-header {
        align-items: stretch;
        flex-direction: column;
    }

    #vendas .section-header .btn-primary {
        width: 100%;
    }

    .vendas-resumo {
        grid-template-columns: 1fr;
    }

    #vendas-lista table {
        min-width: 960px;
    }
}

/* ACAO PARA RETOMAR PENDENCIA NO DESPACHO */
.ficha-atividade-footer .btn-retomar-pendencia {
    border: 0;
    border-radius: 12px;
    padding: 12px 18px;
    background: #f59e0b;
    color: #111827;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(245, 158, 11, 0.22);
}

.ficha-atividade-footer .btn-retomar-pendencia:hover {
    background: #d97706;
    color: #ffffff;
    transform: translateY(-1px);
}

.ficha-atividade-footer .btn-retomar-pendencia:disabled {
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
}


.chamado-row {
    cursor:pointer;
}

.chamado-chat-overlay {
    align-items:center;
    justify-content:center;
    padding:24px;
}

.chamado-chat-modal {
    width:min(920px, 96vw);
    max-height:92vh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.chamado-chat-header {
    border-bottom:1px solid #e2e8f0;
}

.chamado-chat-header h2 {
    margin:0;
    color:#0f172a;
    font-size:22px;
}

.chamado-chat-header p {
    margin:6px 0 0;
    color:#64748b;
}

.chamado-chat-info {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    padding:16px 20px;
    border-bottom:1px solid #e2e8f0;
    background:#f8fafc;
    color:#475569;
    font-size:13px;
}

.chamado-chat-info > span:not(.chamado-status):not(.chamado-prioridade) {
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:5px 10px;
    border:1px solid #e2e8f0;
    border-radius:999px;
    background:#fff;
}

.chamado-chat-descricao {
    margin:16px 20px 0;
    padding:14px 16px;
    border:1px solid #e2e8f0;
    border-radius:12px;
    background:#fff;
    color:#334155;
    line-height:1.45;
}

.chamado-chat-body {
    min-height:0;
    padding:16px 20px;
    flex:1;
}

.chamado-chat-mensagens {
    height:360px;
    overflow:auto;
    padding:18px;
    border:1px solid #e2e8f0;
    border-radius:14px;
    background:#f8fafc;
}

.chamado-chat-msg {
    display:flex;
    margin-bottom:12px;
}

.chamado-chat-msg.admin {
    justify-content:flex-end;
}

.chamado-chat-balao {
    width:fit-content;
    max-width:min(620px, 82%);
    padding:12px 14px;
    border:1px solid #e2e8f0;
    border-radius:14px;
    background:#fff;
    box-shadow:0 8px 24px rgba(15,23,42,.06);
}

.chamado-chat-msg.admin .chamado-chat-balao {
    border-color:#bfdbfe;
    background:#eff6ff;
}

.chamado-chat-meta {
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:space-between;
    color:#64748b;
    font-size:12px;
}

.chamado-chat-meta strong {
    color:#0f172a;
}

.chamado-chat-balao p {
    margin:8px 0 0;
    color:#1e293b;
    line-height:1.45;
    white-space:pre-wrap;
}

.chamado-chat-vazio {
    display:grid;
    place-items:center;
    height:100%;
    color:#64748b;
    text-align:center;
}

.chamado-chat-form {
    display:grid;
    grid-template-columns:1fr auto;
    gap:12px;
    padding:16px 20px 20px;
    border-top:1px solid #e2e8f0;
    background:#fff;
}

.chamado-chat-form textarea {
    resize:vertical;
    min-height:72px;
    max-height:140px;
    border:1px solid #cbd5e1;
    border-radius:12px;
    padding:12px 14px;
    font:inherit;
    color:#0f172a;
    outline:none;
}

.chamado-chat-form textarea:focus {
    border-color:#2563eb;
    box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

.chamado-chat-form button {
    align-self:stretch;
    border:0;
    border-radius:12px;
    padding:0 18px;
    background:#2563eb;
    color:#fff;
    font-weight:800;
    cursor:pointer;
}

.chamado-chat-form button:disabled,
.chamado-chat-form textarea:disabled {
    cursor:not-allowed;
    opacity:.65;
}

@media (max-width: 760px) {
    .chamado-chat-overlay {
        padding:10px;
    }

    .chamado-chat-form {
        grid-template-columns:1fr;
    }

    .chamado-chat-mensagens {
        height:300px;
    }
}


.chamados-table .btn-chamado-detalhes {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:104px;
    min-height:36px;
    border:1px solid #bfdbfe;
    border-radius:10px;
    background:#eff6ff;
    color:#1d4ed8;
    font-size:12px;
    font-weight:800;
    line-height:1;
    text-decoration:none;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(37,99,235,.10);
}

.chamados-table .btn-chamado-detalhes:hover {
    border-color:#93c5fd;
    background:#dbeafe;
    color:#1e40af;
}

.chamados-table .btn-chamado-detalhes:focus-visible {
    outline:3px solid rgba(37,99,235,.22);
    outline-offset:2px;
}

.chamado-chat-header .btn-fechar {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border:1px solid #e2e8f0;
    border-radius:10px;
    background:#fff;
    color:#334155;
    font-size:24px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(15,23,42,.08);
}

.chamado-chat-header .btn-fechar:hover {
    border-color:#cbd5e1;
    background:#f8fafc;
    color:#0f172a;
}

.chamado-chat-header .btn-fechar:focus-visible {
    outline:3px solid rgba(37,99,235,.18);
    outline-offset:2px;
}


.chamado-chat-form .btn-chamado-resolver-admin {
    align-self:stretch;
    border:1px solid #bbf7d0;
    border-radius:12px;
    padding:0 16px;
    background:#ecfdf5;
    color:#047857;
    font-weight:800;
    cursor:pointer;
}

.chamado-chat-form .btn-chamado-resolver-admin:hover {
    border-color:#86efac;
    background:#dcfce7;
    color:#065f46;
}

.chamado-chat-form .btn-chamado-resolver-admin:disabled {
    cursor:not-allowed;
    opacity:.65;
}


/* =====================================================
   RORAILINK_SCROLL_HISTORICO_REDE
   Limita a altura do histórico na ficha do cliente
   ===================================================== */

[id^="historico-rede-"] {
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    scrollbar-gutter: stable;
}