/*
 * Tema Pronaca - Rojo Corporativo
 * Paleta de colores basada en la identidad visual de Pronaca
 * Rojo Principal: #C8102E (Rojo corporativo suave)
 *
 * Este archivo sobrescribe los estilos azules del tema base
 * para aplicar la identidad visual de Pronaca (rojo y blanco)
 */

/* ==========================================================================
   VARIABLES DE COLOR (referencia)
   ==========================================================================
   --pronaca-red:        #C8102E;  /* Rojo principal */
   --pronaca-red-dark:   #A50D22;  /* Rojo oscuro (hover) */
   --pronaca-red-light:  #E31837;  /* Rojo claro (acentos) */
   --pronaca-red-soft:   #DC3545;  /* Rojo suave (alertas) */
   --white:              #FFFFFF;
   --gray-light:         #F6F6F6;
   ========================================================================== */

/* ==========================================================================
   SIDEBAR - Menu lateral
   ========================================================================== */
.cl-sidebar {
    background: #C8102E !important;
}

#cl-wrapper.fixed-menu .menu-space {
    background: #C8102E !important;
}

/* Sidebar items hover */
.cl-vnavigation li a:hover {
    background-color: #A50D22 !important;
}

.cl-vnavigation li.active > a {
    background-color: #A50D22 !important;
}

/* Submenu activo */
.cl-vnavigation li ul {
    background-color: #9B0D1F !important;
}

.cl-vnavigation li ul li a:hover {
    background-color: #7A0A19 !important;
}

/* Borde del submenu */
.cl-vnavigation li ul li.active > a,
.cl-vnavigation li ul li a {
    border-left-color: #E31837 !important;
}

/* Toggle icon en sidebar */
.cl-sidebar .cl-toggle i {
    color: #FFD5D5 !important;
}

/* ==========================================================================
   NAVBAR - Barra superior
   ========================================================================== */
.navbar-default {
    background-color: #C8102E !important;
    border-color: #A50D22 !important;
}

.navbar-default .navbar-brand {
    color: #FFFFFF !important;
}

.navbar-default .navbar-nav > li > a {
    color: #FFFFFF !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #FFFFFF !important;
    background-color: #A50D22 !important;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    background-color: #A50D22 !important;
    color: #FFFFFF !important;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    background-color: #A50D22 !important;
    color: #FFFFFF !important;
}

/* Bubble de notificaciones */
.navbar-default .navbar-nav > li.button .bubble {
    background-color: #FFCC00 !important;
    color: #333 !important;
}

/* ==========================================================================
   ENLACES
   ========================================================================== */
a {
    color: #C8102E;
}

a:focus,
a:hover,
a:active {
    color: #A50D22;
}

.color-primary {
    color: #C8102E !important;
}

.color-primary.fa {
    color: #C8102E !important;
}

/* ==========================================================================
   BOTONES
   ========================================================================== */
.btn-primary {
    background: #C8102E !important;
    border-color: #C8102E !important;
    color: #FFFFFF !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background: #A50D22 !important;
    border-color: #A50D22 !important;
    color: #FFFFFF !important;
}

.btn-primary.disabled,
.btn-primary[disabled] {
    background: #E8A0A8 !important;
    border-color: #E8A0A8 !important;
}

/* Botones outline */
.btn-outline-primary {
    color: #C8102E !important;
    border-color: #C8102E !important;
}

.btn-outline-primary:hover {
    background: #C8102E !important;
    color: #FFFFFF !important;
}

/* ==========================================================================
   DROPDOWNS
   ========================================================================== */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-menu li > a:hover {
    background-color: #C8102E !important;
    color: #FFFFFF !important;
}

.navbar-default .navbar-nav > li > .dropdown-menu {
    border-top-color: #C8102E !important;
}

/* ==========================================================================
   NAVBAR DROPDOWNS - Menus desplegables superiores (usuario, candado, etc.)
   ========================================================================== */
/* Fondo del dropdown del navbar */
.navbar-default .navbar-nav > li > .dropdown-menu,
.navbar-nav > li.button .dropdown-menu,
.navbar-default .navbar-nav > li.button .dropdown-menu {
    background-color: #C8102E !important;
    border-color: #A50D22 !important;
}

