/* ============================================================
   Hosting para mi Correo y Web — WHMCS Custom CSS
   twentyone-child/css/custom.css
   ============================================================ */

/* ── Variables de marca ── */
:root {
  --hmpw-primary:       #1558A0;
  --hmpw-primary-dark:  #0C3D72;
  --hmpw-primary-light: #E8F0FB;
  --hmpw-accent:        #F97316;
  --hmpw-accent-dark:   #C45D0A;
  --hmpw-bg:            #F4F7FC;
  --hmpw-text:          #0F172A;
  --hmpw-muted:         #64748B;
  --hmpw-border:        #DDE6F5;
  --hmpw-radius:        12px;
  --hmpw-radius-lg:     20px;
  --hmpw-shadow-sm:     0 2px 12px rgba(15,52,96,.08);
  --hmpw-shadow:        0 8px 28px rgba(15,52,96,.13);
  --hmpw-transition:    .28s cubic-bezier(.16,1,.3,1);
}

/* ── Base ── */
body { font-family: 'Plus Jakarta Sans', sans-serif !important; background: var(--hmpw-bg) !important; color: var(--hmpw-text) !important; }
h1,h2,h3,h4,h5,h6 { font-family: 'Plus Jakarta Sans', sans-serif !important; letter-spacing: -0.02em; }
a { color: var(--hmpw-primary); transition: color var(--hmpw-transition); }
a:hover { color: var(--hmpw-accent); }

/* ============================================================
   DOMAIN SEARCH
   ============================================================ */
