/* ==========================================================================
   FoxCRM — App-wide brand skin (dashboard, leads, ventas, calendario,
   whatsapp, mercadolibre, reportes, admin_* business settings).

   Loaded once from header.tpl.php, AFTER all Vuexy vendor/theme CSS, so
   equal-specificity rules here win by source order. Only !important where a
   vendor rule is itself !important or more specific (ag-grid inline theme).
   This file only ever touches selectors we've verified exist app-wide — it
   does not replace or edit the vendor bundles themselves.
   ========================================================================== */

:root {
    --fox-amber: #FCAF03;
    --fox-orange: #F98000;
    --fox-red: #F83800;
    --fox-ink: #26232f;
    --fox-ink-soft: #6c6a78;
    --fox-muted: #9997a3;
    --fox-border: #ebe9f0;
    --fox-tint: #fff8f2;
    --fox-gradient: linear-gradient(135deg, var(--fox-amber) 0%, var(--fox-orange) 48%, var(--fox-red) 100%);
    --fox-shadow-orange: 0 10px 24px -8px rgba(248, 86, 0, 0.35);
}

/* ---------- Buttons — one consistent shape/weight/hover language across every
   variant (same radius, same fill-on-hover behavior), colored by meaning. ---------- */

.btn {
    border-radius: 10px !important;
    font-weight: 600;
}

.btn-outline-danger:hover,
.btn-outline-danger:not(:disabled):not(.disabled):active {
    background: #ea5455 !important;
    border-color: #ea5455 !important;
    color: #fff !important;
}

.btn-outline-success:hover,
.btn-outline-success:not(:disabled):not(.disabled):active {
    background: #28c76f !important;
    border-color: #28c76f !important;
    color: #fff !important;
}

.btn-outline-info:hover,
.btn-outline-info:not(:disabled):not(.disabled):active {
    background: #00cfe8 !important;
    border-color: #00cfe8 !important;
    color: #fff !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:not(:disabled):not(.disabled):active {
    background: #ff9f43 !important;
    border-color: #ff9f43 !important;
    color: #fff !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:not(:disabled):not(.disabled):active {
    background: #82868b !important;
    border-color: #82868b !important;
    color: #fff !important;
}

/* ---------- Buttons ---------- */

.btn-primary,
.btn-primary-gradient {
    background: var(--fox-gradient) !important;
    border-color: transparent !important;
    box-shadow: var(--fox-shadow-orange);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary-gradient:hover {
    filter: brightness(1.04);
    box-shadow: 0 14px 28px -8px rgba(248, 86, 0, 0.45);
}

.btn-primary:disabled,
.btn-primary.disabled {
    background: #e7e6ec !important;
    box-shadow: none;
}

.btn-outline-primary {
    color: var(--fox-orange) !important;
    border-color: var(--fox-orange) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background: var(--fox-gradient) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.btn-flat-primary,
.card-link,
a {
    color: var(--fox-orange);
}

.btn-flat-primary:hover,
.card-link:hover,
a:hover {
    color: var(--fox-red);
}

/* Buttons/links whose color is purely functional (not brand) opt back out */
.btn-info, .btn-outline-info, .btn-success, .btn-outline-success,
.btn-danger, .btn-outline-danger, .btn-warning, .btn-outline-warning,
.btn-secondary, .btn-outline-secondary, .btn-flat-danger, .btn-flat-success,
.btn-flat-info, .btn-flat-warning {
    filter: none;
}

/* ---------- Focus rings & form controls — same shape/border language as the
   login page's inputs, applied app-wide. ---------- */

.form-control,
.custom-select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: 10px !important;
    border: 1.5px solid var(--fox-border) !important;
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--fox-orange) !important;
    box-shadow: 0 0 0 3px rgba(249, 128, 0, 0.14) !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default .select2-selection--single:focus {
    border-color: var(--fox-orange) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--fox-gradient) !important;
}

/* Multi-select chips (e.g. Estados/Usuarios/Orígenes filters) — gradient pill
   instead of the flat solid-purple default. */
