:root {
    --tg-midnight: #073B3A;
    --tg-dartmouth: #0B6E4F;
    --tg-pigment: #08A045;
    --tg-black: #050505;
    --tg-white: #ffffff;
    --tg-bg: #f4f7f6;
    --tg-sidebar: #073B3A;
    --tg-card: #ffffff;
    --tg-card-soft: #f8faf9;
    --tg-border: rgba(7,59,58,.12);
    --tg-text: #0f172a;
    --tg-muted: #64748b;
    --tg-primary: #08A045;
    --tg-primary-dark: #0B6E4F;
    --tg-primary-soft: rgba(8,160,69,.12);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "DM Sans", sans-serif;
    background: var(--tg-bg);
    color: var(--tg-text);
}

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

/* Sidebar */
.tg-sidebar {
    width: 280px;
    min-height: 100vh;
    background: linear-gradient(180deg, var(--tg-midnight) 0%, #052827 100%);
    border-right: 1px solid var(--tg-border);
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, width .25s ease;
}

.tg-brand {
    height: 80px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid var(--tg-border);
}

.tg-brand-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--tg-dartmouth), var(--tg-pigment));
    color: var(--tg-white);
    display: grid;
    place-items: center;
    font-size: 24px;
    box-shadow: 0 10px 22px rgba(8,160,69,.20);
}

.tg-brand-title {
    font-weight: 700;
    font-size: 17px;
    color: var(--tg-white);
}

.tg-brand-subtitle {
    color: var(--tg-muted);
    font-size: 12px;
}

.tg-sidebar-close {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--tg-text);
    font-size: 24px;
}

.tg-menu {
    padding: 20px 14px;
    overflow-y: auto;
    flex: 1;
}

.tg-menu-label {
    color: var(--tg-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 18px 12px 8px;
}

.tg-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 14px;
    color: rgba(255,255,255,.76);
    text-decoration: none;
    font-weight: 500;
    transition: all .2s ease;
}

    .tg-menu-item i {
        font-size: 22px;
    }

    .tg-menu-item:hover {
        background: rgba(8,160,69,.12);
        color: var(--tg-white);
    }

    .tg-menu-item.active {
        background: linear-gradient(135deg, rgba(11,110,79,.95), rgba(8,160,69,.85));
        color: var(--tg-white);
        box-shadow: inset 3px 0 0 var(--tg-white), 0 10px 24px rgba(8,160,69,.16);
    }

.tg-sidebar-footer {
    margin: 14px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.045);
    border: 1px solid var(--tg-border);
    display: flex;
    align-items: center;
    gap: 12px;
}

.tg-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tg-dartmouth), var(--tg-pigment));
    color: var(--tg-white);
    display: grid;
    place-items: center;
    font-weight: 700;
}

.tg-user {
    font-size: 14px;
    font-weight: 600;
    color: var(--tg-white);
}

.tg-role {
    color: var(--tg-muted);
    font-size: 12px;
}

/* Main */
.tg-main {
    margin-left: 280px;
    width: calc(100% - 280px);
    min-height: 100vh;
    transition: margin-left .25s ease, width .25s ease;
}

.tg-topbar {
    height: 82px;
    padding: 0 32px;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--tg-border);
    display: flex;
    align-items: center;
    gap: 18px;
    position: sticky;
    top: 0;
    z-index: 100;
}

    .tg-topbar h1 {
        margin: 0;
        font-size: 24px;
        font-weight: 700;
        color: var(--tg-text);
    }

    .tg-topbar p {
        margin: 4px 0 0;
        color: var(--tg-muted);
        font-size: 14px;
    }
.tg-menu-button {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(11, 110, 79, .22);
    background: #ffffff;
    color: var(--tg-dartmouth);
    font-size: 24px;
    display: grid;
    place-items: center;
    transition: all .18s ease;
}

    .tg-menu-button i {
        color: var(--tg-dartmouth);
    }

    .tg-menu-button:hover {
        background: rgba(8, 160, 69, .10);
        border-color: rgba(8, 160, 69, .35);
        color: var(--tg-midnight);
    }

        .tg-menu-button:hover i {
            color: var(--tg-midnight);
        }

.tg-actions {
    margin-left: auto;
}

.tg-content {
    padding: 32px;
}

/* Overlay mobile */
.tg-overlay {
    display: none;
}

/* Cards */
.card {
    background: var(--tg-card);
    border: 1px solid var(--tg-border);
    border-radius: 20px;
    box-shadow: 0 14px 35px rgba(7,59,58,.08);
    color: var(--tg-text);
}

.card-header {
    background: #ffffff;
    border-bottom: 1px solid rgba(7,59,58,.10);
    border-radius: 20px 20px 0 0 !important;
}

.card-title {
    color: var(--tg-text);
}

.card-body {
    color: var(--tg-text);
}

.card-footer {
    background: #ffffff;
    border-top: 1px solid rgba(7,59,58,.10);
}

/* Tablas */
.table {
    --tblr-table-bg: #ffffff;
    --tblr-table-color: var(--tg-text);
    --tblr-table-border-color: rgba(7,59,58,.10);
    color: var(--tg-text);
    background: #ffffff;
}

    .table thead th {
        color: #475569;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .04em;
        background: #f8faf9;
        border-bottom: 1px solid rgba(7,59,58,.12);
    }

    .table tbody tr {
        background: #ffffff;
    }

        .table tbody tr:hover {
            background: rgba(8,160,69,.045);
        }

    .table td {
        vertical-align: middle;
    }

/* Formularios */
.form-control,
.form-select {
    background-color: #ffffff;
    border-color: rgba(7,59,58,.18);
    color: var(--tg-text);
}

    .form-control:focus,
    .form-select:focus {
        background-color: #ffffff;
        border-color: var(--tg-pigment);
        color: var(--tg-text);
        box-shadow: 0 0 0 .22rem rgba(8,160,69,.16);
    }

    .form-control::placeholder {
        color: #94a3b8;
    }

.form-label {
    color: #334155;
    font-weight: 600;
}

.input-group-text {
    background: #f8faf9;
    border-color: rgba(7,59,58,.18);
    color: #475569;
}

/* Botones */
.btn-primary {
    background: linear-gradient(135deg, var(--tg-dartmouth), var(--tg-pigment));
    border-color: var(--tg-pigment);
    color: var(--tg-white);
}

    .btn-primary:hover,
    .btn-primary:focus {
        background: linear-gradient(135deg, var(--tg-pigment), var(--tg-dartmouth));
        border-color: var(--tg-pigment);
        color: var(--tg-white);
    }


