/* =========================================================
   Matibox style for FOSSBilling - Huraga theme (light version)
   Palette taken from www.matibox.com
   Edit the colors in the :root block below.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  /* Matibox palette */
  --mb-header: #2A035A;       /* top bar */
  --mb-brand-700: #3B0F73;
  --mb-brand-600: #4A148C;    /* links, headings accents */
  --mb-brand-500: #6A1B9A;
  --mb-brand-400: #C9A6F7;
  --mb-brand-100: #E4D4FA;    /* borders */
  --mb-brand-50:  #F3ECFF;    /* soft backgrounds */
  --mb-page:      #FBF9FE;    /* page background */
  --mb-text:      #1F1233;
  --mb-yellow:    #FFC107;    /* main buttons */
  --mb-yellow-hover: #FFB300;
  --mb-on-yellow: #1A0636;

  color-scheme: light;
  --bs-font-sans-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);

  --bs-body-bg: var(--mb-page);
  --bs-body-bg-rgb: 251, 249, 254;
  --bs-body-color: var(--mb-text);
  --bs-body-color-rgb: 31, 18, 51;
  --bs-emphasis-color: #130822;
  --bs-secondary-color: rgba(31, 18, 51, 0.68);
  --bs-tertiary-color: rgba(31, 18, 51, 0.5);
  --bs-secondary-bg: var(--mb-brand-50);
  --bs-tertiary-bg: var(--mb-brand-50);
  --bs-border-color: var(--mb-brand-100);
  --bs-heading-color: var(--mb-header);

  --bs-primary: var(--mb-brand-600);
  --bs-primary-rgb: 74, 20, 140;
  --bs-link-color: var(--mb-brand-600);
  --bs-link-color-rgb: 74, 20, 140;
  --bs-link-hover-color: var(--mb-header);
  --bs-link-hover-color-rgb: 42, 3, 90;
}

html, body { background: var(--mb-page); color: var(--mb-text); font-family: 'Inter', system-ui, sans-serif; }
h1, h2, h3, h4, h5, h6 { color: var(--mb-header); font-weight: 700; }

/* The site is light only: hide the dark/light switch */
.js-theme-toggler { display: none !important; }

/* ---------- Header: full-width purple bar ---------- */
body > .container > header {
  position: relative;
  z-index: 1030;
  margin-bottom: 1.75rem;
}
body > .container > header::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: #462771; /* = rgba(45,10,94,.88) sobre blanco, como www.matibox.com */
  border-bottom: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 30px -10px rgba(26,6,54,.45);
}
body { overflow-x: hidden; }
header .navbar {
  background-color: transparent;
  --bs-navbar-color: #E9DDFB;
  --bs-navbar-hover-color: #ffffff;
  --bs-navbar-active-color: #ffffff;
  --bs-navbar-brand-color: #ffffff;
  --bs-navbar-brand-hover-color: #ffffff;
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.35);
}
header .navbar-nav .nav-link,
header .navbar-nav .nav-link.dropdown-toggle { color: #E9DDFB !important; }
header .navbar-nav .nav-link:hover,
header .navbar-nav .nav-link:focus,
header .navbar-nav .nav-link.active,
header .navbar-nav .show > .nav-link { color: #ffffff !important; }
header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
header .nav-link.active { color: #ffffff !important; font-weight: 600; }
header .btn-outline-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-border-color: rgba(255, 255, 255, 0.55);
  --bs-btn-hover-color: var(--mb-on-yellow);
  --bs-btn-hover-bg: var(--mb-yellow);
  --bs-btn-hover-border-color: var(--mb-yellow);
}
/* Show the white logo on the purple bar (desktop). On phones the company name is shown instead. */
header img.hide-theme-dark { display: none !important; }
@media (min-width: 576px) {
  [data-bs-theme] header img.hide-theme-light { display: block !important; }
}

/* ---------- Buttons ---------- */
.btn { border-radius: 0.75rem; font-weight: 600; }
.btn-primary {
  --bs-btn-color: var(--mb-on-yellow);
  --bs-btn-bg: var(--mb-yellow);
  --bs-btn-border-color: var(--mb-yellow);
  --bs-btn-hover-color: var(--mb-on-yellow);
  --bs-btn-hover-bg: var(--mb-yellow-hover);
  --bs-btn-hover-border-color: var(--mb-yellow-hover);
  --bs-btn-active-color: var(--mb-on-yellow);
  --bs-btn-active-bg: var(--mb-yellow-hover);
  --bs-btn-active-border-color: var(--mb-yellow-hover);
  --bs-btn-disabled-color: var(--mb-on-yellow);
  --bs-btn-disabled-bg: var(--mb-yellow);
  --bs-btn-disabled-border-color: var(--mb-yellow);
  --bs-btn-focus-shadow-rgb: 255, 193, 7;
}
.btn-outline-primary {
  --bs-btn-color: var(--mb-brand-600);
  --bs-btn-border-color: var(--mb-brand-500);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--mb-brand-600);
  --bs-btn-hover-border-color: var(--mb-brand-600);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--mb-brand-700);
  --bs-btn-active-border-color: var(--mb-brand-700);
  --bs-btn-focus-shadow-rgb: 106, 27, 154;
}
.text-bg-primary, .bg-primary { background-color: var(--mb-brand-600) !important; }

