/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */


#header .navbar .navbar-nav>li>a {
    font-weight: bold;
    color: #ffffff;
    font-size: 13px;
    position: relative;
	text-decoration: none !important;
}

#header .navbar .navbar-nav>li>a:hover {
    color: #e3e8ea;
}


#header .navbar .navbar-nav>li {
    list-style: none;
	display: list-item;
    text-align: -webkit-match-parent;
}

@media (min-width: 768px){
#header .navbar .navbar-nav>li>a {
    padding-right: .2rem;
    padding-left: .2rem;
    margin-right: .2rem;
    margin-left: .2rem;
    padding-top: 10px;
    padding-bottom: 10px;
}
}

#header .navbar .search-headr {
    display: initial;
    line-height: initial;
}

#offcanvas-menu-home {
	padding: 9px 0;
}

@media (min-width: 768px){
	
.row.justify-content-center{
    display: flex;
    justify-content: center;
}

.navbar-right {
    margin-right: 0;
}

.top-header-nav-home .container, .the_breadcrumb_conatiner_page {
    padding-left: 15px;
    padding-right: 15px;
}

.navbar-brand {
    padding-left: 0;
    padding-top: 0;
	height: auto;
}


#header .navbar .navbar-nav>li>a:before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    height: 2px;
    width: 0%;
    background: #ffffff;
    transition: all 0.2s ease-in-out;
}

#header .navbar .navbar-nav>li>a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: #ffffff;
    transition: all 0.2s ease-in-out;
}
#header .navbar .navbar-nav>li>a:hover::after {
    width: 100%;
    transition: all 0.2s ease-in-out;
}

#header .navbar .navbar-nav>li>a:hover::before {
    width: 100%;
    transition: all 0.2s ease-in-out;
}

.navbar-right .navbar-nav .dropdown-menu {
    right: auto;
    left: 0;
}

.navbar-expand-md .navbar-nav .dropdown-menu {
    margin-top: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
}

}

.search-headr:after,.search-headr:before {
	display: none;
}


.dropdown-menu {
    border-radius: 4px !important;
}


.dropdown-menu li a {
    display: block;
    width: 100%;
    padding: .4rem 1.5rem;
    clear: both;
    font-weight: 500;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    font-size: 14px;
}

.dropdown-menu .nav-divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5 !important;
}

.padding-5-0{
	padding: 5px 0 !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: 700;
}

.header-heeadline h5 {
    font-size: 35px;
}

#header .navbar .accouting-h {
    margin-left: 0;
}


#header .domain-price-header a span {
    color: #fff;
}

#header #domain-search #transfer-btn{
    position: absolute;
    height: 49px;
    top: 2px;
    width: 49px;
    z-index: 2;
    background-color: #1ec8de;
    border-color: #1ec8de;
    border: 0;
    border-radius: 50%;
    right: 55px;
    outline: none;
    cursor: pointer;
}

#header #domain-search #transfer-btn:hover{
    background-color: #18acbf;
    border-color: #18acbf;
    color: #fff;
    text-decoration: none;
    -webkit-box-shadow: 0px 0px 22px 2px rgba(0,0,0,0.16);
    -moz-box-shadow: 0px 0px 22px 2px rgba(0,0,0,0.16);
    box-shadow: 0px 0px 22px 2px rgba(0,0,0,0.16);
}

#header #domain-search #transfer-btn img {
    width: 17px;
}

.login-drop-down-header form .form-group .form-control {
    box-shadow: none;
}

.d-none{
	display: none !important;
}

#header.whmcs-not-index-template {
    min-height: 180px !important;
    height: 180px !important;
    margin-bottom: 20px;
}


#header.whmcs-not-index-template {
    min-height: 180px !important;
    height: 180px !important;
    margin-bottom: 20px;
}


#header .navbar-nav .dropdown-menu {
    background: #fff;
}


#header .top-header-fixed .navbar .navbar-nav>li>a {
    color: #657075;
}


#header .top-header-fixed .navbar .accouting-h {
    margin-left: 15px;
}

#header .top-header-fixed .navbar .navbar-nav>li>a:after, #header .top-header-fixed .navbar .navbar-nav>li>a:before {
    background: #9798b9;
}


@media (min-width: 768px){
#header .top-header-fixed .navbar-brand {
    padding-top: 7px;
}
}

#header .header-animation .moon-bg-her {
    z-index: 0;
}

.first-items-home {
    background: #fff;
	margin-bottom: 0;
}

.first-items-home .item-icons p {
    line-height: 26px;
}

.announcement-single p {
    font-size: 15.5px;
    line-height: 28px;
    color: #a8aeb1;
}

.announcement-single .title-announcement-single {
    margin-bottom: 20px;
    font-weight: 700;
    font-family: 'Heebo', sans-serif;
    font-size: 22px;
    color: #405158;
}


.announcement-single .label-announcement-single {
    background: #fc5ca7;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 5px 15px;
    letter-spacing: 0.5px;
    vertical-align: middle;
    margin-left: 6px;
}


a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
}

a.settingbutton {
    top: 140px;
}


@media (max-width: 991px){
.account-place-header-nav {
    float: right !important;
}

.navbar-toggle {
	margin: 0 ;
    margin-right: 5px;
	
}
.navbar-brand {
    display: inline-block;
	padding: 0;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
	height: auto;
}

}


@media (max-width: 767px){
#header .navbar .navbar-nav>li>a {
    color: #ffffff !important;
}

#header .navbar .navbar-nav>li>a {
    padding: 1.5rem 1rem;
    border-bottom: 1px solid rgba(29, 31, 45, 0.62);
    display: block;
}

#header .navbar .search-headr {
    display: none !important;
}

#header .navbar .navbar-nav {
    padding-left: 30px;
    padding-right: 30px;
}



}

@media (max-width: 425px){

.announcement-single .label-announcement-single {
    margin-left: 0;
    margin-top: 7px;
    display: inline-block;
}
}

.navbar-toggle.is-open{
	margin-top: 7px;
}


div.header-lined h1 {
    margin-bottom: 10px;
    font-weight: 700;
    font-family: 'Heebo', sans-serif;
    font-size: 24px;
    color: #405158;
    border-bottom: 0;
}

div.header-lined small {
    white-space: nowrap;
    overflow: hidden;
    font-weight: 100;
    font-size: 14px;
    letter-spacing: 0.5px;
}

div.header-lined .breadcrumb {
    background: 0 0;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    list-style: none;
    background-color: #e9ecef;
    border-radius: .25rem;
    position: relative;
    margin-top: 0;
    padding-left: 15px;
    color: #868e96;
    font-size: 13px;
    font-weight: 400;
    font-family: 'Heebo', sans-serif;
}

.client-home-panels .panel>.panel-heading {
    background-color: #34afe6;
    border-bottom: 0;
    font-weight: 700;
    color: #fff;
    padding: 20px;
}

.client-home-panels .panel>.panel-heading .panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 14px;
    color: inherit;
    font-weight: 700;
    letter-spacing: .5px;
}

.client-home-panels .panel>.panel-heading .panel-title .btn {
    color: #fff;
    background: #2e9aca;
    padding: 5px 20px;
    margin-top: -5px;
}

.panel-body {
    padding: 10px 15px;
    font-family: montserrat,sans-serif;
    font-size: 13px;
    font-style: initial;
}

.client-home-panels .panel>.panel-heading .panel-title .btn:hover {
    color: #fff;
    background: #2b89b3;
}

.box-intr {
    position: relative;
    border-right: 1px solid #eaecef;
    padding: 25px 20px;
    background-color: #fafbfc;
}

.box-intr a {
    text-decoration: none!important;
}

.box-intr .icon {
    text-align: center;
}

.box-intr .icon i:before {
    margin-left: 0;
    font-size: 50px;
    color: #c2cbd0;
}

.box-intr .stat {
    position: absolute;
    top: 65px;
    left: -34px;
    right: 0;
    margin: auto;
    text-align: center;
    width: 35px;
    height: 35px;
    background: #f7ea07;
    color: #fff;
    font-size: 15px;
    line-height: 36px;
    border-radius: 37px;
    text-shadow: 2px 2px 6px rgba(0,0,0,.2);
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.box-intr:hover .stat {
    top: 55px;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}


.box-intr .title {
    font-family: montserrat,sans-serif;
    display: block;
    color: #3d4448;
    text-transform: initial;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    margin-top: 13px;
}

.last-child-no-boder .box-intr:last-child {
    border-right: 0;
}

.liginned-user-menu{
	margin-top: -5px;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 10px;
}

.liginned-user-menu .top-links{
    text-align: center;
    border-right: 1px solid #f2f4f5;
    border-bottom: 1px solid #f2f4f5;
    text-shadow: none!important;
    box-shadow: none!important;
    padding: 25px 0;
    font-size: 22px;
    color: #bbc7cc;
}

.liginned-user-menu .top-links:hover{
    color: #95a1a7;
}

.infonexsheader {
    position: absolute;
    top: -10px;
    right: -15px;
    background: #f7ea07;
    padding: 3px 9px;
    border-radius: 30px;
    color: #fff;
    line-height: 20px;
    font-weight: 500;
    font-size: 11px;
    cursor: pointer;
    text-shadow: 2px 2px 6px rgba(0,0,0,.2);
}

.popover-user-notifications .popover-inner {
    background: #3e3f52;
}

.popover-user-notifications .arrow {
    border-bottom-color: #313247!important;
    border-bottom-color: #1a1a25!important;
}

.popover-user-notifications {
    border-radius: 4px;
    padding: 0;
    border-color: #313247;
    min-width: 310px;
    font-family: open sans,sans-serif;
}

.popover-user-notifications .popover-title {
    padding: 8px 14px;
    margin: 0;
    font-size: 14px;
    background-color: #313247;
    border-bottom: 1px solid #313247;
    border-radius: 5px 5px 0 0;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
}
.popover-user-notifications .arrow:after {
    border-bottom-color: #313247!important;
}

.user-menu-dro{
    padding: 10px 15px 20px;
}

.user-menu-dro li a {
    font-weight: 100!important;
    color: #9aa3a9!important;
    font-size: 14px;
    display: block;
}

.user-menu-dro li a:hover {
    color: #666f75 !important;
	text-decoration: none;
}


@media (min-width: 769px) and (max-width: 990px){
#header .navbar .navbar-nav>li {
    float: left  !important;
}

}

@media (max-width: 768px){

.liginned-user-menu .top-links {
    width: 33%;
    float: left;
}

}

.header-top-menu ul li a:focus, .header-top-menu ul li a:not([href]):not([tabindex]):focus {
    text-decoration: none;
    color: #fff;
}

#header.whmcs-not-index-template {
    z-index: 5;
}

.header-top-menu ul li a, .header-top-menu ul li a:not([href]):not([tabindex]) {
    padding: 5px 3px;
    display: block;
}

body {
    background-color: #fff;
}


#oursevices li a {
    display: block;
	text-decoration: none !important;
}


#oursevices li{
    background: transparent;
}


.custom-radio,
.custom-checkbox {
  padding-left: 20px;
  position: relative;
  display: block;
}

.custom-radio input,
.custom-checkbox input {
  opacity: 0;
  position: absolute;
  z-index: 1;
  cursor: pointer;
  margin-left: -20px;
}

.custom-radio input:checked + label::before,
.custom-checkbox input:checked + label::before {
  border-color: #9575cd;
}

.custom-radio input:checked + label::after,
.custom-checkbox input:checked + label::after {
  content: '';
  display: inline-block;
  position: absolute;
  width: 13px;
  height: 13px;
  left: 2px;
  top: 4px;
  margin-left: -20px;
  border: 1px solid #9575cd;
  border-radius: 50%;
  background-color: #9575cd;
}

.custom-radio label,
.custom-checkbox label {
  display: inline-block;
  position: relative;
  padding-left: 5px;
}

.custom-radio label::before,
.custom-checkbox label::before {
  content: '';
  display: inline-block;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 0;
  top: 2px;
  margin-left: -20px;
  border: 1px solid #ccc;
  border-radius: 50%;
  background-color: #fff;
}

.custom-radio.disabled label,
.custom-checkbox.disabled label {
  color: #ccc;
}

.custom-radio.disabled label::before,
.custom-checkbox.disabled label::before {
  opacity: 0.54;
  border-color: #ccc;
}

.custom-checkbox input:checked + label::before {
  border-color: #9575cd;
  background-color: #9575cd;
}

.custom-checkbox input:checked + label::after {
  content: "\f00c";
  font-family: Font Awesome\ 5 Free;
  font-size: 10px;
  color: #fff;
  top: 0;
  left: 1px;
  border-color: transparent;
  background-color: transparent;
  text-align: center;
  line-height: 18px;
  padding-left: 2px;
}

.custom-checkbox label::before {
  border-radius: 2px;
}

.fl-lf-mr-tp-25{
    float: left;
    margin-top: 25px;
}

.btn-login-inscrespto{
    border: 0;
    background: 0;
    padding: 0;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
	outline: none;
	box-shadow: none;
}

.fl-left{
	float: left;
}

.custom-row{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

@media (min-width: 768px) {
.custom-row .col-md-7{
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}

.custom-row .col-md-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}
}

.custom-row .col-md-7{
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}

.custom-row .col-md-7{
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}

.form-domain-home-stwo .input-group:last-child {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}

.domain-homepage-anouncement-speacial-form input {
    height: 100%;
}
.popover-user-notifications .popover-inner {
    background: #fff;
}


/* =====================================================
   KOMBI.HOST — NORD THEME REDESIGN 2026
   Nord Color Palette:
   Polar Night: #2E3440 #3B4252 #434C5E #4C566A
   Snow Storm:  #D8DEE9 #E5E9F0 #ECEFF4
   Frost:       #8FBCBB #88C0D0 #81A1C1 #5E81AC
   Aurora:      #BF616A #D08770 #EBCB8B #A3BE8C #B48EAD
===================================================== */

:root {
    --nord0:  #2E3440;
    --nord1:  #3B4252;
    --nord2:  #434C5E;
    --nord3:  #4C566A;
    --nord4:  #D8DEE9;
    --nord5:  #E5E9F0;
    --nord6:  #ECEFF4;
    --nord7:  #8FBCBB;
    --nord8:  #88C0D0;
    --nord9:  #81A1C1;
    --nord10: #5E81AC;
    --nord11: #BF616A;
    --nord12: #D08770;
    --nord13: #EBCB8B;
    --nord14: #A3BE8C;
    --nord15: #B48EAD;
}

/* ---- GLOBAL BODY & TYPOGRAPHY ---- */
body {
    background-color: #f8f9fb !important;
    color: var(--nord0) !important;
    font-family: 'Nunito', 'Open Sans', sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--nord0) !important;
}

a {
    color: var(--nord10);
}

a:hover {
    color: var(--nord8);
}

/* ---- HEADER TOP BAR (contact info strip) ---- */
.header-top-menu {
    background-color: var(--nord0) !important;
    border-bottom: 1px solid var(--nord1) !important;
}