/* Botón secundario */
.btn-secondary {
    background: rgba(255, 255, 255, .96);
    border-color: rgba(11, 110, 79, .28);
    color: var(--tg-dartmouth);
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(7, 59, 58, .08);
}

    .btn-secondary:hover,
    .btn-secondary:focus {
        background: rgba(8, 160, 69, .10);
        border-color: var(--tg-pigment);
        color: var(--tg-dartmouth);
        box-shadow: 0 10px 24px rgba(7, 59, 58, .12);
    }


/* Botón third / terciario */
.btn-third {
    background: rgba(7, 59, 58, .06);
    border: 1px solid rgba(11, 110, 79, .22);
    color: var(--tg-dartmouth);
    font-weight: 800;
    box-shadow: none;
}

    .btn-third:hover,
    .btn-third:focus {
        background: rgba(7, 59, 58, .11);
        border-color: var(--tg-dartmouth);
        color: var(--tg-dartmouth);
        box-shadow: 0 8px 18px rgba(7, 59, 58, .10);
    }

.btn-primary,
.btn-secondary {
    border-radius: 14px;
    font-weight: 900;
    transition: all .18s ease;
}

    .btn-primary:hover,
    .btn-secondary:hover {
        transform: translateY(-1px);
    }
.btn-outline-primary {
    color: var(--tg-pigment);
    border-color: rgba(8,160,69,.7);
}

    .btn-outline-primary:hover {
        background: var(--tg-pigment);
        border-color: var(--tg-pigment);
        color: var(--tg-white);
    }

.btn-success {
    background: var(--tg-pigment);
    border-color: var(--tg-pigment);
    color: var(--tg-white);
}

.btn-outline-success {
    color: var(--tg-pigment);
    border-color: var(--tg-pigment);
}

    .btn-outline-success:hover {
        background: var(--tg-pigment);
        border-color: var(--tg-pigment);
        color: var(--tg-white);
    }

.btn-ghost-primary,
.btn-ghost-success {
    color: var(--tg-pigment);
}

    .btn-ghost-primary:hover,
    .btn-ghost-success:hover {
        background: rgba(8,160,69,.14);
        color: var(--tg-white);
    }

.btn-link {
    color: var(--tg-muted);
}

    .btn-link:hover {
        color: var(--tg-white);
    }

/* Bootstrap/Tabler subtle overrides */
.bg-primary-subtle,
.bg-success-subtle,
.bg-info-subtle {
    background-color: rgba(8,160,69,.16) !important;
}

.text-primary,
.text-success,
.text-info {
    color: var(--tg-pigment) !important;
}

.bg-warning-subtle {
    background-color: rgba(245,158,11,.16) !important;
}

.text-warning {
    color: #facc15 !important;
}


.bg-primary-lt {
    background: rgba(11, 110, 79, .12) !important;
    color: #0B6E4F !important;
    border: 1px solid rgba(11, 110, 79, .28);
    font-weight: 700;
}

/* Badges */
.badge.bg-primary-lt {
    background: rgba(11, 110, 79, .12) !important;
    color: #0B6E4F !important;
    border: 1px solid rgba(11, 110, 79, .28);
    font-weight: 700;
}

.badge.bg-success-lt {
    background: rgba(8,160,69,.20) !important;
    color: #7cffb5 !important;
}

.badge.bg-warning-lt {
    background: rgba(245,158,11,.16) !important;
    color: #facc15 !important;
}

.badge.bg-danger-lt {
    background: rgba(239,68,68,.16) !important;
    color: #f87171 !important;
}

.badge.bg-secondary-lt {
    background: rgba(255,255,255,.10) !important;
    color: rgba(255,255,255,.72) !important;
}

/* Tabs */
.nav-tabs {
    border-bottom-color: var(--tg-border);
}

    .nav-tabs .nav-link {
        color: var(--tg-muted);
        border-color: transparent;
    }

        .nav-tabs .nav-link:hover {
            color: var(--tg-white);
            border-color: transparent;
        }

        .nav-tabs .nav-link.active {
            color: var(--tg-white);
            background: rgba(8,160,69,.12);
            border-color: rgba(8,160,69,.35);
        }

/* Accordion */
.accordion-item {
    background: #ffffff;
    border: 1px solid var(--tg-border);
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(7,59,58,.06);
}

.accordion-button {
    background: #ffffff;
    color: var(--tg-text);
}

    .accordion-button:not(.collapsed) {
        background: linear-gradient(90deg, rgba(8,160,69,.10), rgba(11,110,79,.04));
        color: var(--tg-text);
        box-shadow: none;
    }

    .accordion-button::after {
        filter: none;
    }

.accordion-body {
    background: #ffffff;
}

/* Dropdown */
.dropdown-menu {
    background: var(--tg-card);
    border: 1px solid var(--tg-border);
    box-shadow: 0 18px 40px rgba(0,0,0,.32);
}

.dropdown-item {
    color: rgba(255,255,255,.78);
}

    .dropdown-item:hover {
        background: rgba(8,160,69,.14);
        color: var(--tg-white);
    }


#servicioModal .modal-header,
#servicioModal .modal-footer {
    background: #ffffff;
    border-color: var(--tg-border);
}

.servicio-modal-body {
    background: var(--tg-bg);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.servicio-modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 20;
    box-shadow: 0 -8px 24px rgba(7,59,58,.10);
}

.tg-form-card {
    border: 1px solid var(--tg-border);
    box-shadow: 0 10px 28px rgba(7,59,58,.06);
}

/* Responsive */
@media (max-width: 991.98px) {
    .tg-sidebar {
        transform: translateX(-100%);
    }

        .tg-sidebar.show {
            transform: translateX(0);
        }

    .tg-main {
        margin-left: 0;
        width: 100%;
    }

    .tg-topbar {
        padding: 0 18px;
    }

    .tg-content {
        padding: 20px;
    }

    .tg-overlay.show {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.55);
        z-index: 1040;
    }
}

/* Sidebar collapsed */
.tg-sidebar.collapsed {
    transform: translateX(-100%);
}

.tg-main.expanded {
    margin-left: 0;
    width: 100%;
}

@media (min-width: 992px) {
    .tg-sidebar.collapsed {
        width: 86px;
        transform: none;
    }

        .tg-sidebar.collapsed .tg-brand-title,
        .tg-sidebar.collapsed .tg-brand-subtitle,
        .tg-sidebar.collapsed .tg-menu-label,
        .tg-sidebar.collapsed .tg-menu-item span,
        .tg-sidebar.collapsed .tg-sidebar-footer div:not(.tg-avatar) {
            display: none;
        }

        .tg-sidebar.collapsed .tg-brand {
            justify-content: center;
            padding: 0;
        }

        .tg-sidebar.collapsed .tg-menu {
            padding: 20px 10px;
        }

        .tg-sidebar.collapsed .tg-menu-item {
            justify-content: center;
            padding: 0;
        }

            .tg-sidebar.collapsed .tg-menu-item i {
                font-size: 24px;
            }

        .tg-sidebar.collapsed .tg-sidebar-footer {
            justify-content: center;
            padding: 12px;
        }

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

/* Stat cards */
.tg-stat-card .card-body {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tg-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 26px;
}

.tg-stat-value {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    color: var(--tg-white);
}

.tg-stat-label {
    color: var(--tg-muted);
    font-size: 14px;
    margin-top: 4px;
}

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

.tg-search {
    width: 280px;
    position: relative;
}

    .tg-search i {
        position: absolute;
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--tg-muted);
        z-index: 1;
    }

    .tg-search .form-control {
        padding-left: 38px;
        border-radius: 14px;
    }