/* Items del dropdown */
.navbar-default .navbar-nav > li.button .dropdown-menu li ul > li > a,
.navbar-default .navbar-nav > li.button .dropdown-menu li > a,
.navbar-nav > li.button .dropdown-menu .content > ul > li > a {
    color: #FFFFFF !important;
    background-color: transparent !important;
}

/* Hover en items del dropdown */
.navbar-default .navbar-nav > li.button .dropdown-menu li > a:hover,
.navbar-default .navbar-nav > li.button .dropdown-menu li ul > li > a:hover {
    background-color: #A50D22 !important;
    color: #FFFFFF !important;
}

/* Titulo del dropdown */
.navbar-default .navbar-nav > li.button .dropdown-menu .title {
    background-color: #A50D22 !important;
    color: #FFFFFF !important;
    border-bottom-color: #7A0A19 !important;
}

.navbar-default .navbar-nav > li.button .dropdown-menu .title a {
    color: #FFFFFF !important;
}

/* Footer del dropdown */
.navbar-default .navbar-nav > li.button .dropdown-menu .foot {
    background-color: #A50D22 !important;
    border-top-color: #7A0A19 !important;
}

.navbar-default .navbar-nav > li.button .dropdown-menu .foot a {
    color: #FFFFFF !important;
}

.navbar-default .navbar-nav > li.button .dropdown-menu .foot a:hover {
    color: #FFD5D5 !important;
}

/* Profile menu - Menu de usuario */
.profile_menu {
    background-color: #C8102E !important;
}

.profile_menu .dropdown-toggle {
    color: #FFFFFF !important;
}

.profile_menu .dropdown-toggle:hover {
    background-color: #A50D22 !important;
}

/* Dropdown del profile menu */
.profile_menu .dropdown-menu {
    background-color: #C8102E !important;
    border-color: #A50D22 !important;
}

.profile_menu .dropdown-menu > li > a {
    color: #FFFFFF !important;
}

.profile_menu .dropdown-menu > li > a:hover {
    background-color: #A50D22 !important;
}

/* Dropdown abierto en navbar */
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav .open .dropdown-menu {
    background-color: #A50D22 !important;
}

/* Items en dropdown abierto (responsive) */
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #FFFFFF !important;
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    background-color: #7A0A19 !important;
    color: #FFFFFF !important;
}

/* Iconos en el dropdown */
.navbar-default .navbar-nav > li.button .dropdown-menu li > a > i {
    color: #FFD5D5 !important;
}

/* Fecha en notificaciones */
.navbar-default .navbar-nav > li.button .dropdown-menu li a .date {
    color: #FFB8B8 !important;
}

/* Dividers */
.navbar-default .navbar-nav .open .dropdown-menu .divider,
.dropdown-menu .divider {
    background-color: #A50D22 !important;
}

/* ==========================================================================
   SUBMENU NAVIGATION
   ========================================================================== */
#sub-menu-nav ul li a:hover {
    background-color: #C8102E !important;
    color: #FFFFFF !important;
}

/* ==========================================================================
   TABS Y NAVEGACION
   ========================================================================== */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border-top-color: #C8102E !important;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background-color: #C8102E !important;
}

/* ==========================================================================
   PANELES Y WIDGETS
   ========================================================================== */
.panel-primary {
    border-color: #C8102E !important;
}

.panel-primary > .panel-heading {
    background-color: #C8102E !important;
    border-color: #C8102E !important;
    color: #FFFFFF !important;
}

/* Block headers */
.block .head {
    border-bottom-color: #C8102E !important;
}

.block .head h2 {
    color: #C8102E !important;
}

/* ==========================================================================
   FORMULARIOS
   ========================================================================== */
.form-control:focus {
    border-color: #C8102E !important;
    box-shadow: 0 0 0 0.2rem rgba(200, 16, 46, 0.25) !important;
}

/* Select2 */
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #C8102E !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #C8102E !important;
}

/* ==========================================================================
   TABLAS Y GRIDS
   ========================================================================== */