.header-top-menu ul li a,
.header-top-menu ul li a:not([href]):not([tabindex]) {
    color: var(--nord4) !important;
}

.header-top-menu ul li a:hover {
    color: var(--nord8) !important;
}

/* ---- MAIN NAVIGATION ---- */
.top-header-nav-home {
    background-color: var(--nord1) !important;
    border-bottom: 1px solid rgba(94, 129, 172, 0.15) !important;
    transition: box-shadow 0.3s ease !important;
}

/* Nav fixed al hacer scroll (clase añadida por nuhost-scripts.js >= 60px) */
.top-header-nav-home.top-header-fixed {
    background-color: rgba(46, 52, 64, 0.97) !important;
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(8px) !important;
    top: 0 !important;
    border-bottom: 1px solid rgba(94, 129, 172, 0.2) !important;
}

/* Sin padding extra en sticky */
.top-header-fixed .header-nav-algo-coodiv,
.top-header-fixed .header-nav-algo-coodiv-v2 {
    padding: 0 !important;
}

/* Logo: siempre dark, sin cambio al hacer sticky */
#header .navbar-brand img.white-bg-logo,
#header .top-header-fixed .navbar-brand img.white-bg-logo {
    display: none !important;
}
#header .navbar-brand img.black-bg-logo,
#header .top-header-fixed .navbar-brand img.black-bg-logo {
    display: block !important;
}

/* Botón portal centrado verticalmente */
.kh-nav-portal-item {
    display: flex !important;
    align-items: center !important;
}

#header .navbar,
.header-nav-algo-coodiv,
.header-nav-algo-coodiv-v2 {
    background-color: transparent !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Navbar compact height */
.top-header-nav-home .navbar {
    min-height: 64px !important;
}

/* Logo tamaño */
.navbar-brand img {
    height: 40px !important;
    width: auto !important;
}

/* Logo: SIEMPRE el negro — overrides main.css lines 467-482 que cambian logo al sticky */
#header .navbar-brand img.white-bg-logo,
#header .top-header-fixed .navbar-brand img.white-bg-logo {
    display: none !important;
}
#header .navbar-brand img.black-bg-logo,
#header .top-header-fixed .navbar-brand img.black-bg-logo {
    display: block !important;
}

/* Sticky nav: sin padding — overrides main.css line 489-492 (.top-header-fixed .header-nav-algo-coodiv { padding: 20px 0 }) */
#header .top-header-fixed .header-nav-algo-coodiv,
#header .top-header-fixed .header-nav-algo-coodiv-v2 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Centrar verticalmente TODA la barra de nav (navbar-nav es flex-row) */
#header .navbar {
    align-items: center !important;
    min-height: 60px !important;
}

/* li del botón Área de clientes: centrado como los demás li del nav */
#header .navbar-nav > li.kh-nav-portal-item,
#header .navbar-nav > li.nav-item {
    display: flex !important;
    align-items: center !important;
}

/* Nav font — compacto para 6 items + botón */
.kh-main-nav .nav-link {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0px !important;
    padding-right: .25rem !important;
    padding-left: .25rem !important;
}

/* Top bar compacta */
.header-top-menu {
    padding: 7px 0 !important;
}

.header-top-menu ul li a {
    font-size: 13px !important;
}

#header .navbar .navbar-nav > li > a {
    color: var(--nord5) !important;
}

#header .navbar .navbar-nav > li > a:hover {
    color: var(--nord8) !important;
}

#header .navbar .navbar-nav > li > a:before,
#header .navbar .navbar-nav > li > a:after {
    background: var(--nord8) !important;
}

/* Dropdown menus */
#header .navbar-nav .dropdown-menu {
    background: var(--nord1) !important;
    border: 1px solid var(--nord2) !important;
    border-top: 2px solid var(--nord10) !important;
    box-shadow: 0 8px 24px rgba(46,52,64,0.3) !important;
}

.dropdown-menu li a {
    color: var(--nord5) !important;
}

.dropdown-menu li a:hover {
    background-color: var(--nord2) !important;
    color: var(--nord8) !important;
}

/* ---- HEADER HERO AREA ---- */
#header {
    background: linear-gradient(135deg, var(--nord0) 0%, var(--nord1) 50%, var(--nord2) 100%) !important;
}

/* Sub-pages header (non-homepage) */
#header.whmcs-not-index-template {
    background: linear-gradient(135deg, var(--nord0) 0%, var(--nord1) 100%) !important;
    min-height: 160px !important;
    height: 160px !important;
}

/* ---- LOGIN DROPDOWN ---- */
.login-drop-down-header {
    background: var(--nord1) !important;
    border: 1px solid var(--nord2) !important;
}

.login-drop-down-header .form-control {
    background: var(--nord2) !important;
    border-color: var(--nord3) !important;
    color: var(--nord5) !important;
}

.login-drop-down-header .form-control::placeholder {
    color: var(--nord3) !important;
}

.login-drop-down-header .btn {
    background: var(--nord10) !important;
    border-color: var(--nord10) !important;
    color: #fff !important;
}

.login-drop-down-header .btn:hover {
    background: var(--nord9) !important;
    border-color: var(--nord9) !important;
}

.liginned-user-menu .top-links {
    color: var(--nord8) !important;
    border-color: var(--nord2) !important;
}

.user-menu-dro li a {
    color: var(--nord4) !important;
}

.user-menu-dro li a:hover {
    color: var(--nord8) !important;
}

/* ---- MOBILE MENU ---- */
@media (max-width: 767px) {
    #header .navbar .navbar-nav > li > a {
        color: var(--nord5) !important;
        border-bottom: 1px solid var(--nord2) !important;
    }
    #offcanvas-menu-home {
        background: var(--nord0) !important;
    }
}

/* ---- BUTTONS (Global) ---- */
.btn-primary,
.btn-default,
.primary-action a,
.tree-steps-hosting-plans-footer-btn {
    background: var(--nord10) !important;
    border-color: var(--nord10) !important;
    color: #fff !important;
    border-radius: 6px !important;
    transition: all 0.25s ease !important;
}

.btn-primary:hover,
.btn-default:hover,
.primary-action a:hover,
.tree-steps-hosting-plans-footer-btn:hover {
    background: var(--nord9) !important;
    border-color: var(--nord9) !important;
    box-shadow: 0 4px 15px rgba(94,129,172,0.4) !important;
}

/* ---- SERVICES SECTION (servicios.tpl) ---- */
.first-items-home {
    background: #ffffff !important;
    padding: 60px 0 !important;
}

.first-items-home .item-icons h5 {
    color: var(--nord0) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-top: 16px !important;
}

.first-items-home .item-icons p {
    color: var(--nord3) !important;
}

.first-items-home .badje-link-footer a {
    color: var(--nord10) !important;
    font-weight: 600 !important;
}

.first-items-home .badje-link-footer a:hover {
    color: var(--nord8) !important;
}

/* Service icon wrappers — override inline styles via CSS */
.item-icons:nth-child(1) > div[style*="background-color"],
.first-items-home .col-md-3:nth-child(1) > div {
    background-color: var(--nord10) !important;
    box-shadow: 0 4px 15px rgba(94,129,172,0.3) !important;
}

.item-icons:nth-child(2) > div[style*="background-color"],
.first-items-home .col-md-3:nth-child(2) > div {
    background-color: var(--nord11) !important;
    box-shadow: 0 4px 15px rgba(191,97,106,0.3) !important;
}

.item-icons:nth-child(3) > div[style*="background-color"],
.first-items-home .col-md-3:nth-child(3) > div {
    background-color: var(--nord14) !important;
    box-shadow: 0 4px 15px rgba(163,190,140,0.3) !important;
}

.item-icons:nth-child(4) > div[style*="background-color"],
.first-items-home .col-md-3:nth-child(4) > div {
    background-color: var(--nord8) !important;
    box-shadow: 0 4px 15px rgba(136,192,208,0.3) !important;
}

.item-icons:nth-child(5) > div[style*="background-color"],
.first-items-home .col-md-3:nth-child(5) > div {
    background-color: var(--nord15) !important;
    box-shadow: 0 4px 15px rgba(180,142,173,0.3) !important;
}

/* ---- HOSTING PRICING CARDS ---- */
.second-items-home {
    background: var(--nord5) !important;
    padding: 60px 0 !important;
}

.second-items-home .tittle-simple-one h5 {
    color: var(--nord0) !important;
}

.tree-steps-hosting-plans {
    background: #ffffff !important;
    border: 1px solid #e0e6ed !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 20px rgba(46,52,64,0.08) !important;
    transition: all 0.3s ease !important;
}

.tree-steps-hosting-plans:hover {
    box-shadow: 0 8px 40px rgba(46,52,64,0.15) !important;
    transform: translateY(-4px) !important;
}

.tree-steps-hosting-plans-header {
    background: linear-gradient(135deg, var(--nord0) 0%, var(--nord1) 100%) !important;
    color: var(--nord6) !important;
    padding: 30px 20px !important;
    text-align: center !important;
}

.tree-steps-hosting-plans.second .tree-steps-hosting-plans-header {
    background: linear-gradient(135deg, var(--nord10) 0%, var(--nord9) 100%) !important;
}

.tree-steps-hosting-plans-title,
.tree-steps-hosting-plans-header h5 {
    color: var(--nord6) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

.tree-steps-hosting-plans-price b {
    color: var(--nord6) !important;
    font-size: 22px !important;
}

.tree-steps-hosting-plans-price b small {
    color: var(--nord4) !important;
    font-size: 13px !important;
}

.tree-steps-hosting-plans-subtitle small {
    color: var(--nord4) !important;
}

.tree-steps-hosting-plans-icon {
    color: var(--nord8) !important;
    font-size: 28px !important;
    margin-bottom: 10px !important;
}

.tree-steps-hosting-plans.second .tree-steps-hosting-plans-icon {
    color: var(--nord13) !important;
}

/* Popular badge */
.tree-steps-hosting-plans-best {
    background: var(--nord10) !important;
    color: #fff !important;
    font-size: 11px !important;
    padding: 5px 15px !important;
    border-radius: 0 0 8px 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 700 !important;
}

/* Plan list items */
.tree-steps-hosting-plans-list li {
    color: var(--nord3) !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--nord5) !important;
    font-size: 14px !important;
}

.tree-steps-hosting-plans-list li.checked:before {
    color: var(--nord14) !important;
}

/* Plan footer / CTA button */
.tree-steps-hosting-plans-footer {
    padding: 20px !important;
    background: #fff !important;
}

.tree-steps-hosting-plans-footer-btn {
    background: var(--nord10) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 30px !important;
    color: #fff !important;
    font-weight: 700 !important;
    display: inline-block !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.tree-steps-hosting-plans-footer-btn:hover {
    background: var(--nord9) !important;
    box-shadow: 0 4px 15px rgba(94,129,172,0.4) !important;
    color: #fff !important;
}

/* Price toggle */
#monthly-yearly-chenge a.active {
    color: var(--nord10) !important;
    border-bottom: 2px solid var(--nord10) !important;
    font-weight: 700 !important;
}

#monthly-yearly-chenge a {
    color: var(--nord3) !important;
    padding-bottom: 4px !important;
    margin-right: 16px !important;
}

/* Domain free badge */
.advanced-annual-note {
    background: var(--nord14) !important;
    color: var(--nord0) !important;
    border: none !important;
    font-weight: 600 !important;
}

/* ---- HERO / DOMINIO SECTION ---- */
.header-heeadline h1 {
    color: var(--nord6) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}

.header-heeadline .lead {
    color: var(--nord5) !important;
}

/* Replace yellow badge with Nord amber */
.header-heeadline .badge.bg-warning {
    background-color: var(--nord13) !important;
    color: var(--nord0) !important;
}

/* CTA buttons in hero */
.header-heeadline .btn-danger {
    background: var(--nord11) !important;
    border-color: var(--nord11) !important;
    color: #fff !important;
}

.header-heeadline .btn-danger:hover {
    background: #a3414a !important;
    border-color: #a3414a !important;
}

.header-heeadline .btn-outline-light {
    border-color: var(--nord8) !important;
    color: var(--nord8) !important;
}

.header-heeadline .btn-outline-light:hover {
    background: var(--nord8) !important;
    color: var(--nord0) !important;
}

.header-heeadline a[href^="tel"] strong {
    color: var(--nord13) !important;
}

/* ---- DOMAIN SEARCH ---- */
#domain-search .input-group input {
    background: rgba(255,255,255,0.1) !important;
    border-color: var(--nord8) !important;
    color: var(--nord6) !important;
}

#domain-search .input-group input::placeholder {
    color: var(--nord4) !important;
}

#header #domain-search #transfer-btn,
#header #domain-search .btn-search-domain {
    background-color: var(--nord8) !important;
    border-color: var(--nord8) !important;
}

/* ---- FOOTER MAIN SECTION ---- */
/* ============================================================
   FOOTER PRINCIPAL — kombi2025 Nord Theme
   ============================================================ */

.footer-coodiv-thm {
    background: var(--nord0) !important;
    padding: 64px 0 48px !important;
    border-top: 3px solid var(--nord10) !important;
    position: relative !important;
}

/* Sutil gradiente superior para profundidad */
.footer-coodiv-thm::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0 !important;
    height: 100px !important;
    background: linear-gradient(to bottom, rgba(94,129,172,0.06), transparent) !important;
    pointer-events: none !important;
}

/* Títulos de columna — borde izquierdo como acento */
.footer-title-simple {
    color: var(--nord6) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 20px !important;
    padding-bottom: 0 !important;
    display: block !important;
    position: relative !important;
    padding-left: 12px !important;
    border-left: 3px solid var(--nord10) !important;
    line-height: 1.4 !important;
}

/* Columna brand: mayor padding-right */
.footer-col--brand {
    padding-right: 32px !important;
}

.footer-contact-a-hm {
    display: flex !important;
    align-items: flex-start !important;
    color: var(--nord4) !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    gap: 10px !important;
}

.footer-contact-a-hm:hover {
    color: var(--nord8) !important;
    text-decoration: none !important;
}

