/***
default theme
***/

/***
Reset and overrides  
***/
body { 
  background-color:#111827 !important;
}

/***
Page header
***/
.header .navbar-inner {
  filter:none !important;
  background-image: none !important;
  background-color: #0c0c0c !important;
}

.header .btn-navbar {  
  background-color: #0c0c0c !important;
} 

.header .nav .dropdown-toggle:hover, 
.header .nav .dropdown.open .dropdown-toggle {
  background-color: #2B2B2C !important;
}

.header .nav li.dropdown .dropdown-toggle i {
  color: rgb(231, 231, 231) !important;
}

/***
Page sidebar
***/
.page-sidebar > ul > li > a {
  /*border-top: 1px solid #111111 !important;
  border-bottom: 1px solid #46494b !important;*/
  color: #fff !important;
  text-transform: capitalize;
}

.page-sidebar > ul > li:last-child > a {
   border-bottom: 1px solid transparent !important;
}

.page-sidebar > ul > li a i {
   color: #fff;
}

.page-sidebar > ul > li.open > a, 
.page-sidebar > ul > li >a:hover, 
.page-sidebar > ul > li:hover >a {  
  background: #005CAE;
}

.page-sidebar > ul > li.active > a {
  background: #0072D8 !important;  
  /*border-top-color: transparent !important;*/
  color:#fff;
  text-shadow:1px 1px 0 rgba(0, 0, 0, 0.2);
  background:-moz-linear-gradient(top, #0072D8 0%, #0272bd 100%);
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#0072D8), color-stop(100%,#0272bd));
  background:-webkit-linear-gradient(top, #0072D8 0%,#0272bd 100%);
  background:-o-linear-gradient(top, #0072D8 0%,#0272bd 100%);
  background:-ms-linear-gradient(top, #0072D8 0%,#0272bd 100%);
  background:linear-gradient(to bottom, #0072D8 0%,#0272bd 100%);
  border-top:1px solid #005CAE;
}  

.page-sidebar > ul > li.active > a i {
  color:#fff;
}

.page-sidebar > ul > li > a.open {
  background: #005CAE;
}

.page-sidebar ul > li > a > .arrow:before,
.page-sidebar > ul > li > a > .arrow.open:before {  
   color: #919091 !important;
}

.page-sidebar ul > li.active > a .arrow:before,
.page-sidebar > ul > li.active > a .arrow.open:before {  
   color: #fff !important;
}

.page-sidebar > ul > li > ul.sub-menu > li > a {
  margin-left:0px;  
  padding-left: 5px; 
}

.page-sidebar > ul > li > ul.sub-menu > li:first-child > a {
  border-top: 2px !important;
}

.page-sidebar > ul > li > ul.sub-menu > li.active > a, 
.page-sidebar > ul > li > ul.sub-menu > li > a:hover {
  color: #fff !important;
  background: #262626 !important;
  text-shadow:1px 1px 0 rgba(0, 0, 0, 0.4);  
}

.page-sidebar > ul > li > ul.sub-menu > li > a:hover {
  background: #262626 !important;
  text-shadow:1px 1px 0 rgba(0, 0, 0, 0.4);  
}

/* 3rd level sub menu */
.page-sidebar > ul > li > ul.sub-menu  li > ul.sub-menu > li.active > a, 
.page-sidebar > ul > li > ul.sub-menu  li > ul.sub-menu > li > a:hover,
.page-sidebar > ul > li > ul.sub-menu  li.open > a  {
  color: #fff !important;
  background: #262626 !important;  
  text-shadow:1px 1px 0 rgba(0, 0, 0, 0.4);  
}

.page-sidebar > ul > li > ul.sub-menu  a .arrow:before,
.page-sidebar > ul > li > ul.sub-menu  a .arrow.open:before {  
   color: #626262 !important;
}

/* sidebar search */

.page-sidebar .sidebar-search input{
  background-color: #3d3d3d  !important;  
  color: #bababa !important;
}

.page-sidebar .sidebar-search .input-box {
  border-bottom-color: #959595  !important;
}

.page-sidebar .sidebar-search .submit {
  background-image: url(../../img/search-icon.png);
}

/***
Sidebar toggler
***/
.sidebar-toggler {  
  background-image: url(../../img/sidebar-toggler.jpg);
  background-color: #333;
}

/* search box bg color on expanded */
.sidebar-closed .page-sidebar .sidebar-search.open {
  background-color: #3d3d3d !important;
}

.sidebar-closed .page-sidebar .sidebar-search.open .remove {  
  background-image: url("../../img/sidebar-search-close.png");
}

/* sub menu bg color on hover menu item */
.sidebar-closed .page-sidebar > ul > li:hover .sub-menu {
  background-color: #3d3d3d;
}

/***
Horizontal Menu(new in v1.2)
***/

/*search*/

.header .hor-menu .hor-menu-search-form-toggler.hide {
  background: #101010 url(../../img/hor-menu-search-close.png) no-repeat center;
}

.header .hor-menu .search-form {
  background:#101010;
}

.header .hor-menu .search-form .btn {
  color: #999;
  background: #2d2d2d url(../../img/search-icon.png) no-repeat center;
}

.header .hor-menu .search-form form input {
  color: #999;
}

.header .hor-menu .search-form form input::-webkit-input-placeholder { /* WebKit browsers */
    color: #999;
}
.header .hor-menu .search-form form input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #999;
}
.header .hor-menu .search-form form input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #999;
}
.header .hor-menu .search-form form input:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #999;
}

/***
Landscape phone to portrait tablet
***/
@media (max-width:979px) { 
  /***
  page sidebar
  ***/
  .page-sidebar {
    background-color: #232427 !important;
  }

  .page-sidebar > ul > li > a {
    border-top: 1px solid #2c2d30 !important;
  }

  .page-sidebar > ul > li:last-child > a {
    border-bottom: 0 !important;
  }

  .page-sidebar .sidebar-search input{
    background-color: #232427  !important;  
  }
}

/* =========================================================
   WOWCO ADMIN - Modern dark refresh
   Agregar al FINAL de admin/assets/css/theme/default.css
   ========================================================= */

   :root{
    --wow-bg: #0b1220;
    --wow-surface: #111827;
    --wow-surface-2: #172033;
    --wow-surface-3: #1e293b;
    --wow-border: rgba(255,255,255,0.08);
    --wow-border-strong: rgba(255,255,255,0.12);
    --wow-text: #e5e7eb;
    --wow-text-soft: #9ca3af;
    --wow-title: #f8fafc;
    --wow-primary: #2563eb;
    --wow-primary-2: #1d4ed8;
    --wow-primary-soft: rgba(37,99,235,0.18);
    --wow-hover: rgba(255,255,255,0.04);
    --wow-shadow: 0 10px 30px rgba(0,0,0,0.28);
    --wow-radius: 12px;
  }
  
  /* Base */
  body{
    background-color: var(--wow-bg) !important;
    color: var(--wow-text) !important;
  }
  
  a{
    color: #60a5fa;
  }
  
  a:hover{
    color: #93c5fd;
  }
  
  /* Header */
  .header .navbar-inner{
    height: 50px;
    background: linear-gradient(180deg, #0f172a 0%, #0b1220 100%) !important;
    border-bottom: 1px solid var(--wow-border) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.22);
  }
  
  .header .btn-navbar{
    background: transparent !important;
  }
  
  .header .nav .dropdown-toggle:hover,
  .header .nav .dropdown.open .dropdown-toggle{
    background-color: rgba(255,255,255,0.05) !important;
  }
  
  .header .nav li.dropdown .dropdown-toggle i,
  .header .nav > li.dropdown.user .dropdown-toggle .username{
    color: #e5e7eb !important;
  }
  
  /* Sidebar */
  .page-sidebar{
    background: linear-gradient(180deg, #0a0f1a 0%, #0d1524 100%) !important;
    border-right: 1px solid var(--wow-border);
    box-shadow: inset -1px 0 0 rgba(255,255,255,0.03);
  }
  
  .page-sidebar > ul > li > a{
    color: var(--wow-text) !important;
    font-size: 13px;
    font-weight: 500;
    text-shadow: none !important;
    padding: 11px 15px;
    border: 0 !important;
    transition: background-color .18s ease, color .18s ease, padding-left .18s ease;
  }
  
  .page-sidebar > ul > li > a i{
    color: #cbd5e1 !important;
    text-shadow: none !important;
    opacity: .92;
  }
  
  .page-sidebar > ul > li.open > a,
  .page-sidebar > ul > li > a:hover,
  .page-sidebar > ul > li:hover > a{
    background: rgba(255,255,255,0.05) !important;
    color: #fff !important;
  }
  
  .page-sidebar > ul > li > a:hover{
    padding-left: 18px;
  }
  
  .page-sidebar > ul > li.active > a{
    background: linear-gradient(135deg, var(--wow-primary) 0%, var(--wow-primary-2) 100%) !important;
    color: #fff !important;
    text-shadow: none !important;
    border: 0 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 8px 20px rgba(37,99,235,0.25);
  }
  
  .page-sidebar > ul > li.active > a i{
    color: #fff !important;
  }
  
  .page-sidebar ul > li > a > .arrow:before,
  .page-sidebar > ul > li > a > .arrow.open:before{
    color: rgba(255,255,255,0.65) !important;
  }
  
  .page-sidebar ul > li.active > a .arrow:before,
  .page-sidebar > ul > li.active > a .arrow.open:before{
    color: #fff !important;
  }
  
  .page-sidebar > ul > li > ul.sub-menu{
    border-bottom: 0 !important;
    background: rgba(0,0,0,0.18);
  }
  
  .page-sidebar > ul > li > ul.sub-menu > li > a{
    background-color: transparent !important;
    color: #cbd5e1 !important;
    text-shadow: none !important;
    font-size: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 42px !important;
    transition: background-color .18s ease, color .18s ease, padding-left .18s ease;
  }
  
  .page-sidebar > ul > li > ul.sub-menu > li.active > a,
  .page-sidebar > ul > li > ul.sub-menu > li > a:hover,
  .page-sidebar > ul > li > ul.sub-menu li > ul.sub-menu > li.active > a,
  .page-sidebar > ul > li > ul.sub-menu li > ul.sub-menu > li > a:hover,
  .page-sidebar > ul > li > ul.sub-menu li.open > a{
    background: rgba(255,255,255,0.06) !important;
    color: #fff !important;
    text-shadow: none !important;
  }
  
  .page-sidebar > ul > li > ul.sub-menu > li > a:hover{
    padding-left: 46px !important;
  }
  
  /* Sidebar closed hover */
  .sidebar-closed > .page-sidebar > ul > li:hover{
    background: #0f172a !important;
  }
  
  .sidebar-closed > .page-sidebar > ul > li:hover > a{
    background: rgba(255,255,255,0.05) !important;
  }
  
  .sidebar-closed > .page-sidebar > ul > li:hover > .sub-menu{
    background: #0f172a !important;
    border-left: 1px solid var(--wow-border);
    box-shadow: var(--wow-shadow);
  }
  
  /* Page content */
  .page-content{
    background: linear-gradient(180deg, #111827 0%, #0f172a 100%) !important;
  }
  
  .page-title{
    color: var(--wow-title) !important;
    font-weight: 400;
    letter-spacing: -0.02em;
    margin-top: 22px;
    margin-bottom: 18px;
  }
  
  .page-title small{
    color: var(--wow-text-soft);
  }
  
  /* Breadcrumb */
  .page-content .breadcrumb{
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid var(--wow-border) !important;
    border-radius: 10px !important;
    padding: 10px 14px;
    margin-bottom: 22px;
  }
  
  .page-content .breadcrumb a,
  .page-content .breadcrumb i,
  .page-content .breadcrumb span{
    color: #dbe4f0 !important;
    font-size: 13px;
  }
  
  .page-content .breadcrumb i{
    color: #93a4ba !important;
  }
  
  /* Portlets */
  .portlet{
    margin-bottom: 22px;
  }
  
  .portlet.box{
    border: 1px solid var(--wow-border) !important;
    border-radius: var(--wow-radius);
    overflow: hidden;
    box-shadow: var(--wow-shadow);
    background: var(--wow-surface);
  }
  
  .portlet.box .portlet-title{
    height: auto;
    min-height: 52px;
    padding: 14px 16px 12px 16px;
    border-bottom: 1px solid var(--wow-border) !important;
    border-radius: 0 !important;
    text-transform: none;
    box-shadow: none;
  }
  
  .portlet.box .portlet-body{
    background: #ffffff;
    padding: 14px;
  }
  
  .portlet.box.blue .portlet-title,
  .portlet.box.red .portlet-title,
  .portlet.box.green .portlet-title,
  .portlet.box.yellow .portlet-title,
  .portlet.box.purple .portlet-title,
  .portlet.box.grey .portlet-title,
  .portlet.box.light-grey .portlet-title{
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    color: #fff !important;
  }
  
  .portlet.box.blue,
  .portlet.box.red,
  .portlet.box.green,
  .portlet.box.yellow,
  .portlet.box.purple,
  .portlet.box.grey,
  .portlet.box.light-grey{
    border-color: var(--wow-border) !important;
  }
  
  .portlet-title{
    border-bottom-color: rgba(0,0,0,0.08);
  }
  
  .portlet-title .caption{
    font-size: 16px;
    font-weight: 600;
  }
  
  .portlet-title .caption i{
    color: #94a3b8;
  }
  
  .portlet.box .portlet-title .caption i{
    color: #cbd5e1 !important;
  }
  
  /* Dashboard cards */
  .dashboard-stat{
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--wow-shadow);
    margin-bottom: 22px;
    border: 1px solid rgba(255,255,255,0.06);
  }
  
  .dashboard-stat.blue{
    background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
  }
  
  .dashboard-stat.green{
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  }
  
  .dashboard-stat.red{
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  }
  
  .dashboard-stat.yellow{
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  }
  
  .dashboard-stat.purple{
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
  }
  
  .dashboard-stat .visual{
    padding-left: 18px;
  }
  
  .dashboard-stat .visual i{
    opacity: .14;
    filter: alpha(opacity=14);
  }
  
  .dashboard-stat .details{
    padding-right: 16px;
  }
  
  .dashboard-stat .details .number{
    font-weight: 600;
    letter-spacing: -0.03em;
  }
  
  .dashboard-stat .details .desc{
    font-size: 22px;
    font-weight: 400;
  }
  
  .dashboard-stat .more{
    background: rgba(0,0,0,0.14) !important;
    font-size: 11px;
    letter-spacing: .04em;
  }
  
  /* Buttons */
  .btn{
    border-radius: 10px !important;
    box-shadow: none !important;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  }
  
  .btn:hover{
    transform: translateY(-1px);
  }
  
  .btn-primary{
    background: linear-gradient(135deg, var(--wow-primary) 0%, var(--wow-primary-2) 100%) !important;
    border-color: var(--wow-primary-2) !important;
  }
  
  .btn-info{
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    border-color: #0284c7 !important;
  }
  
  .btn-success{
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border-color: #16a34a !important;
  }
  
  .btn-warning{
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border-color: #d97706 !important;
  }
  
  .btn-danger{
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border-color: #dc2626 !important;
  }
  
  /* Forms */
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  textarea,
  select,
  .uneditable-input,
  .m-wrap{
    border-radius: 10px !important;
    border: 1px solid #d5dbe5 !important;
    box-shadow: none !important;
    transition: border-color .18s ease, box-shadow .18s ease;
  }
  
  input[type="text"]:focus,
  input[type="password"]:focus,
  input[type="email"]:focus,
  input[type="number"]:focus,
  textarea:focus,
  select:focus,
  .m-wrap:focus{
    border-color: #93c5fd !important;
    box-shadow: 0 0 0 4px rgba(37,99,235,0.12) !important;
  }
  
  .control-label{
    font-weight: 600;
    color: #1f2937;
  }
  
  .form-horizontal.form-bordered .control-group{
    border-bottom-color: #eef2f7;
  }
  
  .form-horizontal.form-bordered .control-group .controls{
    border-left-color: #eef2f7;
  }
  
  /* Tables */
  .table{
    border-collapse: separate;
    border-spacing: 0;
  }
  
  .table thead tr th{
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    border-bottom: 1px solid #e5e7eb;
  }
  
  .table-bordered{
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
  }
  
  .table tbody tr:hover td{
    background: #f8fbff;
  }
  
  .table-advance thead tr th{
    background-color: #eef2f7;
    color: #334155;
  }
  
  /* Dropdowns */
  .dropdown-menu{
    border-radius: 12px !important;
    border: 1px solid rgba(15,23,42,0.08) !important;
    box-shadow: 0 16px 40px rgba(2,6,23,0.18) !important;
  }
  
  .dropdown-menu.extended{
    border-radius: 12px !important;
    overflow: hidden;
  }
  
  /* Tabs */
  .tabbable-custom > .tab-content{
    border-radius: 0 0 12px 12px;
    border-color: #e5e7eb;
  }
  
  .tabbable-custom .nav-tabs > li > a{
    border-radius: 10px 10px 0 0;
  }
  
  .tabbable-custom .nav-tabs > li.active{
    border-top-color: var(--wow-primary);
  }
  
  /* Well / panels */
  .well{
    border-radius: 12px;
    border-color: #e5e7eb;
  }
  
  /* Footer */
  .footer{
    color: #94a3b8;
  }
  
  /* Optional polish for icons in sidebar */
  .page-sidebar > ul > li > a i[class^="icon-"],
  .page-sidebar > ul > li > a i[class*=" icon-"]{
    font-size: 20px;
    width: 30px;
  }
  
  /* Better search box in sidebar */
  .page-sidebar .sidebar-search input{
    background-color: rgba(255,255,255,0.06) !important;
    color: #e5e7eb !important;
    border-radius: 8px;
  }
  
  .page-sidebar .sidebar-search .input-box{
    border-bottom-color: rgba(255,255,255,0.12) !important;
  }


  /* =========================================================
   WOWCO ADMIN - Dashboard stat polish
   Refinamiento visual moderno para tarjetas dashboard
   ========================================================= */

.dashboard-stat{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.08);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease,
    border-color .22s ease;
  -webkit-font-smoothing: antialiased;
  will-change: transform, box-shadow;
}

/* brillo sutil superior tipo glass/premium */
.dashboard-stat:before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.04) 18%,
    rgba(255,255,255,0.00) 42%
  );
  pointer-events: none;
  z-index: 1;
}