@media (max-width: 767.98px) {
    .tg-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .tg-search {
        width: 100%;
    }
}

.text-muted {
    color: var(--tg-muted) !important;
}

/* Paradas */
.route-number {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--tg-primary-soft);
    color: var(--tg-white);
    display: grid;
    place-items: center;
    font-weight: 700;
    margin-bottom: 2px;
}

.parada-item {
    border: 1px dashed var(--tg-border);
    background: rgba(255,255,255,.025);
}


/* =========================
   Modales estilo TransportGest
   Verde + blanco limpio
   ========================= */

.modal-content {
    color: var(--tg-text) !important;
    border: 1px solid rgba(7, 59, 58, .18) !important;
    border-radius: 22px !important;
    box-shadow: 0 28px 80px rgba(7, 59, 58, .28) !important;
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(135deg, var(--tg-midnight), var(--tg-dartmouth)) !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    padding: 1rem 1.25rem;
}

.modal-title {
    color: #ffffff !important;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.modal-header .text-muted {
    color: rgba(255,255,255,.68) !important;
}

.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: .9;
}

.modal-body {
    background: linear-gradient(180deg, #ffffff 0%, #f6fbf8 100%) !important;
    color: var(--tg-text) !important;
}

.modal-footer {
    background: #ffffff !important;
    border-top: 1px solid rgba(7, 59, 58, .12) !important;
    padding: 1rem 1.25rem;
}

/* Fondo detrás del modal */
.modal-backdrop.show {
    opacity: .55;
    background-color: #050505;
}

.modal-blur {
    backdrop-filter: blur(7px);
}

/* =========================
   Inputs dentro de modales
   ========================= */

.modal .form-label {
    color: var(--tg-midnight) !important;
    font-weight: 700;
    font-size: .82rem;
}

.modal .form-control,
.modal .form-select {
    background-color: #ffffff !important;
    border: 1px solid rgba(11, 110, 79, .28) !important;
    color: #0f172a !important;
    border-radius: 12px;
    min-height: 42px;
    box-shadow: 0 1px 0 rgba(7,59,58,.04);
}

    .modal .form-control:hover,
    .modal .form-select:hover {
        border-color: rgba(8, 160, 69, .55) !important;
    }

    .modal .form-control:focus,
    .modal .form-select:focus {
        background-color: #ffffff !important;
        border-color: var(--tg-pigment) !important;
        color: #0f172a !important;
        box-shadow: 0 0 0 .22rem rgba(8, 160, 69, .16) !important;
    }

    .modal .form-control::placeholder {
        color: #94a3b8 !important;
    }

.modal textarea.form-control {
    resize: vertical;
}

/* Input group */
.modal .input-group-text {
    background: rgba(8, 160, 69, .10) !important;
    border-color: rgba(11, 110, 79, .28) !important;
    color: var(--tg-dartmouth) !important;
    font-weight: 700;
}

/* Select options */
.modal select option {
    color: #0f172a;
    background: #ffffff;
}

/* =========================
   Cards dentro de modales
   ========================= */

.modal .card,
#servicioModal .card {
    background: #ffffff !important;
    color: var(--tg-text) !important;
    border: 1px solid rgba(11, 110, 79, .15) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 28px rgba(7, 59, 58, .07) !important;
}

.modal .card-header,
#servicioModal .card-header {
    background: linear-gradient(90deg, rgba(8, 160, 69, .10), rgba(11, 110, 79, .04)) !important;
    border-bottom: 1px solid rgba(11, 110, 79, .12) !important;
    color: var(--tg-midnight) !important;
}

.modal .card-title,
#servicioModal .card-title {
    color: var(--tg-midnight) !important;
    font-weight: 800;
}

.modal .card-body,
#servicioModal .card-body {
    background: #ffffff !important;
    color: var(--tg-text) !important;
}

/* =========================
   Modal fullscreen servicio
   ========================= */



#servicioModal .modal-header {
    background: linear-gradient(135deg, var(--tg-midnight), var(--tg-dartmouth)) !important;
    color: #ffffff !important;
}

#servicioModal .modal-body,
#servicioModal .servicio-modal-body {
    background: #f4f7f6 !important;
    color: var(--tg-text) !important;
}

#servicioModal .modal-footer,
#servicioModal .servicio-modal-footer {
    background: #ffffff !important;
    border-top: 1px solid rgba(7, 59, 58, .14) !important;
    box-shadow: 0 -8px 24px rgba(7, 59, 58, .10);
}

/* =========================
   Botones en modales
   ========================= */

.modal .btn-primary {
    background: linear-gradient(135deg, var(--tg-dartmouth), var(--tg-pigment)) !important;
    border-color: var(--tg-pigment) !important;
    color: #ffffff !important;
    font-weight: 700;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(8, 160, 69, .20);
}

    .modal .btn-primary:hover {
        background: linear-gradient(135deg, var(--tg-pigment), var(--tg-dartmouth)) !important;
        border-color: var(--tg-pigment) !important;
    }

.modal .btn-outline-primary {
    color: var(--tg-dartmouth) !important;
    border-color: rgba(11, 110, 79, .45) !important;
    background: #ffffff !important;
    border-radius: 12px;
}

    .modal .btn-outline-primary:hover {
        background: var(--tg-dartmouth) !important;
        color: #ffffff !important;
    }

.modal .btn-outline-secondary {
    color: #334155 !important;
    border-color: rgba(15, 23, 42, .18) !important;
    background: #ffffff !important;
    border-radius: 12px;
}

    .modal .btn-outline-secondary:hover {
        background: #f1f5f9 !important;
        color: #0f172a !important;
    }

.modal .btn-link {
    color: var(--tg-dartmouth) !important;
    text-decoration: none;
    font-weight: 600;
}

    .modal .btn-link:hover {
        color: var(--tg-pigment) !important;
    }

/* =========================
   Tablas dentro de modales
   ========================= */

.modal .table {
    background: #ffffff !important;
    color: var(--tg-text) !important;
}

    .modal .table thead th {
        background: rgba(8, 160, 69, .08) !important;
        color: var(--tg-midnight) !important;
        border-bottom: 1px solid rgba(11, 110, 79, .14) !important;
    }

    .modal .table tbody tr:hover {
        background: rgba(8, 160, 69, .045) !important;
    }

