/* ==========================================================
   WaTrack Theme System
   Implementacion de paleta corporativa sobre Velzon/Bootstrap
   ========================================================== */

:root {
    --wa-dark-blue: #003366;
    --wa-blue: #005b96;
    --wa-teal: #00c897;
    --wa-white: #ffffff;
    --wa-black: #000000;
    --wa-surface: #f8fbff;

    --wa-dark-blue-rgb: 0, 51, 102;
    --wa-blue-rgb: 0, 91, 150;
    --wa-teal-rgb: 0, 200, 151;

    --wa-dark-blue-10: rgba(0, 51, 102, 0.1);
    --wa-dark-blue-15: rgba(0, 51, 102, 0.15);
    --wa-dark-blue-25: rgba(0, 51, 102, 0.25);
    --wa-blue-10: rgba(0, 91, 150, 0.1);
    --wa-teal-10: rgba(0, 200, 151, 0.1);
    --wa-teal-20: rgba(0, 200, 151, 0.2);

    --wa-gradient-primary: linear-gradient(135deg, #003366 0%, #00c897 100%);
    --wa-gradient-horizontal: linear-gradient(90deg, #003366 0%, #005b96 100%);

    --wa-shadow-sm: 0 2px 4px rgba(0, 51, 102, 0.12);
    --wa-shadow: 0 6px 12px rgba(0, 51, 102, 0.15);
    --wa-shadow-lg: 0 12px 24px rgba(0, 51, 102, 0.2);
}

/* ==========================================================
   Override de tokens base Velzon/Bootstrap
   ========================================================== */
:root,
[data-bs-theme="light"] {
    --vz-primary: #003366;
    --vz-primary-rgb: 0, 51, 102;
    --vz-primary-text-emphasis: #002b55;
    --vz-primary-bg-subtle: rgba(0, 51, 102, 0.14);
    --vz-primary-border-subtle: rgba(0, 51, 102, 0.34);

    --vz-success: #00c897;
    --vz-success-rgb: 0, 200, 151;
    --vz-success-text-emphasis: #009e7a;
    --vz-success-bg-subtle: rgba(0, 200, 151, 0.15);
    --vz-success-border-subtle: rgba(0, 200, 151, 0.38);

    --vz-secondary: #005b96;
    --vz-secondary-rgb: 0, 91, 150;
    --vz-secondary-text-emphasis: #00426c;
    --vz-secondary-bg-subtle: rgba(0, 91, 150, 0.14);
    --vz-secondary-border-subtle: rgba(0, 91, 150, 0.34);

    --vz-info: #005b96;
    --vz-info-rgb: 0, 91, 150;
    --vz-info-text-emphasis: #00426c;
    --vz-info-bg-subtle: rgba(0, 91, 150, 0.14);
    --vz-info-border-subtle: rgba(0, 91, 150, 0.34);

    --vz-link-color: #005b96;
    --vz-link-color-rgb: 0, 91, 150;
    --vz-link-hover-color: #003366;
    --vz-link-hover-color-rgb: 0, 51, 102;

    --vz-heading-color: #003366;
    --vz-body-color: #0f172a;
    --vz-focus-ring-color: rgba(0, 200, 151, 0.22);
}

:root[data-sidebar="dark"] {
    --vz-vertical-menu-bg: #003366;
    --vz-vertical-menu-border: #003366;
    --vz-vertical-menu-item-color: #b8d1ea;
    --vz-vertical-menu-item-bg: rgba(255, 255, 255, 0.08);
    --vz-vertical-menu-item-hover-color: #ffffff;
    --vz-vertical-menu-item-active-color: #ffffff;
    --vz-vertical-menu-item-active-bg: rgba(0, 200, 151, 0.25);
    --vz-vertical-menu-sub-item-color: #b8d1ea;
    --vz-vertical-menu-sub-item-hover-color: #ffffff;
    --vz-vertical-menu-sub-item-active-color: #00c897;
    --vz-vertical-menu-title-color: #00c897;
    --vz-twocolumn-menu-iconview-bg: #002b55;
}

:root[data-topbar="dark"] {
    --vz-header-bg: #003366;
    --vz-header-border: #003366;
    --vz-header-item-color: rgba(255, 255, 255, 0.9);
    --vz-header-item-bg: rgba(255, 255, 255, 0.12);
    --vz-header-item-sub-color: rgba(255, 255, 255, 0.7);
    --vz-topbar-user-bg: rgba(255, 255, 255, 0.1);
}

:root[data-topbar="light"] {
    --vz-header-bg: #ffffff;
    --vz-header-border: rgba(0, 51, 102, 0.12);
    --vz-header-item-color: #003366;
    --vz-header-item-sub-color: #005b96;
    --vz-topbar-user-bg: rgba(0, 91, 150, 0.1);
}

[data-bs-theme="dark"] {
    --vz-primary: #5c8dbd;
    --vz-primary-rgb: 92, 141, 189;
    --vz-success: #1ed9aa;
    --vz-success-rgb: 30, 217, 170;
    --vz-link-color: #8ab5db;
    --vz-link-color-rgb: 138, 181, 219;
    --vz-link-hover-color: #a9cce8;
    --vz-link-hover-color-rgb: 169, 204, 232;
}

/* ==========================================================
   Utilidades WaTrack
   ========================================================== */
.text-wa-primary { color: var(--wa-dark-blue) !important; }
.text-wa-secondary { color: var(--wa-blue) !important; }
.text-wa-accent { color: var(--wa-teal) !important; }

.bg-wa-primary { background-color: var(--wa-dark-blue) !important; }
.bg-wa-secondary { background-color: var(--wa-blue) !important; }
.bg-wa-accent { background-color: var(--wa-teal) !important; }
.bg-wa-primary-subtle { background-color: var(--wa-dark-blue-10) !important; }
.bg-wa-accent-subtle { background-color: var(--wa-teal-10) !important; }
.bg-wa-gradient { background: var(--wa-gradient-primary) !important; }

.border-wa-primary { border-color: var(--wa-dark-blue) !important; }
.border-wa-accent { border-color: var(--wa-teal) !important; }
.border-top-wa-primary { border-top: 3px solid var(--wa-dark-blue) !important; }
.border-top-wa-accent { border-top: 3px solid var(--wa-teal) !important; }

.shadow-wa-sm { box-shadow: var(--wa-shadow-sm) !important; }
.shadow-wa { box-shadow: var(--wa-shadow) !important; }
.shadow-wa-lg { box-shadow: var(--wa-shadow-lg) !important; }

/* ==========================================================
   Botones
   ========================================================== */
.btn-wa-primary,
.btn-wa-accent,
.btn-wa-outline-primary {
    transition: all 0.2s ease-in-out;
}

.btn-wa-primary {
    background-color: var(--wa-dark-blue);
    border-color: var(--wa-dark-blue);
    color: var(--wa-white);
}

.btn-wa-primary:hover,
.btn-wa-primary:focus,
.btn-wa-primary:active {
    background-color: #002b55;
    border-color: #002b55;
    color: var(--wa-white);
}

.btn-wa-primary:focus-visible,
.btn-wa-accent:focus-visible,
.btn-wa-outline-primary:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--wa-teal-20);
}