.footer-contact-a-hm i {
    color: var(--nord10) !important;
    width: 16px !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

/* Lista de links de navegación */
.main-menu-footer-mn {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.main-menu-footer-mn li {
    margin-bottom: 0 !important;
}

.main-menu-footer-mn li a {
    color: var(--nord4) !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    display: block !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid rgba(67,76,94,0.3) !important;
    position: relative !important;
    padding-right: 20px !important;
}

.main-menu-footer-mn li:last-child a {
    border-bottom: none !important;
}

.main-menu-footer-mn li a::after {
    content: '›' !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--nord3) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    transition: all 0.2s ease !important;
}

.main-menu-footer-mn li a:hover {
    color: var(--nord8) !important;
    padding-left: 4px !important;
}

.main-menu-footer-mn li a:hover::after {
    color: var(--nord10) !important;
    right: -2px !important;
}

/* Newsletter form */
.form-contain-home-subscribe {
    display: flex !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    border: 1px solid var(--nord2) !important;
    margin-bottom: 24px !important;
    transition: border-color 0.2s ease !important;
}

.form-contain-home-subscribe:focus-within {
    border-color: var(--nord10) !important;
}

.form-contain-home-subscribe input {
    background: var(--nord1) !important;
    border: none !important;
    color: var(--nord5) !important;
    padding: 12px 16px !important;
    flex: 1 !important;
    outline: none !important;
    font-size: 14px !important;
    min-width: 0 !important;
}

.form-contain-home-subscribe input::placeholder {
    color: var(--nord3) !important;
}

.form-contain-home-subscribe button {
    background: var(--nord10) !important;
    border: none !important;
    color: #fff !important;
    padding: 12px 20px !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    flex-shrink: 0 !important;
}

.form-contain-home-subscribe button:hover {
    background: var(--nord9) !important;
}

/* Social icons */
.footer-social-block {
    margin-top: 8px !important;
}

.footer-social-label {
    color: var(--nord4) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 12px !important;
}

.footer-social-links {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.footer-social-links a {
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s ease !important;
    font-size: 16px !important;
}

.footer-social-links .facebookcc {
    background: rgba(94,129,172,0.15) !important;
    color: var(--nord9) !important;
    border: 1px solid rgba(94,129,172,0.3) !important;
}

.footer-social-links .twittercc {
    background: rgba(136,192,208,0.12) !important;
    color: var(--nord8) !important;
    border: 1px solid rgba(136,192,208,0.3) !important;
}

.footer-social-links .instagramcc {
    background: rgba(180,142,173,0.15) !important;
    color: var(--nord15) !important;
    border: 1px solid rgba(180,142,173,0.3) !important;
}

.footer-social-links .whatsappcc {
    background: rgba(163,190,140,0.15) !important;
    color: var(--nord14) !important;
    border: 1px solid rgba(163,190,140,0.3) !important;
}

.footer-social-links a:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.25) !important;
}

.footer-social-links .facebookcc:hover {
    background: var(--nord10) !important;
    color: #fff !important;
    border-color: var(--nord10) !important;
}

.footer-social-links .twittercc:hover {
    background: var(--nord8) !important;
    color: var(--nord0) !important;
    border-color: var(--nord8) !important;
}

.footer-social-links .instagramcc:hover {
    background: var(--nord15) !important;
    color: #fff !important;
    border-color: var(--nord15) !important;
}

.footer-social-links .whatsappcc:hover {
    background: var(--nord14) !important;
    color: var(--nord0) !important;
    border-color: var(--nord14) !important;
}

/* Footer brand logo */
.footer-brand {
    display: block !important;
    margin-bottom: 16px !important;
}

/* ---- FOOTER BOTTOM BAR ---- */
section#footer {
    background-color: #1a1e27 !important;
    border-top: 1px solid var(--nord1) !important;
    padding: 20px 0 !important;
}

section#footer p {
    color: var(--nord4) !important;
    margin: 0 !important;
    font-size: 13px !important;
}

section#footer .back-to-top i {
    background-color: var(--nord10) !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

section#footer .back-to-top:hover i {
    background-color: var(--nord9) !important;
}

/* ---- CLIENT AREA PANELS ---- */
.client-home-panels .panel > .panel-heading {
    background-color: var(--nord10) !important;
}

.client-home-panels .panel > .panel-heading .panel-title .btn {
    background: var(--nord9) !important;
}

/* Breadcrumb */
.the_breadcrumb_conatiner_page {
    background: var(--nord5) !important;
    border-bottom: 1px solid var(--nord4) !important;
}

/* ---- ANNOUNCEMENTS ---- */
.announcement-single .title-announcement-single {
    color: var(--nord0) !important;
}

.announcement-single .label-announcement-single {
    background: var(--nord10) !important;
}

/* ---- NOTIFICATION BADGE ---- */
.infonexsheader {
    background: var(--nord13) !important;
    color: var(--nord0) !important;
}

/* ---- SUPPORT RING ---- */
.support-header-ring {
    border: 2px solid var(--nord8) !important;
    color: var(--nord8) !important;
}

.support-header-ring:hover {
    background: var(--nord8) !important;
    color: var(--nord0) !important;
}

/* ---- WHATSAPP FLOAT ---- */
.whatsapp-float {
    position: fixed !important;
    bottom: 28px !important;
    right: 24px !important;
    z-index: 9999 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background-color: #25D366 !important;
    color: #fff !important;
    text-decoration: none !important;
    padding: 12px 20px !important;
    border-radius: 50px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 18px rgba(37,211,102,0.45) !important;
    transition: all 0.25s ease !important;
}

.whatsapp-float i {
    font-size: 22px !important;
    line-height: 1 !important;
}

.whatsapp-float:hover {
    background-color: #1ebe5c !important;
    color: #fff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(37,211,102,0.5) !important;
    text-decoration: none !important;
}

/* En móvil: ocultar el texto, solo ícono */
@media (max-width: 576px) {
    .whatsapp-float {
        padding: 13px !important;
        border-radius: 50% !important;
        bottom: 20px !important;
        right: 16px !important;
    }
    .whatsapp-float__text {
        display: none !important;
    }
}

/* ---- MOBILE OFFCANVAS MENU ---- */
/* Solo aplica fondo oscuro en mobile (offcanvas real) */
@media (max-width: 767px) {
    .navbar-offcanvas {
        background: var(--nord0) !important;
    }
}
/* En desktop el nav es transparente, hereda el fondo del header */
@media (min-width: 992px) {
    .navbar-offcanvas {
        background: transparent !important;
    }
}

/* ---- PRELOADER SPINNER ---- */
.spinner .path {
    stroke: var(--nord8) !important;
}

/* ---- TIPOGRAFÍA RESPONSIVE (px fijos desktop → fluido en móvil) ---- */

/* === DESKTOP (>768px) === */
@media (min-width: 769px) {
    .kh-hero__title        { font-size: 48px !important; line-height: 1.1 !important; }
    .kh-hero__title-line2  { font-size: 36px !important; }
    .kh-hero__sub          { font-size: 18px !important; line-height: 1.65 !important; }
    .kh-hero__contact      { font-size: 15px !important; }

    .services-kombi__title,
    .pricing-kombi__title,
    .kh-why__title,
    .kh-social__title,
    .kh-cta__title         { font-size: 34px !important; line-height: 1.15 !important; }

    .services-kombi__subtitle,
    .pricing-kombi__subtitle,
    .kh-why__subtitle,
    .kh-cta__sub           { font-size: 17px !important; line-height: 1.65 !important; }

    .service-card__title   { font-size: 19px !important; }
    .pricing-card__plan-name   { font-size: 20px !important; }
    .pricing-card__amount      { font-size: 34px !important; line-height: 1.1 !important; }
    .kh-metric__number     { font-size: 36px !important; }
    .kh-cta__title { font-size: 36px !important; }
    .kh-stat strong { font-size: 24px !important; }
}

/* === TABLET (≤768px) === */
@media (max-width: 768px) {
    .kh-hero__title        { font-size: 30px !important; line-height: 1.15 !important; }
    .kh-hero__title-line2  { font-size: 24px !important; }
    .kh-hero__sub          { font-size: 16px !important; }

    .services-kombi__title,
    .pricing-kombi__title,
    .kh-why__title,
    .kh-social__title,
    .kh-cta__title         { font-size: 26px !important; }

    .pricing-card__amount  { font-size: 28px !important; }
    .kh-metric__number     { font-size: 28px !important; }
    .kh-cta__title { font-size: 26px !important; }
    .kh-stat strong { font-size: 20px !important; }
}

/* === MÓVIL (≤576px) === */
@media (max-width: 576px) {
    .kh-hero__title        { font-size: 26px !important; line-height: 1.2 !important; }
    .kh-hero__title-line2  { font-size: 20px !important; }
    .kh-hero__sub          { font-size: 15px !important; }

    .services-kombi__title,
    .pricing-kombi__title,
    .kh-why__title,
    .kh-social__title,
    .kh-cta__title         { font-size: 22px !important; }

    .pricing-card__amount  { font-size: 26px !important; }
    .kh-metric__number     { font-size: 24px !important; }
    .kh-cta__title { font-size: 22px !important; }
    .kh-cta__sub   { font-size: 15px !important; }
    .kh-stat strong { font-size: 18px !important; }

    /* Blobs CTA — evita overflow horizontal en móvil */
    .kh-cta-deco--1 { width: 180px !important; height: 180px !important; right: -30px !important; }
    .kh-cta-deco--2 { width: 130px !important; height: 130px !important; left: -20px !important; }
}

/* Tamaños que no cambian entre breakpoints */
.service-card__desc    { font-size: 15px !important; line-height: 1.65 !important; }
.service-card__features li { font-size: 14px !important; }
.pricing-card__period      { font-size: 13px !important; }
.pricing-card__tagline     { font-size: 13px !important; }
.pricing-card__features li { font-size: 15px !important; line-height: 1.6 !important; }
.kh-why-card__title  { font-size: 17px !important; }
.kh-why-card__text   { font-size: 15px !important; line-height: 1.65 !important; }
.kh-testimonial__quote { font-size: 16px !important; line-height: 1.7 !important; }
.kh-testimonial__name  { font-size: 15px !important; }
.kh-metric__label      { font-size: 12px !important; }
.kh-cta__note  { font-size: 14px !important; }
.kh-stat span   { font-size: 12px !important; }
.pricing-trust__item  { font-size: 14px !important; }
.pricing-whatsapp__link { font-size: 15px !important; }

/* ---- PLAN CONTACT BUTTON ---- */
.plan-contact-support-button a {
    color: var(--nord10) !important;
    font-weight: 700 !important;
}

.plan-contact-support-button a:hover {
    color: var(--nord8) !important;
}

/* ---- MAIN BODY AREA FORM ELEMENTS ---- */
.form-control:focus {
    border-color: var(--nord8) !important;
    box-shadow: 0 0 0 0.2rem rgba(136,192,208,0.25) !important;
}

/* ---- SECTION TITLES ---- */
.tittle-simple-one h5:before,
.help-center-title span {
    background: var(--nord10) !important;
    color: #fff !important;
}

/* Radio pricing section */
.second-items-home ~ section {
    background: #fff !important;
}

/* Smooth section transitions */
section {
    transition: background 0.3s ease !important;
}

