@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Work+Sans:wght@400;500;600&display=swap");
/* Refineria · WHMCS Twenty-One · Propuesta 02 — aqua con curva navy
   Copiar como css/custom.css del tema (o del tema hijo). Requiere includes/footer-refineria.tpl para el pie. */

/* ==========================================================================
   REFINERIA · WHMCS Twenty-One · NÚCLEO COMÚN
   (estructura, pie fijo abajo y componentes; cada propuesta ajusta las variables)
   ========================================================================== */

:root {
  --rf-ink: #243c47;          /* tinta de marca: texto y logo */
  --rf-ink-dark: #182a32;
  --rf-navy: #283c47;         /* fondo oscuro de marca */
  --rf-aqua: #a0dce3;         /* acento de marca */
  --rf-aqua-mid: #5fbcc7;
  --rf-aqua-soft: #e8f6f8;
  --rf-bg: #f3f7f8;
  --rf-surface: #ffffff;
  --rf-border: #dbe5e9;
  --rf-text: #2b3f49;
  --rf-muted: #6b7f89;
  --rf-danger: #c94a46;
  --rf-warn: #c98a1b;
  --rf-ok: #2f8a6b;
  --rf-radius: 10px;
  --rf-radius-sm: 6px;
  --rf-shadow: 0 1px 2px rgba(36,60,71,.05), 0 4px 14px rgba(36,60,71,.05);
  --rf-font: "Poppins", -apple-system, "Segoe UI", Roboto, sans-serif;
  /* zonas */
  --rf-topbar-bg: var(--rf-ink-dark);
  --rf-topbar-fg: rgba(255,255,255,.85);
  --rf-header-bg: #fff;
  --rf-header-fg: var(--rf-ink);
  --rf-nav-hover-bg: var(--rf-aqua-soft);
  --rf-crumb-bg: var(--rf-aqua-soft);
  --rf-footer-bg: var(--rf-navy);
  --rf-footer-fg: rgba(255,255,255,.78);
}

/* ---------- 1. PIE SIEMPRE ABAJO (arregla la franja gris en páginas cortas) ---------- */
html { min-height: 100%; background-color: var(--rf-footer-bg); }   /* red de seguridad */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > #main-body { flex: 1 0 auto; }
body > #footer, body > .footer { flex-shrink: 0; margin-top: 0; }

/* ---------- 2. Base ---------- */
body, body.primary-bg-color {
  background-color: var(--rf-bg);
  color: var(--rf-text);
  font-family: var(--rf-font);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6,.card-title { color: var(--rf-ink); font-family: var(--rf-font); }
a { color: var(--rf-ink); }
a:hover, a:focus { color: var(--rf-aqua-mid); text-decoration: none; }
::selection { background: var(--rf-aqua); color: var(--rf-ink); }
.text-success { color: var(--rf-ok) !important; }

/* ---------- 3. Barra superior ---------- */
.topbar { background: var(--rf-topbar-bg) !important; color: var(--rf-topbar-fg); font-size: 12.5px; }
.topbar a, .topbar .btn, .topbar i { color: var(--rf-topbar-fg) !important; }
.topbar a:hover { color: var(--rf-aqua) !important; }

/* ---------- 4. Cabecera ---------- */
#header.header, .header { background: var(--rf-header-bg); box-shadow: none; }
.header .navbar, .header .navbar-light { background: transparent; }
.header .navbar-brand img, .header .logo-img { max-height: 40px; width: auto; }
.main-navbar-wrapper .nav-link,
.header .navbar-nav .nav-link {
  color: var(--rf-header-fg) !important;
  font-weight: 500;
  border-radius: var(--rf-radius-sm);
  transition: background .15s, color .15s, box-shadow .15s;
}
.main-navbar-wrapper .nav-link:hover,
.main-navbar-wrapper .active > .nav-link,
.main-navbar-wrapper .show > .nav-link { background: var(--rf-nav-hover-bg); }
.header .search .form-control, .header .search .btn { border-color: var(--rf-border); }
.cart-btn { color: var(--rf-header-fg); border: 1px solid var(--rf-border); border-radius: var(--rf-radius-sm); position: relative; }
.cart-btn .badge { position: absolute; top: -6px; right: -6px; background: var(--rf-aqua); color: var(--rf-ink); border-radius: 10px; font-size: 10px; }

.dropdown-menu { border: 1px solid var(--rf-border); border-radius: var(--rf-radius); box-shadow: 0 10px 30px rgba(36,60,71,.14); padding: 6px; }
.dropdown-item { border-radius: var(--rf-radius-sm); color: var(--rf-text); padding: .45rem .8rem; }
.dropdown-item:hover, .dropdown-item.active { background: var(--rf-aqua-soft); color: var(--rf-ink); }

/* ---------- 5. Migas de pan ---------- */
.master-breadcrumb { background: var(--rf-crumb-bg); border: 0; }
.breadcrumb { background: transparent; margin: 0; }
.breadcrumb-item a { color: var(--rf-ink); }
.breadcrumb-item.active { color: var(--rf-muted); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--rf-muted); }