/* =========================
   Modales pequeños: nueva dirección, asignar conductor, etc.
   ========================= */

#nuevaDireccionModal .modal-content,
#asignarConductorModal .modal-content,
#abonoClienteModal .modal-content,
#pagoConductorModal .modal-content {
    border-radius: 22px !important;
}

#nuevaDireccionModal .modal-body,
#asignarConductorModal .modal-body,
#abonoClienteModal .modal-body,
#pagoConductorModal .modal-body {
    background: #ffffff !important;
}


/* =========================
   Servicios - Vista agenda
   ========================= */

.tg-filter-card,
.tg-summary-card {
    background: linear-gradient(135deg, rgba(7, 59, 58, .96), rgba(11, 110, 79, .92));
    border-color: rgba(8, 160, 69, .22);
    color: #ffffff;
}

    .tg-filter-card .form-label,
    .tg-summary-card .tg-stat-label,
    .tg-filter-card .text-muted,
    .tg-summary-card .text-muted {
        color: rgba(255, 255, 255, .72) !important;
    }

    .tg-filter-card .form-control,
    .tg-filter-card .form-select {
        background: rgba(255, 255, 255, .96);
        color: #0f172a;
        border-color: rgba(255, 255, 255, .28);
    }

        .tg-filter-card .form-control:focus,
        .tg-filter-card .form-select:focus {
            border-color: var(--tg-pigment);
            box-shadow: 0 0 0 .22rem rgba(8, 160, 69, .22);
        }

    .tg-summary-card .tg-stat-value {
        color: #ffffff;
    }

    .tg-summary-card .tg-stat-icon {
        background: rgba(255, 255, 255, .14) !important;
        color: #ffffff !important;
    }

/* Accordion de días */

.tg-day-accordion {
    border: 1px solid rgba(7, 59, 58, .14);
    box-shadow: 0 12px 30px rgba(7, 59, 58, .08);
}

    .tg-day-accordion .accordion-button {
        background: #ffffff;
        color: #0f172a;
    }

        .tg-day-accordion .accordion-button:not(.collapsed) {
            background: linear-gradient(90deg, rgba(7, 59, 58, .12), rgba(8, 160, 69, .08));
            color: #0f172a;
        }

.tg-day-title {
    color: var(--tg-midnight);
    font-size: 1rem;
    text-transform: capitalize;
}

.tg-date-badge {
    background: var(--tg-midnight) !important;
    color: #ffffff !important;
    border-radius: 999px;
    padding: .45rem .7rem;
    font-weight: 700;
}

/* Tabla de servicios */

#accordionServiciosDias .table thead th {
    background: #f3f8f5;
    color: var(--tg-midnight);
    font-weight: 800;
}

#accordionServiciosDias .table tbody td {
    color: #0f172a;
}

.tg-service-id {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 30px;
    padding: 0 .55rem;
    border-radius: 999px;
    background: var(--tg-midnight);
    color: #ffffff;
    font-weight: 800;
    font-size: .85rem;
    box-shadow: 0 6px 14px rgba(7, 59, 58, .16);
}

.tg-time-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 30px;
    padding: 0 .6rem;
    border-radius: 999px;
    background: rgba(11, 110, 79, .12);
    color: var(--tg-dartmouth);
    font-weight: 800;
    border: 1px solid rgba(11, 110, 79, .22);
}

.tg-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    height: 30px;
    padding: 0 .65rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
}

.tg-status-assigned {
    background: rgba(8, 160, 69, .14);
    color: var(--tg-pigment);
    border: 1px solid rgba(8, 160, 69, .26);
}

.tg-status-unassigned {
    background: rgba(245, 158, 11, .14);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, .26);
}

.tg-status-cancelled {
    background: rgba(239, 68, 68, .12);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, .24);
}

/* Botones WhatsApp más limpios sobre tabla blanca */

#accordionServiciosDias .btn-outline-success {
    background: #ffffff;
    border-color: rgba(8, 160, 69, .35);
    color: var(--tg-pigment);
}

    #accordionServiciosDias .btn-outline-success:hover {
        background: var(--tg-pigment);
        color: #ffffff;
    }


.tg-tabs-pill {
    display: inline-flex;
    gap: .35rem;
    padding: .35rem;
    background: rgba(7, 59, 58, .08);
    border: 1px solid rgba(7, 59, 58, .12);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.tg-tab-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: .45rem .9rem;
    border-radius: 999px;
    color: #0B6E4F;
    text-decoration: none;
    font-weight: 700;
    font-size: .88rem;
    transition: all .18s ease;
}

    .tg-tab-pill:hover {
        background: rgba(8, 160, 69, .10);
        color: #073B3A;
        text-decoration: none;
    }

    .tg-tab-pill.active {
        background: linear-gradient(135deg, #0B6E4F, #08A045);
        color: #ffffff;
        box-shadow: 0 8px 18px rgba(8, 160, 69, .20);
    }

        .tg-tab-pill.active i {
            color: #ffffff;
        }


    .tg-tab-pill.tg-tab-danger {
        color: #dc2626;
    }

        .tg-tab-pill.tg-tab-danger:hover {
            background: rgba(220, 38, 38, .10);
            color: #991b1b;
        }

        .tg-tab-pill.tg-tab-danger.active {
            background: linear-gradient(135deg, #991b1b, #dc2626);
            color: #ffffff;
            box-shadow: 0 8px 18px rgba(220, 38, 38, .20);
        }

            .tg-tab-pill.tg-tab-danger.active i {
                color: #ffffff;
            }

.tg-cartera-tabs-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 100%;
    flex-wrap: wrap;
}

.tg-cartera-tabs {
    display: flex;
    gap: .65rem;
    flex-wrap: wrap;
}

.tg-cartera-tab {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 230px;
    padding: .8rem 1rem;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(7, 59, 58, .12);
    color: var(--tg-text);
    text-decoration: none;
    transition: all .18s ease;
}

    .tg-cartera-tab:hover {
        background: rgba(8, 160, 69, .055);
        border-color: rgba(8, 160, 69, .24);
        color: var(--tg-text);
        text-decoration: none;
    }

    .tg-cartera-tab.active {
        background: linear-gradient(135deg, rgba(7, 59, 58, .96), rgba(11, 110, 79, .92));
        border-color: rgba(8, 160, 69, .28);
        color: #ffffff;
        box-shadow: 0 12px 28px rgba(7, 59, 58, .16);
    }

.tg-cartera-tab-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(8, 160, 69, .12);
    color: var(--tg-pigment);
    font-size: 1.35rem;
    flex: 0 0 auto;
}