/* leve glow interno inferior */
.dashboard-stat:after{
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -18px;
  height: 40px;
  background: rgba(255,255,255,0.08);
  filter: blur(24px);
  opacity: .22;
  pointer-events: none;
  z-index: 1;
}

.dashboard-stat .visual,
.dashboard-stat .details,
.dashboard-stat .more{
  position: relative;
  z-index: 2;
}

.dashboard-stat .visual i{
  opacity: .16;
  filter: alpha(opacity=16);
  transition: opacity .22s ease, transform .22s ease;
}

.dashboard-stat .details .number,
.dashboard-stat .details .desc{
  text-shadow: 0 1px 2px rgba(0,0,0,0.16);
}

/* Hover general moderno */
.dashboard-stat:hover{
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(255,255,255,0.16);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.34),
    0 0 0 1px rgba(255,255,255,0.04),
    0 0 24px rgba(59,130,246,0.16);
  filter: brightness(1.05) saturate(1.06);
}

.dashboard-stat:hover .visual i{
  opacity: .22;
  transform: scale(1.03);
}

.dashboard-stat:hover .more{
  background: rgba(255,255,255,0.10) !important;
}

/* versión blue con glow más fino y elegante */
.dashboard-stat.blue:hover{
  box-shadow:
    0 18px 40px rgba(0,0,0,0.34),
    0 0 0 1px rgba(255,255,255,0.05),
    0 0 28px rgba(37,99,235,0.22);
  filter: brightness(1.07) saturate(1.08);
}