/* ---- HERO: Ocultar partículas y ruido visual ---- */
#particles-bg,
#particles-bg canvas,
.moon-bg-her,
.courve-gb-hdr-top,
.hero-deco,
.bg-circles,
#star-field {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Hero background limpio Nord */
#header,
.top-bar-home,
section.home-hero,
.hero-section {
    background: linear-gradient(135deg, #2E3440 0%, #3B4252 60%, #434C5E 100%) !important;
}

/* =========================================================
   MEJORAS AGENTES — Feb 2026
   Frontend Dev + UI/UX + Mobile Audit
========================================================= */

/* ---- MOBILE/TABLET NAV: columna en offcanvas (< 992px = navbar-expand-lg) ---- */
@media (max-width: 991px) {
    .kh-main-nav {
        flex-direction: column !important;
        width: 100%;
        padding: 12px 0;
    }
    .kh-main-nav .nav-item { width: 100%; }
    .kh-main-nav .nav-link {
        padding: 14px 24px !important;
        border-bottom: 1px solid rgba(94, 129, 172, 0.15);
        font-size: 16px !important;
        min-height: 44px;
        display: flex !important;
        align-items: center;
    }
    .kh-nav-portal-item {
        padding: 12px 24px;
        margin-left: 0 !important;
        margin-top: 0 !important;
    }
    .kh-nav-btn {
        width: calc(100% - 48px);
        margin: 4px 24px 8px;
    }
}

/* ---- CTA PRIMARIO: amber para destacar del resto del UI azul ---- */
.kh-btn--primary {
    background: #EBCB8B !important;
    border: 2px solid #EBCB8B !important;
    color: #2E3440 !important;
    box-shadow: 0 4px 18px rgba(235, 203, 139, 0.35) !important;
}
.kh-btn--primary:hover {
    background: #f0d9a0 !important;
    border-color: #f0d9a0 !important;
    color: #2E3440 !important;
    box-shadow: 0 6px 22px rgba(235, 203, 139, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* ---- PRICING CARD POPULAR: CTA amber para anclar visualmente ---- */
.pricing-card__cta--popular {
    background: #EBCB8B !important;
    color: #2E3440 !important;
    box-shadow: 0 4px 16px rgba(235, 203, 139, 0.4) !important;
}
.pricing-card__cta--popular:hover {
    background: #f0d9a0 !important;
    color: #2E3440 !important;
    transform: translateY(-2px) !important;
}

/* ---- POPULAR CARD: sin scale en tablet/mobile ---- */
@media (max-width: 991px) {
    .pricing-card--popular { transform: none !important; }
    .pricing-card--popular:hover { transform: translateY(-5px) !important; }
}
/* z-index en hover para no quedar debajo de la popular */
.pricing-card:hover { z-index: 3 !important; }

/* ---- CONTRASTE WCAG: badges hero ---- */
.kh-badge--green { color: #c5dbb2 !important; }
.kh-badge--blue  { color: #a8dae6 !important; }
.kh-badge--amber { color: #f0d9a0 !important; }

/* ---- CONTRASTE: stats y textos secundarios del hero ---- */
.kh-stat span    { color: #A8C0D4 !important; }
.kh-hero__contact { color: #A8C0D4 !important; }

/* ---- CONTRASTE: eyebrows sobre fondos claros ---- */
.pricing-kombi__eyebrow,
.kh-why__eyebrow,
.kh-social__eyebrow,
.services-kombi__eyebrow {
    color: #4a6d94 !important;
}

/* ---- CONTRASTE: taglines de pricing cards ---- */
.pricing-card__tagline { color: #B0C4D8 !important; }

/* ---- PADDING UNIFICADO entre secciones ---- */
.services-kombi, .first-items-home { padding: 80px 0 64px !important; }
.pricing-kombi, .second-items-home { padding: 80px 0 64px !important; }

@media (max-width: 767px) {
    .services-kombi, .first-items-home,
    .pricing-kombi, .second-items-home,
    .kh-why-section, .kh-social-section, .kh-cta-section {
        padding-top: 56px !important;
        padding-bottom: 48px !important;
    }
}

/* ---- TRUST BARS mobile: lista vertical ---- */
@media (max-width: 767px) {
    .pricing-trust, .kh-trust-badges {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 16px 20px;
    }
    .pricing-trust__sep, .kh-trust-sep { display: none !important; }
    .pricing-trust__item, .kh-trust-badge {
        display: flex !important;
        align-items: center;
        gap: 8px;
        margin-bottom: 0 !important;
        width: 100%;
    }
}

/* ---- SERVICIOS grid: última fila centrada ---- */
@media (min-width: 768px) {
    .services-kombi .col-md-4:nth-child(4),
    .services-kombi .col-md-4:nth-child(5) {
        flex: 0 0 33.333%;
        max-width: 360px;
    }
}

/* ---- PREFERS REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   MOBILE SIMPLIFICATION — UX Agent + Mobile Agent (Feb 2026)
   Objetivo: reducir scroll total, experiencia más directa
   ============================================================ */

/* ---- Top bar oculto en móvil (email/teléfono redundante) ---- */
@media (max-width: 767px) {
    .header-top-menu { display: none !important; }
}

/* ---- Hero móvil: compacto, ocultar elementos secundarios ---- */
@media (max-width: 576px) {
    .kh-hero { padding: 28px 0 20px !important; }
    .kh-hero__badges { display: none !important; }
    .kh-hero__stats  { display: none !important; }
    .kh-hero__contact { display: none !important; }
    .kh-hero__ctas { margin-bottom: 0 !important; }
}

/* ---- Pricing cards móvil: centradas y compactas ---- */
@media (max-width: 576px) {
    .pricing-card {
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
    }
    .pricing-card__amount { font-size: 1.7rem !important; }
    .pricing-card__header { padding: 20px 20px 16px !important; }
    .pricing-card__body   { padding: 16px 20px !important; }
    .pricing-card__footer { padding: 16px 20px 18px !important; }
    .pricing-card__features li { font-size: 0.82rem; padding: 6px 0; }
    .pricing-kombi__title { font-size: 1.5rem !important; }
    .pricing-kombi__subtitle { font-size: 0.875rem !important; }
}

/* ---- Nav offcanvas: scroll interno en móvil ---- */
@media (max-width: 767px) {
    #offcanvas-menu-home {
        max-height: calc(100vh - 50px) !important;
        overflow-y: auto !important;
    }
}

/* ---- Footer: columnas bien espaciadas en móvil ---- */
@media (max-width: 767px) {
    #footer .col-md-4,
    #footer .col-md-3 { margin-bottom: 28px; }
    .footer-coodiv-thm { padding: 40px 0 28px !important; }
}

/* ---- CTA decoraciones: ocultar en móvil (reducen legibilidad) ---- */
@media (max-width: 576px) {
    .kh-cta-deco,
    .kh-cta-deco--1,
    .kh-cta-deco--2 { display: none !important; }
}

/* ============================================================
   FOOTER LAYOUT — estructura y responsive
   ============================================================ */

/* Logo del footer */
.footer-logo {
    height: 40px !important;
    width: auto !important;
    margin-bottom: 20px !important;
    display: block !important;
    opacity: 0.92 !important;
}

/* Descripción debajo del logo */
.footer-desc {
    color: var(--nord4) !important;
    font-size: 13.5px !important;
    line-height: 1.75 !important;
    margin-bottom: 22px !important;
    max-width: 280px !important;
}

/* Newsletter desc */
.footer-newsletter-desc {
    color: var(--nord4) !important;
    font-size: 13.5px !important;
    margin-bottom: 14px !important;
    line-height: 1.65 !important;
}

/* Fila principal del footer */
.footer-main-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
}

/* Columnas */
.footer-col {
    margin-bottom: 36px !important;
}

/* Separador visual entre col brand y el resto */
.footer-col--brand {
    padding-right: 40px !important;
}

/* Separador de contacto */
.footer-contact-list {
    border-top: 1px solid rgba(67,76,94,0.4) !important;
    padding-top: 16px !important;
    margin-top: 4px !important;
}

/* ---- FOOTER BOTTOM BAR (section#footer) ---- */
.footer-bottom-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.footer-bottom-copy {
    color: rgba(216,222,233,0.6) !important;
    font-size: 12.5px !important;
    margin: 0 !important;
}

.footer-bottom-copy i {
    margin: 0 3px !important;
}

.footer-bottom-links {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.footer-bottom-links a {
    color: rgba(216,222,233,0.55) !important;
    font-size: 12.5px !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.footer-bottom-links a:hover {
    color: var(--nord8) !important;
}

.footer-bottom-sep {
    color: var(--nord2) !important;
    font-size: 10px !important;
}

/* Botón volver arriba */
.footer-back-top {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    background: transparent !important;
    color: var(--nord4) !important;
    border-radius: 8px !important;
    border: 1px solid var(--nord2) !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    flex-shrink: 0 !important;
    font-size: 13px !important;
}

.footer-back-top:hover {
    background: var(--nord10) !important;
    color: #fff !important;
    border-color: var(--nord10) !important;
    transform: translateY(-2px) !important;
}

/* Mobile: stack footer bottom bar */
@media (max-width: 768px) {
    .footer-col--brand { padding-right: 0 !important; }
    .footer-desc { max-width: 100% !important; }
}

@media (max-width: 576px) {
    .footer-bottom-inner {
        flex-direction: column !important;
        text-align: center !important;
        gap: 10px !important;
    }
    .footer-bottom-links {
        justify-content: center !important;
    }
    .footer-back-top { align-self: center !important; }
}

/* Tablet: asegura salto de columnas */
@media (min-width: 577px) and (max-width: 991px) {
    .quiq-links-footer-mb-st {
        margin-top: 8px !important;
    }
    .stay-in-tch-footer-mb-st {
        margin-top: 8px !important;
    }
}

/* ============================================================
   UNIFIED NAV — Kombi ecosystem (menu.tpl)
   Two-state: public visitor / authenticated client
   Marzo 2026
   ============================================================ */

/* Dropdown toggle caret — usar el <b class="caret"> nativo */
.kh-nav-dropdown > .nav-link::after,
.kh-nav-btn--panel::after {
    display: none !important; /* ocultar caret de Bootstrap, usamos el propio */
}

/* ---- Dropdown menu base ---- */
.kh-dropdown-menu {
    background-color: var(--nord1) !important;
    border: 1px solid rgba(94, 129, 172, 0.25) !important;
    border-radius: 8px !important;
    padding: 10px 0 !important;
    min-width: 220px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
    margin-top: 12px !important;
}

.kh-dropdown-menu .dropdown-item {
    color: var(--nord4) !important;
    padding: 8px 20px !important;
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent !important;
    transition: background 0.15s ease, color 0.15s ease;
}

.kh-dropdown-menu .dropdown-item:hover,
.kh-dropdown-menu .dropdown-item.active {
    background-color: rgba(136, 192, 208, 0.1) !important;
    color: var(--nord8) !important;
}

.kh-dropdown-menu .dropdown-item i {
    width: 18px;
    text-align: center;
    color: var(--nord10);
    font-size: 0.82rem;
    flex-shrink: 0;
}

/* Separador visual dentro del dropdown */
.kh-dropdown-divider-item {
    height: 1px;
    margin: 6px 16px;
    background: rgba(94, 129, 172, 0.2);
    list-style: none;
    pointer-events: none;
}

/* ---- Botón "Mi Panel" (cliente logueado) ---- */
.kh-nav-btn--panel {
    background: rgba(163, 190, 140, 0.12) !important;
    border: 1.5px solid rgba(163, 190, 140, 0.35) !important;
    color: var(--nord14) !important;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 8px 16px !important;
    border-radius: 7px;
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    text-decoration: none !important;
    transition: all 0.22s ease;
}

.kh-nav-btn--panel:hover {
    background: var(--nord14) !important;
    border-color: var(--nord14) !important;
    color: var(--nord0) !important;
    box-shadow: 0 4px 14px rgba(163, 190, 140, 0.3);
}

/* Panel dropdown: alinear a la derecha para no desbordar */
.kh-nav-panel-dropdown .kh-dropdown-panel {
    right: 0;
    left: auto;
}

/* Light header (scrolled) — adaptar colores */
.header-on-light .kh-nav-btn--panel {
    border-color: rgba(163, 190, 140, 0.5) !important;
}

/* ---- Responsive: nav en móvil (offcanvas) ---- */
@media (max-width: 991px) {
    .kh-main-nav {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 8px 0 !important;
    }

    /* Dropdowns en móvil: inline, sin float */
    .kh-dropdown-menu {
        position: static !important;
        box-shadow: none !important;
        border: none !important;
        border-left: 2px solid rgba(94, 129, 172, 0.3) !important;
        background-color: rgba(59, 66, 82, 0.4) !important;
        margin-top: 4px !important;
        margin-left: 12px !important;
        border-radius: 0 4px 4px 0 !important;
        min-width: auto;
        padding: 6px 0 !important;
    }

    /* Sección separadora visual en offcanvas */
    .kh-nav-panel-dropdown {
        border-top: 1px solid rgba(94, 129, 172, 0.2);
        padding-top: 8px !important;
        margin-top: 4px !important;
    }

    .kh-nav-portal-item,
    .kh-nav-panel-dropdown {
        margin-left: 0 !important;
        margin-top: 8px !important;
    }

    .kh-nav-btn,
    .kh-nav-btn--panel {
        width: 100% !important;
        justify-content: center !important;
    }
}


/* ============================================================
   MI PANEL DROPDOWN — elementos adicionales (header integrado)
   ============================================================ */

/* Header de usuario dentro del dropdown */
.kh-dropdown-user-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px 10px;
    color: var(--nord6) !important;
    font-size: 0.82rem;
    font-weight: 600;
    pointer-events: none;
}
.kh-dropdown-avatar {
    font-size: 1.4rem;
    color: var(--nord10);
}

/* Active item dentro del dropdown */
.kh-drop-active > .dropdown-item {
    background-color: rgba(94, 129, 172, 0.15) !important;
    color: var(--nord8) !important;
}
.kh-drop-active > .dropdown-item i {
    color: var(--nord8) !important;
}

/* Badge dentro del dropdown */
.kh-drop-badge {
    background: var(--nord10);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    margin-left: auto;
    flex-shrink: 0;
}
.kh-drop-badge--red {
    background: var(--nord11) !important;
}

/* Cerrar sesión dentro del dropdown */
.kh-drop-logout {
    color: rgba(191, 97, 106, 0.85) !important;
}
.kh-drop-logout i {
    color: var(--nord11) !important;
}
.kh-drop-logout:hover {
    background: rgba(191, 97, 106, 0.1) !important;
    color: var(--nord11) !important;
}

/* ============================================================
   LIGHT CLIENT AREA — fondo claro para páginas del panel
   ============================================================ */

/* Fondo claro para el área de contenido principal */
#main-body {
    background: #f4f6fa !important;
    min-height: 60vh;
}

/* Ocultar sidebar WHMCS en la página principal del dashboard */
.clientareahome #main-body .sidebar,
.clientareahome .sidebar {
    display: none !important;
}

/* ============================================================
   KOMBI DASHBOARD — clientareahome.tpl
   Light SaaS style — Marzo 2026
   ============================================================ */

.kh-dashboard {
    padding: 28px 0 48px;
}

/* ---- Hero ---- */
.kh-dash-hero {
    margin-bottom: 28px;
}
.kh-dash-breadcrumb {
    font-size: 0.78rem;
    color: #8a96b0;
    margin: 0 0 8px;
}
.kh-dash-breadcrumb a {
    color: #4A9860;
    text-decoration: none;
}
.kh-dash-breadcrumb a:hover {
    text-decoration: underline;
}
.kh-dash-title {
    font-size: 2rem;
    font-weight: 800;
    color: #1a2233;
    margin: 0 0 6px;
    line-height: 1.2;
}
.kh-dash-name {
    color: #4A9860;
}
.kh-dash-subtitle {
    font-size: 0.9rem;
    color: #5a6476;
    margin: 0;
}

/* ---- KPI grid — 3 columnas (facturas solo en Odoo) ---- */
.kh-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.kh-kpi-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    background: #ffffff;
    border: 1px solid #e8ecf2;
    border-radius: 12px;
    text-decoration: none !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
    cursor: pointer;
}
.kh-kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.09);
    text-decoration: none !important;
}
.kh-kpi-card:hover .kh-kpi-icon {
    transform: scale(1.1);
}

/* Stat a la izquierda */
.kh-kpi-body { flex: 1; min-width: 0; }

.kh-kpi-stat {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    color: #1a2233;
    margin-bottom: 5px;
}
.kh-kpi-label {
    font-size: 0.8rem;
    color: #6b7a99;
    font-weight: 500;
}

/* Icono a la derecha */
.kh-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    transition: transform 0.18s ease;
}
.kh-kpi--services .kh-kpi-icon  { background: #EBF4FF; color: #5E81AC; }
.kh-kpi--invoices .kh-kpi-icon  { background: #FFF8E6; color: #C89B3C; }
.kh-kpi--tickets  .kh-kpi-icon  { background: #F0FFF4; color: #4A9860; }
.kh-kpi--domains  .kh-kpi-icon  { background: #F5F0FF; color: #8A6DB5; }

/* Alert: facturas pendientes */
.kh-kpi--alert {
    border-color: #f8c8cb !important;
    background: #fff5f5 !important;
}
.kh-kpi--alert .kh-kpi-icon { background: #FFE8EA; color: #BF616A; }
.kh-kpi--alert .kh-kpi-stat { color: #BF616A; }
.kh-kpi-badge {
    background: #BF616A;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

/* ---- Título de sección ---- */
.kh-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #8a96b0;
    margin: 0 0 16px;
}

/* ---- Acciones rápidas — large cards ---- */
.kh-quickactions {
    margin-bottom: 36px;
}
.kh-qa-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.kh-qa-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 12px 20px;
    background: #ffffff;
    border: 1px solid #e8ecf2;
    border-radius: 14px;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.kh-qa-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.09);
    border-color: #c8d4e8;
    text-decoration: none !important;
}
.kh-qa-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: transform 0.18s ease;
}
.kh-qa-card:hover .kh-qa-icon {
    transform: scale(1.08);
}
.kh-qa-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #2d3748;
    text-align: center;
    line-height: 1.35;
}
/* Card highlighted (ej: abrir ticket) */
.kh-qa-card--highlight {
    border-color: #c8e6c9 !important;
}
.kh-qa-card--highlight:hover {
    border-color: #4A9860 !important;
}

/* ---- Panels WHMCS ---- */
.kh-addon-block { margin-bottom: 20px; }

.kh-panels-grid { margin-top: 8px; }
.kh-panel-full { margin-bottom: 20px; }
.kh-panels-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.kh-panels-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.kh-panel {
    background: #ffffff;
    border: 1px solid #e8ecf2;
    border-radius: 12px;
    overflow: hidden;
}
.kh-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid #f0f2f7;
    background: #f8f9fc;
}
.kh-panel-icon {
    color: #5E81AC;
    font-size: 0.9rem;
    width: 18px;
    text-align: center;
}
.kh-panel-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #6b7a99;
}
.kh-panel-badge {
    background: #5E81AC;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}
.kh-panel-link {
    font-size: 0.75rem;
    color: #5E81AC !important;
    text-decoration: none !important;
    margin-left: auto;
    white-space: nowrap;
}
.kh-panel-link:hover { color: #2E3440 !important; }
.kh-panel-body {
    padding: 14px 18px;
    font-size: 0.85rem;
    color: #3a4560;
}
.kh-panel-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.kh-panel-list-item {
    border-bottom: 1px solid #f3f5f9;
}
.kh-panel-list-item:last-child { border-bottom: none; }
.kh-panel-list-item a,
.kh-panel-list-item span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    color: #3a4560 !important;
    font-size: 0.83rem;
    text-decoration: none !important;
    transition: background 0.15s ease;
}
.kh-panel-list-item a:hover {
    background: #f4f6fa;
    color: #5E81AC !important;
}
.kh-panel-list-item i {
    color: #88a0c0;
    width: 16px;
    text-align: center;
    font-size: 0.82rem;
    flex-shrink: 0;
}
.kh-panel-footer {
    padding: 10px 18px;
    border-top: 1px solid #f0f2f7;
    font-size: 0.78rem;
    color: #9aa3b5;
    background: #f8f9fc;
}

/* ---- WhatsApp float mejorado ---- */
.whatsapp-float {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #25D366;
    color: #fff !important;
    padding: 12px 20px 12px 16px;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: 0 4px 20px rgba(37,211,102,0.4);
    transition: all 0.22s ease;
}
.whatsapp-float i {
    font-size: 1.3rem;
}
.whatsapp-float__text {
    white-space: nowrap;
}
.whatsapp-float:hover {
    background: #1da851;
    box-shadow: 0 6px 24px rgba(37,211,102,0.5);
    transform: translateY(-2px);
    color: #fff !important;
}
.whatsapp-float__sub {
    display: block;
    font-size: 0.68rem;
    font-weight: 400;
    opacity: 0.85;
    line-height: 1;
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .kh-kpi-grid  { grid-template-columns: repeat(2, 1fr); }
    .kh-qa-grid   { grid-template-columns: repeat(3, 1fr); }
    .kh-panels-cols { grid-template-columns: 1fr; }
    .kh-dash-brand-logo { display: none; }
}
@media (max-width: 576px) {
    .kh-dash-title { font-size: 1.4rem; }
    .kh-kpi-grid  { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .kh-kpi-card  { padding: 14px; }
    .kh-kpi-stat  { font-size: 1.5rem; }
    .kh-qa-grid   { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .kh-qa-card   { padding: 18px 10px 14px; }
    .kh-qa-icon   { width: 46px; height: 46px; font-size: 1.2rem; }
    .whatsapp-float__text { display: none; }
    .whatsapp-float { padding: 14px; border-radius: 50%; }
}

/* ============================================================
   WHMCS PANEL OVERRIDES — Light theme (fix dark panels)
   Marzo 2026
   ============================================================ */

/* ---- Panels base: forzar fondo blanco ---- */
.panel,
.panel-default,
.panel.panel-default {
    background-color: #ffffff !important;
    border: 1px solid #e8ecf2 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}

/* Panel heading light */
.panel > .panel-heading,
.panel.panel-default > .panel-heading,
.client-home-panels .panel > .panel-heading {
    background-color: #f8f9fc !important;
    border-bottom: 1px solid #f0f2f7 !important;
    color: #6b7a99 !important;
    padding: 14px 18px !important;
    border-radius: 12px 12px 0 0 !important;
}

.panel > .panel-heading .panel-title,
.client-home-panels .panel > .panel-heading .panel-title {
    color: #6b7a99 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
}

/* Panel body */
.panel > .panel-body,
.panel-body {
    background-color: #ffffff !important;
    color: #3a4560 !important;
}

/* Panel footer */
.panel > .panel-footer {
    background-color: #f8f9fc !important;
    border-top: 1px solid #f0f2f7 !important;
    color: #9aa3b5 !important;
}

/* List group dentro del panel */
.panel .list-group-item,
.list-group-item {
    background-color: #ffffff !important;
    border-color: #f0f2f7 !important;
    color: #3a4560 !important;
}
.panel .list-group-item:hover {
    background-color: #f4f6fa !important;
    color: #5E81AC !important;
}
.panel .list-group-item.active,
.panel .list-group-item.active:hover {
    background-color: #EBF4FF !important;
    border-color: #c5d8f0 !important;
    color: #5E81AC !important;
}

/* ---- div-service-item (producto/servicio activo) ---- */
.div-service-item {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px 20px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f0f2f7 !important;
    border-radius: 0 !important;
    transition: background 0.15s ease !important;
    cursor: pointer;
}
.div-service-item:last-child {
    border-bottom: none !important;
    border-radius: 0 0 12px 12px !important;
}
.div-service-item:hover {
    background: #f8f9fc !important;
}

/* Status badge */
.div-service-status {
    flex-shrink: 0;
    min-width: 72px;
}
.div-service-status .label {
    display: inline-block !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    border: none !important;
}
/* label-placeholder (primera columna gris) */
.div-service-status .label-placeholder {
    display: none !important; /* ocultar el label fantasma */
}
/* Activo */
.div-service-status .label-success,
.label.status.status-active {
    background: #e6f7ee !important;
    color: #2d7a4f !important;
}
/* Suspendido */
.div-service-status .label-warning,
.label.status.status-suspended {
    background: #fff8e6 !important;
    color: #a06b10 !important;
}
/* Cancelado */
.div-service-status .label-danger,
.label.status.status-cancelled,
.label.status.status-terminated {
    background: #fff0f0 !important;
    color: #BF616A !important;
}
/* Pendiente */
.div-service-status .label-default,
.label.status.status-pending {
    background: #f0f2f7 !important;
    color: #6b7a99 !important;
}

/* Nombre del servicio */
.div-service-name {
    flex: 1 !important;
    min-width: 0;
}
.div-service-name .font-weight-bold {
    display: block;
    color: #1a2233 !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.div-service-name .text-domain {
    display: block;
    color: #6b7a99 !important;
    font-size: 0.78rem !important;
}

/* ---- Botones del servicio ---- */
.div-service-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0;
}

/* Resetear .btn-default global que pinta todos iguales */
.btn-default {
    background: #ffffff !important;
    border: 1.5px solid #c8d4e8 !important;
    color: #5E81AC !important;
    border-radius: 7px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    padding: 7px 14px !important;
    transition: all 0.18s ease !important;
    box-shadow: none !important;
}
.btn-default:hover,
.btn-default:focus {
    background: #EBF4FF !important;
    border-color: #5E81AC !important;
    color: #3d5a8a !important;
    box-shadow: 0 2px 8px rgba(94,129,172,0.15) !important;
}

/* Botón primario: cPanel, acciones principales */
.btn-primary {
    background: #5E81AC !important;
    border-color: #5E81AC !important;
    color: #fff !important;
    border-radius: 7px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    padding: 7px 16px !important;
    transition: all 0.18s ease !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background: #4a6d96 !important;
    border-color: #4a6d96 !important;
    box-shadow: 0 3px 10px rgba(94,129,172,0.35) !important;
}

/* Dropdown-toggle (botón con caret al lado del cPanel) — minimalista */
.div-service-buttons .btn-group .dropdown-toggle,
.btn-group-sm > .btn.dropdown-toggle {
    background: #f0f2f7 !important;
    border: 1.5px solid #e0e5ef !important;
    color: #8a96b0 !important;
    border-radius: 7px !important;
    padding: 7px 10px !important;
    box-shadow: none !important;
    min-width: auto !important;
}
.div-service-buttons .btn-group .dropdown-toggle:hover {
    background: #e0e6f0 !important;
    color: #5E81AC !important;
}

/* "Ver detalles" button */
.btn-view-details {
    background: #f4f6fa !important;
    border: 1.5px solid #e8ecf2 !important;
    color: #6b7a99 !important;
    border-radius: 7px !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    padding: 7px 14px !important;
}
.btn-view-details:hover {
    background: #ebeef5 !important;
    color: #5E81AC !important;
    border-color: #c8d4e8 !important;
}

/* Dropdown menus del panel */
.div-service-buttons .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid #e8ecf2 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    padding: 6px 0 !important;
}
.div-service-buttons .dropdown-menu .dropdown-item {
    color: #3a4560 !important;
    font-size: 0.83rem !important;
    padding: 9px 18px !important;
}
.div-service-buttons .dropdown-menu .dropdown-item:hover {
    background: #f4f6fa !important;
    color: #5E81AC !important;
}

/* ============================================================
   SERVICE ITEMS scoped — UX agent recommendations
   Dominio primero, producto técnico secundario
   ============================================================ */

/* Kill dark nested panels DENTRO de kh-panel-body */
.kh-panel-body .panel,
.kh-panel-body .panel-default,
.kh-panel-body .panel-body,
.kh-panel-body .list-group,
.kh-panel-body .list-group-item {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.kh-panel-body > .panel-heading {
    display: none !important; /* ocultar heading duplicado de WHMCS */
}

/* ---- Jerarquía nombre: dominio arriba, producto abajo ---- */
.kh-panel-body .div-service-name,
.div-service-name {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

/* Dominio = identificador principal (el usuario lo reconoce) */
.kh-panel-body .div-service-name .text-domain,
.div-service-name .text-domain {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #1a2233 !important;
    order: -1 !important;   /* sube al top */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Nombre técnico WHMCS = subtítulo pequeño gris */
.kh-panel-body .div-service-name .font-weight-bold,
.div-service-name .font-weight-bold {
    font-size: 0.72rem !important;
    font-weight: 400 !important;
    color: #9aa3b5 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ---- Badges scoped (más especificidad) ---- */
.kh-panel-body .label-success,
.kh-panel-body .label.status.status-active {
    background: rgba(163,190,140,0.15) !important;
    color: #4a8040 !important;
}
.kh-panel-body .label-danger,
.kh-panel-body .label.status.status-terminated,
.kh-panel-body .label.status.status-cancelled {
    background: rgba(191,97,106,0.12) !important;
    color: #a8484f !important;
}
.kh-panel-body .label-warning,
.kh-panel-body .label.status.status-suspended {
    background: rgba(235,203,139,0.18) !important;
    color: #9a7d2e !important;
}
.kh-panel-body .label-default,
.kh-panel-body .label.status.status-pending {
    background: #eef0f5 !important;
    color: #6b7a99 !important;
}

/* ---- Hover en service item con transición ---- */
.kh-panel-body .div-service-item {
    transition: background 0.15s ease !important;
}
.kh-panel-body .div-service-item:hover {
    background: #f4f6fa !important;
}

/* ---- Botones scoped (alta especificidad) ---- */
.kh-panel-body .div-service-buttons .btn-primary {
    background: #5E81AC !important;
    border-color: #5E81AC !important;
    color: #fff !important;
}
.kh-panel-body .div-service-buttons .btn-primary:hover {
    background: #4c6e96 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 10px rgba(94,129,172,0.3) !important;
}
.kh-panel-body .div-service-buttons .btn-view-details {
    background: transparent !important;
    border: 1.5px solid #d0d7e3 !important;
    color: #6b7a99 !important;
}
.kh-panel-body .div-service-buttons .btn-view-details:hover {
    background: #f4f6fa !important;
    border-color: #5E81AC !important;
    color: #5E81AC !important;
}
.kh-panel-body .div-service-buttons .dropdown-toggle {
    background: transparent !important;
    border: 1.5px solid #d0d7e3 !important;
    color: #8a96b0 !important;
    padding: 6px 9px !important;
}
.kh-panel-body .div-service-buttons .dropdown-toggle:hover {
    background: #f4f6fa !important;
    border-color: #5E81AC !important;
}

/* ---- Responsive mobile service items ---- */
@media (max-width: 576px) {
    .div-service-item {
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 14px !important;
    }
    .div-service-name {
        flex-basis: calc(100% - 90px) !important;
    }
    .div-service-buttons {
        flex-basis: 100% !important;
        flex-wrap: wrap !important;
    }
    .div-service-buttons .btn {
        min-height: 40px !important;
        font-size: 0.8rem !important;
    }
}

/* ============================================================
   FIX BOTONES SERVICIO — split button cPanel + Webmail
   ANÁLISIS DEL HTML REAL:
   - btn-group-primary: solo tiene caret + dropdown con cPanel Y Webmail → DUPLICADO, ocultar
   - btn-group-secondary: tiene "Iniciar sesión en cPanel" + caret inner → Webmail → CORRECTO
   Solución: ocultar primary, estilizar secondary como split button limpio
   ============================================================ */

/* 1. Ocultar btn-group-primary — es DUPLICADO del secondary */
.div-service-buttons .btn-group-primary {
    display: none !important;
}

/* 2. btn-group-secondary: el botón principal cPanel */
.div-service-buttons .btn-group-secondary > .btn.btn-custom-action,
.kh-panel-body .div-service-buttons .btn-group-secondary > .btn.btn-custom-action {
    background: #5E81AC !important;
    border: none !important;
    color: #fff !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    padding: 9px 18px !important;
    border-radius: 8px 0 0 8px !important;
    box-shadow: none !important;
    letter-spacing: 0.01em;
    transition: background 0.15s ease !important;
    line-height: 1.4 !important;
}
.div-service-buttons .btn-group-secondary > .btn.btn-custom-action:hover,
.kh-panel-body .div-service-buttons .btn-group-secondary > .btn.btn-custom-action:hover {
    background: #4c6e96 !important;
    box-shadow: 0 3px 12px rgba(94,129,172,0.35) !important;
}

/* 3. Caret dropdown-toggle dentro del secondary (contiene Webmail) */
.div-service-buttons .btn-group-secondary .btn-group > .btn.dropdown-toggle,
.kh-panel-body .div-service-buttons .btn-group-secondary .btn-group > .btn.dropdown-toggle {
    background: #4c6e96 !important;
    border: none !important;
    border-left: 1px solid rgba(255,255,255,0.25) !important;
    color: #fff !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 9px 12px !important;
    font-size: 0.85rem !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
    transition: background 0.15s ease !important;
}
.div-service-buttons .btn-group-secondary .btn-group > .btn.dropdown-toggle:hover,
.kh-panel-body .div-service-buttons .btn-group-secondary .btn-group > .btn.dropdown-toggle:hover {
    background: #3d5a80 !important;
}

/* 4. Dropdown del caret (Webmail y otras opciones) */
.div-service-buttons .btn-group-secondary .dropdown-menu,
.kh-panel-body .div-service-buttons .btn-group-secondary .dropdown-menu {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.13) !important;
    padding: 6px 0 !important;
    min-width: 200px;
    margin-top: 6px !important;
    z-index: 1060 !important;
}
.div-service-buttons .btn-group-secondary .dropdown-menu .dropdown-item,
.kh-panel-body .div-service-buttons .btn-group-secondary .dropdown-menu .dropdown-item {
    color: #2d3748 !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    padding: 11px 20px !important;
    background: transparent !important;
    cursor: pointer;
    display: block;
    transition: background 0.12s ease, color 0.12s ease !important;
}
.div-service-buttons .btn-group-secondary .dropdown-menu .dropdown-item:hover,
.kh-panel-body .div-service-buttons .btn-group-secondary .dropdown-menu .dropdown-item:hover {
    background: #f0f4ff !important;
    color: #5E81AC !important;
}

/* 5. Botón "Ver detalles" — separado del split button con gap */
.div-service-buttons .btn-view-details {
    margin-left: 10px !important;
}

/* ============================================================
   TAMAÑOS DE LETRA — dashboard (px directos, sin depender de rem root)
   ============================================================ */

/* Nombre del servicio (dominio) */
.div-service-name .text-domain {
    font-size: 16px !important;
}
/* Nombre técnico secundario */
.div-service-name .font-weight-bold {
    font-size: 13px !important;
    color: #8a96b0 !important;
}

/* KPI stats */
.kh-kpi-stat {
    font-size: 36px !important;
}
.kh-kpi-label {
    font-size: 15px !important;
}

/* Quick action label */
.kh-qa-label {
    font-size: 15px !important;
}

/* Section title */
.kh-section-title {
    font-size: 11px !important;
    margin-bottom: 18px !important;
}

/* Hero title */
.kh-dash-title {
    font-size: 32px !important;
}
.kh-dash-subtitle {
    font-size: 16px !important;
}

/* Panel titles */
.kh-panel-title {
    font-size: 12px !important;
}
.kh-panel-list-item a,
.kh-panel-list-item span {
    font-size: 15px !important;
}

/* Dropdown menu items */
.kh-dropdown-menu .dropdown-item {
    font-size: 15px !important;
}

/* ============================================================
   MI PANEL — indicador de alertas en el botón
   ============================================================ */

/* Contenedor del botón: position relative para el punto */
.kh-nav-btn--panel {
    position: relative !important;
}

/* Punto rojo en el botón Mi Panel cuando hay facturas o tickets */
.kh-nav-alert-indicator {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: #BF616A;
    border-radius: 50%;
    border: 2px solid var(--nord0, #2E3440);
    display: block;
    flex-shrink: 0;
    pointer-events: none;
}

/* Animación sutil del punto */
@keyframes kh-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.7; transform: scale(1.2); }
}
.kh-nav-alert-indicator {
    animation: kh-pulse 2.5s ease-in-out infinite;
}

/* ============================================================
   MENÚ CLIENTE — estilos del navbar logueado
   ============================================================ */

.kh-main-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.kh-main-nav .nav-item {
    display: flex;
    align-items: center;
}

.kh-main-nav .nav-link {
    min-height: 42px;
    padding: 10px 14px !important;
    border-radius: 10px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    color: rgba(236, 239, 244, 0.9) !important;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.kh-main-nav .nav-link::before,
.kh-main-nav .nav-link::after {
    display: none !important;
}

/* Saludo con nombre del cliente — separado visualmente del resto */
.kh-nav-greeting-item {
    display: flex !important;
    align-items: center !important;
    margin-left: 10px !important;
}
.kh-nav-greeting {
    min-height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid rgba(136,192,208,0.18);
    background: rgba(46,52,64,0.18);
    color: var(--nord8, #88C0D0) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
    cursor: default;
    line-height: 1;
}
.kh-nav-greeting i {
    font-size: 16px !important;
    opacity: 0.75;
    line-height: 1;
}

/* Link activo — underline indicator */
.kh-main-nav .nav-item.kh-active > .nav-link {
    color: var(--nord8) !important;
    position: relative;
    background: rgba(136,192,208,0.12);
}
.kh-main-nav .nav-item.kh-active > .nav-link::after {
    display: none !important;
}

/* Hover en links del menú cliente */
.kh-main-nav .nav-item:not(.kh-active) > .nav-link:hover {
    color: var(--nord6) !important;
    background: rgba(255,255,255,0.05);
    transform: translateY(-1px);
}

/* Badges de conteo */
.kh-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    background: rgba(136,192,208,0.18);
    color: var(--nord8, #88C0D0);
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0;
}
.kh-nav-badge--red {
    background: #BF616A !important;
    color: #fff !important;
}

/* Botón Salir — sutil, sin borde llamativo. Solo se activa al hover */
.kh-nav-btn--logout {
    min-height: 42px;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(216,222,233,0.18) !important;
    color: rgba(236,239,244,0.88) !important;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 8px 16px !important;
    border-radius: 10px;
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    text-decoration: none !important;
    transition: all 0.2s ease;
    margin-left: 2px !important;
}
.kh-nav-btn--logout:hover {
    background: rgba(191,97,106,0.16) !important;
    border-color: rgba(191,97,106,0.38) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}

/* Botón Ingresar (no logueado) */
.kh-nav-btn--portal {
    background: var(--nord10, #5E81AC) !important;
    border: 1.5px solid var(--nord10, #5E81AC) !important;
    color: #fff !important;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 8px 18px !important;
    border-radius: 8px;
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    text-decoration: none !important;
    transition: all 0.22s ease;
    box-shadow: 0 2px 10px rgba(94,129,172,0.3);
}
.kh-nav-btn--portal:hover {
    background: var(--nord9, #81A1C1) !important;
    border-color: var(--nord9, #81A1C1) !important;
    color: #fff !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}

/* Responsive: badges y greeting en móvil */
@media (max-width: 991px) {
    .kh-main-nav {
        align-items: stretch !important;
        gap: 6px;
    }
    .kh-main-nav .nav-item {
        width: 100%;
    }
    .kh-nav-greeting-item {
        border-bottom: 1px solid rgba(136,192,208,0.15) !important;
        padding-right: 0 !important;
        padding-bottom: 12px !important;
        margin-bottom: 4px !important;
        width: 100%;
        margin-left: 0 !important;
    }
    .kh-nav-greeting { font-size: 13px !important; }
    .kh-nav-btn--logout,
    .kh-nav-btn--portal { width: 100%; justify-content: center; }
    .kh-main-nav .nav-item.kh-active > .nav-link::after { display: none !important; }
}

/* ============================================================
   DATATABLES & PÁGINAS INTERNAS — estilo SaaS, sin WHMCS look
   Afecta: Mis Servicios, Facturas, Tickets, Dominios, etc.
   ============================================================ */

/* ---- Fondo general de main-body ---- */
#main-body,
section#main-body {
    background: #f4f6fa !important;
}

/* ---- Breadcrumb ---- */
.breadcrumb {
    background: transparent !important;
    padding: 6px 0 !important;
    margin-bottom: 0 !important;
    font-size: 0.78rem !important;
    color: #8a96b0 !important;
}
.breadcrumb > li + li::before {
    color: #c5cde0 !important;
}
.breadcrumb > li a {
    color: #5E81AC !important;
}
.breadcrumb > li.active {
    color: #3a4560 !important;
    font-weight: 600;
}

/* ---- Page title (h1 displayTitle) ---- */
.the_breadcrumb_conatiner_page h1,
.page-header h1 {
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    color: #1a2233 !important;
    margin: 8px 0 20px !important;
    letter-spacing: -0.3px;
}

/* ---- Tabla contenedor ---- */
.table-container {
    background: #fff !important;
    border: 1px solid #e8ecf2 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
    overflow: hidden;
}

/* ============================================================
   DATATABLES — DISEÑO NORD (mockup MyServices)
   ============================================================ */

/* ---- Contenedor tabla ---- */
.table-container {
    background: #fff !important;
    border: 1px solid #D8DEE9 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 6px rgba(46,52,64,0.06) !important;
    overflow: hidden;
}

/* ---- Barra toolbar (.listtable) ---- */
.listtable {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    background: #fff !important;
    border-bottom: 1px solid #ECEFF4 !important;
    gap: 12px;
    flex-wrap: wrap;
}

/* Info: "Mostrando X-X de X entradas" */
.listtable .dataTables_info {
    font-size: 0.9rem !important;
    color: #4C566A !important;
    font-weight: 500;
    padding: 0 !important;
    white-space: nowrap;
}
.listtable .dataTables_info strong {
    color: #2E3440 !important;
}

/* Campo de búsqueda — fondo Nord ECEFF4 con lupa */
.listtable .dataTables_filter {
    margin: 0 !important;
}
.listtable .dataTables_filter label {
    font-size: 0 !important;
    margin: 0 !important;
    display: flex !important;
}
.listtable .dataTables_filter input {
    font-size: 0.9rem !important;
    background: #ECEFF4 !important;
    border: 1px solid #D8DEE9 !important;
    border-radius: 8px !important;
    padding: 8px 14px 8px 36px !important;
    color: #2E3440 !important;
    width: 240px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%234C566A' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    margin: 0 !important;
}
.listtable .dataTables_filter input:focus {
    background: #fff !important;
    border-color: #5E81AC !important;
    box-shadow: 0 0 0 3px rgba(94,129,172,0.18) !important;
    outline: none !important;
}
.listtable .dataTables_filter input::placeholder {
    color: #7B88A0 !important;
}

/* ---- Tabla base ---- */
table.table-list,
table.dataTable {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse !important;
}

/* Cabecera */
table.table-list thead tr,
table.dataTable thead tr {
    background: #F8F9FB !important;
    border-bottom: 1px solid #D8DEE9 !important;
}
table.table-list thead th,
table.dataTable thead th {
    background: #F8F9FB !important;
    color: #4C566A !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.09em !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid #D8DEE9 !important;
    border-top: none !important;
    white-space: nowrap;
}

/* Sort icons */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    background: #F8F9FB !important;
}
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
    opacity: 0.5;
    color: #5E81AC;
}

/* Filas */
table.table-list tbody tr,
table.dataTable tbody tr {
    background: #fff !important;
    cursor: pointer;
    transition: background 0.1s ease;
    border-bottom: 1px solid #ECEFF4 !important;
}
table.table-list tbody tr:last-child,
table.dataTable tbody tr:last-child {
    border-bottom: none !important;
}
table.table-list tbody tr:hover,
table.dataTable tbody tr:hover {
    background: #F8F9FB !important;
}

/* Celdas */
table.table-list td,
table.dataTable td {
    padding: 16px 20px !important;
    font-size: 0.9375rem !important;
    color: #2E3440 !important;
    border-top: none !important;
    vertical-align: middle !important;
    line-height: 1.5 !important;
}
table.table-list td strong {
    color: #2E3440 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    display: block;
    margin-bottom: 2px;
}
table.table-list td a {
    color: #5E81AC !important;
    font-size: 0.875rem !important;
    text-decoration: none;
}
table.table-list td a:hover {
    color: #81A1C1 !important;
    text-decoration: underline !important;
}

/* ---- Status badges — pill Nord style ---- */
.label.status {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    line-height: 1 !important;
}
/* Ocultar el label-placeholder (siempre oculto) */
.label.label-placeholder { display: none !important; }

.label.status-active,
.label.label-success {
    background: rgba(163,190,140,0.18) !important;
    color: #4C5E3A !important;
    border: 1px solid rgba(163,190,140,0.55) !important;
}
.label.status-pending,
.label.label-warning {
    background: rgba(235,203,139,0.2) !important;
    color: #6B5520 !important;
    border: 1px solid rgba(235,203,139,0.55) !important;
}
.label.status-suspended,
.label.label-danger {
    background: rgba(191,97,106,0.12) !important;
    color: #8B3A42 !important;
    border: 1px solid rgba(191,97,106,0.35) !important;
}
.label.status-terminated,
.label.status-cancelled,
.label.status-canceled {
    background: #ECEFF4 !important;
    color: #7B88A0 !important;
    border: 1px solid #D8DEE9 !important;
}

/* ---- Footer tabla: length + paginación ---- */
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_length {
    padding: 14px 20px !important;
    background: #F8F9FB !important;
    border-top: 1px solid #ECEFF4 !important;
}
.dataTables_wrapper .dataTables_paginate {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}
.dataTables_wrapper .dataTables_length {
    float: left;
    color: #4C566A !important;
    font-size: 0.9rem !important;
}
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #D8DEE9 !important;
    border-radius: 7px !important;
    padding: 5px 10px !important;
    font-size: 0.875rem !important;
    color: #2E3440 !important;
    background: #fff !important;
    box-shadow: none !important;
    cursor: pointer;
}

/* Botones de paginación */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px;
    height: 34px;
    padding: 0 10px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    border-radius: 7px !important;
    border: 1px solid #D8DEE9 !important;
    background: #fff !important;
    color: #4C566A !important;
    margin: 0 2px !important;
    transition: all 0.15s ease !important;
    cursor: pointer;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #ECEFF4 !important;
    border-color: #BCC5D4 !important;
    color: #2E3440 !important;
    box-shadow: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #5E81AC !important;
    border-color: #5E81AC !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(94,129,172,0.3) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    opacity: 0.38 !important;
    cursor: not-allowed !important;
    background: #fff !important;
    pointer-events: none;
}

/* ---- SIDEBAR — Filtros y Acciones ---- */
.sidebar .panel {
    background: #fff !important;
    border: 1px solid #D8DEE9 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 4px rgba(46,52,64,0.05) !important;
    overflow: hidden;
    margin-bottom: 16px !important;
}
.sidebar .panel > .panel-heading {
    background: #F8F9FB !important;
    border-bottom: 1px solid #ECEFF4 !important;
    padding: 14px 18px !important;
    border-radius: 14px 14px 0 0 !important;
}
.sidebar .panel > .panel-heading .panel-title {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #4C566A !important;
}

/* Items del filtro VER */
.sidebar .view-filter-btns {
    padding: 8px !important;
}
.sidebar .view-filter-btns .list-group {
    border-radius: 0 !important;
    box-shadow: none !important;
}
.sidebar .view-filter-btns .list-group-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 12px !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    color: #4C566A !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    transition: all 0.13s ease !important;
    margin-bottom: 2px;
}
.sidebar .view-filter-btns .list-group-item:hover {
    background: #ECEFF4 !important;
    color: #2E3440 !important;
}
.sidebar .view-filter-btns .list-group-item.active {
    background: #ECEFF4 !important;
    color: #2E3440 !important;
    font-weight: 600 !important;
    border: none !important;
}

/* Badge conteo — cuadrado redondeado (como en el mockup) */
.sidebar .view-filter-btns .list-group-item .badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 24px !important;
    height: 24px !important;
    padding: 0 6px !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    background: #ECEFF4 !important;
    color: #4C566A !important;
    margin-left: auto !important;
    order: 2;
}
.sidebar .view-filter-btns .list-group-item.active .badge {
    background: #5E81AC !important;
    color: #fff !important;
    text-align: center;
}
.sidebar .view-filter-btns .list-group-item.active .badge {
    background: rgba(94,129,172,0.15) !important;
    color: #5E81AC !important;
}
/* Ocultar los íconos de radio button (fa-circle) del sidebar — redundantes */
.sidebar .view-filter-btns .list-group-item i.far {
    display: none !important;
}

/* ============================================================
   TIPOGRAFÍA — ÁREA DE CLIENTE
   Estándar UX profesional: body 16px, UI labels 15px, mínimo 14px
   IMPORTANTE: html font-size = 16px para que 1rem = 16px siempre
   ============================================================ */

/* ROOT: forzar 1rem = 16px (el tema base usa 13px, lo que hace rem muy pequeños) */
html {
    font-size: 16px !important;
}

/* BASE: todo el área de cliente */
#main-body {
    font-size: 16px !important;
    line-height: 1.65 !important;
}
#main-body p,
#main-body li,
#main-body span:not(.label):not(.badge):not(.caret),
#main-body .panel-body,
#main-body td,
#main-body th:not(.sorting):not(.sorting_asc):not(.sorting_desc),
#main-body .form-control,
#main-body label,
#main-body select,
#main-body input[type="text"],
#main-body input[type="email"],
#main-body input[type="password"] {
    font-size: 15px !important;
}

/* Dashboard hero */
.kh-dash-title           { font-size: 34px !important; font-weight: 800 !important; }
.kh-dash-subtitle        { font-size: 17px !important; }
.kh-dash-breadcrumb      { font-size: 14px !important; }

/* KPI cards */
.kh-kpi-stat             { font-size: 40px !important; }
.kh-kpi-label            { font-size: 15px !important; }

/* Quick actions */
.kh-qa-label             { font-size: 15px !important; }

/* Section titles (uppercase caps — intencionalmente pequeños) */
.kh-section-title        { font-size: 11px !important; }

/* Panels */
.kh-panel-title          { font-size: 12px !important; }
.kh-panel-list-item a,
.kh-panel-list-item span { font-size: 15px !important; }
.kh-panel-link           { font-size: 14px !important; }

/* Botones */
.btn,
.btn-default,
.btn-primary,
.btn-info,
.btn-success,
.btn-warning,
.btn-danger              { font-size: 15px !important; }
.btn-view-details        { font-size: 14px !important; }

/* Nav dropdown items */
.kh-dropdown-menu .dropdown-item { font-size: 15px !important; }
.kh-dropdown-user-header span    { font-size: 15px !important; }

/* Service item */
.div-service-name .text-domain       { font-size: 17px !important; font-weight: 700 !important; }
.div-service-name .font-weight-bold  { font-size: 14px !important; color: #9aa3b5 !important; }

/* DataTables */
.listtable .dataTables_info         { font-size: 14px !important; }
.listtable .dataTables_filter input { font-size: 14px !important; }
table.table-list thead th,
table.dataTable thead th            { font-size: 11px !important; } /* caps label, ok pequeño */
table.table-list td,
table.dataTable td                  { font-size: 15px !important; }
.dataTables_wrapper .dataTables_length        { font-size: 14px !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button { font-size: 14px !important; }

/* Sidebar filtros */
.sidebar .panel .panel-heading .panel-title  { font-size: 12px !important; }
.sidebar .view-filter-btns .list-group-item  { font-size: 15px !important; }
.sidebar .view-filter-btns .list-group-item .badge { font-size: 13px !important; }

/* Breadcrumb páginas internas */
.breadcrumb { font-size: 14px !important; }
.the_breadcrumb_conatiner_page h1,
.page-header h1 { font-size: 28px !important; }


/* =====================================================
   CTA FINAL SECTION — kh-cta-*
   Movido desde cta_final.tpl (refactor/cta-inline-css)
   ===================================================== */
.kh-cta-section {
    padding: 80px 0;
    background: #2E3440;
    overflow: hidden;
}

.kh-cta-inner {
    position: relative;
    border-radius: 20px;
    background: linear-gradient(135deg, #3B4252 0%, #2E3440 60%, #303948 100%);
    border: 1px solid rgba(136, 192, 208, 0.18);
    padding: 64px 32px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
}

/* Decorative blobs */
.kh-cta-deco {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.kh-cta-deco--1 {
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(94,129,172,0.18) 0%, transparent 70%);
    top: -80px;
    right: -60px;
}

.kh-cta-deco--2 {
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(136,192,208,0.12) 0%, transparent 70%);
    bottom: -60px;
    left: -40px;
}

/* Content */
.kh-cta-content {
    position: relative;
    z-index: 2;
    max-width: 680px;
    margin: 0 auto;
}

.kh-cta__eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: #88C0D0;
    background: rgba(136, 192, 208, 0.1);
    border: 1px solid rgba(136, 192, 208, 0.25);
    padding: 4px 14px;
    border-radius: 50px;
    margin-bottom: 18px;
}

.kh-cta__title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #ECEFF4 !important;
    line-height: 1.2;
    margin-bottom: 16px;
    text-transform: none !important;
}

.kh-cta__sub {
    font-size: 1rem;
    color: #81A1C1;
    line-height: 1.7;
    margin-bottom: 36px;
    text-transform: none !important;
}

/* Action buttons */
.kh-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-bottom: 20px;
}

.kh-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 700;
    padding: 15px 30px;
    border-radius: 10px;
    text-decoration: none !important;
    transition: all 0.24s ease;
    text-transform: none !important;
    cursor: pointer;
    white-space: nowrap;
}

.kh-cta-btn--whatsapp {
    background: #25D366;
    color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3);
}

.kh-cta-btn--whatsapp:hover {
    background: #1ebe5a;
    box-shadow: 0 6px 28px rgba(37, 211, 102, 0.45);
    transform: translateY(-2px);
    color: #ffffff !important;
}

.kh-cta-btn--outline {
    background: transparent;
    border: 2px solid rgba(136, 192, 208, 0.45);
    color: #88C0D0 !important;
}

.kh-cta-btn--outline:hover {
    background: rgba(136, 192, 208, 0.12);
    border-color: #88C0D0;
    color: #ECEFF4 !important;
    transform: translateY(-2px);
}

/* Note */
.kh-cta__note {
    font-size: 0.82rem;
    color: #D8DEE9;
    margin: 0;
    text-transform: none !important;
}

.kh-cta__note i {
    color: #5E81AC;
    margin-right: 5px;
}

/* Responsive */
@media (max-width: 768px) {
    .kh-cta-section { padding: 56px 0; }
    .kh-cta-inner { padding: 48px 20px; }
    .kh-cta__title { font-size: 1.7rem; }
    .kh-cta__actions { flex-direction: column; align-items: center; }
    .kh-cta-btn { width: 100%; max-width: 300px; justify-content: center; }
}


/* =====================================================
   FULL-WIDTH PAGES — sin recuadro container WHMCS
   Aplica cuando skipMainBodyContainer = true
   ===================================================== */
#main-body .container-fluid.without-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

#main-body .container-fluid.without-padding > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#main-body .container-fluid.without-padding .col-xs-12.main-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#main-body .container-fluid.without-padding .page-header {
    display: none !important;
}


/* =====================================================
   FULL-WIDTH PAGES — body.page-* targeting
   Elimina el recuadro/container de WHMCS en páginas
   que tienen su propia estructura de secciones
   ===================================================== */
body.page-host #main-body > .container,
body.page-consultoria #main-body > .container,
body.page-soporte #main-body > .container,
body.page-radio #main-body > .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.page-host #main-body > .container > .row,
body.page-consultoria #main-body > .container > .row,
body.page-soporte #main-body > .container > .row,
body.page-radio #main-body > .container > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.page-host #main-body .col-xs-12.main-content,
body.page-consultoria #main-body .col-xs-12.main-content,
body.page-soporte #main-body .col-xs-12.main-content,
body.page-radio #main-body .col-xs-12.main-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

/* Quitar header-lined (título H1 + breadcrumb) en páginas full-width */
body.page-host .header-lined,
body.page-consultoria .header-lined,
body.page-soporte .header-lined,
body.page-radio .header-lined {
    display: none !important;
}

/* Quitar padding top de section#main-body en páginas full-width */
body.page-host section#main-body,
body.page-consultoria section#main-body,
body.page-soporte section#main-body,
body.page-radio section#main-body {
    padding-top: 0 !important;
}