.select2-selection__choice {
    background: var(--fox-gradient) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 20px !important;
    padding: 5px 8px 5px 12px !important;
    font-size: 0.82rem;
    font-weight: 600;
    display: inline-flex !important;
    align-items: center;
    box-shadow: 0 3px 10px -4px rgba(248, 86, 0, 0.5);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.select2-selection__choice:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px -4px rgba(248, 86, 0, 0.6);
}

.select2-selection__choice__remove {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 700 !important;
    margin-left: 8px !important;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.select2-selection__choice__remove:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.25);
}

/* ---------- Checkboxes / radios / switches ---------- */

.vs-checkbox-primary input:checked ~ .vs-checkbox,
.vs-radio-primary input:checked ~ .vs-radio .vs-radio--circle {
    background: var(--fox-gradient) !important;
    border-color: transparent !important;
}

.vs-radio-primary input:checked ~ .vs-radio .vs-radio--border {
    border-color: var(--fox-orange) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background: var(--fox-gradient) !important;
    border-color: transparent !important;
}

/* ---------- Badges ---------- */

.badge-primary {
    background: var(--fox-gradient) !important;
}

/* ---------- Generic Bootstrap "primary" utility classes ---------- */

.text-primary {
    color: var(--fox-orange) !important;
}

.border-primary {
    border-color: var(--fox-orange) !important;
}

.bg-primary {
    background: var(--fox-gradient) !important;
}

.alert-primary {
    background: var(--fox-tint) !important;
    border-color: rgba(249, 128, 0, 0.25) !important;
    color: #ad4700 !important;
}

/* ---------- Nav / horizontal menu ---------- */

.horizontal-menu .navbar-horizontal ul#main-menu-navigation > li.active > a.nav-link,
.horizontal-menu .navbar-horizontal ul#main-menu-navigation > li.nav-item.active > a.nav-link {
    background: var(--fox-gradient) !important;
    color: #fff !important;
    box-shadow: var(--fox-shadow-orange);
}

/* Orange "you're browsing this menu" hint — only when the dropdown is open
   but ISN'T the active section. If it's also .active, the rule above already
   gives it white text on the gradient fill; without :not(.active) this rule's
   higher specificity would win instead, putting orange text on an orange
   background (unreadable). */
.horizontal-menu .navbar-horizontal ul#main-menu-navigation > li.dropdown.open:not(.active) > a.nav-link {
    color: var(--fox-orange) !important;
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background: var(--fox-tint) !important;
    color: var(--fox-orange) !important;
}

.dropdown-menu .dropdown-item.text-primary {
    color: var(--fox-orange) !important;
    font-weight: 600;
}

.dropdown-user-link .user-status {
    color: var(--fox-orange);
}

/* ---------- Cards ---------- */

.card {
    border-radius: 14px;
    box-shadow: 0 8px 24px -12px rgba(38, 35, 47, 0.12);
    border: 1px solid var(--fox-border);
}

.card .card-header {
    border-bottom: 1px solid var(--fox-border);
}

/* ---------- Plain (non-ag-grid) tables used in report pivot cards ---------- */

.table thead th {
    color: var(--fox-ink-soft);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    border-top: none;
    border-bottom: 2px solid var(--fox-border);
}

.table tbody tr:hover {
    background: var(--fox-tint);
}

.table td.text-primary,
.table th.text-primary {
    color: var(--fox-orange) !important;
}

/* ---------- ag-grid: promote the same premium skin used on Leads/Ventas
   to every ag-grid instance app-wide (~90 usages). Pages that embed their own
   <style> block after this one (leads.tpl.php, ventas.tpl.php, lead.tpl.php)
   still win locally by source order — this is just the shared baseline. ---------- */

.ag-theme-material {
    font-family: 'Montserrat', 'Segoe UI', Helvetica, Arial, sans-serif;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(38, 35, 47, 0.08);
    overflow: hidden;
    border: none;
}

/* Always keep a clear gap between the filters/toolbar row above a grid and
   the grid itself — some pages set an inline margin-top as low as 20px,
   which reads as almost no separation. */
.aggrid,
div[id$="Grid"].aggrid {
    margin-top: 28px !important;
}

.ag-theme-material .ag-header {
    background: var(--fox-gradient);
    border-bottom: none;
}