.home-domain-search { background: linear-gradient(135deg, #060F1E 0%, #0F3460 60%, #1558A0 100%) !important; position: relative; overflow: hidden; padding: 0 !important; }
.home-domain-search::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; }
.home-domain-search .container { position: relative; z-index: 1; }
.home-domain-search .p-5 { padding: 64px 24px !important; }
.home-domain-search h2 { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: clamp(1.75rem, 4vw, 3rem) !important; font-weight: 800 !important; color: #fff !important; letter-spacing: -0.03em !important; margin-bottom: 8px !important; }
.home-domain-search h2::after { content: ' profesional en minutos'; display: block; color: #F97316; }
.home-domain-search .input-group-wrapper { max-width: 640px; margin: 28px auto 16px !important; background: #fff; border-radius: 50px; padding: 4px; box-shadow: 0 8px 32px rgba(0,0,0,.25); }
.home-domain-search .input-group { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 50px !important; overflow: hidden; padding: 0 0 0 16px !important; align-items: center; }
.home-domain-search .input-group .form-control { border: none !important; box-shadow: none !important; background: transparent !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 1rem !important; color: #0F172A !important; height: 44px !important; padding: 0 8px !important; border-radius: 0 !important; }
.home-domain-search .input-group .form-control::placeholder { color: #94A3B8 !important; }
.home-domain-search .input-group-append { display: flex !important; gap: 6px; padding: 0 !important; }
.home-domain-search .input-group-append .btn-primary { background: #F97316 !important; border-color: #F97316 !important; border-radius: 50px !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 600 !important; padding: 10px 24px !important; white-space: nowrap; border: none !important; transition: background .28s !important; }
.home-domain-search .input-group-append .btn-primary:hover { background: #C45D0A !important; }
.home-domain-search .input-group-append .btn-success { background: #1558A0 !important; border-color: #1558A0 !important; border-radius: 50px !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 600 !important; padding: 10px 24px !important; border: none !important; }
.home-domain-search .input-group-append .btn-success:hover { background: #0C3D72 !important; }
.home-domain-search .row .btn-primary, .home-domain-search .row .btn-success { border-radius: 12px !important; margin-top: 8px; }
.home-domain-search .tld-logos { display: flex; justify-content: center; gap: 10px; list-style: none; padding: 16px 0 0 !important; margin: 0 !important; flex-wrap: wrap; }
.home-domain-search .tld-logos li { background: rgba(255,255,255,.12); color: rgba(255,255,255,.85); border-radius: 50px; padding: 6px 16px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .875rem; font-weight: 500; border: 1px solid rgba(255,255,255,.15); display: flex; align-items: center; gap: 8px; }
.home-domain-search .tld-logos li img { height: 16px; width: auto; }
.home-domain-search .btn-link { color: rgba(255,255,255,.60) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: .875rem !important; text-decoration: underline !important; }
.home-domain-search .btn-link:hover { color: rgba(255,255,255,.90) !important; }

/* ============================================================
   HOMEPAGE
   ============================================================ */
.hmpw-section-header { text-align: center; margin: 48px 0 28px; }
.hmpw-section-header h2 { font-size: 1.625rem; font-weight: 700; color: var(--hmpw-text); margin-bottom: 6px; position: relative; display: inline-block; padding-bottom: 12px; }
.hmpw-section-header h2::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 48px; height: 3px; background: var(--hmpw-accent); border-radius: 2px; }
.hmpw-section-header p { color: var(--hmpw-muted); font-size: 1rem; margin: 0; }
.hmpw-products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin-bottom: 16px; }
.hmpw-product-card { background: #fff; border: 1px solid var(--hmpw-border); border-radius: var(--hmpw-radius-lg); padding: 32px 24px; text-align: center; box-shadow: var(--hmpw-shadow-sm); transition: box-shadow var(--hmpw-transition), transform var(--hmpw-transition); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hmpw-product-card:hover { box-shadow: var(--hmpw-shadow); transform: translateY(-4px); }
.hmpw-product-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--hmpw-primary-light); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--hmpw-primary); }
.hmpw-product-card h3 { font-size: 1rem; font-weight: 600; color: var(--hmpw-text); margin: 0; }
.hmpw-product-card p { font-size: .875rem; color: var(--hmpw-muted); margin: 0; line-height: 1.5; flex: 1; }
.hmpw-btn-primary { display: inline-block; padding: 10px 20px; background: var(--hmpw-primary); color: #fff !important; border-radius: var(--hmpw-radius); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 500; font-size: .875rem; text-decoration: none !important; transition: background var(--hmpw-transition), transform var(--hmpw-transition); white-space: nowrap; }
.hmpw-btn-primary:hover { background: var(--hmpw-primary-dark) !important; color: #fff !important; transform: translateY(-2px); }
.hmpw-action-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 16px; }
.hmpw-action-card { background: #fff; border: 1px solid var(--hmpw-border); border-radius: var(--hmpw-radius-lg); padding: 24px 16px; text-align: center; text-decoration: none !important; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: var(--hmpw-shadow-sm); transition: box-shadow var(--hmpw-transition), transform var(--hmpw-transition); position: relative; overflow: hidden; }
.hmpw-action-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: var(--hmpw-radius-lg) var(--hmpw-radius-lg) 0 0; }
.hmpw-action-card:hover { box-shadow: var(--hmpw-shadow); transform: translateY(-4px); }
.hmpw-action-card span { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .875rem; font-weight: 500; color: var(--hmpw-text); }
.hmpw-ac-icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin: 0; }
.hmpw-ac-teal::before { background: #0D9488; } .hmpw-ac-teal .hmpw-ac-icon { background: #F0FDFA; color: #0D9488; }
.hmpw-ac-red::before { background: #EF4444; } .hmpw-ac-red .hmpw-ac-icon { background: #FEF2F2; color: #EF4444; }
.hmpw-ac-yellow::before { background: #F59E0B; } .hmpw-ac-yellow .hmpw-ac-icon { background: #FFFBEB; color: #F59E0B; }
.hmpw-ac-gray::before { background: #64748B; } .hmpw-ac-gray .hmpw-ac-icon { background: #F8FAFC; color: #64748B; }
.hmpw-ac-green::before { background: #10B981; } .hmpw-ac-green .hmpw-ac-icon { background: #ECFDF5; color: #10B981; }
.hmpw-ac-blue::before { background: var(--hmpw-primary); } .hmpw-ac-blue .hmpw-ac-icon { background: var(--hmpw-primary-light); color: var(--hmpw-primary); }

/* ============================================================
   COMPONENTES GLOBALES WHMCS
   ============================================================ */
.btn-primary { font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 500 !important; border-radius: var(--hmpw-radius) !important; background: var(--hmpw-primary) !important; border-color: var(--hmpw-primary) !important; }
.btn-primary:hover { background: var(--hmpw-primary-dark) !important; border-color: var(--hmpw-primary-dark) !important; }
.btn-success { font-family: 'Plus Jakarta Sans', sans-serif !important; border-radius: var(--hmpw-radius) !important; background: #10B981 !important; border-color: #10B981 !important; }
.btn-outline-primary { color: var(--hmpw-primary) !important; border-color: var(--hmpw-primary) !important; border-radius: var(--hmpw-radius) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; }
.btn-outline-primary:hover { background: var(--hmpw-primary) !important; color: #fff !important; }
.panel, .panel-default, .card { border: 1px solid var(--hmpw-border) !important; border-radius: var(--hmpw-radius-lg) !important; box-shadow: var(--hmpw-shadow-sm) !important; }
.panel-heading, .card-header { background: var(--hmpw-primary-light) !important; border-bottom: 1px solid var(--hmpw-border) !important; border-radius: var(--hmpw-radius-lg) var(--hmpw-radius-lg) 0 0 !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 600 !important; color: var(--hmpw-primary) !important; }
.panel-body, .card-body { font-family: 'Plus Jakarta Sans', sans-serif !important; }
.sidebar .list-group-item { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: .9rem !important; border-color: var(--hmpw-border) !important; transition: background var(--hmpw-transition), color var(--hmpw-transition) !important; }
.sidebar .list-group-item:hover { background: var(--hmpw-primary-light) !important; color: var(--hmpw-primary) !important; }
.sidebar .list-group-item.active { background: var(--hmpw-primary) !important; border-color: var(--hmpw-primary) !important; color: #fff !important; }
.form-control, input[type="text"], input[type="email"], input[type="password"], select, textarea { font-family: 'Plus Jakarta Sans', sans-serif !important; border: 1px solid var(--hmpw-border) !important; border-radius: var(--hmpw-radius) !important; }
.form-control:focus, input:focus, select:focus, textarea:focus { border-color: var(--hmpw-primary) !important; box-shadow: 0 0 0 3px rgba(21,88,160,.15) !important; outline: none !important; }
label, .control-label { font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 500 !important; color: var(--hmpw-text) !important; }
.table { font-family: 'Plus Jakarta Sans', sans-serif !important; }
.table thead th { background: var(--hmpw-primary-light) !important; color: var(--hmpw-primary) !important; font-weight: 600 !important; font-size: .85rem !important; border-bottom: 2px solid var(--hmpw-border) !important; }
.table tbody tr:hover { background: var(--hmpw-bg) !important; }
.table tbody td { vertical-align: middle !important; font-size: .9rem !important; }
.alert { border-radius: var(--hmpw-radius) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; border: none !important; }
.alert-info { background: var(--hmpw-primary-light) !important; color: var(--hmpw-primary) !important; }
.alert-success { background: #ECFDF5 !important; color: #065F46 !important; }
.alert-warning { background: #FFFBEB !important; color: #92400E !important; }
.alert-danger { background: #FEF2F2 !important; color: #991B1B !important; }
.label-success, .badge-success { background: #10B981 !important; }
.label-warning, .badge-warning { background: var(--hmpw-accent) !important; }
.label-danger, .badge-danger { background: #EF4444 !important; }
.label-info, .badge-info { background: var(--hmpw-primary) !important; }
.pagination > li > a { color: var(--hmpw-primary) !important; border-color: var(--hmpw-border) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; }
.pagination > .active > a { background: var(--hmpw-primary) !important; border-color: var(--hmpw-primary) !important; }
.master-breadcrumb { background: #fff; border-bottom: 1px solid var(--hmpw-border); padding: 10px 0; }
.breadcrumb { background: transparent !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: .875rem !important; margin: 0 !important; padding: 0 !important; }
.breadcrumb-item.active { color: var(--hmpw-primary) !important; font-weight: 500 !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) { .hmpw-action-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .hmpw-action-grid { grid-template-columns: repeat(2, 1fr); } .hmpw-products-grid { grid-template-columns: repeat(2, 1fr); } }