/* =====================================================
   PRICING CARDS — estilos globales (hosting + radio)
   Movido desde precio_hosting.tpl para disponibilidad
   en todas las páginas que usan pricing cards
   ===================================================== */
/* ---- PRICING SECTION ---- */
.pricing-kombi {
    padding: 88px 0 72px !important;
    background: var(--nord5, #E5E9F0) !important;
}

.pricing-kombi__header {
    margin-bottom: 40px;
}

.pricing-kombi__eyebrow {
    display: inline-block;
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #5E81AC;
    background: rgba(94, 129, 172, 0.1);
    border: 1px solid rgba(94, 129, 172, 0.25);
    padding: 6px 18px;
    border-radius: 50px;
    margin-bottom: 16px;
}

.pricing-kombi__title {
    font-size: 2.4rem;
    font-weight: 800;
    color: #2E3440 !important;
    margin-bottom: 14px;
}

.pricing-kombi__subtitle {
    font-size: 1.18rem;
    color: #4C566A;
    max-width: 620px;
    margin: 0 auto;
}

/* ---- BILLING TOGGLE ---- */
.kh-billing-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 44px;
}

.kh-billing-toggle {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #dde2ea;
    border-radius: 50px;
    padding: 5px;
    gap: 4px;
}

.kh-billing-btn {
    display: inline-block;
    padding: 14px 36px;
    border-radius: 50px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #4C566A;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 48px;
    line-height: 1;
}