/* si luego usas más colores, ya quedan también más elegantes */
.dashboard-stat.green:hover{
  box-shadow:
    0 18px 40px rgba(0,0,0,0.34),
    0 0 0 1px rgba(255,255,255,0.05),
    0 0 28px rgba(16,185,129,0.20);
}

.dashboard-stat.red:hover{
  box-shadow:
    0 18px 40px rgba(0,0,0,0.34),
    0 0 0 1px rgba(255,255,255,0.05),
    0 0 28px rgba(239,68,68,0.18);
}

.dashboard-stat.yellow:hover{
  box-shadow:
    0 18px 40px rgba(0,0,0,0.34),
    0 0 0 1px rgba(255,255,255,0.05),
    0 0 28px rgba(245,158,11,0.18);
}

.dashboard-stat.purple:hover{
  box-shadow:
    0 18px 40px rgba(0,0,0,0.34),
    0 0 0 1px rgba(255,255,255,0.05),
    0 0 28px rgba(168,85,247,0.20);
}


/* =========================================================
   WOWCO FIX - Light content readability
   ========================================================= */

/* Contenido blanco (formularios, tablas, etc) */
.portlet.box .portlet-body,
.portlet-body,
.form-body,
.table,
.table td,
.table th,
.control-label,
.form-horizontal .control-label,
.form-horizontal .controls,
.form-control,
input,
select,
textarea {
  color: #1f2937 !important; /* gris oscuro moderno */
}