.ag-theme-material .ag-header-cell-label,
.ag-theme-material .ag-header-cell-text,
.ag-theme-material .ag-header-icon {
    color: #fff;
}

.ag-theme-material .ag-header-cell {
    color: #fff;
    font-weight: 600;
}

.ag-theme-material .ag-header-cell::after,
.ag-theme-material .ag-header-cell-resize::after {
    background-color: rgba(255, 255, 255, 0.18) !important;
}

.ag-theme-material .ag-row {
    border-bottom: 1px solid var(--fox-border);
    transition: background-color 0.15s ease;
}

.ag-theme-material .ag-row-hover,
.ag-theme-material .ag-row:hover {
    background-color: var(--fox-tint) !important;
}

.ag-theme-material .ag-row-selected {
    background-color: rgba(249, 128, 0, 0.08) !important;
}

.ag-theme-material .ag-overlay-no-rows-center {
    color: var(--fox-ink-soft);
    font-size: 0.95rem;
    font-weight: 500;
    margin-top: 2.5rem;
}

/* Remove ag-grid's default blue cell-focus outline everywhere. */
.ag-theme-material .ag-cell-focus,
.ag-theme-material .ag-cell-focus:not(.ag-cell-range-selected),
.ag-theme-material .ag-cell:focus {
    border: 1px solid transparent !important;
    outline: none !important;
}

/* ---------- Avatars ---------- */

img.round,
.avatar img,
.fox-avatar {
    object-fit: cover;
    background: var(--fox-tint);
}

.dropdown-user-link img.round {
    border: 2px solid rgba(249, 128, 0, 0.18);
}

/* Fallback element injected by assets/js/img-fallback.js when an <img> 404s */
.fox-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #fff;
    background: var(--fox-gradient);
    flex: none;
}

.fox-logo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fox-tint);
    color: var(--fox-muted);
    flex: none;
}

.fox-logo-fallback svg {
    width: 55%;
    height: 55%;
}

/* ---------- Calendar (fullcalendar) ---------- */

.fc-button-primary:not(:disabled).fc-button-active,
.fc-button-primary:not(:disabled):active,
.btn-group .btn.btn-primary {
    background: var(--fox-gradient) !important;
    border-color: transparent !important;
}

.fc-day-grid-event,
.fc-time-grid-event {
    background: var(--fox-gradient);
    border: none;
}

.fc-today {
    background: var(--fox-tint) !important;
}

/* ---------- Pagination (custom prev/next + page pill widgets) ---------- */

.pagination .page-item.active .page-link {
    background: var(--fox-gradient);
    border-color: transparent;
}

.pagination .page-link {
    color: var(--fox-ink-soft);
}

/* ---------- Empty states ---------- */

.ag-theme-material .ag-overlay-no-rows-wrapper {
    padding-top: 0;
}

/* ---------- Chat (WhatsApp inbox) — keep WhatsApp's own green, just polish depth ---------- */

.whatsapp-conversation-item:hover,
.wa-conversation-item:hover {
    background: var(--fox-tint);
}

/* ---------- Misc polish ---------- */

.breadcrumb-item.active,
.content-header-title {
    color: var(--fox-ink);
}

/* bootstrap-extended.min.css defines .nav-tabs .nav-item .nav-link.active
   (4 classes) with the vendor's violet #7367F0 — more specific than a plain
   .nav-tabs .nav-link.active, so it silently won over the rule below on any
   page using plain Bootstrap tabs. Match its specificity + !important, and
   recolor its ::after underline (a gradient bar, not a real border) too. */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item .nav-link.active {
    color: var(--fox-orange) !important;
}

.nav.nav-tabs .nav-item .nav-link.active:after {
    background: var(--fox-gradient) !important;
    box-shadow: 0 0 8px 0 rgba(248, 86, 0, 0.5) !important;
}

::selection {
    background: rgba(249, 128, 0, 0.25);
}

/* ---------- Scrollbars — thin, subtle, brand-tinted everywhere a table or
   panel scrolls internally. Unstyled native scrollbars (some OS/browser
   combos render them 15-17px tall) read as chunky next to a compact table
   row, especially on the wide pivot/listing tables in the report pages. ---------- */