/* ---------- 6. Formularios ---------- */
.form-control, .custom-select {
  border-color: var(--rf-border);
  border-radius: var(--rf-radius-sm);
  color: var(--rf-text);
}
.form-control:focus, .custom-select:focus {
  border-color: var(--rf-aqua-mid);
  box-shadow: 0 0 0 .2rem rgba(160,220,227,.45);
}
.custom-control-input:checked ~ .custom-control-label::before { background: var(--rf-ink); border-color: var(--rf-ink); }
input[type=checkbox], input[type=radio] { accent-color: var(--rf-ink); }

/* ---------- 7. Botones ---------- */
.btn { border-radius: var(--rf-radius-sm); font-weight: 500; transition: all .15s; }
.btn-primary, .btn-success { background: var(--rf-ink); border-color: var(--rf-ink); color: #fff; }
.btn-primary:hover, .btn-success:hover,
.btn-primary:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled):active {
  background: var(--rf-ink-dark); border-color: var(--rf-ink-dark); color: var(--rf-aqua);
}
.btn-info { background: var(--rf-aqua); border-color: var(--rf-aqua); color: var(--rf-ink); }
.btn-info:hover { background: var(--rf-aqua-mid); border-color: var(--rf-aqua-mid); color: var(--rf-ink); }
.btn-default, .btn-secondary, .btn-outline-secondary {
  background: var(--rf-surface); border: 1px solid var(--rf-border); color: var(--rf-ink);
}
.btn-default:hover, .btn-secondary:hover, .btn-outline-secondary:hover {
  background: var(--rf-aqua-soft); border-color: var(--rf-aqua); color: var(--rf-ink);
}
.btn:focus { box-shadow: 0 0 0 .2rem rgba(160,220,227,.55) !important; }

/* ---------- 8. Tarjetas y barra lateral ---------- */
.card {
  background: var(--rf-surface);
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-radius);
  box-shadow: var(--rf-shadow);
  overflow: hidden;
}
.card-header { background: var(--rf-surface); border-bottom: 1px solid var(--rf-border); }
.card-title { font-weight: 600; font-size: 15px; }
.card-title i:first-child { color: var(--rf-aqua-mid); }
.card-footer { background: var(--rf-bg); border-top: 1px solid var(--rf-border); }
.card-accent-gold, .card-accent-blue, .card-accent-green, .card-accent-asbestos,
.card-accent-midnight, .card-accent-teal { border-top: 3px solid var(--rf-aqua) !important; }
.card-accent-red { border-top: 3px solid var(--rf-danger) !important; }