/* Labels */
.control-label,
.form-horizontal .control-label {
  color: #374151 !important;
}

/* Inputs */
input,
select,
textarea {
  color: #111827 !important;
  background-color: #ffffff !important;
}

/* Placeholders */
input::placeholder,
textarea::placeholder {
  color: #9ca3af !important;
}

/* Tabla contenido */
.table tbody tr td {
  color: #1f2937 !important;
}

/* Headers tabla */
.table thead tr th {
  color: #374151 !important;
}

/* Texto dentro de selects */
select option {
  color: #111827;
}

/* Fix real de bordes redondeados en dashboard */
.dashboard-stat {
  border-radius: 18px;
  overflow: hidden;
}

.dashboard-stat .more {
  border-radius: 0 0 18px 18px;
}


/* =========================================================
   WOWCO ADMIN - Upgrade PRO
   Formularios + tablas + portlets + detalles visuales
   Sin romper funcionalidad legacy
   ========================================================= */

/* ---------------------------------------------------------
   1) PORTLET BODY LIGHT MÁS LIMPIO
--------------------------------------------------------- */
.portlet.box .portlet-body,
.portlet .portlet-body.form,
.portlet > .portlet-body{
  background: #ffffff !important;
}

/* cuando el contenido es claro, darle marco más moderno */
.portlet.box{
  border-radius: 16px !important;
  overflow: hidden;
}

