/* ===================================================
   LIGHT CREATIVITY — WHMCS Six Theme
   custom.css — Carga DESPUÉS de all.min.css
   Versión definitiva
   =================================================== */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&family=Roboto:wght@400;500;700&display=swap');

/* ===================================================
   1. SOBREESCRIBIR VARIABLES CSS DEL TEMA
   El inline <style> define estas variables antes
   de los <link>, custom.css carga al final = gana
   =================================================== */
:root {
  --primary-color:        #3F18FF !important;
  --secondary-color:      #17004E !important;
  --btn-background-color: #3F18FF !important;
  --btn-text-color:       #ffffff !important;
  --icon-color:           #ffffff !important;
}

/* ===================================================
   2. TIPOGRAFÍA
   =================================================== */
body, p, td, li, input, select, textarea, span, div, a {
  font-family: 'Roboto', 'Open Sans', sans-serif !important;
}
h1, h2, h3, h4, h5, h6,
.panel-title, .page-header h1, .panel-heading {
  font-family: 'Ubuntu', 'Raleway', sans-serif !important;
  font-weight: 700 !important;
}

/* ===================================================
   3. NAVBAR
   =================================================== */
.navbar-main {
  background-color: #17004E !important;
}
.navbar-main li.account {
  background-color: #3F18FF !important;
}
.navbar-main li.account > a {
  color: #ffffff !important;
  font-weight: 700 !important;
}
.navbar-main li.account:hover {
  background-color: #11E4DB !important;
}
.navbar-main li.account:hover > a {
  color: #17004E !important;
}
.navbar-main .navbar-nav > li > a {
  color: rgba(241,241,241,0.9) !important;
}
.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .open > a {
  background-color: rgba(63,24,255,0.45) !important;
  color: #ffffff !important;
}
.navbar-main .dropdown-menu {
  background-color: #17004E !important;
  border: 1px solid rgba(17,228,219,0.2) !important;
  border-radius: 8px !important;
}
.navbar-main .dropdown-menu > li > a {
  color: rgba(241,241,241,0.88) !important;
  border-radius: 5px !important;
}
.navbar-main .dropdown-menu > li > a:hover,
.navbar-main .dropdown-menu > li > a:focus {
  background-color: rgba(63,24,255,0.45) !important;
  color: #ffffff !important;
}

/* ===================================================
   4. BARRA HOME-SHORTCUTS (cyan → azul LC)
   =================================================== */
.home-shortcuts {
  background: #3F18FF !important;
  background-color: #3F18FF !important;
}
.home-shortcuts li {
  border-right-color: rgba(255,255,255,0.15) !important;
}
.home-shortcuts li:first-child {
  border-left-color: rgba(255,255,255,0.15) !important;
}
.home-shortcuts li a,
.home-shortcuts li i,
.home-shortcuts li p,
.home-shortcuts .lead {
  color: #ffffff !important;
}
.home-shortcuts li:hover {
  background-color: rgba(255,255,255,0.1) !important;
}
.home-shortcuts li:hover a {
  color: #11E4DB !important;
}

/* ===================================================
   5. HERO BANNER (dominio search)
   =================================================== */
section#home-banner {
  background-color: #17004E !important;
}
section#home-banner .btn.search {
  background-color: #3F18FF !important;
  border-color: #3F18FF !important;
}
section#home-banner .btn.search:hover {
  background-color: #11E4DB !important;
  color: #17004E !important;
}
section#main-menu {
  background-color: #17004E !important;
}

/* ===================================================
   6. BOTONES — FIX VERDE → AZUL LC
   =================================================== */
.btn-success,
.btn-primary {
  background-color: #3F18FF !important;
  border-color: #3F18FF !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
}
.btn-success:hover,
.btn-primary:hover,
.btn-success:focus,
.btn-primary:focus,
.btn-success:active,
.btn-primary:active {
  background-color: #17004E !important;
  border-color: #17004E !important;
  color: #11E4DB !important;
}
/* Botones outline */
.btn-default,
.btn-info {
  background-color: transparent !important;
  border: 1.5px solid #3F18FF !important;
  color: #3F18FF !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
}
.btn-default:hover,
.btn-info:hover {
  background-color: #3F18FF !important;
  color: #ffffff !important;
}
/* Botón peligro */
.btn-danger {
  background-color: #b71c1c !important;
  border-color: #b71c1c !important;
  border-radius: 6px !important;
}
/* Ver Carrito top nav */
ul.top-nav > li.primary-action > a.btn {
  background-color: #3F18FF !important;
  color: #ffffff !important;
  border-radius: 6px !important;
}
ul.top-nav > li.primary-action > a.btn:hover {
  background-color: #11E4DB !important;
  color: #17004E !important;
}

/* ===================================================
   7. SIDEBAR
   =================================================== */
.panel-heading,
.panel-primary > .panel-heading,
.panel-sidebar > .panel-heading {
  background-color: #17004E !important;
  color: #ffffff !important;
  border: none !important;
}
.panel-heading a, .panel-heading .panel-title {
  color: #ffffff !important;
}
/* Ítem activo sidebar */
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus,
a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus,
.panel-sidebar a.list-group-item.active,
.panel-sidebar a.list-group-item.active:hover {
  background-color: #3F18FF !important;
  border-color: #3F18FF !important;
  color: #ffffff !important;
}
.panel-sidebar a.list-group-item.active i {
  color: #ffffff !important;
}
/* Sidebar panel title color */
.panel-sidebar .panel-title {
  color: #ffffff !important;
}
/* Links sidebar */
.sidebar a.list-group-item,
.panel-sidebar a.list-group-item {
  color: #3F18FF !important;
}

