/*
 * Tema CER sobre Dashonic, dirigido por variables (--t-*) definidas en portal-paletas.css.
 * Cambiar de paleta = cambiar html[data-paleta]. Para volver a Dashonic original basta quitar ambos archivos.
 */
:root,[data-bs-theme=light]{
  --bs-primary:var(--t-primary); --bs-primary-rgb:var(--t-primary-rgb);
  --bs-link-color:var(--t-primary); --bs-link-color-rgb:var(--t-primary-rgb);
  --bs-link-hover-color:color-mix(in srgb,var(--t-primary) 70%,#000);
  --bs-body-color:var(--t-texto); --bs-body-bg:var(--t-fondo);
  --bs-primary-bg-subtle:var(--t-subtle); --bs-primary-border-subtle:color-mix(in srgb,var(--t-primary) 35%,#fff);
  --bs-primary-text-emphasis:var(--t-sidebar);
  --bs-border-color:color-mix(in srgb,var(--t-texto) 12%,#fff);
  --bs-header-bg:var(--t-topbar); --bs-header-item-color:#fff;
  --bs-sidebar-bg:var(--t-sidebar); --bs-sidebar-menu-item-color:var(--t-sidebar-text); --bs-sidebar-menu-item-active-color:var(--t-active);
  --bs-sidebar-menu-item-active-bg-color:color-mix(in srgb,var(--t-accent) 14%,transparent);
  --bs-sidebar-menu-sub-item-color:color-mix(in srgb,var(--t-sidebar-text) 75%,var(--t-sidebar)); --bs-sidebar-menu-sub-item-active-color:var(--t-active);
  --bs-sidebar-dark-menu-item-color:var(--t-sidebar-text); --bs-sidebar-dark-menu-item-active-color:var(--t-active);
  --bs-sidebar-dark-menu-item-active-bg-color:color-mix(in srgb,var(--t-accent) 14%,transparent);
}
body{background-color:var(--t-fondo);color:var(--t-texto);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif}
.btn,.form-control,.form-select,.dropdown-menu,.table{font-family:inherit}
h1,h2,h3,h4,h5,h6,.card-title{color:var(--t-sidebar);font-weight:600;letter-spacing:-.01em}
a{color:var(--t-primary)} a:hover{color:color-mix(in srgb,var(--t-primary) 70%,#000)}
.font-size-xs{font-size:.72rem;letter-spacing:.04em}
.font-size-13{font-size:13px}

/* Estructura */
.page-content{background-color:var(--t-fondo)}
.page-title-box h4{color:var(--t-sidebar);font-weight:600}
.footer{background-color:#fff;color:color-mix(in srgb,var(--t-texto) 65%,#fff)}

/* Topbar, menu lateral y caja de marca */
body[data-sidebar][data-topbar] #page-topbar,body[data-sidebar][data-topbar] .navbar-header{background-color:var(--t-topbar);box-shadow:0 2px 6px rgba(0,0,0,.22)}
body[data-sidebar][data-topbar] #page-topbar .header-item,body[data-sidebar][data-topbar] #page-topbar .header-item i,body[data-sidebar][data-topbar] #page-topbar .vertical-menu-btn{color:#fff}
body[data-sidebar][data-topbar] #page-topbar .user-name{color:#fff}
body[data-sidebar][data-topbar] #page-topbar .user-sub-title{color:rgba(255,255,255,.7)}
body[data-sidebar][data-topbar] #page-topbar .header-item:hover{color:rgba(255,255,255,.8)}
body[data-sidebar][data-topbar] .navbar-brand-box{background:var(--t-sidebar)}
body[data-sidebar][data-topbar] .navbar-brand-box .logo{line-height:normal}
.marca{display:flex;align-items:center;gap:10px;height:70px;padding:0 4px}
.marca img{height:38px;width:auto;display:block}
.marca-txt{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.marca-txt b{color:#fff;font-size:17px;font-weight:700;letter-spacing:.2px}
.marca-txt small{color:var(--t-brandsub);font-size:11px;font-weight:500;letter-spacing:.3px}

body[data-sidebar][data-topbar] .vertical-menu{background:var(--t-sidebar);border-right:0}
body[data-sidebar][data-topbar] .vertical-menu .vertical-menu-btn{color:#fff}
body[data-sidebar][data-topbar] #sidebar-menu .menu-title{color:color-mix(in srgb,var(--t-sidebar-text) 55%,var(--t-sidebar));opacity:1}
body[data-sidebar][data-topbar] #sidebar-menu ul li a,body[data-sidebar][data-topbar] #sidebar-menu ul li a i,body[data-sidebar][data-topbar] #sidebar-menu ul li a .icon{color:var(--t-sidebar-text)}
body[data-sidebar][data-topbar] #sidebar-menu ul li a:hover,body[data-sidebar][data-topbar] #sidebar-menu ul li a:hover i,body[data-sidebar][data-topbar] #sidebar-menu ul li a:hover .icon{color:#fff}
body[data-sidebar][data-topbar] #sidebar-menu ul li a.active,body[data-sidebar][data-topbar] #sidebar-menu ul li.mm-active>a,body[data-sidebar][data-topbar] #sidebar-menu ul li.mm-active>a i,body[data-sidebar][data-topbar] #sidebar-menu ul li.mm-active>a .icon,body[data-sidebar][data-topbar] #sidebar-menu ul li a.active i,body[data-sidebar][data-topbar] #sidebar-menu ul li a.active .icon{color:var(--t-active)!important}
body[data-sidebar][data-topbar] #sidebar-menu ul li.mm-active>a,body[data-sidebar][data-topbar] #sidebar-menu>ul>li>a.active{background:color-mix(in srgb,var(--t-accent) 14%,transparent);border-left:3px solid var(--t-accent)}
body[data-sidebar][data-topbar] #sidebar-menu ul li ul.sub-menu li a{color:color-mix(in srgb,var(--t-sidebar-text) 75%,var(--t-sidebar))}
body[data-sidebar][data-topbar] #sidebar-menu ul li ul.sub-menu li a:hover{color:#fff}
body[data-sidebar][data-topbar] #sidebar-menu ul li ul.sub-menu li a.active{color:var(--t-active);font-weight:600}
body[data-sidebar][data-topbar] #sidebar-menu .has-arrow:after{color:var(--t-sidebar-text)}
body[data-sidebar][data-topbar] .simplebar-scrollbar:before{background:rgba(255,255,255,.35)}

body[data-sidebar][data-topbar] .vertical-menu::before{display:none}
body[data-sidebar][data-topbar] .vertical-menu #sidebar-menu>ul>li:hover>a{background:color-mix(in srgb,var(--t-accent) 18%,var(--t-sidebar));color:#fff}
body[data-sidebar][data-topbar] .vertical-menu #sidebar-menu>ul>li:hover>ul,body[data-sidebar][data-topbar] .vertical-menu #sidebar-menu>ul ul{background-color:var(--t-sidebar)}

/* Botones y formularios */
.btn-primary{--bs-btn-bg:var(--t-primary);--bs-btn-border-color:var(--t-primary);--bs-btn-hover-bg:color-mix(in srgb,var(--t-primary) 82%,#000);--bs-btn-hover-border-color:color-mix(in srgb,var(--t-primary) 82%,#000);--bs-btn-active-bg:color-mix(in srgb,var(--t-primary) 65%,#000);--bs-btn-active-border-color:color-mix(in srgb,var(--t-primary) 65%,#000);--bs-btn-disabled-bg:var(--t-primary);--bs-btn-disabled-border-color:var(--t-primary);--bs-btn-focus-shadow-rgb:var(--t-primary-rgb);background-color:var(--t-primary);border-color:var(--t-primary);color:#fff}
.btn-primary:hover{background-color:color-mix(in srgb,var(--t-primary) 82%,#000);border-color:color-mix(in srgb,var(--t-primary) 82%,#000);color:#fff}
.btn-outline-primary{--bs-btn-color:var(--t-primary);--bs-btn-border-color:var(--t-primary);--bs-btn-hover-bg:var(--t-primary);--bs-btn-hover-border-color:var(--t-primary);--bs-btn-active-bg:var(--t-primary);color:var(--t-primary);border-color:var(--t-primary)}
.btn-outline-primary:hover{background-color:var(--t-primary);color:#fff}
.bg-primary{background-color:var(--t-primary)!important}
.text-primary{color:var(--t-primary)!important}
.border-primary{border-color:var(--t-primary)!important}
.badge.bg-primary{background-color:var(--t-primary)!important}
.badge.bg-warning{background-color:var(--t-highlight,var(--t-accent))!important;color:#1f2937!important}
.form-control:focus,.form-select:focus{border-color:var(--t-accent);box-shadow:0 0 0 .2rem color-mix(in srgb,var(--t-accent) 30%,transparent)}
.form-check-input:checked{background-color:var(--t-primary);border-color:var(--t-primary)}
.progress-bar{background-color:var(--t-accent)}
.ring .fg{stroke:var(--t-primary)!important}
.ring.a .fg{stroke:#c0392b!important}
.nav-tabs .nav-link.active,.nav-tabs-custom .nav-item .nav-link.active{color:var(--t-sidebar)}
.nav-tabs-custom .nav-item .nav-link::after{background:var(--t-accent)}
.page-item.active .page-link{background-color:var(--t-primary);border-color:var(--t-primary);color:#fff}
.page-link{color:var(--t-primary);border-radius:4px;margin:0 2px}
.dropdown-item:active,.dropdown-item.active{background-color:var(--t-primary)}
.alert-info{--bs-alert-bg:var(--t-subtle);--bs-alert-border-color:color-mix(in srgb,var(--t-primary) 25%,#fff);--bs-alert-color:var(--t-sidebar)}
.dropdown-menu .bg-primary{background-color:var(--t-sidebar)!important}
.breadcrumb-item a{color:var(--t-primary)}

/* Tarjetas planas y KPI (patron G-Risk) */
.card{background:#fff;border:1px solid color-mix(in srgb,var(--t-texto) 12%,#fff);border-radius:6px;box-shadow:none}
.card-header{background:transparent;border-bottom:1px solid color-mix(in srgb,var(--t-texto) 8%,#fff);font-weight:600}
.card-footer{border-top:1px solid color-mix(in srgb,var(--t-texto) 8%,#fff)}
.kpi-etiqueta{font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:color-mix(in srgb,var(--t-texto) 65%,#fff);margin-bottom:.35rem}
.kpi-cifra{font-size:1.85rem;font-weight:700;line-height:1.1;margin:0 0 .25rem;color:var(--t-sidebar)}
.kpi-meta{font-size:13px;color:color-mix(in srgb,var(--t-texto) 65%,#fff);margin:0}
.kpi-icono{width:46px;height:46px;border-radius:.65rem;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;background:rgba(var(--t-primary-rgb),.12);color:var(--t-primary)}
.kpi-icono.ok{background:rgba(52,195,143,.15);color:#1f8f66}
.kpi-icono.aviso{background:rgba(241,180,76,.2);color:#9a6a12}
.kpi-icono.alerta{background:rgba(244,106,106,.15);color:#c04444}
.kpi-icono.marca{background:rgba(var(--t-accent-rgb),.22);color:var(--t-sidebar)}

/* Tablas, DataTables */
.table>:not(caption)>*>*{padding:.6rem .75rem}
.table thead th{font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:color-mix(in srgb,var(--t-texto) 65%,#fff);border-bottom:1px solid color-mix(in srgb,var(--t-texto) 12%,#fff);font-weight:600}
.table-hover>tbody>tr:hover>*{background-color:rgba(var(--t-primary-rgb),.05)}
.tabla-portal{width:100%;table-layout:fixed}
.tabla-portal th,.tabla-portal td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabla-portal th{overflow:visible}
@media (max-width:767.98px){.tabla-portal{table-layout:auto}.tabla-portal td,.tabla-portal th{white-space:normal;overflow:visible}}
.dt-search input{border:1px solid color-mix(in srgb,var(--t-texto) 15%,#fff);border-radius:4px;padding:.3rem .6rem}

/* Tooltip [data-tip] */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:rgba(0,0,0,.9);color:#fff;font-size:.75rem;line-height:1.4;padding:.25rem .5rem;border-radius:.25rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s linear;z-index:1080}
[data-tip]::before{content:'';position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:rgba(0,0,0,.9);opacity:0;pointer-events:none;transition:opacity .15s linear;z-index:1080}
[data-tip]:hover::after,[data-tip]:hover::before{opacity:1}

/* Flatpickr */
.flatpickr-months,.flatpickr-months .flatpickr-month,.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{background:var(--t-sidebar)!important;color:#fff!important;fill:#fff!important}
.flatpickr-current-month,.flatpickr-current-month .cur-month,.flatpickr-current-month input.cur-year{color:#fff!important;font-weight:600}
.flatpickr-weekdays,span.flatpickr-weekday{background:var(--t-topbar)!important;color:rgba(255,255,255,.8)!important;font-weight:600}
.flatpickr-day.today{border-color:var(--t-accent)!important;color:var(--t-primary)!important;font-weight:700}
.flatpickr-day.selected,.flatpickr-day.selected:hover,.flatpickr-day.startRange,.flatpickr-day.endRange{background:var(--t-primary)!important;border-color:var(--t-primary)!important;color:#fff!important}
.flatpickr-calendar{border:1px solid var(--t-primary)!important;box-shadow:0 4px 16px rgba(0,0,0,.18)!important;border-radius:6px!important}

/* Selector de paleta (solo en desarrollo) */
.selector-paleta .dropdown-item{display:flex;align-items:center;gap:8px;font-size:13px}
.selector-paleta .dropdown-item.activa{font-weight:700}
.selector-paleta .muestra{display:inline-flex;width:34px;height:14px;border-radius:3px;overflow:hidden;border:1px solid rgba(0,0,0,.15);flex-shrink:0}
.selector-paleta .muestra i{flex:1;display:block}

/* Menu lateral (T-046): metismenujs dibuja su flecha con bordes y Dashonic agrega un icono mdi encima; juntas se veian
   dos marcas. Se deja solo la flecha de bordes, a la derecha: "<" cerrado, "v" abierto. */
#sidebar-menu .has-arrow:after{content:"";font-family:inherit;font-size:inherit;right:1.25rem;inset-inline-end:1.25rem;top:50%;width:.5em;height:.5em;border-style:solid;border-color:currentColor;border-width:0 0 1px 1px;transform:rotate(45deg) translate(0,-50%);transform-origin:top}
#sidebar-menu .mm-active>.has-arrow:after,#sidebar-menu .has-arrow[aria-expanded=true]:after{transform:rotate(-45deg) translate(0,-50%)}