/* ---------- Cards, login box ---------- */
.card {
  --bs-card-bg: #ffffff;
  --bs-card-border-color: var(--mb-brand-100);
  --bs-card-cap-bg: var(--mb-brand-50);
  --bs-card-border-radius: 1rem;
  border-radius: 1rem;
  box-shadow: 0 8px 30px -12px rgba(74, 20, 140, 0.18);
}
.card-header { color: var(--mb-header); font-weight: 600; }
.page-login .card, .page-signup .card, .page-password-reset .card {
  border-top: 4px solid var(--mb-brand-500);
}

/* ---------- Forms ---------- */
.form-control, .form-select, .input-group-text {
  border: 1px solid #D3BDF3;
  border-radius: 0.75rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--mb-brand-500);
  box-shadow: 0 0 0 0.2rem rgba(106, 27, 154, 0.18);
}
.form-check-input:checked { background-color: var(--mb-brand-600); border-color: var(--mb-brand-600); }
.form-label { font-weight: 500; }

/* ---------- Side menu ---------- */
.offcanvas-item > a { color: var(--mb-brand-700); font-weight: 500; }
.offcanvas-item:hover { background: var(--mb-brand-50); }
.offcanvas-item.active { background: var(--mb-brand-50); box-shadow: inset 3px 0 0 var(--mb-brand-600); }
.offcanvas-item.active > a, .offcanvas-item > a:hover { color: var(--mb-brand-600); }

/* ---------- Tables ---------- */
.table {
  --bs-table-border-color: var(--mb-brand-100);
  --bs-table-striped-bg: rgba(243, 236, 255, 0.5);
  --bs-table-hover-bg: var(--mb-brand-50);
}
.card-body table > thead > tr > th { color: var(--mb-brand-600); }