.table > thead > tr > th {
    border-bottom-color: #C8102E !important;
}

.table-hover > tbody > tr:hover {
    background-color: rgba(200, 16, 46, 0.05) !important;
}

/* DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #C8102E !important;
    border-color: #C8102E !important;
    color: #FFFFFF !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #E31837 !important;
    border-color: #E31837 !important;
    color: #FFFFFF !important;
}

/* ==========================================================================
   BADGES Y LABELS
   ========================================================================== */
.badge-primary,
.label-primary {
    background-color: #C8102E !important;
}

/* ==========================================================================
   PROGRESS BARS
   ========================================================================== */
.progress-bar-primary,
.progress-bar {
    background-color: #C8102E !important;
}

/* ==========================================================================
   ALERTAS
   ========================================================================== */
.alert-primary {
    background-color: #F8D7DA !important;
    border-color: #F5C6CB !important;
    color: #721C24 !important;
}

/* ==========================================================================
   PAGINACION
   ========================================================================== */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background-color: #C8102E !important;
    border-color: #C8102E !important;
}

.pagination > li > a:hover,
.pagination > li > span:hover {
    color: #C8102E !important;
}

/* ==========================================================================
   CHECKBOXES Y RADIOS (iCheck)
   ========================================================================== */
.icheckbox_square-blue.checked,
.iradio_square-blue.checked {
    border-color: #C8102E !important;
}

/* ==========================================================================
   CALENDARIO Y DATEPICKER
   ========================================================================== */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
    background-color: #C8102E !important;
    background-image: none !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #C8102E !important;
}

/* ==========================================================================
   DEVEXPRESS OVERRIDES
   ========================================================================== */
/* Grid headers */
.dxgvHeader,
.dxgvHeaderPanel {
    background-color: #C8102E !important;
    color: #FFFFFF !important;
}

/* Selected rows */
.dxgvSelectedRow,
.dxgvFocusedRow {
    background-color: rgba(200, 16, 46, 0.1) !important;
}

/* Pager */
.dxpCurrentPageNumber {
    background-color: #C8102E !important;
    color: #FFFFFF !important;
}

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
.breadcrumb > li > a {
    color: #C8102E !important;
}

.breadcrumb > .active {
    color: #A50D22 !important;
}

/* ==========================================================================
   PAGE HEAD
   ========================================================================== */
.page-head h2 {
    color: #333333 !important;
}

.page-head .breadcrumb > li > a {
    color: #C8102E !important;
}

/* ==========================================================================
   WIZARD / STEPS
   ========================================================================== */
.wizard .steps li.current a,
.wizard .steps li.current a:hover {
    background-color: #C8102E !important;
}

.wizard .steps li.done a,
.wizard .steps li.done a:hover {
    background-color: #A50D22 !important;
}

/* ==========================================================================
   TIMELINE
   ========================================================================== */
.timeline .post .content {
    border-left-color: #C8102E !important;
}

/* ==========================================================================
   MISCELLANEOUS
   ========================================================================== */
/* Loading spinner */
.waitMe_content .waitMe_progress > div {
    background-color: #C8102E !important;
}

/* Scrollbar (webkit) */
::-webkit-scrollbar-thumb {
    background-color: #C8102E !important;
}

/* Selection */
::selection {
    background-color: #C8102E !important;
    color: #FFFFFF !important;
}

::-moz-selection {
    background-color: #C8102E !important;
    color: #FFFFFF !important;
}

/* Focus outline */
*:focus {
    outline-color: #C8102E !important;
}

/* ==========================================================================
   LOGO AREA (opcional - si necesitas ajustar)
   ========================================================================== */
/* Si el logo tiene fondo, puedes ajustarlo aqui */
/*
.navbar-default .navbar-brand {
    background-color: transparent !important;
}
*/

/* ==========================================================================
   CORRECCIONES - Labels de formularios (deben ser oscuros, no blancos)
   ========================================================================== */
/* Labels de formularios - SIEMPRE oscuros */
label,
.control-label,
.col-form-label,
.form-group label,
.form-horizontal .control-label,
.rp3-form-group label {
    color: #333333 !important;
}