.table-responsive,
.height-fixed-overflow-y,
.ag-body-viewport,
.dropdown-menu {
    scrollbar-width: thin;
    scrollbar-color: rgba(38, 35, 47, 0.18) transparent;
}

.table-responsive::-webkit-scrollbar,
.height-fixed-overflow-y::-webkit-scrollbar,
.ag-body-viewport::-webkit-scrollbar,
.dropdown-menu::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.table-responsive::-webkit-scrollbar-track,
.height-fixed-overflow-y::-webkit-scrollbar-track,
.ag-body-viewport::-webkit-scrollbar-track,
.dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
}

.table-responsive::-webkit-scrollbar-thumb,
.height-fixed-overflow-y::-webkit-scrollbar-thumb,
.ag-body-viewport::-webkit-scrollbar-thumb,
.dropdown-menu::-webkit-scrollbar-thumb {
    background: rgba(38, 35, 47, 0.18);
    border-radius: 10px;
}

.table-responsive::-webkit-scrollbar-thumb:hover,
.height-fixed-overflow-y::-webkit-scrollbar-thumb:hover,
.ag-body-viewport::-webkit-scrollbar-thumb:hover,
.dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(249, 128, 0, 0.45);
}

/* ---------- Toastr notifications — white card + colored left accent, and a
   solid-colored icon chip (small, so a solid fill here reads as a status dot
   rather than the "big saturated card" look we've moved away from), instead
   of the vendor's full solid-color block. */