/* ---------- Tabs, dropdowns, lists, pagination, breadcrumb ---------- */
.nav-pills { --bs-nav-pills-link-active-bg: var(--mb-brand-600); --bs-nav-pills-link-active-color: #ffffff; }
.nav-tabs { --bs-nav-tabs-link-active-color: var(--mb-brand-600); --bs-nav-tabs-border-color: var(--mb-brand-100); }
.dropdown-menu { --bs-dropdown-border-color: var(--mb-brand-100); --bs-dropdown-link-hover-bg: var(--mb-brand-50); --bs-dropdown-link-active-bg: var(--mb-brand-600); border-radius: 0.75rem; }
.list-group { --bs-list-group-border-color: var(--mb-brand-100); --bs-list-group-active-bg: var(--mb-brand-600); --bs-list-group-active-border-color: var(--mb-brand-600); }
.pagination { --bs-pagination-color: var(--mb-brand-600); --bs-pagination-hover-color: var(--mb-header); --bs-pagination-hover-bg: var(--mb-brand-50); --bs-pagination-active-bg: var(--mb-brand-600); --bs-pagination-active-border-color: var(--mb-brand-600); --bs-pagination-border-color: var(--mb-brand-100); }
.breadcrumb-item.active { color: var(--mb-brand-600); }
.accordion { --bs-accordion-active-bg: var(--mb-brand-50); --bs-accordion-active-color: var(--mb-header); --bs-accordion-border-color: var(--mb-brand-100); }
.modal-content { border-radius: 1rem; }
.invoice-gateway:hover, .invoice-gateway:has(.btn-check:checked) { border-color: var(--mb-brand-500); }
.email-list .list-group-item.active { border-left-color: var(--mb-brand-600); background: var(--mb-brand-50); }

footer, #footer { border-color: var(--mb-brand-100); }
::selection { background: var(--mb-brand-500); color: #ffffff; }

/* =========================================================
   Footer
   ========================================================= */
.mb-footer { background: #1A0636; color: #D9C7F5; font-size: 0.875rem; margin-top: 3rem; width: 100%; flex: 0 0 100%; }
.mb-footer-accent { height: 4px; background: linear-gradient(90deg, #FFC107, #6A1B9A, #6366f1); }
.mb-footer-inner { max-width: 1280px; margin: 0 auto; padding: 4rem 1.5rem 2rem; }
.mb-footer-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 992px) { .mb-footer-grid { grid-template-columns: 4fr 8fr; } .mb-footer-nav { padding-left: 2rem; } }
.mb-footer-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
@media (min-width: 576px) { .mb-footer-nav { grid-template-columns: repeat(3, 1fr); } }
.mb-footer h4 { color: #ffffff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 1.25rem; display: flex; align-items: center; gap: 0.5rem; }
.mb-footer h4::before { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: var(--mb-yellow); }
.mb-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.mb-footer a { color: #D9C7F5; text-decoration: none; transition: color .2s; }
.mb-footer a:hover { color: #ffffff; }
.mb-footer ul a { display: inline-flex; align-items: center; }
.mb-footer ul a::before { content: ""; height: 1px; width: 0; background: var(--mb-yellow); transition: width .2s, margin .2s; }
.mb-footer ul a:hover::before { width: 12px; margin-right: 8px; }
.mb-footer-logo img { display: block; height: 2.75rem; width: auto; }
.mb-footer-logo span { color: #ffffff; font-weight: 800; font-size: 1.5rem; }
.mb-footer-label { margin: 1.75rem 0 0.75rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #B79BE0; }
.mb-footer-social { display: flex; gap: 0.75rem; }
.mb-footer .mb-footer-social a { width: 48px; height: 48px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: #E9DDFB; transition: all .2s; }
.mb-footer .mb-footer-social a:hover { background: var(--mb-yellow); border-color: var(--mb-yellow); color: var(--mb-on-yellow); }
.mb-ic { width: 24px; height: 24px; }
.mb-ic-sm { width: 16px; height: 16px; flex: none; color: var(--mb-brand-400); }
.mb-footer-bottom { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-direction: column-reverse; align-items: center; justify-content: space-between; gap: 1.25rem; font-size: 0.75rem; color: #B79BE0; }
@media (min-width: 768px) { .mb-footer-bottom { flex-direction: row; } }
.mb-footer-bottom p { margin: 0; }
.mb-footer-pay { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; font-weight: 600; color: #E9DDFB; }
.mb-pay-label { font-weight: 500; color: #B79BE0; }
.mb-chip { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); padding: 0.375rem 0.75rem; border-radius: 0.5rem; }
.mb-top { width: 36px; height: 36px; margin-left: 0.25rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: #E9DDFB; cursor: pointer; transition: all .2s; }
.mb-top:hover { background: var(--mb-yellow); border-color: var(--mb-yellow); color: var(--mb-on-yellow); }
.mb-top .mb-ic-sm { color: currentColor; }
body:has(> #mb-footer).d-flex { flex-wrap: wrap; }

/* ---------- Header actions (same look as www.matibox.com) ---------- */
header .navbar-nav { gap: 0.25rem 1.5rem; }
@media (min-width: 768px) {
  header .navbar-nav { align-items: center; }
  header .mb-nav-site { font-size: 0.875rem; font-weight: 500; padding-left: 0; padding-right: 0; }
  header .mb-nav-actions { margin-left: 0.5rem; }
}
header .mb-nav-site:hover { color: var(--mb-brand-400) !important; }
.mb-btn-ghost, .mb-btn-yellow {
  display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none;
  font-size: 0.875rem; font-weight: 600; transition: all .15s ease; white-space: nowrap;
}
.mb-btn-ghost {
  padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-weight: 500;
  color: #E9DDFB; border: 1px solid rgba(255,255,255,.25);
}
.mb-btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,.6); }
.mb-btn-ghost .mb-ic-sm { color: var(--mb-brand-400); }
.mb-btn-yellow {
  padding: 0.625rem 1.25rem; border-radius: 0.75rem;
  background: var(--mb-yellow); color: var(--mb-on-yellow); box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.mb-btn-yellow:hover { filter: brightness(1.06); color: var(--mb-on-yellow); }
header .mb-ic-sm { width: 1.1rem; height: 1.1rem; }

.mb-footer-legal p { margin: 0; }
.mb-footer-legal-links { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .4rem !important; }
.mb-footer-legal-links a { color: #D9C7F5; text-decoration: none; }
.mb-footer-legal-links a:hover { color: #fff; }

/* Sin crédito de FOSSBilling (respaldo si JS está desactivado) */
:is(p, div, small, span, footer):has(> a[href*="fossbilling.org"]):not(:has(*:not(a))) { display: none; }

/* ---------- Selector de idioma (Tom Select) dentro del header ---------- */
header, header .navbar, header .navbar-collapse, header .navbar-nav, header .navbar-nav > li { overflow: visible; }
header .ts-wrapper.js-locale-selector {
  width: 11.5rem; padding: 0; background: transparent !important; border: 1px solid rgba(255,255,255,.35);
  border-radius: .5rem; color: #fff; position: relative;
}
header .ts-wrapper.js-locale-selector .ts-control,
header .ts-wrapper.js-locale-selector .ts-control.locale {
  width: 100%; background: transparent !important; border: 0 !important; box-shadow: none !important;
  color: #fff !important; padding: .35rem 1.75rem .35rem .6rem; min-height: 0; font-size: .875rem;
}
header .ts-wrapper.js-locale-selector .ts-control .item,
header .ts-wrapper.js-locale-selector .ts-control .item div,
header .ts-wrapper.js-locale-selector .ts-control input { color: #fff !important; background: transparent !important; }
header .ts-wrapper.js-locale-selector.single .ts-control::after { border-color: #fff transparent transparent !important; }
header .ts-wrapper.js-locale-selector.single.dropdown-active .ts-control::after { border-color: transparent transparent #fff !important; }
header .ts-wrapper.js-locale-selector .locale-flag { margin-right: .5rem; }
header .ts-dropdown.locale-selector-dropdown {
  z-index: 2000 !important; min-width: 100%; margin-top: .25rem; padding: .25rem 0;
  background: #fff !important; border: 1px solid #E4D4FA; border-radius: .5rem;
  box-shadow: 0 12px 30px rgba(42,3,90,.25); max-height: none;
}
header .ts-dropdown.locale-selector-dropdown .ts-dropdown-content { max-height: 16rem; overflow-y: auto; }
header .ts-dropdown.locale-selector-dropdown .dropdown-item,
header .ts-dropdown.locale-selector-dropdown .option,
header .ts-dropdown.locale-selector-dropdown .option div { color: #1f1535 !important; font-size: .875rem; }
header .ts-dropdown.locale-selector-dropdown .active,
header .ts-dropdown.locale-selector-dropdown .option:hover { background: #F3ECFF !important; color: #2A035A !important; }
header .ts-dropdown.locale-selector-dropdown .option, header .ts-dropdown.locale-selector-dropdown .dropdown-item { opacity: 1 !important; font-weight: 500; }

/* Logo y altura iguales a www.matibox.com */
header .navbar { min-height: 5rem; padding-top: 0 !important; padding-bottom: 0 !important; }
header .mb-brand { padding: 0; margin-right: 1rem; }
header .mb-logo { height: 2.75rem; width: auto; display: block; transition: transform .2s; }
header .mb-brand:hover .mb-logo { transform: scale(1.05); }