.tg-cartera-tab-icon-warning {
    background: rgba(245, 158, 11, .13);
    color: #b45309;
}

.tg-cartera-tab.active .tg-cartera-tab-icon {
    background: rgba(255, 255, 255, .14);
    color: #ffffff;
}

.tg-cartera-tab-title {
    display: block;
    font-weight: 800;
    line-height: 1.1;
}

.tg-cartera-tab-subtitle {
    display: block;
    color: var(--tg-muted);
    font-size: .8rem;
    margin-top: .2rem;
}

.tg-cartera-tab.active .tg-cartera-tab-subtitle {
    color: rgba(255, 255, 255, .72);
}

.tg-cartera-profit {
    padding: .75rem 1rem;
    border-radius: 18px;
    background: rgba(8, 160, 69, .08);
    border: 1px solid rgba(8, 160, 69, .18);
    color: var(--tg-midnight);
    min-width: 210px;
    text-align: right;
}

@media (max-width: 767.98px) {
    .tg-cartera-tabs-wrapper {
        align-items: stretch;
    }

    .tg-cartera-tabs {
        width: 100%;
    }

        .tg-cartera-tabs .nav-item,
        .tg-cartera-tab {
            width: 100%;
        }

    .tg-cartera-profit {
        width: 100%;
        text-align: left;
    }
}

/* =========================
   Cards resumen cartera - alto contraste
   ========================= */

.tg-summary-card {
    border: 0 !important;
    overflow: hidden;
    position: relative;
    color: #ffffff !important;
    box-shadow: 0 16px 34px rgba(7, 59, 58, .18);
    transition: transform .18s ease, box-shadow .18s ease;
}

    .tg-summary-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 22px 42px rgba(7, 59, 58, .24);
    }

    .tg-summary-card .card-body {
        position: relative;
        z-index: 1;
    }

    .tg-summary-card .tg-stat-value {
        color: #ffffff !important;
        font-weight: 900;
        text-shadow: 0 1px 2px rgba(0,0,0,.18);
    }

    .tg-summary-card .tg-stat-label {
        color: rgba(255,255,255,.92) !important;
        font-weight: 800;
    }

    .tg-summary-card .text-muted {
        color: rgba(255,255,255,.74) !important;
    }

    .tg-summary-card .tg-stat-icon {
        background: rgba(255,255,255,.16) !important;
        color: #ffffff !important;
        box-shadow: none;
    }

/* Servicios */
.tg-summary-services {
    background: linear-gradient(135deg, #073B3A, #0B6E4F) !important;
}

/* Clientes por cobrar */
.tg-summary-receivable {
    background: linear-gradient(135deg, #0B6E4F, #08A045) !important;
}

/* Conductores por pagar */
.tg-summary-payable {
    background: linear-gradient(135deg, #92400e, #d97706) !important;
}

/* Utilidad */
.tg-summary-profit {
    background: linear-gradient(135deg, #052e2d, #073B3A) !important;
}

/* Mis servicios */
.tg-summary-own {
    background: linear-gradient(135deg, #1e3a8a, #2563eb) !important;
}

/* =========================
   Login
   ========================= */

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: radial-gradient(circle at top right, rgba(8, 160, 69, .18), transparent 30rem), linear-gradient(135deg, #073B3A 0%, #041f1f 100%);
}

.auth-card {
    width: 100%;
    max-width: 430px;
    background: #ffffff;
    border: 1px solid rgba(7, 59, 58, .12);
    border-radius: 26px;
    padding: 2rem;
    box-shadow: 0 30px 90px rgba(5, 5, 5, .28);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1.7rem;
}

.auth-brand-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #0B6E4F, #08A045);
    color: #ffffff;
    font-size: 1.6rem;
    box-shadow: 0 12px 28px rgba(8, 160, 69, .24);
}

.auth-brand-title {
    font-weight: 900;
    font-size: 1.1rem;
    color: #073B3A;
    letter-spacing: -.03em;
}

.auth-brand-subtitle {
    color: #64748b;
    font-size: .82rem;
}

.auth-header {
    margin-bottom: 1.5rem;
}

    .auth-header h1 {
        margin: 0;
        color: #073B3A;
        font-size: 1.6rem;
        font-weight: 900;
        letter-spacing: -.04em;
    }

    .auth-header p {
        margin: .35rem 0 0;
        color: #64748b;
    }

.auth-card .form-label {
    color: #073B3A;
    font-weight: 700;
}

.auth-card .form-control {
    background: #ffffff;
    color: #0f172a;
    border-color: rgba(11, 110, 79, .24);
}

    .auth-card .form-control:focus {
        border-color: #08A045;
        box-shadow: 0 0 0 .22rem rgba(8, 160, 69, .16);
    }

.auth-card .input-group-text {
    background: rgba(8, 160, 69, .10);
    border-color: rgba(11, 110, 79, .24);
    color: #0B6E4F;
}

.auth-card .form-check-input:checked {
    background-color: #08A045;
    border-color: #08A045;
}

/* =========================
   Login YGConfortPlus
   ========================= */

.yg-auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: radial-gradient(circle at top right, rgba(8, 160, 69, .18), transparent 30rem), radial-gradient(circle at bottom left, rgba(11, 110, 79, .18), transparent 28rem), linear-gradient(135deg, #f4f7f6 0%, #eaf4ef 100%);
    font-family: "DM Sans", sans-serif;
}

.yg-auth-shell {
    width: 100%;
    max-width: 1080px;
    min-height: 650px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    background: #ffffff;
    border: 1px solid rgba(7, 59, 58, .12);
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(7, 59, 58, .22);
}

.yg-auth-hero {
    position: relative;
    color: #ffffff;
    background: radial-gradient(circle at top right, rgba(8, 160, 69, .42), transparent 24rem), linear-gradient(145deg, #073B3A 0%, #0B6E4F 62%, #08A045 100%);
    padding: 2.25rem;
    overflow: hidden;
}

    .yg-auth-hero::before {
        content: "";
        position: absolute;
        width: 330px;
        height: 330px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .09);
        right: -110px;
        top: -110px;
    }

    .yg-auth-hero::after {
        content: "";
        position: absolute;
        width: 240px;
        height: 240px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .07);
        left: -90px;
        bottom: -90px;
    }

.yg-auth-hero-content {
    position: relative;
    z-index: 1;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.yg-auth-logo {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.yg-auth-logo-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: 1.75rem;
    box-shadow: 0 18px 38px rgba(5, 5, 5, .16);
}

.yg-auth-logo-title {
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: -.03em;
    color: #ffffff;
}

.yg-auth-logo-subtitle {
    font-size: .82rem;
    color: rgba(255, 255, 255, .72);
}

.yg-auth-hero-text {
    margin-top: auto;
    margin-bottom: auto;
    max-width: 470px;
}

.yg-auth-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .9);
    font-size: .82rem;
    font-weight: 700;
    margin-bottom: 1.15rem;
}

.yg-auth-hero-text h1 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.3rem);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.06em;
    color: #ffffff;
}