/* Texto de formularios */
.form-control,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea {
    color: #333333 !important;
}

/* ==========================================================================
   CORRECCIONES - Headers de tablas
   ========================================================================== */
/* Headers de tablas - fondo rojo con texto blanco */
.table > thead > tr > th,
.table-bordered > thead > tr > th,
.table-striped > thead > tr > th,
table thead th,
table thead td {
    background-color: #C8102E !important;
    color: #FFFFFF !important;
    border-color: #A50D22 !important;
}

/* Asegurar que el texto en headers sea visible */
.table > thead > tr > th a,
.table > thead > tr > th span {
    color: #FFFFFF !important;
}

/* ==========================================================================
   CORRECCIONES - Dropdown de Seguridades (menu normal, no .button)
   ========================================================================== */
/* Dropdown menu general en navbar */
.navbar-default .navbar-nav > li > .dropdown-menu {
    background-color: #C8102E !important;
    border: 1px solid #A50D22 !important;
}

/* Items del dropdown */
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
    color: #FFFFFF !important;
    background-color: transparent !important;
}

/* Hover en items */
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
    background-color: #A50D22 !important;
    color: #FFFFFF !important;
}

/* Dropdown headers/titles */
.dropdown-menu > li.dropdown-header {
    color: #FFD5D5 !important;
}

/* ==========================================================================
   CORRECCIONES - Content boxes y panels
   ========================================================================== */
/* Titulos de content boxes */
.content-box .title,
.block .head h2,
.panel-heading,
.box-title {
    color: #333333 !important;
}

/* Content box con clase especifica del framework Rp3 */
.rp3-content-box .title,
.rp3-content-box h4,
.rp3-content-box h3 {
    color: #333333 !important;
}

/* ==========================================================================
   CORRECCIONES - Texto general que NO debe ser blanco
   ========================================================================== */
/* Asegurar que el texto del body sea oscuro */
body,
p,
span,
div {
    color: #333333;
}

/* Excepciones - elementos que SI deben tener texto blanco */
.btn-primary,
.btn-primary span,
.btn-danger,
.btn-danger span,
.btn-success,
.btn-success span,
.navbar-default,
.navbar-default span,
.cl-sidebar,
.cl-sidebar span,
.cl-sidebar a,
.table > thead > tr > th,
.badge,
.label {
    color: #FFFFFF !important;
}

/* ==========================================================================
   CORRECCIONES - Select2 dropdown
   ========================================================================== */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #333333 !important;
}

.select2-container--default .select2-results__option {
    color: #333333 !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #C8102E !important;
    color: #FFFFFF !important;
}

/* ==========================================================================
   CORRECCIONES - Inputs dentro de tablas
   ========================================================================== */
.table input[type="text"],
.table input[type="number"],
.table select {
    color: #333333 !important;
    background-color: #FFFFFF !important;
}

/* ==========================================================================
   CORRECCIONES - Cards y widgets info
   ========================================================================== */
.info-box,
.stat-box,
.widget-box {
    color: #333333 !important;
}

.info-box .info-box-content,
.info-box .info-box-text,
.info-box .info-box-number {
    color: #333333 !important;
}

/* ==========================================================================
   CORRECCIONES - Scroll de pagina (permite scroll vertical en paginas largas)
   ========================================================================== */
/* Asegurar que el body pueda hacer scroll */
html {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
}

body {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* El wrapper principal debe permitir scroll */
#cl-wrapper {
    height: auto !important;
    min-height: 100% !important;
    position: relative !important;
    overflow: visible !important;
}

/* El contenedor de contenido debe expandirse con el contenido */
#pcont {
    height: auto !important;
    min-height: 100vh !important;
    padding-bottom: 50px !important;
}

/* Asegurar que el contenido principal no tenga altura fija */
#main-content-body {
    height: auto !important;
    overflow: visible !important;
}

/* ==========================================================================
   CORRECCIONES - Ocultar logo SAR duplicado en navbar (viene del framework)
   ========================================================================== */
/* Ocultar el logo SAR que aparece antes del badge SAMP */
.navbar-header[style*="float:right"] img[src*="logo"],
.navbar-right .navbar-brand,
.navbar-collapse > .navbar-header:last-child img {
    display: none !important;
}