.btn-wa-primary:disabled {
    opacity: 0.75;
    background-color: var(--wa-dark-blue);
    border-color: var(--wa-dark-blue);
}

.btn-wa-accent {
    background-color: var(--wa-teal);
    border-color: var(--wa-teal);
    color: #03221a;
    font-weight: 600;
}

.btn-wa-accent:hover,
.btn-wa-accent:focus,
.btn-wa-accent:active {
    background-color: #00a97f;
    border-color: #00a97f;
    color: var(--wa-white);
}

.btn-wa-outline-primary {
    color: var(--wa-dark-blue);
    border-color: var(--wa-dark-blue);
    background-color: transparent;
}

.btn-wa-outline-primary:hover {
    color: var(--wa-white);
    background-color: var(--wa-dark-blue);
    border-color: var(--wa-dark-blue);
}

/* ==========================================================
   Badges de estatus Tickets
   ========================================================== */
.badge-status-default {
    background-color: var(--wa-dark-blue-10);
    color: var(--wa-dark-blue);
}

.badge-status-por-asignar {
    background-color: var(--wa-dark-blue);
    color: var(--wa-white);
}

.badge-status-en-proceso {
    background-color: var(--wa-blue);
    color: var(--wa-white);
}

.badge-status-terminado {
    background-color: var(--wa-teal);
    color: #03221a;
    font-weight: 600;
}

.badge-status-activo {
    background-color: #dff9f2;
    color: #007a5c;
    border: 1px solid rgba(0, 200, 151, 0.35);
}

.badge-status-cancelado {
    background-color: #e2e8f0;
    color: #334155;
}

.badge-status-rechazado {
    background-color: #fee2e2;
    color: #b91c1c;
}

.badge-priority-alta {
    background-color: #fee2e2;
    color: #b91c1c;
}

.badge-priority-media {
    background-color: #fef3c7;
    color: #92400e;
}

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

/* ==========================================================
   Tablas, cards y paginacion
   ========================================================== */
.table-wa thead,
.table-wa thead th {
    background-color: var(--wa-dark-blue);
    color: var(--wa-white);
    border-color: rgba(255, 255, 255, 0.2);
}