.portlet.box .portlet-title{
  padding: 15px 18px 13px 18px !important;
}

.portlet.box .portlet-body{
  padding: 16px 16px 18px 16px !important;
}

/* ---------------------------------------------------------
   2) FORMULARIOS PRO
--------------------------------------------------------- */
.form-horizontal .control-group{
  margin-bottom: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}

.form-horizontal.form-bordered .control-group{
  border-bottom: 1px solid #eef2f7 !important;
}

.form-horizontal.form-bordered .control-group:last-child{
  border-bottom: 0 !important;
}

.form-horizontal.form-bordered .control-group .control-label{
  padding-top: 13px;
}

.control-label,
.form-horizontal .control-label{
  font-size: 13px;
  font-weight: 600;
  color: #4b5563 !important;
  letter-spacing: -0.01em;
}

/* campos */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select,
.uneditable-input,
.m-wrap{
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 12px !important;
  border: 1px solid #cfd8e3 !important;
  background: #ffffff !important;
  color: #111827 !important;
  box-shadow: none !important;
  outline: none;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease;
}

textarea{
  min-height: 110px;
  resize: vertical;
}

input:hover,
select:hover,
textarea:hover{
  border-color: #b8c4d3 !important;
}

input:focus,
select:focus,
textarea:focus,
.m-wrap:focus{
  border-color: #93c5fd !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.10) !important;
}

/* selects más prolijos */
select{
  padding-right: 34px;
  cursor: pointer;
}

/* disabled */
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
textarea[readonly]{
  background: #f8fafc !important;
  color: #6b7280 !important;
  cursor: not-allowed;
}