.yg-auth-hero-text p {
    margin: 1.2rem 0 0;
    max-width: 420px;
    color: rgba(255, 255, 255, .76);
    font-size: 1rem;
    line-height: 1.6;
}

.yg-auth-hero-stats {
    display: flex;
    gap: .9rem;
}

    .yg-auth-hero-stats > div {
        min-width: 120px;
        padding: .9rem 1rem;
        border-radius: 18px;
        background: rgba(255, 255, 255, .12);
        border: 1px solid rgba(255, 255, 255, .14);
    }

    .yg-auth-hero-stats strong {
        display: block;
        font-size: 1.15rem;
        color: #ffffff;
    }

    .yg-auth-hero-stats span {
        display: block;
        margin-top: .15rem;
        color: rgba(255, 255, 255, .68);
        font-size: .78rem;
    }

.yg-auth-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.25rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8faf9 100%);
}

.yg-auth-card {
    width: 100%;
    max-width: 410px;
}

.yg-auth-mobile-brand {
    display: none;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.5rem;
}

    .yg-auth-mobile-brand .yg-auth-logo-icon {
        background: linear-gradient(135deg, #0B6E4F, #08A045);
    }

    .yg-auth-mobile-brand .yg-auth-logo-title {
        color: #073B3A;
    }

    .yg-auth-mobile-brand .yg-auth-logo-subtitle {
        color: #64748b;
    }

.yg-auth-header {
    margin-bottom: 1.6rem;
}

    .yg-auth-header h2 {
        margin: 0;
        color: #073B3A;
        font-weight: 900;
        font-size: 2rem;
        letter-spacing: -.05em;
    }

    .yg-auth-header p {
        margin: .4rem 0 0;
        color: #64748b;
    }

.yg-auth-form .form-label {
    color: #073B3A;
    font-weight: 800;
    font-size: .86rem;
}

.yg-auth-input .input-group-text {
    background: rgba(8, 160, 69, .10) !important;
    border-color: rgba(11, 110, 79, .22) !important;
    color: #0B6E4F !important;
    border-radius: 14px 0 0 14px;
}

.yg-auth-input .form-control {
    min-height: 46px;
    background: #ffffff !important;
    border-color: rgba(11, 110, 79, .22) !important;
    color: #0f172a !important;
    border-radius: 0 14px 14px 0;
}

    .yg-auth-input .form-control:focus {
        border-color: #08A045 !important;
        box-shadow: 0 0 0 .22rem rgba(8, 160, 69, .16) !important;
    }

    .yg-auth-input .form-control::placeholder {
        color: #94a3b8;
    }

.yg-auth-form .form-check-label {
    color: #475569;
    font-weight: 600;
}

.yg-auth-form .form-check-input {
    border-color: rgba(11, 110, 79, .35);
}

    .yg-auth-form .form-check-input:checked {
        background-color: #08A045;
        border-color: #08A045;
    }

.yg-auth-submit {
    min-height: 46px;
    border-radius: 14px;
    font-weight: 800;
    box-shadow: 0 14px 28px rgba(8, 160, 69, .22);
}

.yg-auth-alert {
    border-radius: 14px;
    border: 1px solid rgba(220, 38, 38, .18);
}

.yg-auth-footer {
    margin-top: 1.25rem;
    padding: .85rem 1rem;
    border-radius: 16px;
    background: rgba(8, 160, 69, .08);
    border: 1px solid rgba(8, 160, 69, .14);
    color: #0B6E4F;
    font-size: .84rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .5rem;
}

@media (max-width: 900px) {
    .yg-auth-shell {
        max-width: 460px;
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .yg-auth-hero {
        display: none;
    }

    .yg-auth-form-panel {
        padding: 2rem;
    }

    .yg-auth-mobile-brand {
        display: flex;
    }
}

@media (max-width: 480px) {
    .yg-auth-page {
        padding: .9rem;
    }

    .yg-auth-shell {
        border-radius: 24px;
    }

    .yg-auth-form-panel {
        padding: 1.4rem;
    }

    .yg-auth-header h2 {
        font-size: 1.65rem;
    }
}

/* =========================
   Cartera - resumen superior claro
   ========================= */

.tg-summary-card {
    min-height: 150px;
    border: 0 !important;
    overflow: hidden;
    color: #ffffff !important;
    box-shadow: 0 16px 34px rgba(7, 59, 58, .18);
}

    .tg-summary-card .card-body {
        min-height: 150px;
        display: flex;
        align-items: flex-start;
        gap: 1rem;
    }

    .tg-summary-card .tg-stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 16px;
        display: grid;
        place-items: center;
        background: rgba(255, 255, 255, .16) !important;
        color: #ffffff !important;
        font-size: 1.6rem;
        flex: 0 0 auto;
    }

.tg-stat-content {
    flex: 1;
    min-width: 0;
}

.tg-summary-card .tg-stat-value {
    color: #ffffff !important;
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1.05;
    word-break: break-word;
}

.tg-summary-card .tg-stat-label {
    color: rgba(255, 255, 255, .94) !important;
    font-weight: 800;
    margin-top: .35rem;
}

.tg-summary-card .tg-stat-help,
.tg-summary-card .tg-stat-lines,
.tg-summary-card .text-muted {
    color: rgba(255, 255, 255, .76) !important;
    font-size: .8rem;
    margin-top: .35rem;
}

    .tg-summary-card .tg-stat-lines strong {
        color: #ffffff;
        font-weight: 900;
    }

.tg-summary-services {
    background: linear-gradient(135deg, #073B3A, #0B6E4F) !important;
}

.tg-summary-receivable {
    background: linear-gradient(135deg, #0B6E4F, #08A045) !important;
}

.tg-summary-payable {
    background: linear-gradient(135deg, #92400e, #d97706) !important;
}

.tg-summary-return {
    background: linear-gradient(135deg, #065f46, #10b981) !important;
}

.tg-summary-profit {
    background: linear-gradient(135deg, #052e2d, #073B3A) !important;
}

.tg-summary-own {
    background: linear-gradient(135deg, #1e3a8a, #2563eb) !important;
}

/* =========================
   Cartera - tabs más entendibles
   ========================= */

.tg-cartera-tabs-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 100%;
    flex-wrap: wrap;
}

.tg-cartera-tabs {
    display: flex;
    gap: .65rem;
    flex-wrap: wrap;
}

.tg-cartera-tab {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 260px;
    padding: .85rem 1rem;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(7, 59, 58, .12);
    color: var(--tg-text);
    text-decoration: none;
    transition: all .18s ease;
}

    .tg-cartera-tab:hover {
        background: rgba(8, 160, 69, .055);
        border-color: rgba(8, 160, 69, .24);
        color: var(--tg-text);
        text-decoration: none;
    }

    .tg-cartera-tab.active {
        background: linear-gradient(135deg, rgba(7, 59, 58, .96), rgba(11, 110, 79, .92));
        border-color: rgba(8, 160, 69, .28);
        color: #ffffff;
        box-shadow: 0 12px 28px rgba(7, 59, 58, .16);
    }

.tg-cartera-tab-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(8, 160, 69, .12);
    color: var(--tg-pigment);
    font-size: 1.35rem;
    flex: 0 0 auto;
}

.tg-cartera-tab-icon-warning {
    background: rgba(245, 158, 11, .13);
    color: #b45309;
}

.tg-cartera-tab.active .tg-cartera-tab-icon {
    background: rgba(255, 255, 255, .14);
    color: #ffffff;
}

.tg-cartera-tab-title {
    display: block;
    font-weight: 900;
    line-height: 1.1;
}

.tg-cartera-tab-subtitle {
    display: block;
    color: var(--tg-muted);
    font-size: .8rem;
    margin-top: .2rem;
}

.tg-cartera-tab.active .tg-cartera-tab-subtitle {
    color: rgba(255, 255, 255, .76);
}

.tg-cartera-profit {
    padding: .75rem 1rem;
    border-radius: 18px;
    background: rgba(8, 160, 69, .08);
    border: 1px solid rgba(8, 160, 69, .18);
    color: var(--tg-midnight);
    min-width: 210px;
    text-align: right;
}

/* =========================
   Cartera - accordion money resumen
   ========================= */

.tg-accordion-money {
    text-align: right;
    min-width: 230px;
}

.tg-money-main {
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.1;
}

.tg-money-label {
    font-size: .78rem;
    font-weight: 800;
    color: var(--tg-midnight);
    margin-top: .15rem;
}

.tg-money-lines {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin-top: .25rem;
    color: var(--tg-muted);
    font-size: .78rem;
}

@media (max-width: 767.98px) {
    .tg-summary-card,
    .tg-summary-card .card-body {
        min-height: auto;
    }

    .tg-cartera-tabs-wrapper {
        align-items: stretch;
    }

    .tg-cartera-tabs {
        width: 100%;
    }

        .tg-cartera-tabs .nav-item,
        .tg-cartera-tab {
            width: 100%;
        }

    .tg-cartera-profit {
        width: 100%;
        text-align: left;
    }

    .tg-accordion-money {
        text-align: left;
        min-width: auto;
        margin-top: .75rem;
    }
}

.tg-payment-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .35rem .65rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: .78rem;
}

.badge.bg-success-lt.tg-payment-badge {
    background: rgba(8, 160, 69, .12) !important;
    color: #0B6E4F !important;
    border: 1px solid rgba(8, 160, 69, .28);
}

/* =========================
   Toast global inferior centrado
   ========================= */

.tg-toast-container {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    width: min(92vw, 520px);
    pointer-events: none;
}

.tg-toast {
    width: 100%;
    min-height: 54px;
    padding: .85rem 1rem;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(7, 59, 58, .14);
    box-shadow: 0 18px 45px rgba(7, 59, 58, .22);
    display: flex;
    align-items: center;
    gap: .75rem;
    color: #0f172a;
    pointer-events: auto;
    animation: tgToastIn .22s ease-out;
}

    .tg-toast.hide {
        animation: tgToastOut .18s ease-in forwards;
    }

.tg-toast-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
}

.tg-toast-content {
    flex: 1;
    min-width: 0;
}

.tg-toast-title {
    font-weight: 900;
    line-height: 1.1;
    color: #073B3A;
}

.tg-toast-message {
    margin-top: .15rem;
    color: #475569;
    font-size: .88rem;
}

.tg-toast-close {
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 1.2rem;
    padding: .2rem;
    line-height: 1;
}

    .tg-toast-close:hover {
        color: #0f172a;
    }

.tg-toast-success .tg-toast-icon {
    background: rgba(8, 160, 69, .12);
    color: #08A045;
}

.tg-toast-success {
    border-left: 5px solid #08A045;
}

.tg-toast-danger .tg-toast-icon {
    background: rgba(220, 38, 38, .12);
    color: #dc2626;
}

.tg-toast-danger {
    border-left: 5px solid #dc2626;
}

.tg-toast-warning .tg-toast-icon {
    background: rgba(245, 158, 11, .14);
    color: #d97706;
}

.tg-toast-warning {
    border-left: 5px solid #d97706;
}

.tg-toast-info .tg-toast-icon {
    background: rgba(11, 110, 79, .12);
    color: #0B6E4F;
}

.tg-toast-info {
    border-left: 5px solid #0B6E4F;
}

@keyframes tgToastIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes tgToastOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(16px) scale(.98);
    }
}

@media (max-width: 575.98px) {
    .tg-toast-container {
        bottom: 18px;
        width: calc(100vw - 24px);
    }

    .tg-toast {
        border-radius: 16px;
    }
}

.btn-ghost-danger {
    color: #dc2626;
}

    .btn-ghost-danger:hover {
        background: rgba(220, 38, 38, .10);
        color: #991b1b;
    }


/* =========================
   Tom Select - YGConfortPlus
   ========================= */

.ts-wrapper {
    width: 100%;
    min-height: 42px;
}

.ts-control {
    min-height: 42px;
    width: 100%;
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(11, 110, 79, .24) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    padding: .55rem .75rem !important;
}

    .ts-control input {
        color: #0f172a !important;
    }

        .ts-control input::placeholder {
            color: #94a3b8 !important;
        }

.ts-wrapper.focus .ts-control {
    border-color: var(--tg-pigment) !important;
    box-shadow: 0 0 0 .22rem rgba(8, 160, 69, .16) !important;
}

.ts-dropdown {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(11, 110, 79, .20) !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 48px rgba(7, 59, 58, .24) !important;
    overflow: hidden;
    z-index: 999999 !important;
}

.ts-dropdown-content {
    background: #ffffff !important;
    max-height: 260px;
}

.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results {
    background: #ffffff !important;
    color: #0f172a !important;
}

.ts-dropdown .option {
    padding: .65rem .85rem !important;
    font-weight: 500;
}

    .ts-dropdown .option:hover,
    .ts-dropdown .active {
        background: rgba(8, 160, 69, .10) !important;
        color: #073B3A !important;
    }

.ts-dropdown .selected {
    background: rgba(11, 110, 79, .12) !important;
    color: #073B3A !important;
    font-weight: 800;
}

.ts-dropdown .optgroup-header {
    padding: .55rem .85rem !important;
    color: #0B6E4F !important;
    font-size: .75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid rgba(7, 59, 58, .08);
}

.ts-dropdown .no-results {
    padding: .75rem .85rem !important;
    color: #64748b !important;
}

.input-group .ts-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

.input-group .ts-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* =========================
   Cartera Dashboard Compacto
   ========================= */

.tg-filter-card {
    border-radius: 22px;
}

.tg-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}