.table-wa tbody tr:hover {
    background-color: var(--wa-blue-10);
}

.fixed-table-pagination .pagination .page-item .page-link {
    color: var(--wa-blue);
}

.fixed-table-pagination .pagination .page-item.active .page-link {
    background-color: var(--wa-dark-blue);
    border-color: var(--wa-dark-blue);
    color: var(--wa-white);
}

.card-wa {
    border: 1px solid rgba(0, 51, 102, 0.15);
    border-top: 3px solid var(--wa-dark-blue);
    box-shadow: var(--wa-shadow-sm);
}

.ticket-map-item {
    border: 1px solid rgba(0, 51, 102, 0.15);
    border-left: 3px solid var(--wa-blue);
    border-radius: 0.5rem;
    background-color: var(--wa-surface);
}

.ticket-comment-card {
    border: 1px dashed rgba(0, 51, 102, 0.25);
    border-radius: 0.6rem;
}

/* ==========================================================
   Alertas
   ========================================================== */
.alert-wa-primary {
    background-color: var(--wa-dark-blue-10);
    border-left: 4px solid var(--wa-dark-blue);
    color: var(--wa-dark-blue);
}

.alert-wa-accent {
    background-color: var(--wa-teal-10);
    border-left: 4px solid var(--wa-teal);
    color: #01674f;
}

.alert-wa-info {
    background-color: var(--wa-blue-10);
    border-left: 4px solid var(--wa-blue);
    color: #00426c;
}

/* ==========================================================
   Layout: topbar, sidebar, footer
   ========================================================== */
.wa-topbar {
    border-bottom: 1px solid rgba(0, 51, 102, 0.12);
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.03), rgba(0, 200, 151, 0.04));
    box-shadow: 0 2px 8px rgba(0, 51, 102, 0.1);
}

.wa-topbar .navbar-header {
    gap: 0.85rem;
}

.wa-brand-link {
    min-width: 132px;
}

.wa-brand-wordmark {
    height: 32px;
    width: auto;
    display: block;
    object-fit: contain;
}

.wa-topbar .wa-top-link {
    border-radius: 999px;
    border: 1px solid rgba(0, 91, 150, 0.2);
}

.wa-topbar .wa-top-link.btn-ghost-secondary {
    color: var(--wa-dark-blue);
    background-color: #ffffff;
}

.wa-topbar .wa-top-link.btn-ghost-secondary:hover {
    color: var(--wa-white);
    background-color: var(--wa-blue);
    border-color: var(--wa-blue);
}

.wa-topbar-search {
    min-width: 360px;
}

.wa-topbar-search .input-group-text {
    border-color: rgba(0, 51, 102, 0.18);
}

.wa-topbar-search .form-control {
    border-color: rgba(0, 51, 102, 0.18);
    min-height: 34px;
}

.wa-topbar-search .form-control:focus {
    box-shadow: none;
    border-color: var(--wa-blue);
}

.wa-topbar-search .dropdown-menu,
.wa-topbar-search-results {
    min-width: 360px;
    max-height: 360px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(0, 51, 102, 0.15);
    box-shadow: 0 8px 20px rgba(0, 51, 102, 0.14);
    border-radius: 0.6rem;
    padding: 0.25rem;
    background-color: #ffffff;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 91, 150, 0.45) rgba(0, 91, 150, 0.1);
}

.wa-topbar-search-results::-webkit-scrollbar {
    width: 8px;
}

.wa-topbar-search-results::-webkit-scrollbar-track {
    background: rgba(0, 91, 150, 0.1);
    border-radius: 999px;
}

.wa-topbar-search-results::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0, 91, 150, 0.65), rgba(0, 200, 151, 0.65));
    border-radius: 999px;
}

.wa-topbar-search .ticket-search-item {
    border-radius: 0.45rem;
    border: 1px solid transparent;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.wa-topbar-search .ticket-search-item:hover {
    background-color: var(--wa-blue-10);
    border-color: rgba(0, 91, 150, 0.22);
    transform: translateY(-1px);
}

.wa-topbar-search .ticket-search-item .small {
    line-height: 1.25;
}

@media (max-width: 1199.98px) {
    .wa-brand-wordmark {
        height: 28px;
    }
}

.navbar-menu .menu-title span,
.navbar-menu .menu-title {
    color: var(--wa-teal) !important;
}

.wa-footer {
    border-top: 1px solid rgba(0, 51, 102, 0.14);
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.02), rgba(0, 200, 151, 0.02));
}

.wa-footer .wa-footer-brand {
    color: var(--wa-dark-blue);
    font-weight: 600;
}

.wa-footer .wa-footer-meta {
    color: var(--wa-blue);
}

/* ==========================================================
   Autenticacion (Login / Registro / Recuperacion)
   ========================================================== */