/* ===================================================
   8. LINKS GLOBALES
   =================================================== */
a { color: #3F18FF !important; }
a:hover { color: #17004E !important; text-decoration: none !important; }

/* ===================================================
   9. BADGES DE ESTADO
   =================================================== */
.label-success  { background-color: #1b5e20 !important; color: #fff !important; border-radius: 12px !important; padding: 3px 10px !important; font-size: 11px !important; }
.label-warning  { background-color: #e65100 !important; color: #fff !important; border-radius: 12px !important; padding: 3px 10px !important; font-size: 11px !important; }
.label-danger   { background-color: #b71c1c !important; color: #fff !important; border-radius: 12px !important; padding: 3px 10px !important; font-size: 11px !important; }
.label-info     { background-color: #3F18FF !important; color: #fff !important; border-radius: 12px !important; padding: 3px 10px !important; font-size: 11px !important; }
.label-default  { background-color: rgba(23,0,78,0.12) !important; color: #17004E !important; border-radius: 12px !important; }
span.badge.new  { background-color: #11E4DB !important; color: #17004E !important; font-weight: 700 !important; }

/* ===================================================
   10. PAGINACIÓN
   =================================================== */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > a:focus {
  background-color: #3F18FF !important;
  border-color: #3F18FF !important;
  color: #ffffff !important;
}

/* ===================================================
   11. TABLAS
   =================================================== */
.table > thead > tr > th {
  background-color: #17004E !important;
  color: #ffffff !important;
  border: none !important;
}

/* ===================================================
   12. FORMULARIOS
   =================================================== */
.form-control:focus {
  border-color: #3F18FF !important;
  box-shadow: 0 0 0 3px rgba(63,24,255,0.1) !important;
}

/* ===================================================
   13. FOOTER
   =================================================== */
section#footer {
  background-color: #17004E !important;
  color: rgba(241,241,241,0.6) !important;
  border-top: 2px solid #3F18FF !important;
}
section#footer p,
section#footer a {
  color: rgba(241,241,241,0.6) !important;
}
section#footer a:hover {
  color: #11E4DB !important;
}
section#footer .back-to-top i {
  background-color: #3F18FF !important;
  color: #ffffff !important;
}

/* ===================================================
   14. ENCABEZADOS H1 PRINCIPALES
   =================================================== */
h1, .page-header h1, .header-lined h1 {
  color: #17004E !important;
}
div.header-lined h1 {
  color: #17004E !important;
  border-bottom-color: rgba(23,0,78,0.15) !important;
}

/* ===================================================
   15. FILTROS DE CATEGORÍA TLD (domain-pricing)
   =================================================== */
.tld-filters a {
  background-color: rgba(23,0,78,0.08) !important;
  color: #17004E !important;
  border: 1px solid rgba(63,24,255,0.2) !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  padding: 5px 10px !important;
  margin-bottom: 6px !important;
  transition: all 0.2s !important;
}
.tld-filters a:hover {
  background-color: #3F18FF !important;
  color: #ffffff !important;
  border-color: #3F18FF !important;
}
.tld-filters a.badge-success,
.tld-filters a.badge-secondary,
.tld-filters a.badge-info,
.tld-filters a.badge-warning,
.tld-filters a.badge-danger {
  background-color: rgba(23,0,78,0.08) !important;
  color: #17004E !important;
  border: 1px solid rgba(63,24,255,0.2) !important;
}
/* Categoría activa/seleccionada */
.tld-filters a.active,
.tld-filters a:focus {
  background-color: #3F18FF !important;
  color: #ffffff !important;
  border-color: #3F18FF !important;
}

/* Tabla de dominios — cabecera */
.domain-pricing .tld-pricing-header .col-xs-2,
.domain-pricing .tld-pricing-header .col-sm-2,
.domain-pricing .tld-pricing-header .col-xs-4,
.domain-pricing .tld-pricing-header .col-sm-4 {
  border-bottom-color: #3F18FF !important;
  background-color: rgba(63,24,255,0.05) !important;
}
.domain-pricing .tld-pricing-header div:nth-child(odd) {
  border-color: #17004E !important;
  background-color: rgba(23,0,78,0.08) !important;
}

/* ===================================================
   16. ESTADO DEL SERVICIO — FIX SUPERPOSICIÓN
   El badge tiene width fija de 3rem que no alcanza
   para palabras largas como "Suspendido"
   =================================================== */
.div-service-status .label:not(.label-placeholder) {
  width: auto !important;
  min-width: 3.5rem !important;
  max-width: 8rem !important;
  font-size: 10px !important;
  padding: 3px 7px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
  flex-shrink: 0 !important;
}
.div-service-status {
  min-width: 80px !important;
  flex-shrink: 0 !important;
}
.div-service-name {
  overflow: hidden !important;
  min-width: 0 !important;
}
.div-service-name > span {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}
.div-service-item {
  align-items: center !important;
  gap: 8px !important;
}