.toast {
    position: relative;
    background-color: #fff !important;
    background-image: none !important;
    color: var(--fox-ink, #26232f) !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 32px -10px rgba(38, 35, 47, 0.3) !important;
    padding: 15px 18px 15px 58px !important;
    border-left: 4px solid var(--fox-border, #ebe9f0);
    opacity: 1 !important;
}

.toast:before {
    content: '';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 14px !important;
}

.toast-title {
    color: var(--fox-ink, #26232f);
    font-weight: 700;
    margin-bottom: 2px;
}

.toast-message {
    color: var(--fox-ink-soft, #6c6a78);
}

.toast-close-button {
    color: var(--fox-ink-soft, #6c6a78) !important;
    text-shadow: none !important;
    opacity: 0.5;
}

.toast-close-button:hover {
    opacity: 1;
}

.toast-success,
.toast-error,
.toast-warning,
.toast-info {
    background-image: none !important;
}

.toast-success { border-left-color: #28c76f; }
.toast-success:before { background-color: #28c76f; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") !important; }

.toast-error { border-left-color: #ea5455; }
.toast-error:before { background-color: #ea5455; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E") !important; }

.toast-warning { border-left-color: #ff9f43; }
.toast-warning:before { background-color: #ff9f43; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2L12 3zM12 10v4M12 17.5v.01'/%3E%3C/svg%3E") !important; }

.toast-info { border-left-color: #00cfe8; }
.toast-info:before { background-color: #00cfe8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8h.01M11 12h1v5h1'/%3E%3C/svg%3E") !important; }

/* ---------- SweetAlert2 dialogs and Bootstrap modals live in
   assets/css/fox-alert.css, loaded right after this file. ---------- */

/* ---------- Notifications dropdown — brand gradient header (was vendor
   violet #7367F0), rounded to match every other panel in the app, plus a
   colored icon chip per notification row instead of a bare colored glyph. ---------- */
.dropdown-notification .dropdown-menu-header {
    background: var(--fox-gradient) !important;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    padding: 1.1rem 1rem 1.25rem;
}

.dropdown-notification .dropdown-menu.dropdown-menu-right {
    border-radius: 14px !important;
    border: none !important;
    box-shadow: 0 20px 48px -12px rgba(38, 35, 47, 0.35) !important;
    overflow: hidden;
    padding: 0 !important;
}

.dropdown-notification .dropdown-menu.dropdown-menu-right::before {
    background: var(--fox-orange) !important;
    border-color: var(--fox-orange) !important;
}

.dropdown-notification .dropdown-menu-header .notification-title {
    opacity: 0.9;
    font-size: 0.85rem;
}

.dropdown-notification .dropdown-menu-header .text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
}

.dropdown-notification .dropdown-menu-header .text-muted:hover {
    color: #fff !important;
}

.notification-icon-chip {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    margin-right: 0.85rem;
}

.notification-icon-chip i,
.notification-icon-chip img {
    font-size: 1.05rem;
}

.notification-icon-chip.notif-chip-primary { background: var(--fox-tint, #fff8f2); }
.notification-icon-chip.notif-chip-primary i { color: var(--fox-orange, #F98000) !important; }

.notification-icon-chip.notif-chip-danger { background: rgba(234, 84, 85, 0.12); }
.notification-icon-chip.notif-chip-danger i { color: #ea5455 !important; }

.notification-icon-chip.notif-chip-warning { background: rgba(255, 159, 67, 0.14); }
.notification-icon-chip.notif-chip-warning i { color: #ff9f43 !important; }

.dropdown-notification .media-list .media {
    padding: 0.9rem 1.1rem;
    transition: background 0.15s ease;
}

.dropdown-notification .media-list a:hover .media {
    background: var(--fox-tint, #fff8f2);
}

.dropdown-notification .media-heading a {
    color: var(--fox-ink, #26232f);
    font-weight: 700;
}

.dropdown-notification .media-heading a.text-danger { color: #ea5455 !important; }
.dropdown-notification .media-heading a.text-warning { color: #ff9f43 !important; }

.dropdown-notification .notification-text {
    color: var(--fox-ink-soft, #6c6a78);
}

.dropdown-notification .circulo-leida i {
    color: var(--fox-orange, #F98000) !important;
}

/* ---------- Report pivot-table cards (Empresas/Sucursales/Canales/etc. on
   every reporte_*.tpl.php page) — V2 pass: kill the row-lift hover (same
   "cards/rows shouldn't jump on hover" direction as everywhere else), recolor
   the vendor's violet row-selected state, add a real accent bar + tinted
   Total row, and turn the bare toolbar icons into proper icon buttons. ---------- */

.table-hover-animation tbody tr:hover {
    transform: none !important;
}

tr.selected {
    background-color: rgba(249, 128, 0, 0.07) !important;
    color: var(--fox-orange, #F98000) !important;
    box-shadow: inset 0 0 0 1px rgba(249, 128, 0, 0.3) !important;
}

.row-filtro {
    transition: background-color 0.15s ease;
}

.row-filtro:hover {
    background-color: var(--fox-tint, #fff8f2) !important;
}

/* Total row — added by JS alongside the existing text-primary/font-weight-bold
   classes already set in each report's renderTabla() function. */
.report-total-row td {
    background-color: var(--fox-tint, #fff8f2) !important;
    border-top: 1.5px solid rgba(249, 128, 0, 0.18) !important;
    border-bottom: 1.5px solid rgba(249, 128, 0, 0.18) !important;
    font-size: 0.92rem;
}

/* Card header icon toolbar (search / bar-chart / pie-chart / list / expand) */
.card .heading-elements .list-inline > li > i.tipo-reporte,
.card .heading-elements .list-inline > li > a[data-action] > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--fox-ink-soft, #6c6a78);
    transition: background 0.15s ease, color 0.15s ease;
}

.card .heading-elements .list-inline > li > i.tipo-reporte:hover,
.card .heading-elements .list-inline > li > a[data-action] > i:hover {
    background: var(--fox-tint, #fff8f2);
    color: var(--fox-orange, #F98000);
}

.card .heading-elements .list-inline > li > i.tipo-reporte.active {
    background: var(--fox-tint, #fff8f2);
    color: var(--fox-orange, #F98000) !important;
}

.card .heading-elements input.buscar-input,
.card .heading-elements input[type="text"] {
    border-radius: 8px !important;
    border: 1.5px solid var(--fox-border, #ebe9f0) !important;
    background: #fff !important;
}

.card .heading-elements input.buscar-input:focus,
.card .heading-elements input[type="text"]:focus {
    border-color: var(--fox-orange, #F98000) !important;
    box-shadow: 0 0 0 3px rgba(249, 128, 0, 0.12) !important;
    outline: none;
}