/* AppsTec — client area skin over FOSSBilling Huraga */
:root,[data-bs-theme=light]{
  --at-ink:#0b1424;--at-ink-2:#1f2937;--at-muted:#5b6474;--at-line:#e3e8f0;--at-bg:#f4f6fa;--at-surface:#ffffff;--at-wash:#eef3fb;
  --at-accent:#0a5cc4;--at-accent-2:#0849a0;--at-ease:cubic-bezier(.23,1,.32,1);
  --bs-primary:#0a5cc4;--bs-primary-rgb:10,92,196;--bs-link-color:#0a5cc4;--bs-link-color-rgb:10,92,196;--bs-link-hover-color:#0849a0;--bs-link-hover-color-rgb:8,73,160;
  --bs-body-bg:var(--at-bg);--bs-body-color:var(--at-ink-2);--bs-emphasis-color:var(--at-ink);--bs-secondary-color:var(--at-muted);
  --bs-border-color:var(--at-line);--bs-border-radius:12px;--bs-border-radius-sm:10px;--bs-border-radius-lg:16px;
  --bs-body-font-family:"Satoshi",system-ui,-apple-system,"Segoe UI",sans-serif;--bs-body-font-size:1rem;--bs-body-line-height:1.55;
  --bs-focus-ring-color:rgba(10,92,196,.25);
}
html,body{overflow-x:clip}
body{font-family:var(--bs-body-font-family);background:var(--at-bg);color:var(--at-ink-2);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5{color:var(--at-ink);font-weight:700;letter-spacing:-.02em}
h1,.h1{letter-spacing:-.035em}
body>.container>header{position:sticky;top:0;z-index:1020;background:transparent}
body>.container>header::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:rgba(255,255,255,.96);border-bottom:1px solid var(--at-line);z-index:-1}
header .dropdown-menu{border:1px solid var(--at-line);border-radius:12px;box-shadow:0 12px 32px rgba(11,20,36,.12);padding:6px}
header .dropdown-item{border-radius:8px;padding:8px 12px;font-weight:500}
header .navbar{padding-top:14px!important;padding-bottom:14px!important}
header .navbar-brand img{height:36px;width:auto}
header .nav-link{font-weight:600;color:var(--at-ink-2);border-radius:999px;padding:8px 14px!important}
header .nav-link.active,header .nav-link[aria-current=page]{color:var(--at-accent)}
header .js-theme-toggler,header .js-locale-selector,header .nav-item:has(.js-locale-selector),header .nav-item:has(.js-theme-toggler){display:none!important}
header .btn-outline-primary{border-radius:999px;font-weight:600}
body>.container>.container{padding-top:32px;padding-bottom:48px}
.breadcrumb{font-size:.875rem;margin-bottom:20px}
.breadcrumb a{text-decoration:none;color:var(--at-muted)}
.card{border:1px solid var(--at-line);border-radius:16px;box-shadow:0 1px 2px rgba(11,20,36,.04),0 8px 24px rgba(11,20,36,.04);background:var(--at-surface);overflow:hidden}
.card-header{background:var(--at-surface);border-bottom:1px solid var(--at-line);padding:20px 24px!important}
.card-header h1,.card-header h2,.card-header h3,.card-header h4,.card-header h5,.card-header .card-title{margin:0;font-size:1.25rem}
.card-body{padding:24px}
.card-footer{background:var(--at-wash);border-top:1px solid var(--at-line)}
.btn{border-radius:999px;font-weight:600;padding:.65rem 1.25rem;transition:transform 160ms var(--at-ease),background-color .2s ease,border-color .2s ease,color .2s ease}
.btn:active{transform:scale(.97)}
.btn-sm{padding:.45rem .95rem;font-size:.875rem}
.btn-primary{--bs-btn-bg:var(--at-accent);--bs-btn-border-color:var(--at-accent);--bs-btn-hover-bg:var(--at-accent-2);--bs-btn-hover-border-color:var(--at-accent-2);--bs-btn-active-bg:var(--at-accent-2);--bs-btn-active-border-color:var(--at-accent-2);--bs-btn-disabled-bg:var(--at-accent);--bs-btn-disabled-border-color:var(--at-accent)}
.btn-dark{--bs-btn-bg:var(--at-ink);--bs-btn-border-color:var(--at-ink)}
.btn-outline-primary{--bs-btn-color:var(--at-accent);--bs-btn-border-color:var(--at-accent);--bs-btn-hover-bg:var(--at-accent);--bs-btn-hover-border-color:var(--at-accent)}
.form-control,.form-select{border-radius:10px;border-color:#d5dce7;background-color:#fff;min-height:46px}
.form-control-sm,.form-select-sm{min-height:40px;font-size:.9375rem}
.form-control:focus,.form-select:focus{border-color:var(--at-accent);box-shadow:0 0 0 4px rgba(10,92,196,.15)}
.form-floating>.form-control,.form-floating>.form-select{min-height:56px}
.form-label,label{font-weight:600;color:var(--at-ink)}
.input-group>.btn{border-radius:0 10px 10px 0}
.accordion{--bs-accordion-border-color:var(--at-line);--bs-accordion-active-bg:var(--at-wash);--bs-accordion-active-color:var(--at-ink);--bs-accordion-btn-focus-box-shadow:0 0 0 4px rgba(10,92,196,.15)}
.accordion-item{border-left:0;border-right:0}
.accordion-button{font-weight:700;color:var(--at-ink);padding:18px 24px;gap:8px}
.accordion-button:not(.collapsed){color:var(--at-accent);box-shadow:inset 3px 0 0 var(--at-accent)}
.accordion-body{padding:24px}
.accordion-body h2,.accordion-body h3{font-size:1.75rem;letter-spacing:-.03em}
.accordion-body ul{padding-left:0;list-style:none;display:grid;gap:8px;margin:12px 0 20px}
.accordion-body ul li{position:relative;padding-left:28px}
.accordion-body ul li::before{content:"";position:absolute;left:4px;top:.5em;width:11px;height:6px;border-left:3px solid var(--at-accent);border-bottom:3px solid var(--at-accent);transform:rotate(-45deg)}
.nav-pills .nav-link{border-radius:999px;font-weight:600;color:var(--at-ink-2)}
.nav-pills .nav-link.active{background:var(--at-accent);color:#fff}
.badge{border-radius:999px;font-weight:600}
.badge.bg-primary,.text-bg-primary{background:var(--at-accent)!important}
.list-group{border-radius:16px;overflow:hidden;border:1px solid var(--at-line);background:#fff}
.list-group-item{border:0;border-bottom:1px solid var(--at-line);padding:14px 18px;font-weight:600;color:var(--at-ink-2)}
.list-group-item:last-child{border-bottom:0}
.list-group-item.active{background:var(--at-wash);color:var(--at-accent);border-color:var(--at-line);box-shadow:inset 3px 0 0 var(--at-accent)}
.list-group-item-action:hover{background:var(--at-wash)}
.table{--bs-table-bg:transparent;--bs-table-hover-bg:var(--at-wash)}
.table>thead th{font-size:.8125rem;text-transform:none;color:var(--at-muted);font-weight:600;border-bottom-color:var(--at-line)}
.table td,.table th{padding:14px 12px;vertical-align:middle}
.alert{border-radius:12px;border:0;border-left:4px solid currentColor}
.alert-info{background:var(--at-wash);color:#0a3f87}
footer{color:var(--at-muted);font-size:.875rem}
footer a{color:var(--at-muted)}
.at-hero{background:var(--at-ink);color:#fff;border-radius:20px;padding:40px 32px;margin-bottom:28px;position:relative;overflow:hidden}
.at-hero::after{content:"";position:absolute;right:-80px;top:-80px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(10,92,196,.55),transparent 70%)}
.at-hero h1{color:#fff;font-size:clamp(28px,4vw,44px);margin:0 0 10px;position:relative}
.at-hero p{color:rgba(255,255,255,.82);max-width:52ch;margin:0 0 20px;position:relative}
.at-hero .btn{position:relative}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:active{transform:none}}
@media (max-width:767px){.card-body,.accordion-body{padding:18px}.card-header{padding:16px 18px!important}body>.container>.container{padding-top:20px}}

.accordion-body ul li{font-size:1rem;font-weight:500;color:var(--at-ink-2)}
.badge.bg-info,.text-bg-info{background:var(--at-wash)!important;color:var(--at-accent)!important}
.d-flex.small.text-muted:has(a[href*="fossbilling.org"]){display:none!important}
#domain-config .nav-link,.nav .nav-link.fs-7{border-radius:999px}
.accordion-body h4{font-size:1.25rem;margin-top:28px!important}
header .navbar{background:transparent!important}
.at-hero h1+p{margin-bottom:24px}
.at-hero .btn-light{--bs-btn-bg:rgba(255,255,255,.12);--bs-btn-border-color:rgba(255,255,255,.25);--bs-btn-color:#fff;--bs-btn-hover-bg:rgba(255,255,255,.2);--bs-btn-hover-color:#fff}
.at-guest .card-body{padding:28px}
.at-guest h2{margin-bottom:8px}
footer .d-flex{flex-wrap:wrap;gap:4px 0}
/* pay:start */
div:has(> blockquote):has(> div > dl){max-width:760px;display:grid;gap:14px;margin:4px 0}
div:has(> blockquote):has(> div > dl) p{margin:0}
div:has(> blockquote):has(> div > dl)>div{background:#fff;border:1px solid var(--at-line);border-radius:16px;padding:20px 22px}
div:has(> blockquote):has(> div > dl)>div:first-child{background:var(--at-ink);border-color:var(--at-ink);color:#fff;position:relative;overflow:hidden}
div:has(> blockquote):has(> div > dl)>div:first-child::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(10,92,196,.6),transparent 70%);pointer-events:none}
div:has(> blockquote):has(> div > dl)>div:first-child dl{position:relative;z-index:1;margin:0;display:grid;grid-auto-flow:column;grid-template-rows:auto auto;grid-template-columns:1fr auto;gap:2px 24px;align-items:end}
div:has(> blockquote):has(> div > dl)>div:first-child dt{font-weight:500;font-size:.8125rem;color:rgba(255,255,255,.72)}
div:has(> blockquote):has(> div > dl)>div:first-child dd{margin:0;font-size:1.0625rem;font-weight:700;color:#fff}
div:has(> blockquote):has(> div > dl)>div:first-child dd:first-of-type{font-size:clamp(28px,4vw,38px);font-weight:900;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
div:has(> blockquote):has(> div > dl)>div:first-child dt:nth-of-type(2),div:has(> blockquote):has(> div > dl)>div:first-child dd:nth-of-type(2){text-align:right}
div:has(> blockquote):has(> div > dl) h3{display:flex;align-items:center;gap:10px;font-size:1.0625rem;margin:0 0 14px;letter-spacing:-.01em}
div:has(> blockquote):has(> div > dl) h3 span{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--at-accent);color:#fff;font-size:.875rem;font-weight:700;flex:none}
div:has(> blockquote):has(> div > dl)>div:nth-child(2) dl{margin:0;display:grid;grid-template-columns:150px 1fr;border:1px solid var(--at-line);border-radius:12px;overflow:hidden}
div:has(> blockquote):has(> div > dl)>div:nth-child(2) dt,div:has(> blockquote):has(> div > dl)>div:nth-child(2) dd{margin:0;padding:12px 16px;border-bottom:1px solid var(--at-line)}
div:has(> blockquote):has(> div > dl)>div:nth-child(2) dt{background:var(--at-bg);color:var(--at-muted);font-weight:500;font-size:.9375rem}
div:has(> blockquote):has(> div > dl)>div:nth-child(2) dd{font-weight:700;color:var(--at-ink);font-size:1.0625rem;user-select:all;font-variant-numeric:tabular-nums}
div:has(> blockquote):has(> div > dl)>div:nth-child(2) dt:last-of-type,div:has(> blockquote):has(> div > dl)>div:nth-child(2) dd:last-of-type{border-bottom:0}
div:has(> blockquote):has(> div > dl)>div:nth-child(3) p{color:var(--at-ink-2);margin-bottom:16px}
div:has(> blockquote):has(> div > dl)>div:nth-child(3) p:last-child{margin:0}
div:has(> blockquote):has(> div > dl) a[href*="wa.me"]{display:inline-flex;align-items:center;gap:8px;background:#1fa855;color:#fff;font-weight:700;text-decoration:none;padding:12px 22px;border-radius:999px;transition:transform 160ms var(--at-ease),background-color .2s}
div:has(> blockquote):has(> div > dl) a[href*="wa.me"]::after{content:"→"}
div:has(> blockquote):has(> div > dl) a[href*="wa.me"]:hover{background:#178f47;color:#fff}
div:has(> blockquote):has(> div > dl) a[href*="wa.me"]:active{transform:scale(.97)}
div:has(> blockquote):has(> div > dl)>blockquote{margin:0;background:var(--at-wash);border-radius:16px;padding:16px 20px;border-left:4px solid var(--at-accent)}
div:has(> blockquote):has(> div > dl)>blockquote p{font-size:.9375rem;color:var(--at-ink-2)}
@media (max-width:575px){div:has(> blockquote):has(> div > dl)>div:nth-child(2) dl{grid-template-columns:1fr}div:has(> blockquote):has(> div > dl)>div:nth-child(2) dt{border-bottom:0;padding-bottom:2px}div:has(> blockquote):has(> div > dl)>div:nth-child(2) dd{padding-top:2px}div:has(> blockquote):has(> div > dl)>div:first-child dl{grid-auto-flow:row;grid-template-columns:1fr}div:has(> blockquote):has(> div > dl)>div:first-child dt:nth-of-type(2),div:has(> blockquote):has(> div > dl)>div:first-child dd:nth-of-type(2){text-align:left}div:has(> blockquote):has(> div > dl)>div:first-child dt:nth-of-type(2){margin-top:10px}}
/* pay:end */
/* flow:start */
/* outer "Productos" card becomes a plain page section */
.card.mb-4:has(.card.border-0 .accordion){background:transparent;border:0;box-shadow:none;overflow:visible}
.card.mb-4:has(.card.border-0 .accordion)>.card-header{background:transparent;border:0;padding:0 0 18px!important}
.card.mb-4:has(.card.border-0 .accordion)>.card-header h1,.card.mb-4:has(.card.border-0 .accordion)>.card-header h2,.card.mb-4:has(.card.border-0 .accordion)>.card-header h3,.card.mb-4:has(.card.border-0 .accordion)>.card-header .card-title{font-size:clamp(26px,3vw,34px)!important;letter-spacing:-.03em}
.card.mb-4:has(.card.border-0 .accordion)>.card-body{padding:0}
.card.border-0:has(> .card-body .accordion){background:transparent;box-shadow:none;border:0;overflow:visible}
.card.border-0:has(> .card-body .accordion)>.card-body{padding:0!important}
/* each step is its own card with a number */
.accordion:has(#products){display:grid;gap:12px;counter-reset:step;border:0}
.accordion:has(#products)>.accordion-item{counter-increment:step;background:#fff;border:1px solid var(--at-line)!important;border-radius:16px!important;overflow:hidden;box-shadow:0 1px 2px rgba(11,20,36,.04)}
.accordion:has(#products)>.accordion-item:has(.accordion-collapse.show){border-color:var(--at-accent)!important;box-shadow:0 0 0 3px rgba(10,92,196,.12),0 8px 24px rgba(11,20,36,.06)}
.accordion:has(#products) .accordion-button{background:#fff;border-radius:0!important;box-shadow:none!important;padding:18px 22px;font-size:1.0625rem}
.accordion:has(#products) .accordion-button>svg.icon{display:none}
.accordion:has(#products) .accordion-button::before{content:counter(step);display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--at-bg);color:var(--at-muted);font-weight:700;font-size:.9375rem;margin-right:12px;flex:none;border:1px solid var(--at-line)}
.accordion:has(#products) .accordion-button:not(.collapsed){background:var(--at-wash);color:var(--at-ink)}
.accordion:has(#products) .accordion-button:not(.collapsed)::before{background:var(--at-accent);border-color:var(--at-accent);color:#fff}
.accordion:has(#products) .accordion-collapse{border-top:1px solid var(--at-line)}
.accordion:has(#products) .accordion-body{padding:24px}
/* step 1: products as tiles */
#products .list-group{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;border:0;background:transparent;border-radius:0;overflow:visible}
#products .list-group-item{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--at-line)!important;border-radius:14px!important;padding:18px 18px;font-size:1.0625rem;font-weight:700;color:var(--at-ink);background:#fff;transition:border-color .2s,box-shadow .2s,transform 160ms var(--at-ease)}
#products .list-group-item .icon{color:var(--at-accent);transition:transform .2s var(--at-ease)}
@media (hover:hover) and (pointer:fine){#products .list-group-item:hover{border-color:var(--at-accent)!important;box-shadow:0 6px 18px rgba(10,92,196,.12)}#products .list-group-item:hover .icon{transform:translateX(4px)}}
#products .list-group-item:active{transform:scale(.98)}
#products h4{font-size:1.125rem;margin:0 0 4px}
#products h4+span p{color:var(--at-muted);margin:0 0 16px}
/* inside steps: section titles and dividers */
.accordion:has(#products) .accordion-body hr{border-color:var(--at-line);opacity:1;margin:22px 0}
.accordion:has(#products) .accordion-body .well{background:var(--at-bg);border-radius:12px;padding:16px}
/* cart table */
.accordion:has(#products) .table{margin:0}
.accordion:has(#products) .table td,.accordion:has(#products) .table th{padding:12px 10px}
.accordion:has(#products) .table tfoot td,.accordion:has(#products) .table tr:last-child td{font-weight:700;color:var(--at-ink)}
/* login/register tabs inside step */
.accordion:has(#products) [role=tablist] .nav-link{border-radius:999px}
.accordion:has(#products) .badge{font-size:.75rem}
#products .list-group-item>span{display:grid;gap:4px}
.at-pname{font-size:1.0625rem;font-weight:700;color:var(--at-ink)}
.at-pprice{font-size:.875rem;font-weight:500;color:var(--at-muted)}
.at-pprice b{color:var(--at-accent);font-weight:700}
.at-pnote{margin:16px 0 0;font-size:.875rem;color:var(--at-muted)}
.at-billing{background:var(--at-wash);border:1px solid #cddcf3;border-radius:16px;padding:20px 22px;margin:0 0 20px}
.at-billing-title{font-weight:700;font-size:1.0625rem;color:var(--at-ink);margin:0 0 4px}
.at-billing-sub{color:var(--at-muted);margin:0 0 16px;font-size:.9375rem}
/* flow:end */