.kh-billing-btn:hover:not(.kh-billing-btn--active) {
    background: rgba(94, 129, 172, 0.08);
    color: #5E81AC;
}

.kh-billing-btn--active {
    background: #5E81AC !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(94, 129, 172, 0.35);
}

.kh-billing-save-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 700;
    background: rgba(163, 190, 140, 0.18);
    color: #5a8a4a;
    border: 1px solid rgba(163, 190, 140, 0.4);
    padding: 8px 18px;
    border-radius: 50px;
}

.kh-billing-save-badge i { color: #A3BE8C; }

/* ---- PRICING CARD ---- */
.pricing-card {
    background: #ffffff;
    border: 1px solid #e0e6ed;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 16px rgba(46, 52, 64, 0.07);
    transition: all 0.3s ease;
    position: relative;
}

.pricing-card:hover {
    box-shadow: 0 12px 40px rgba(46, 52, 64, 0.14);
    transform: translateY(-5px);
}

.pricing-card--popular {
    border: 2px solid #5E81AC;
    box-shadow: 0 12px 40px rgba(94, 129, 172, 0.22);
    transform: scale(1.04);
    z-index: 2;
}

.pricing-card--popular:hover { transform: scale(1.02) translateY(-5px); }

.pricing-card__popular-badge {
    background: #5E81AC;
    color: #ffffff;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px 16px;
}

.pricing-card__popular-badge i { margin-right: 4px; color: #EBCB8B; }

.pricing-card__domain-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(163, 190, 140, 0.9);
    color: #2E3440;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 6px;
    z-index: 5;
}

.pricing-card__header {
    background: linear-gradient(135deg, #2E3440 0%, #3B4252 100%);
    padding: 32px 28px 26px;
    text-align: center;
}

.pricing-card__header--popular {
    background: linear-gradient(135deg, #5E81AC 0%, #81A1C1 100%) !important;
}

.pricing-card__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 1.5rem;
    color: #88C0D0;
    margin-bottom: 16px;
}

.pricing-card--popular .pricing-card__icon-wrap { color: #EBCB8B; }

.pricing-card__plan-name {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ECEFF4 !important;
    margin-bottom: 12px;
}

.pricing-card__price-wrap { margin-bottom: 8px; }

.pricing-card__amount {
    display: block;
    font-size: 3.2rem;
    font-weight: 800;
    color: #ECEFF4;
    line-height: 1.1;
}

.pricing-card__period {
    display: block;
    font-size: 0.95rem;
    color: #D8DEE9;
    font-weight: 500;
    margin-top: 4px;
}

.pricing-card__monthly-equiv {
    display: block;
    font-size: 0.88rem;
    color: #81A1C1;
    text-decoration: line-through;
    margin-top: 6px;
    font-weight: 400;
}

.pricing-card__tagline {
    font-size: 0.95rem;
    color: #81A1C1;
    margin-top: 10px;
    margin-bottom: 0;
}

.pricing-card--popular .pricing-card__tagline,
.pricing-card--popular .pricing-card__period { color: #D8DEE9; }

.pricing-card__body { padding: 28px 28px 20px; flex: 1; }

.pricing-card__features { list-style: none; padding: 0; margin: 0; }

.pricing-card__features li {
    font-size: 1.02rem;
    color: #434C5E;
    padding: 10px 0;
    border-bottom: 1px solid #f2f4f7;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pricing-card__features li:last-child { border-bottom: none; }
.pricing-card__features li i { color: #A3BE8C; font-size: 0.9rem; flex-shrink: 0; }

.pricing-card__footer {
    padding: 24px 28px !important;
    background: #f8f9fb !important;
    border-top: 1px solid #eef0f4 !important;
}

.pricing-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: center;
    background: #5E81AC !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 16px 28px !important;
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 3px 12px rgba(94, 129, 172, 0.25) !important;
}

.pricing-card__cta:hover {
    background: #81A1C1 !important;
    box-shadow: 0 5px 18px rgba(94, 129, 172, 0.4) !important;
    transform: translateY(-1px);
    color: #ffffff !important;
}

.pricing-card__cta--popular {
    background: linear-gradient(135deg, #5E81AC, #81A1C1) !important;
    box-shadow: 0 4px 16px rgba(94, 129, 172, 0.35) !important;
}

.pricing-trust {
    margin-top: 16px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    border: 1px solid #dde2ea;
}

.pricing-trust__item { font-size: 1rem; color: #434C5E; font-weight: 600; }
.pricing-trust__item i { color: #5E81AC; margin-right: 5px; }
.pricing-trust__sep { color: #adb5bd; margin: 0 12px; }

.pricing-whatsapp { margin-top: 16px; }
.pricing-whatsapp__link {
    font-size: 0.9rem;
    font-weight: 600;
    color: #5E81AC !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: color 0.2s;
}
.pricing-whatsapp__link i { color: #25D366; font-size: 1.1rem; }
.pricing-whatsapp__link:hover { color: #88C0D0 !important; }

@media (max-width: 991px) {
    .pricing-card--popular { transform: none; }
    .pricing-card--popular:hover { transform: translateY(-5px); }
}

@media (max-width: 767px) {
    .pricing-kombi { padding: 60px 0 48px !important; }
    .pricing-trust__sep { display: none; }
    .pricing-trust__item { display: block; margin-bottom: 8px; }
    .pricing-kombi__title { font-size: 1.85rem; }
    .pricing-card__amount { font-size: 2.4rem; }
    .pricing-cards-row > [class*="col-"] { padding-left: 10px; padding-right: 10px; }
}

/* ============================================================
   UI REFRESH — Panel cliente, Store, Login — 2026-03-20
   ============================================================ */

/* ---- 1. Inner pages header: compact (just navbar, no empty hero space) ---- */
#header.whmcs-not-index-template {
    min-height: auto !important;
    height: auto !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
#header.whmcs-not-index-template .header-animation {
    display: none !important;
}

/* ---- 2. LOGIN PAGE ---- */
section#main-body:has(.logincontainer) {
    background: linear-gradient(160deg, #2E3440 0%, #3B4252 60%, #434C5E 100%) !important;
    padding: 80px 0 60px !important;
    min-height: 70vh;
}

.logincontainer {
    max-width: 460px !important;
    margin: 0 auto !important;
    background: #ECEFF4 !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.35) !important;
    padding: 52px !important;
    border: none !important;
}

/* Logo Kombi centrado arriba del form */
.kh-login-logo {
    display: block;
    text-align: center;
    margin-bottom: 28px;
}
.kh-login-logo img {
    height: 38px;
    width: auto;
    filter: brightness(0);
}

/* Ocultar "Esta página está restringida" */
.logincontainer .the_breadcrumb_conatiner_page,
.logincontainer small { display: none !important; }

.logincontainer h1 {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #2E3440 !important;
    text-align: center !important;
    margin: 0 0 28px !important;
    letter-spacing: -0.3px;
}

.logincontainer label {
    font-weight: 600 !important;
    color: #4C566A !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin-bottom: 6px !important;
}

.logincontainer .form-control {
    border: 2px solid #D8DEE9 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    height: auto !important;
    font-size: 15px !important;
    background: #fff !important;
    color: #2E3440 !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
.logincontainer .form-control:focus {
    border-color: #88C0D0 !important;
    box-shadow: 0 0 0 3px rgba(136,192,208,0.2) !important;
    outline: none !important;
}

.logincontainer .form-group { margin-bottom: 20px !important; }
.logincontainer .checkbox   { margin-bottom: 24px !important; }

/* Botones — quitar align=center WHMCS y poner flex */
.logincontainer [align="center"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 8px !important;
}

.logincontainer .btn-primary {
    background: #5E81AC !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 0 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    width: 100% !important;
    display: block !important;
    transition: background 0.2s !important;
}
.logincontainer .btn-primary:hover { background: #4C6F96 !important; }

.logincontainer .btn-default {
    background: transparent !important;
    border: 2px solid #D8DEE9 !important;
    border-radius: 10px !important;
    color: #5E81AC !important;
    font-weight: 600 !important;
    width: 100% !important;
    display: block !important;
    padding: 10px 0 !important;
    text-align: center !important;
    transition: background 0.2s !important;
}
.logincontainer .btn-default:hover { background: #E5E9F0 !important; }

/* ---- 3. STORE — product cards ---- */

/* Ocultar sidebar toggle (botón "Mostrar menú") */
#btnShowSidebar { display: none !important; }

/* Ocultar sidebar izquierda en desktop — usamos el full width */
@media (min-width: 992px) {
    .product-selection-sidebar { display: none !important; }
    .row-product-selection { left: 0 !important; }
}

/* Cards */
.tree-steps-hosting-plans {
    border-radius: 14px !important;
    border: 2px solid #E5E9F0 !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.07) !important;
    transition: box-shadow 0.25s, transform 0.25s !important;
    background: #fff !important;
    margin-bottom: 24px !important;
}
.tree-steps-hosting-plans:hover {
    box-shadow: 0 12px 36px rgba(0,0,0,0.13) !important;
    transform: translateY(-5px) !important;
}

/* Card header (precio + nombre) */
.tree-steps-hosting-plans-header {
    background: linear-gradient(135deg, #3B4252 0%, #434C5E 100%) !important;
    color: #ECEFF4 !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 32px 24px 28px !important;
    text-align: center !important;
}

/* Card destacada (Más popular) */
.features-plan > .tree-steps-hosting-plans-header,
.features-plan .tree-steps-hosting-plans-header {
    background: linear-gradient(135deg, #5E81AC 0%, #81A1C1 100%) !important;
}

/* Badge "Más popular" */
.tree-steps-hosting-plans-best {
    background: #A3BE8C !important;
    color: #2E3440 !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 4px 14px !important;
    letter-spacing: 1px !important;
    display: inline-block !important;
    margin-bottom: 8px !important;
}

/* CTA botón */
.tree-steps-hosting-plans-footer-btn {
    background: #5E81AC !important;
    color: #fff !important;
    border-radius: 8px !important;
    border: none !important;
    font-weight: 700 !important;
    padding: 12px 28px !important;
    transition: background 0.2s !important;
    display: inline-block !important;
    text-decoration: none !important;
}
.tree-steps-hosting-plans-footer-btn:hover {
    background: #4C6F96 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Título de la página de store */
.page-products .page-header h1,
.page-products .the_breadcrumb_conatiner_page h1 {
    text-align: center !important;
    color: #1a2233 !important;
}


/* ============================================================
   DASHBOARD REFRESH — fix sidebar + header duplicado + diseño
   2026-03-20
   ============================================================ */

/* ---- Fix selector sidebar (body usa page-clientareahome, no clientareahome) ---- */
body.page-clientareahome #main-body .sidebar,
body.page-clientareahome .sidebar { display: none !important; }

/* Ocultar el col-md-9 que WHMCS pone FUERA de main-content (tiene el pageheader duplicado) */
body.page-clientareahome #main-body > .container > .row > .col-md-9.pull-md-right:not(.main-content) {
    display: none !important;
}

/* main-content toma todo el ancho cuando la sidebar está oculta */
body.page-clientareahome .main-content {
    width: 100% !important;
    float: none !important;
    padding: 0 15px !important;
}

/* ---- Hero del dashboard: fondo con acento sutil ---- */
.kh-dash-hero {
    background: linear-gradient(135deg, #2E3440 0%, #3B4252 100%) !important;
    border-radius: 16px !important;
    padding: 40px 40px 36px !important;
    margin-bottom: 28px !important;
    color: #ECEFF4 !important;
}
.kh-dash-breadcrumb       { color: #81A1C1 !important; margin-bottom: 8px !important; }
.kh-dash-breadcrumb a     { color: #88C0D0 !important; }
.kh-dash-title            { color: #ECEFF4 !important; font-size: 2rem !important; margin: 0 0 8px !important; }
.kh-dash-name             { color: #88C0D0 !important; }
.kh-dash-subtitle         { color: #D8DEE9 !important; margin: 0 !important; font-size: 15px !important; }

/* ---- KPI cards: más impacto visual ---- */
.kh-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
}
.kh-kpi-card {
    background: #fff !important;
    border-radius: 14px !important;
    padding: 24px 24px !important;
    border: none !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important;
    border-left: 4px solid transparent !important;
    transition: box-shadow 0.2s, transform 0.2s !important;
}
.kh-kpi-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.11) !important;
    transform: translateY(-3px) !important;
}
.kh-kpi--services { border-left-color: #5E81AC !important; }
.kh-kpi--tickets  { border-left-color: #A3BE8C !important; }
.kh-kpi--domains  { border-left-color: #B48EAD !important; }
.kh-kpi--alert    { border-left-color: #BF616A !important; }

.kh-kpi-stat  { font-size: 2.4rem !important; font-weight: 900 !important; color: #1a2233 !important; line-height: 1 !important; margin-bottom: 4px !important; }
.kh-kpi-label { font-size: 13px !important; color: #6B7A99 !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; }
.kh-kpi-icon  { width: 48px !important; height: 48px !important; border-radius: 12px !important; font-size: 20px !important; flex-shrink: 0 !important; }

/* ---- Quick actions: grid más compacto y visual ---- */
.kh-quickactions { margin-bottom: 28px !important; }
.kh-section-title {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #8a96b0 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    margin-bottom: 14px !important;
}
.kh-qa-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 12px !important;
}
.kh-qa-card {
    background: #fff !important;
    border-radius: 14px !important;
    padding: 20px 16px !important;
    text-align: center !important;
    border: 2px solid #EEF1F8 !important;
    text-decoration: none !important;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
}
.kh-qa-card:hover {
    border-color: #88C0D0 !important;
    box-shadow: 0 4px 16px rgba(136,192,208,0.2) !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
}
.kh-qa-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
}
.kh-qa-label { font-size: 13px !important; font-weight: 600 !important; color: #2E3440 !important; line-height: 1.3 !important; }

/* ---- Panels grid ---- */
.kh-panels-grid { margin-top: 4px; }
.kh-panel {
    background: #fff !important;
    border-radius: 14px !important;
    border: 2px solid #EEF1F8 !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
}
.kh-panel-head {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 16px 20px !important;
    border-bottom: 2px solid #EEF1F8 !important;
    background: #FAFBFD !important;
}
.kh-panel-title {
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #4C566A !important;
}
.kh-panel-icon { color: #88C0D0 !important; font-size: 14px !important; }
.kh-panel-body, .kh-panel-list { padding: 12px 20px !important; }
.kh-panel-list { list-style: none !important; margin: 0 !important; }
.kh-panel-list-item { padding: 10px 0 !important; border-bottom: 1px solid #F0F2F8 !important; font-size: 14px !important; }
.kh-panel-list-item:last-child { border-bottom: none !important; }
.kh-panel-link {
    font-size: 12px !important;
    color: #5E81AC !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.kh-panel-link:hover { color: #81A1C1 !important; text-decoration: none !important; }

/* Responsive dashboard */
@media (max-width: 767px) {
    .kh-kpi-grid   { grid-template-columns: 1fr 1fr !important; }
    .kh-qa-grid    { grid-template-columns: 1fr 1fr 1fr !important; }
    .kh-dash-hero  { padding: 28px 24px !important; }
    .kh-dash-title { font-size: 1.5rem !important; }
}


/* ---- KPI grid 4 columnas ---- */
.kh-kpi-grid--4 {
    grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 991px) {
    .kh-kpi-grid--4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    .kh-kpi-grid--4 { grid-template-columns: 1fr 1fr !important; }
}

/* KPI invoices — color ámbar; alerta rojo si hay pendientes */
.kh-kpi--invoices              { border-left-color: #EBCB8B !important; }
.kh-kpi--invoices .kh-kpi-icon { background: #FFF8E6 !important; color: #C89B3C !important; }
.kh-kpi--alert                 { border-left-color: #BF616A !important; }
.kh-kpi--alert .kh-kpi-icon    { background: #FFE8EA !important; color: #BF616A !important; }
.kh-kpi--alert .kh-kpi-stat    { color: #BF616A !important; }

/* ============================================================
   SERVICIOS PAGE — fix DataTables dark button + sidebar
   ============================================================ */

/* ---- Bloque oscuro: botón ColVis / dt-buttons de DataTables ---- */
.dt-buttons,
.dt-button,
.dt-buttons .btn,
.dt-buttons .button,
.DTTT_container,
.DTTT_button,
div.dt-buttons { 
    background: transparent !important;
    box-shadow: none !important;
}
.dt-button,
.dt-buttons .btn,
.DTTT_button {
    background: #fff !important;
    border: 2px solid #E5E9F0 !important;
    color: #4C566A !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 7px 14px !important;
    transition: border-color 0.2s !important;
}
.dt-button:hover, .DTTT_button:hover {
    border-color: #88C0D0 !important;
    color: #2E3440 !important;
    background: #F4F7FB !important;
}

/* ---- Sidebar de páginas internas: más compacta y limpia ---- */
.sidebar .panel,
.sidebar .card {
    background: #fff !important;
    border: 2px solid #EEF1F8 !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    overflow: hidden !important;
    margin-bottom: 14px !important;
}
.sidebar .panel-heading,
.sidebar .card-header {
    background: #FAFBFD !important;
    border-bottom: 2px solid #EEF1F8 !important;
    padding: 12px 16px !important;
    border-radius: 12px 12px 0 0 !important;
}
.sidebar .panel-title,
.sidebar .card-title {
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    color: #8a96b0 !important;
}
/* Ocultar el chevron/collapse arrow — simplifica el aspecto */
.sidebar [data-toggle="collapse"] .glyphicon,
.sidebar [data-toggle="collapse"]::after,
.sidebar .panel-title a::after,
.sidebar .panel-title .fa-chevron-up,
.sidebar .panel-title .fa-chevron-down {
    display: none !important;
}
/* Items de filtro en sidebar */
.sidebar .list-group-item {
    border: none !important;
    border-radius: 8px !important;
    padding: 9px 14px !important;
    margin: 2px 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #4C566A !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: background 0.15s !important;
}
.sidebar .list-group-item:hover {
    background: #EEF1F8 !important;
    color: #2E3440 !important;
}
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover {
    background: #EBF4FF !important;
    color: #5E81AC !important;
    font-weight: 700 !important;
}
.sidebar .list-group-item .badge {
    background: #E5E9F0 !important;
    color: #4C566A !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    min-width: 24px !important;
    text-align: center !important;
}
.sidebar .list-group-item.active .badge {
    background: #BEDAFF !important;
    color: #3B6EA5 !important;
}
/* Links de acciones en sidebar */
.sidebar .list-group a,
.sidebar a.list-group-item {
    text-decoration: none !important;
}

/* ============================================================
   BOTONES PLANOS EN PANEL DE SERVICIOS (v2 — sin split button)
   El template ya no genera el dropdown con caret: cPanel, Webmail
   y AzuraCast son botones normales uno al lado del otro.
   ============================================================ */

/* Botón principal (Iniciar sesión en cPanel / Entrar a AzuraCast) */
.div-service-buttons .btn-custom-action.btn-primary,
.kh-panel-body .div-service-buttons .btn-custom-action.btn-primary,
.div-service-buttons .kh-btn-azuracast {
    background: #5E81AC !important;
    border: none !important;
    color: #fff !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    padding: 9px 18px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    text-decoration: none !important;
    letter-spacing: 0.01em;
    transition: background 0.15s ease !important;
}
.div-service-buttons .btn-custom-action.btn-primary:hover,
.kh-panel-body .div-service-buttons .btn-custom-action.btn-primary:hover,
.div-service-buttons .kh-btn-azuracast:hover {
    background: #4c6e96 !important;
    color: #fff !important;
    box-shadow: 0 3px 12px rgba(94,129,172,0.35) !important;
}

/* Botón secundario (Iniciar sesión en Webmail) — estilo outline */
.div-service-buttons .btn-custom-action.btn-default,
.kh-panel-body .div-service-buttons .btn-custom-action.btn-default {
    background: #fff !important;
    border: 1.5px solid #c8d4e8 !important;
    color: #5E81AC !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
    transition: all 0.15s ease !important;
}
.div-service-buttons .btn-custom-action.btn-default:hover,
.kh-panel-body .div-service-buttons .btn-custom-action.btn-default:hover {
    background: #EBF4FF !important;
    border-color: #5E81AC !important;
    color: #3d5a8a !important;
}

/* ── Evitar desborde de la fila con 3 botones ──────────────────
   El contenedor de botones no podía encogerse ni envolver, y con
   cPanel + Webmail + Ver detalles se salía de la tarjeta. */
.div-service-buttons,
.kh-panel-body .div-service-buttons {
    flex-wrap: wrap !important;
    flex-shrink: 1 !important;
    justify-content: flex-end !important;
    row-gap: 8px !important;
    min-width: 0 !important;
}

/* Botones más compactos para que quepan en una línea */
.div-service-buttons .btn-custom-action.btn-primary,
.kh-panel-body .div-service-buttons .btn-custom-action.btn-primary,
.div-service-buttons .kh-btn-azuracast {
    font-size: 0.85rem !important;
    padding: 8px 14px !important;
}
.div-service-buttons .btn-custom-action.btn-default,
.kh-panel-body .div-service-buttons .btn-custom-action.btn-default {
    font-size: 0.84rem !important;
    padding: 8px 12px !important;
}
.div-service-buttons .btn-view-details {
    white-space: nowrap !important;
    margin-left: 0 !important;
}