.tg-kpi-card {
    min-height: 118px;
    border: 0 !important;
    border-radius: 22px;
    padding: 1rem;
    color: #fff;
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    box-shadow: 0 12px 28px rgba(7, 59, 58, .16);
}

.tg-kpi-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.16);
    color: #fff;
    font-size: 1.45rem;
}

.tg-kpi-value {
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.1;
    color: #fff;
}

.tg-kpi-label {
    font-weight: 900;
    margin-top: .25rem;
    color: rgba(255,255,255,.96);
}

.tg-kpi-help {
    font-size: .78rem;
    color: rgba(255,255,255,.78);
    margin-top: .15rem;
}

    .tg-kpi-help strong {
        color: #fff;
    }

.tg-kpi-services {
    background: linear-gradient(135deg, #073B3A, #0B6E4F);
}

.tg-kpi-receivable {
    background: linear-gradient(135deg, #0B6E4F, #08A045);
}

.tg-kpi-payable {
    background: linear-gradient(135deg, #92400e, #d97706);
}

.tg-kpi-return {
    background: linear-gradient(135deg, #065f46, #10b981);
}

.tg-kpi-profit {
    background: linear-gradient(135deg, #052e2d, #073B3A);
}

.tg-kpi-own {
    background: linear-gradient(135deg, #1e3a8a, #2563eb);
}

.tg-profit-pill {
    min-width: 220px;
    padding: .75rem 1rem;
    border-radius: 18px;
    background: rgba(8, 160, 69, .08);
    border: 1px solid rgba(8, 160, 69, .18);
    color: #073B3A;
    text-align: right;
}

    .tg-profit-pill span {
        display: block;
        color: #64748b;
        font-size: .78rem;
    }

    .tg-profit-pill strong {
        display: block;
        font-size: 1rem;
        font-weight: 900;
    }

    .tg-profit-pill small {
        display: block;
        color: #0B6E4F;
        font-size: .76rem;
        font-weight: 700;
    }

.tg-bulk-toolbar {
    padding: .85rem 1rem;
    border-bottom: 1px solid rgba(7, 59, 58, .10);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: rgba(8, 160, 69, .035);
}

.tg-profit-accordion {
    border: 1px solid rgba(8, 160, 69, .28) !important;
    box-shadow: 0 12px 28px rgba(8, 160, 69, .08);
}

.tg-profit-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .65rem;
    border-radius: 999px;
    background: rgba(8, 160, 69, .12);
    color: #0B6E4F;
    font-weight: 900;
    font-size: .76rem;
    border: 1px solid rgba(8, 160, 69, .22);
}

.tg-profit-row {
    background: rgba(8, 160, 69, .045);
}

.tg-profit-mini {
    display: inline-flex;
    padding: .22rem .5rem;
    border-radius: 999px;
    background: rgba(8, 160, 69, .12);
    color: #0B6E4F;
    font-size: .72rem;
    font-weight: 800;
}

.tg-payment-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .35rem .65rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: .78rem;
}

.badge.bg-success-lt.tg-payment-badge {
    background: rgba(8, 160, 69, .12) !important;
    color: #0B6E4F !important;
    border: 1px solid rgba(8, 160, 69, .28);
}

@media (max-width: 1399.98px) {
    .tg-dashboard-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .tg-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tg-profit-pill {
        width: 100%;
        text-align: left;
    }
}

@media (max-width: 575.98px) {
    .tg-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .tg-bulk-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

        .tg-bulk-toolbar .btn {
            width: 100%;
        }
}

/* =========================
   Cartera - filtros y exportación
   ========================= */

.tg-filter-card {
    border: 1px solid rgba(7, 59, 58, .10);
    border-radius: 22px;
    box-shadow: 0 12px 28px rgba(7, 59, 58, .07);
}

    .tg-filter-card .card-body {
        padding: 1.25rem;
    }

    .tg-filter-card .card-title {
        color: #ffffff;
        font-weight: 900;
        font-size: 1.05rem;
    }

.tg-export-btn {
    min-width: 112px;
    border-radius: 14px;
    font-weight: 800;
    background: #ffffff25;
}

.tg-export-help {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .55rem .75rem;
    border-radius: 14px;
    background: #ffffff25;
    color: #ffffff;
    font-size: .82rem;
    font-weight: 700;
}

.input-icon .input-icon-addon {
    color: #0B6E4F;
}

@media (max-width: 575.98px) {
    .tg-export-btn {
        width: 100%;
    }

    .tg-export-help {
        display: flex;
        align-items: flex-start;
        line-height: 1.35;
    }
}

.tg-export-excel {
    background: rgba(8, 160, 69, .10) !important;
    color: #0B6E4F !important;
    border-color: rgba(8, 160, 69, .28) !important;
}

    .tg-export-excel:hover {
        background: #08A045 !important;
        color: #ffffff !important;
        border-color: #08A045 !important;
    }

.tg-export-pdf {
    background: rgba(220, 38, 38, .09) !important;
    color: #b91c1c !important;
    border-color: rgba(220, 38, 38, .25) !important;
}

    .tg-export-pdf:hover {
        background: #dc2626 !important;
        color: #ffffff !important;
        border-color: #dc2626 !important;
    }


.tg-filter-card .tg-clear-filter-btn {
    height: 42px;
    border-radius: 14px;
    font-weight: 900;
    background: rgba(255, 255, 255, .14) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, .32) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    box-shadow: none;
    transition: all .18s ease;
}

    .tg-filter-card .tg-clear-filter-btn:hover {
        background: rgba(255, 255, 255, .24) !important;
        border-color: rgba(255, 255, 255, .48) !important;
        transform: translateY(-1px);
    }


.tg-selection-summary {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    background: rgba(7, 59, 58, .06);
    color: #073B3A;
    font-size: .78rem;
    font-weight: 800;
    border: 1px solid rgba(7, 59, 58, .10);
}

    .tg-selection-summary span {
        display: inline-flex;
        align-items: center;
        gap: .2rem;
    }

    .tg-selection-summary strong {
        color: #0B6E4F;
        font-weight: 900;
    }

    .tg-selection-summary.is-active {
        background: rgba(8, 160, 69, .13);
        border-color: rgba(8, 160, 69, .28);
        box-shadow: 0 8px 18px rgba(8, 160, 69, .08);
    }

@media (max-width: 575.98px) {
    .tg-selection-summary {
        width: 100%;
        border-radius: 14px;
        justify-content: space-between;
    }
}