.list-group-item { border-color: var(--rf-border); color: var(--rf-text); background: transparent; }
.list-group-item i { width: 18px; color: var(--rf-muted); }
.list-group-item-action:hover { background: var(--rf-aqua-soft); color: var(--rf-ink); }
.list-group-item.active { background: var(--rf-aqua-soft); border-color: var(--rf-border); color: var(--rf-ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--rf-ink); }
.list-group-item.active i { color: var(--rf-ink); }
.list-group-item .badge { background: var(--rf-bg); color: var(--rf-muted); border-radius: 20px; padding: 3px 8px; font-weight: 500; }
.list-group-item.active .badge { background: var(--rf-ink); color: #fff; }

/* ---------- 9. Tiles del dashboard ---------- */
.tiles .tile { background: var(--rf-surface); }
.tiles .tile .stat { color: var(--rf-ink); }
.tiles .tile .title { color: var(--rf-muted); letter-spacing: .05em; }
.tiles .tile i { color: var(--rf-aqua); }
.tiles .tile .highlight.bg-color-blue,
.tiles .tile .highlight.bg-color-green,
.tiles .tile .highlight.bg-color-gold { background: var(--rf-aqua) !important; }
.tiles .tile .highlight.bg-color-red { background: var(--rf-danger) !important; }

/* ---------- 10. Tablas (DataTables) ---------- */
.table-container, .dataTables_wrapper { color: var(--rf-text); }
.table-list {
  background: var(--rf-surface);
  border: 1px solid var(--rf-border) !important;
  border-radius: var(--rf-radius);
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
}
.table-list > thead > tr > th {
  background: var(--rf-bg) !important;
  color: var(--rf-muted);
  font-size: 12px;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-top: 0 !important;
  border-bottom: 1px solid var(--rf-border) !important;
  vertical-align: middle !important;
  padding: 12px 14px;
}
.table-list > tbody > tr > td { border-top: 1px solid var(--rf-border); padding: 14px; vertical-align: middle; }
.table-list > tbody > tr:first-child > td { border-top: 0; }
.table-list > tbody > tr:hover > td { background: var(--rf-aqua-soft); }
.table-list .domain-name, .table-list td a { font-weight: 600; color: var(--rf-ink); }
.dataTables_info { color: var(--rf-muted); font-size: 14px; }
.dataTables_filter input { border-radius: 30px; padding-left: 14px; min-width: 240px; }
.pagination .page-link { color: var(--rf-ink); border-color: var(--rf-border); }
.pagination .page-item.active .page-link { background: var(--rf-ink); border-color: var(--rf-ink); color: #fff; }
.pagination .page-item:first-child .page-link { border-radius: var(--rf-radius-sm) 0 0 var(--rf-radius-sm); }
.pagination .page-item:last-child .page-link { border-radius: 0 var(--rf-radius-sm) var(--rf-radius-sm) 0; }
.ssl-lock { color: var(--rf-aqua-mid) !important; }

/* ---------- 11. Estados (pastillas) ---------- */
.label.status, .label {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 30px; padding: 4px 10px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
}
.label.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pending, .status-pending-transfer { background: #fdf2e0 !important; color: var(--rf-warn) !important; }
.status-active, .status-paid, .status-open, .status-completed { background: #e3f4ee !important; color: var(--rf-ok) !important; }
.status-expired, .status-unpaid, .status-cancelled, .status-terminated, .status-suspended, .status-overdue { background: #fbe7e6 !important; color: var(--rf-danger) !important; }
.status-answered, .status-customer-reply, .status-inprogress { background: var(--rf-aqua-soft) !important; color: var(--rf-ink) !important; }

/* ---------- 12. Pie ---------- */
#footer.footer, .footer { background: var(--rf-footer-bg); color: var(--rf-footer-fg); }
.footer a, .footer .nav-link { color: var(--rf-footer-fg); }
.footer a:hover, .footer .nav-link:hover { color: var(--rf-aqua); }
.footer .copyright { color: var(--rf-footer-fg); opacity: .8; }
.footer .btn-icon, .footer .btn {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1); border: 0; color: #fff;
}
.footer .btn-icon:hover, .footer .btn:hover { background: var(--rf-aqua); color: var(--rf-ink); }

/* ---------- 13. Responsive ---------- */
@media (max-width: 991.98px) {
  .dataTables_filter input { min-width: 0; width: 100%; }
}
/* ===== PROPUESTA 2 · CABECERA NAVY (DM Sans) =====
   Cabecera oscura con logo en blanco (filtro CSS, sin cambiar la imagen), menú claro y subrayado aqua. */
:root {
  --rf-font: "DM Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --rf-topbar-bg: #1b2c34;
  --rf-header-bg: var(--rf-navy);
  --rf-header-fg: #ffffff;
  --rf-nav-hover-bg: rgba(255,255,255,.08);
  --rf-crumb-bg: #ffffff;
  --rf-footer-bg: #1b2c34;
}
.header .navbar-brand img, .header .logo-img { filter: brightness(0) invert(1); }
.header .search .form-control { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); color: #fff; }
.header .search .form-control::placeholder { color: rgba(255,255,255,.55); }
.header .search .btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); color: #fff; }
.cart-btn { border-color: rgba(255,255,255,.2); color: #fff; }
.main-navbar-wrapper { border-top: 1px solid rgba(255,255,255,.08); }
.main-navbar-wrapper .active > .nav-link { background: transparent; box-shadow: inset 0 -3px 0 var(--rf-aqua); border-radius: 0; color: #fff !important; }
.master-breadcrumb { border-bottom: 1px solid var(--rf-border); }
.card-header { background: #fbfdfd; }
#footer.footer { padding: 30px 0 24px; }
.footer .copyright { margin-top: 14px; font-size: 12.5px; }

/* ==========================================================================
   PIE REFINERIA COMPACTO (estilo refineria.es) · requiere el footer.tpl adjunto
   ========================================================================== */
:root { --rf-lila: #c49be3; --rf-foot-font: "Work Sans", var(--rf-font); }
html { background-color: #fff; }
#footer.rf-footer {
  background: #fff;
  color: var(--rf-ink);
  font-family: var(--rf-foot-font);
  font-size: 13.5px;
  border-top: 1px solid var(--rf-border);
  padding: 22px 0 16px;
}
.rf-footer a { color: var(--rf-ink); text-decoration: none; }
.rf-footer a:hover { color: var(--rf-aqua-mid); }
.rf-footer ul { list-style: none; margin: 0; padding: 0; }

.rf-f__row { display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; }
.rf-f__mid, .rf-f__bottom { border-top: 1px solid var(--rf-border); margin-top: 14px; padding-top: 12px; }

.rf-f__brand { display: flex; align-items: baseline; gap: 10px 28px; flex-wrap: wrap; }
.rf-f__claim {
  font-size: 22px; font-weight: 500; letter-spacing: -.01em;
  text-decoration: underline !important; text-underline-offset: 4px; text-decoration-thickness: 1.5px;
}
.rf-f__inline { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.rf-f__inline a { font-size: 14px; }
.rf-f__social { gap: 4px 16px; }
.rf-f__social a { font-size: 13px; }
.rf-f__social span { font-size: 11px; margin-left: 2px; display: inline-block; transition: transform .2s; }
.rf-f__social a:hover span { transform: translate(1px, 1px); }

.rf-f__cta { display: flex; align-items: center; gap: 8px; }
.rf-f__phone, .rf-f__wa {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rf-lila); color: var(--rf-ink) !important; font-size: 15px;
  box-shadow: 0 4px 12px rgba(196,155,227,.4); transition: transform .15s;
}
.rf-f__wa { background: var(--rf-aqua-soft); box-shadow: none; font-size: 17px; }
.rf-f__phone:hover, .rf-f__wa:hover { transform: scale(1.07); }
.rf-f__pill {
  display: inline-flex; align-items: center; gap: 3px;
  border: 1.5px solid var(--rf-aqua-soft); border-radius: 30px;
  padding: 7px 14px; font-size: 14.5px;
}
.rf-f__pill b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--rf-ink); color: #fff; font-size: 9.5px; font-weight: 600;
}
.rf-f__pill:hover { border-color: var(--rf-aqua); }

.rf-f__support { color: var(--rf-text); font-size: 13px; }
.rf-f__support i { color: var(--rf-aqua-mid); }
.rf-f__support a { text-decoration: underline; text-underline-offset: 3px; }

.rf-f__meta { color: var(--rf-muted); font-size: 12px; }
.rf-f__meta b { font-weight: 600; color: var(--rf-ink); }
.rf-f__meta a { color: var(--rf-muted); }
.rf-f__eu img { height: 28px; width: auto; display: block; }
.rf-f__eu img.is-missing { display: none; }

@media (max-width: 767.98px) {
  .rf-f__row { flex-direction: column; align-items: flex-start; }
  .rf-f__eu img { height: auto; max-width: 100%; }
}
.rf-f__support a, .rf-f__meta a { white-space: nowrap; }
@media (max-width: 767.98px) { .eu-ph { width: 100% !important; } }

/* ==========================================================================
   CABECERA Y PIE NAVY CON LA CURVA DE MARCA
   ========================================================================== */
/* Curva de marca en la cabecera: forma aqua translúcida + filo aqua sólido */
#header.header {
  background-color: var(--rf-navy);
  /* La curva cruza el hueco entre el menú y el buscador (≈52%–64% del ancho) */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 0 H745 C830 25 890 70 915 120 H0 Z' fill='%23a0dce3' fill-opacity='.16'/><path d='M745 0 C830 25 890 70 915 120' fill='none' stroke='%23a0dce3' stroke-opacity='.45' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}
#header .topbar { position: relative; z-index: 1; }
.main-navbar-wrapper { border-top: 0; }

/* Pie navy */
html { background-color: var(--rf-navy); }
#footer.rf-footer {
  background-color: var(--rf-navy);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'><path d='M1440 200 H600 C760 150 900 70 1010 0 H1440 Z' fill='%23a0dce3' fill-opacity='.07'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: rgba(255,255,255,.88);
  border-top: 3px solid var(--rf-aqua);
}
.rf-footer a { color: #fff; }
.rf-footer a:hover { color: var(--rf-aqua); }
.rf-f__mid, .rf-f__bottom { border-top-color: rgba(255,255,255,.12); }
.rf-f__claim { text-decoration-color: var(--rf-aqua) !important; }
.rf-f__support { color: rgba(255,255,255,.85); }
.rf-f__support i { color: var(--rf-aqua); }
.rf-f__support a { text-decoration-color: rgba(160,220,227,.6); }
.rf-f__wa { background: rgba(255,255,255,.1); color: #fff !important; }
.rf-f__phone { box-shadow: 0 4px 14px rgba(196,155,227,.35); }
.rf-f__pill { border-color: rgba(160,220,227,.45); }
.rf-f__pill:hover { border-color: var(--rf-aqua); }
.rf-f__pill b { background: var(--rf-aqua); color: var(--rf-ink); }
.rf-f__meta, .rf-f__meta a { color: rgba(255,255,255,.62); }
.rf-f__meta b { color: #fff; }
.rf-f__eu { background: #fff; border-radius: 6px; padding: 2px 6px; }
.rf-f__eu img { height: 24px; }

/* ==========================================================================
   VARIANTE: CABECERA AQUA CON CUÑA NAVY (curva de marca a la derecha)
   ========================================================================== */
:root {
  --rf-header-bg: var(--rf-aqua);
  --rf-header-fg: var(--rf-ink);
  --rf-nav-hover-bg: rgba(255,255,255,.45);
}
#header.header {
  background-color: var(--rf-aqua);
  background-image: none;
}
/* La cuña navy ocupa el margen derecho libre (fuera del contenedor), así no pisa el carrito ni el menú */
@media (min-width: 1300px) {
  #header.header {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120' preserveAspectRatio='none'><path d='M20 0 C150 25 255 70 290 120 H300 V0 Z' fill='%23283c47'/></svg>");
    background-repeat: no-repeat;
    background-position: right top;
    background-size: calc((100vw - 1110px) / 2) 100%;
  }
}
.header .navbar-brand img, .header .logo-img { filter: none; }
.header .search .form-control { background: #fff; border-color: transparent; color: var(--rf-text); }
.header .search .form-control::placeholder { color: var(--rf-muted); }
.header .search .btn { background: #fff; border-color: transparent; color: var(--rf-ink); }
.cart-btn { background: #fff; border-color: transparent; color: var(--rf-ink); }
.cart-btn .badge { background: var(--rf-ink); color: #fff; }
.main-navbar-wrapper .active > .nav-link { box-shadow: inset 0 -3px 0 var(--rf-ink); color: var(--rf-ink) !important; }
.main-navbar-wrapper .nav-link:hover { background: var(--rf-nav-hover-bg); }
.master-breadcrumb { border-top: 0; }

/* ---------- Logo: tamaño forzado (Twenty-One lo limita con sus propias reglas) ---------- */
.header .navbar-brand { max-width: none; padding-top: 0; padding-bottom: 0; }
.header .navbar-brand img,
.header .navbar-brand .logo-img,
#header .logo-img {
  height: 48px !important;
  max-height: none !important;
  width: auto !important;
  max-width: none !important;
}
@media (max-width: 991.98px) {
  .header .navbar-brand img,
  .header .navbar-brand .logo-img,
  #header .logo-img { height: 38px !important; }
}
@media (max-width: 575.98px) {
  .header .navbar-brand img,
  .header .navbar-brand .logo-img,
  #header .logo-img { height: 32px !important; }
}

/* ---------- Ancho: menos "encajonado" (cabecera, cuerpo y pie usan el mismo .container) ---------- */
@media (min-width: 1200px) {
  .container,
  #header .container,
  .master-breadcrumb .container,
  #main-body .container,
  #footer .container { max-width: 1440px; padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1800px) {
  .container,
  #header .container,
  .master-breadcrumb .container,
  #main-body .container,
  #footer .container { max-width: 1600px; }
}
/* La cuña navy de la cabecera se adapta al nuevo ancho y solo aparece si hay margen libre */
@media (min-width: 1300px) { #header.header { background-image: none; } }
@media (min-width: 1620px) {
  #header.header {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120' preserveAspectRatio='none'><path d='M20 0 C150 25 255 70 290 120 H300 V0 Z' fill='%23283c47'/></svg>");
    background-repeat: no-repeat;
    background-position: right top;
    background-size: calc((100vw - 1440px) / 2) 100%;
  }
}
@media (min-width: 1800px) {
  #header.header { background-size: calc((100vw - 1600px) / 2) 100%; }
}