/* Ocultar el background-image del framework (RP3 RETAIL SOFTWARE / Market Force) */
.navbar-default .navbar-brand {
    background-image: none !important;
    background: none !important;
}

/* Logos centrados en el navbar */
.navbar-header .navbar-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 50px !important;
    padding: 0 15px !important;
    margin: 5px 0 15px 0 !important;
}

.navbar-header .navbar-brand img {
    height: 45px !important;
    width: auto !important;
    margin: 0 10px 0 0 !important;
}

/* ==========================================================================
   CORRECCIONES - Badge SAMP en navbar
   ========================================================================== */
.samp-badge {
    display: inline-block !important;
    padding: 10px 20px !important;
    margin: 15px 15px 15px 5px !important;
    background-color: #007bff !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: bold !important;
    font-size: 16px !important;
    border-radius: 4px !important;
    float: right !important;
}

.samp-badge:hover {
    background-color: #0056b3 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* ==========================================================================
   CORRECCIONES FUERTES - Scroll (override framework)
   ========================================================================== */
html, body {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: static !important;
}

#cl-wrapper,
#cl-wrapper.fixed-menu {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
    position: relative !important;
}

#pcont {
    height: auto !important;
    min-height: calc(100vh - 70px) !important;
    overflow: visible !important;
    padding-bottom: 50px !important;
}

.container-fluid {
    overflow: visible !important;
}

/* ==========================================================================
   CORRECCIONES - Tabs del dashboard (asegurar visibilidad del texto)
   ========================================================================== */
.nav-tabs-dashboard li a {
    color: #555 !important;
    font-size: 14px !important;
}

.nav-tabs-dashboard li.active a {
    color: #3182ce !important;
}

.nav-tabs-dashboard li a i {
    margin-right: 6px !important;
}

/* ==========================================================================
   CORRECCIONES - Boton Exportar en ActionTitle (visible sobre fondo oscuro)
   ========================================================================== */
#actionTitle .btn-default,
#actionTitle .btn-group .btn-default {
    background-color: #fff !important;
    border-color: #ccc !important;
    color: #333 !important;
}

#actionTitle .btn-default:hover,
#actionTitle .btn-group .btn-default:hover {
    background-color: #e6e6e6 !important;
    border-color: #adadad !important;
    color: #333 !important;
}

#actionTitle .dropdown-menu {
    background-color: #fff !important;
    border: 1px solid #ccc !important;
}

#actionTitle .dropdown-menu > li > a {
    color: #333 !important;
    background-color: transparent !important;
}

#actionTitle .dropdown-menu > li > a:hover {
    background-color: #f5f5f5 !important;
    color: #333 !important;
}

#actionTitle .dropdown-menu .divider {
    background-color: #e5e5e5 !important;
}

/* ==========================================================================
   CORRECCIONES - Top Productos y textos del dashboard
   ========================================================================== */
#topProductos,
#topProductos div,
#topProductos span,
.chart-container .chart-title,
.data-table td {
    color: #333 !important;
}

/* ==========================================================================
   FIX SCROLL VERTICAL - Override style.css lines 7, 1198, 1205
   El problema: html/body tienen height:100% y #cl-wrapper tiene position:absolute
   Esto crea un contenedor fijo que no permite scroll vertical
   ========================================================================== */
html,
html.dxbs,
html.dxbs-touch {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body,
body.dxbs {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative !important;
}

#cl-wrapper,
#cl-wrapper.fixed-menu,
#cl-wrapper.sb-collapsed,
#cl-wrapper.sb-collapsed.fixed-menu {
    height: auto !important;
    min-height: 100vh !important;
    display: block !important;
    position: relative !important;
    overflow: visible !important;
    width: 100% !important;
}

#pcont,
.sb-collapsed #pcont {
    height: auto !important;
    min-height: calc(100vh - 70px) !important;
    overflow: visible !important;
    padding-bottom: 50px !important;
    display: block !important;
}

.cl-mcont,
.container-fluid,
.row,
#main-content-body {
    height: auto !important;
    overflow: visible !important;
}