.wa-auth-page .auth-one-bg .bg-overlay {
    background: linear-gradient(135deg, rgba(0, 51, 102, 0.93), rgba(0, 91, 150, 0.9), rgba(0, 200, 151, 0.68));
}

.wa-auth-page .shape svg path {
    fill: rgba(255, 255, 255, 0.2);
}

.wa-auth-card {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(0, 51, 102, 0.14);
    box-shadow: 0 16px 38px rgba(0, 51, 102, 0.2);
}

.wa-auth-aside {
    background: linear-gradient(160deg, #003366 0%, #005b96 54%, #00c897 100%);
    color: #ffffff;
    position: relative;
    min-height: 100%;
}

.wa-auth-aside::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.26) 0, rgba(255, 255, 255, 0) 42%),
        radial-gradient(circle at 82% 78%, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0) 45%);
    pointer-events: none;
}

.wa-auth-aside-content {
    position: relative;
    z-index: 1;
}

.wa-auth-wordmark {
    max-width: 220px;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.wa-auth-isotipo {
    width: 90px;
    height: auto;
    object-fit: contain;
}

.wa-auth-mobile-brand .wa-auth-wordmark {
    max-width: 200px;
}

.wa-auth-form-wrap {
    background-color: #ffffff;
}

.wa-auth-form-wrap .form-label {
    margin-bottom: 0.35rem;
}

.wa-auth-form-wrap .input-group-text {
    border-color: rgba(0, 51, 102, 0.16);
    background-color: #f8fbff;
    color: #005b96;
}

.wa-auth-form-wrap .form-control {
    border-color: rgba(0, 51, 102, 0.16);
}

.wa-auth-form-wrap .form-check-label {
    color: #334155;
}

.wa-auth-form-wrap .password-addon {
    color: #005b96 !important;
}

.wa-auth-help {
    font-size: 0.86rem;
    color: #64748b;
}

.wa-password-rules {
    background-color: #f8fbff;
    border: 1px dashed rgba(0, 51, 102, 0.2);
    border-radius: 0.75rem;
}

.wa-password-rules p {
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
}

@media (max-width: 991.98px) {
    .wa-auth-card {
        border-radius: 0.85rem;
    }
}

/* ==========================================================
   Formularios, Select2 y Flatpickr
   ========================================================== */
.form-control:focus,
.form-select:focus {
    border-color: var(--wa-teal);
    box-shadow: 0 0 0 0.2rem var(--wa-teal-20);
}

.form-label {
    color: var(--wa-dark-blue);
    font-weight: 600;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid #ced4da;
    min-height: 38px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
    color: var(--vz-body-color);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #6c757d;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--wa-teal);
    box-shadow: 0 0 0 0.2rem var(--wa-teal-20);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--wa-dark-blue);
    color: var(--wa-white);
}

.select2-container--default .select2-dropdown {
    background-color: var(--wa-white);
    border: 1px solid rgba(0, 51, 102, 0.18);
}

.select2-container--default .select2-results__option {
    color: var(--vz-body-color);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--wa-blue-10);
    color: var(--wa-dark-blue);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: var(--wa-dark-blue);
    border-color: var(--wa-dark-blue);
}

/* ==========================================================
   SweetAlert2
   ========================================================== */
.swal2-popup {
    border-radius: 0.75rem;
}

.swal2-confirm.swal2-styled {
    background-color: var(--wa-dark-blue) !important;
}

.swal2-confirm.swal2-styled:hover {
    background-color: #002b55 !important;
}

.swal2-confirm.swal2-styled:focus {
    box-shadow: 0 0 0 0.2rem var(--wa-teal-20) !important;
}

/* ==========================================================
   Perfil de cuenta (referencia Velzon Profile Settings)
   ========================================================== */
.wa-profile-card {
    border: 1px solid rgba(0, 51, 102, 0.15);
}

.wa-profile-header {
    background: linear-gradient(130deg, rgba(0, 51, 102, 0.96), rgba(0, 91, 150, 0.95), rgba(0, 200, 151, 0.85));
}

.wa-profile-actions .list-group-item {
    border-color: rgba(0, 51, 102, 0.12);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.wa-profile-actions .list-group-item:hover {
    background-color: var(--wa-blue-10);
    border-color: rgba(0, 91, 150, 0.3);
    transform: translateY(-1px);
}

.wa-profile-card .nav-tabs-custom .nav-link {
    color: var(--wa-blue);
}

.wa-profile-card .nav-tabs-custom .nav-link.active {
    color: var(--wa-dark-blue);
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .wa-profile-header h4 {
        font-size: 1.05rem;
    }

    .wa-profile-card .avatar-xl {
        width: 4rem;
        height: 4rem;
    }
}