/* ---------------------------------------------------------
   3) BOTONES MÁS MODERNOS
--------------------------------------------------------- */
.btn{
  border-radius: 12px !important;
  padding: 8px 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-width: 1px !important;
  text-shadow: none !important;
}

.btn:hover{
  transform: translateY(-1px);
}

.btn:focus,
.btn:active{
  box-shadow: 0 0 0 4px rgba(37,99,235,0.12) !important;
}

.btn-default{
  background: #ffffff !important;
  border-color: #d4dbe5 !important;
  color: #334155 !important;
}

.btn-default:hover{
  background: #f8fafc !important;
  border-color: #c5d0dd !important;
  color: #0f172a !important;
}

/* ---------------------------------------------------------
   4) TABLAS MÁS LIMPIAS Y LEGIBLES
--------------------------------------------------------- */
.table{
  margin-bottom: 0;
  background: #ffffff;
}

.table-bordered{
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  overflow: hidden;
}

.table thead tr th{
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid #e5e7eb !important;
  border-top: 0 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.table tbody tr td{
  color: #1f2937 !important;
  vertical-align: middle;
  border-top: 1px solid #eef2f7 !important;
  /*padding-top: 14px !important;
  padding-bottom: 14px !important;
  */
}

.table tbody tr:nth-child(even) td{
  background: #fcfdff;
}

.table tbody tr:hover td{
  background: #f7fbff !important;
}

/* links dentro de tablas */
.table a{
  color: #1d4ed8;
  font-weight: 500;
}

.table a:hover{
  color: #1e40af;
  text-decoration: none;
}

/* ---------------------------------------------------------
   5) FILTROS / BLOQUES DE BÚSQUEDA
--------------------------------------------------------- */
.form-section{
  color: #111827 !important;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eef2f7;
}

/* si hay cajas internas o well */
.well{
  background: #f8fafc !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------
   6) PAGINACIÓN / INFO SECUNDARIA
--------------------------------------------------------- */
.pagination ul > li > a,
.pagination ul > li > span{
  border-color: #d7dee8 !important;
  color: #334155 !important;
  background: #ffffff !important;
}

.pagination ul > li > a:hover,
.pagination ul > li.active > a,
.pagination ul > li.active > span{
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border-color: #bfdbfe !important;
}

/* ---------------------------------------------------------
   7) MENSAJES / ALERTAS MÁS LIMPIOS
--------------------------------------------------------- */
.alert{
  border-radius: 14px !important;
  border-width: 1px !important;
  box-shadow: none !important;
}

.alert-info{
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1e3a8a !important;
}

.alert-success{
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #065f46 !important;
}

.alert-warning{
  background: #fffbeb !important;
  border-color: #fde68a !important;
  color: #92400e !important;
}

.alert-error,
.alert-danger{
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #991b1b !important;
}

/* ---------------------------------------------------------
   8) TABS MÁS ACTUALES
--------------------------------------------------------- */
.tabbable-custom{
  border-radius: 14px;
  overflow: hidden;
}

.tabbable-custom > .nav-tabs{
  margin-bottom: 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
  background: #f8fafc;
}

.tabbable-custom > .nav-tabs > li{
  margin-right: 4px;
}

.tabbable-custom > .nav-tabs > li > a{
  border: 0 !important;
  background: transparent !important;
  color: #475569 !important;
  padding: 12px 14px !important;
  border-radius: 10px 10px 0 0 !important;
  font-weight: 600;
}

.tabbable-custom > .nav-tabs > li > a:hover{
  color: #1d4ed8 !important;
  background: #eef4ff !important;
}

.tabbable-custom > .nav-tabs > li.active > a{
  color: #1d4ed8 !important;
  background: #ffffff !important;
}

.tabbable-custom > .tab-content{
  background: #ffffff !important;
  border: 0 !important;
  padding: 16px !important;
}

/* ---------------------------------------------------------
   9) DROPDOWNS / MENÚS FLOTANTES
--------------------------------------------------------- */
.dropdown-menu{
  padding: 8px !important;
  border-radius: 14px !important;
}

.dropdown-menu li > a{
  border-radius: 10px;
  padding-top: 9px;
  padding-bottom: 9px;
  color: #334155 !important;
}

.dropdown-menu li > a:hover{
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

/* ---------------------------------------------------------
   10) MICRODETALLES PRO
--------------------------------------------------------- */
hr{
  border-top-color: #e5e7eb;
}

.muted{
  color: #6b7280 !important;
}

.help-inline,
.help-block{
  color: #6b7280 !important;
}

.required,
.asterisk{
  color: #dc2626 !important;
}

/* checkbox/radio áreas con mejor aire */
.controls > .checkbox,
.controls > .radio{
  padding-top: 8px;
  color: #374151;
}

/* ---------------------------------------------------------
   11) RESULTADOS Y LISTADOS MUY LARGOS
--------------------------------------------------------- */
.dataTables_wrapper .row-fluid{
  margin-bottom: 10px;
}

.dataTables_length select,
.dataTables_filter input{
  min-height: 36px;
  border-radius: 10px !important;
}

/* ---------------------------------------------------------
   12) HOVER DE DASHBOARD LINKS
--------------------------------------------------------- */
.dashboard-stat{
  cursor: pointer;
}

.dashboard-stat a{
  color: #ffffff !important;
  text-decoration: none !important;
}

.dashboard-stat .more{
  transition:
    background-color .18s ease,
    letter-spacing .18s ease,
    opacity .18s ease;
}

.dashboard-stat:hover .more{
  letter-spacing: .05em;
  background: rgba(255,255,255,0.12) !important;
}

/* ---------------------------------------------------------
   13) FIX EXTRA DE LEGIBILIDAD EN ÁREAS CLARAS
--------------------------------------------------------- */
.page-content .portlet-body,
.page-content .portlet-body p,
.page-content .portlet-body span,
.page-content .portlet-body label,
.page-content .portlet-body div,
.page-content .portlet-body td,
.page-content .portlet-body th{
  color: inherit;
}

.page-content .portlet-body{
  color: #1f2937 !important;
}


/* =========================================================
   WOWCO ADMIN - Sidebar PRO hover + active
   ========================================================= */

/* HOVER - más notorio, moderno */
.page-sidebar > ul > li > a{
  transition:
    background .18s ease,
    color .18s ease,
    padding-left .18s ease,
    box-shadow .18s ease;
}

.page-sidebar > ul > li > a:hover{
  background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) !important;
  color: #ffffff !important;
  padding-left: 20px;
  box-shadow: inset 3px 0 0 rgba(255,255,255,0.25);
}

.page-sidebar > ul > li > a:hover i{
  color: #ffffff !important;
  opacity: 1;
}

/* ACTIVE / OPEN - estilo WOWCO */
.page-sidebar > ul > li.active > a,
.page-sidebar > ul > li.open > a{
  background: linear-gradient(135deg, #FFD718 0%, #facc15 100%) !important;
  color: #0f172a !important; /* azul oscuro elegante */
  font-weight: 600;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.05),
    0 8px 20px rgba(255,215,24,0.25);
}

/* ICONOS en activo */
.page-sidebar > ul > li.active > a i,
.page-sidebar > ul > li.open > a i{
  color: #0f172a !important;
}

/* Flecha en activo */
.page-sidebar > ul > li.active > a .arrow:before,
.page-sidebar > ul > li.open > a .arrow:before{
  color: #0f172a !important;
}

/* SUBMENÚ - más limpio */
.page-sidebar > ul > li > ul.sub-menu{
  background: rgba(0,0,0,0.25);
  border-left: 1px solid rgba(255,255,255,0.06);
}

/* items del submenu */
.page-sidebar > ul > li > ul.sub-menu > li > a{
  color: #cbd5e1 !important;
  padding-left: 44px !important;
  transition: all .18s ease;
}

/* hover submenu */
.page-sidebar > ul > li > ul.sub-menu > li > a:hover{
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
  padding-left: 48px !important;
}

/* activo submenu */
.page-sidebar > ul > li > ul.sub-menu > li.active > a{
  background: rgba(255,215,24,0.12) !important;
  color: #FFD718 !important;
  font-weight: 600;
}

/* sidebar collapsed (IMPORTANTE) */
.sidebar-closed > .page-sidebar > ul > li:hover > a{
  background: linear-gradient(135deg, #FFD718 0%, #facc15 100%) !important;
  color: #0f172a !important;
}

/* =========================================================
   WOWCO ADMIN - Sidebar submenu yellow hover + badges PRO
   ========================================================= */

/* ---------------------------------------------------------
   1) SUBMENU HOVER EN AMARILLO WOWCO
--------------------------------------------------------- */
.page-sidebar > ul > li > ul.sub-menu > li > a:hover{
  background: linear-gradient(135deg, #FFD718 0%, #facc15 100%) !important;
  color: #0f172a !important;
  padding-left: 48px !important;
  font-weight: 600;
}

.page-sidebar > ul > li > ul.sub-menu > li > a:hover i,
.page-sidebar > ul > li > ul.sub-menu > li > a:hover .arrow:before{
  color: #0f172a !important;
}

.page-sidebar > ul > li > ul.sub-menu > li.active > a{
  background: linear-gradient(135deg, rgba(255,215,24,0.94) 0%, rgba(250,204,21,0.94) 100%) !important;
  color: #0f172a !important;
  font-weight: 700;
  box-shadow: inset 3px 0 0 rgba(15,23,42,0.18);
}

/* si hay subniveles */
.page-sidebar > ul > li > ul.sub-menu li > ul.sub-menu > li > a:hover{
  background: linear-gradient(135deg, #FFD718 0%, #facc15 100%) !important;
  color: #0f172a !important;
}

.page-sidebar > ul > li > ul.sub-menu li > ul.sub-menu > li.active > a{
  background: linear-gradient(135deg, rgba(255,215,24,0.94) 0%, rgba(250,204,21,0.94) 100%) !important;
  color: #0f172a !important;
  font-weight: 700;
}

/* ---------------------------------------------------------
   2) BADGES / ESTADOS MODERNOS
   Soporta .label, .badge y clases heredadas tipo success, etc.
--------------------------------------------------------- */

/* base general */
.label,
.badge,
span.label,
span.badge{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px !important;
  font-size: 11px !important;
  line-height: 1.2;
  font-weight: 700 !important;
  letter-spacing: .01em;
  text-transform: none;
  border: 1px solid transparent;
  box-shadow: none;
  text-shadow: none !important;
  vertical-align: middle;
}

/* tamaños un poco más cómodos en tablas */
.table .label,
.table .badge{
  padding: 7px 10px;
  font-size: 11px !important;
}

/* colores heredados bootstrap legacy modernizados */
.label-default,
.badge-default{
  background: #f3f4f6 !important;
  color: #374151 !important;
  border-color: #e5e7eb !important;
}

.label-important,
.badge-important,
.label-danger,
.badge-danger{
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border-color: #fecaca !important;
}

.label-warning,
.badge-warning{
  background: #fffbeb !important;
  color: #b45309 !important;
  border-color: #fde68a !important;
}

.label-success,
.badge-success{
  background: #ecfdf5 !important;
  color: #047857 !important;
  border-color: #a7f3d0 !important;
}

.label-info,
.badge-info{
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border-color: #bfdbfe !important;
}

.label-inverse,
.badge-inverse{
  background: #e5e7eb !important;
  color: #111827 !important;
  border-color: #d1d5db !important;
}

/* azul wowco / primario si existe alguna clase custom */
.label-primary,
.badge-primary{
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border-color: #93c5fd !important;
}

/* ---------------------------------------------------------
   3) ESTADOS SEMÁNTICOS ÚTILES (para futuras vistas)
   Podés aplicarlos aunque no existieran antes
--------------------------------------------------------- */
.estado-pendiente,
.status-pending{
  background: #fff7ed !important;
  color: #c2410c !important;
  border: 1px solid #fdba74 !important;
  border-radius: 999px !important;
  padding: 6px 10px;
  font-weight: 700;
}

.estado-pagado,
.status-paid{
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #86efac !important;
  border-radius: 999px !important;
  padding: 6px 10px;
  font-weight: 700;
}

.estado-enviado,
.status-shipped{
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #93c5fd !important;
  border-radius: 999px !important;
  padding: 6px 10px;
  font-weight: 700;
}

.estado-entregado,
.status-delivered{
  background: #ecfeff !important;
  color: #0f766e !important;
  border: 1px solid #99f6e4 !important;
  border-radius: 999px !important;
  padding: 6px 10px;
  font-weight: 700;
}

.estado-cancelado,
.status-cancelled{
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fca5a5 !important;
  border-radius: 999px !important;
  padding: 6px 10px;
  font-weight: 700;
}

.estado-borrador,
.status-draft{
  background: #f5f3ff !important;
  color: #6d28d9 !important;
  border: 1px solid #c4b5fd !important;
  border-radius: 999px !important;
  padding: 6px 10px;
  font-weight: 700;
}

.estado-revision,
.status-review{
  background: #fff7ed !important;
  color: #9a3412 !important;
  border: 1px solid #fdba74 !important;
  border-radius: 999px !important;
  padding: 6px 10px;
  font-weight: 700;
}

.estado-activo,
.status-active{
  background: #f0fdf4 !important;
  color: #15803d !important;
  border: 1px solid #86efac !important;
  border-radius: 999px !important;
  padding: 6px 10px;
  font-weight: 700;
}

.estado-inactivo,
.status-inactive{
  background: #f3f4f6 !important;
  color: #4b5563 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 999px !important;
  padding: 6px 10px;
  font-weight: 700;
}

/* ---------------------------------------------------------
   4) BADGES PEQUEÑOS EN LISTADOS / CONTADORES
--------------------------------------------------------- */
.badge-count,
.badge-mini,
.label-mini{
  min-width: 20px;
  text-align: center;
  padding: 4px 8px !important;
  font-size: 10px !important;
  border-radius: 999px !important;
}

/* ---------------------------------------------------------
   5) HOVER SUAVE EN BADGES CLICKABLES
--------------------------------------------------------- */
a .label,
a .badge,
.label[href],
.badge[href]{
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease;
}

a:hover .label,
a:hover .badge,
.label[href]:hover,
.badge[href]:hover{
  transform: translateY(-1px);
  filter: brightness(0.98);
}

/* ---------------------------------------------------------
   6) SI ALGÚN BADGE QUEDA SOBRE FONDO OSCURO
--------------------------------------------------------- */
.dark-surface .label-default,
.dark-surface .badge-default{
  background: rgba(255,255,255,0.08) !important;
  color: #e5e7eb !important;
  border-color: rgba(255,255,255,0.14) !important;
}