/* =====================================================================
   CableAZUL · estilo de la tienda (FOSSBilling, área de clientes)
   Se inyecta con Apache (mod_substitute) después del CSS del tema,
   así sobrevive a las actualizaciones de FOSSBilling.
   ===================================================================== */

:root,
[data-bs-theme="light"] {
  --ca-azul: #0b5fff;
  --ca-azul-osc: #06327f;
  --ca-cian: #22c3ee;
  --ca-texto: #1d2433;
  --ca-texto-2: #4a5568;
  --ca-suave: #f3f6fb;
  --ca-borde: #dfe5ef;
  --ca-tarjeta: #ffffff;
  --ca-radio: 14px;
  --ca-degradado: linear-gradient(135deg, var(--ca-azul-osc), var(--ca-azul) 60%, var(--ca-cian));

  --bs-body-font-family: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-bg: var(--ca-suave);
  --bs-body-bg-rgb: 243, 246, 251;
  --bs-body-color: var(--ca-texto);
  --bs-body-color-rgb: 29, 36, 51;
  --bs-secondary-color: var(--ca-texto-2);
  --bs-tertiary-bg: #eaf0fa;
  --bs-border-color: var(--ca-borde);
  --bs-primary: var(--ca-azul);
  --bs-primary-rgb: 11, 95, 255;
  --bs-primary-text-emphasis: var(--ca-azul-osc);
  --bs-primary-bg-subtle: #e3edff;
  --bs-primary-border-subtle: #b6cdff;
  --bs-link-color: var(--ca-azul);
  --bs-link-color-rgb: 11, 95, 255;
  --bs-link-hover-color: var(--ca-azul-osc);
  --bs-link-hover-color-rgb: 6, 50, 127;
  --bs-border-radius: .6rem;
  --bs-border-radius-lg: var(--ca-radio);
  --bs-focus-ring-color: rgba(11, 95, 255, .25);
}

[data-bs-theme="dark"] {
  --ca-azul: #4d8bff;
  --ca-texto: #e8ecf3;
  --ca-texto-2: #b4bccb;
  --ca-suave: #0b0e13;
  --ca-borde: #2a3242;
  --ca-tarjeta: #12171f;
  --ca-degradado: linear-gradient(135deg, #041c4a, #0a4fd6 60%, #1597c4);

  --bs-body-bg: var(--ca-suave);
  --bs-body-bg-rgb: 11, 14, 19;
  --bs-body-color: var(--ca-texto);
  --bs-body-color-rgb: 232, 236, 243;
  --bs-secondary-color: var(--ca-texto-2);
  --bs-tertiary-bg: #161c26;
  --bs-border-color: var(--ca-borde);
  --bs-primary: var(--ca-azul);
  --bs-primary-rgb: 77, 139, 255;
  --bs-primary-text-emphasis: #9cbcff;
  --bs-primary-bg-subtle: #0d1d3d;
  --bs-primary-border-subtle: #1d3b78;
  --bs-link-color: var(--ca-azul);
  --bs-link-color-rgb: 77, 139, 255;
  --bs-link-hover-color: #9cbcff;
  --bs-link-hover-color-rgb: 156, 188, 255;
}

/* --- Base ------------------------------------------------------------- */
body {
  background: var(--ca-suave);
  color: var(--ca-texto);
  -webkit-font-smoothing: antialiased;
}
/* Franja de marca arriba, como el degradado de la web */
body::before {
  content: "";
  display: block;
  height: 5px;
  background: var(--ca-degradado);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ca-texto);
}

/* --- Cabecera --------------------------------------------------------- */
header .navbar {
  background: var(--ca-tarjeta);
  border: 1px solid var(--ca-borde);
  border-radius: var(--ca-radio);
  margin-top: 1rem;
  margin-bottom: 1.25rem;
  padding: .55rem .9rem !important;
  box-shadow: 0 6px 24px rgba(6, 50, 127, .06);
}
header .navbar-brand img { height: 34px !important; width: auto; }
header .navbar .nav-link {
  font-weight: 500;
  color: var(--ca-texto);
  border-radius: 999px;
  padding: .45rem .95rem !important;
  transition: background .15s, color .15s;
}
header .navbar .nav-link:hover { background: var(--bs-tertiary-bg); color: var(--ca-texto); }
header .navbar .nav-link.active,
header .navbar .nav-link[aria-current="page"] {
  background: var(--ca-texto);
  color: var(--ca-tarjeta) !important;
}
header .navbar .js-theme-toggler.nav-link { padding: .45rem .6rem !important; }
header .navbar .js-theme-toggler:hover { background: transparent; }

/* --- Botones (píldora, como en la web) --------------------------------- */
.btn { border-radius: 999px; font-weight: 600; padding-left: 1.25rem; padding-right: 1.25rem; transition: transform .15s, box-shadow .15s, background .15s; }
.btn-sm { padding-left: .9rem; padding-right: .9rem; }
.btn:not(.btn-link):hover { transform: translateY(-1px); }
.btn-primary {
  --bs-btn-bg: var(--ca-azul);
  --bs-btn-border-color: var(--ca-azul);
  --bs-btn-hover-bg: var(--ca-azul-osc);
  --bs-btn-hover-border-color: var(--ca-azul-osc);
  --bs-btn-active-bg: var(--ca-azul-osc);
  --bs-btn-active-border-color: var(--ca-azul-osc);
  --bs-btn-disabled-bg: var(--ca-azul);
  --bs-btn-disabled-border-color: var(--ca-azul);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}
.btn-primary:hover { box-shadow: 0 8px 20px rgba(11, 95, 255, .25); }
.btn-outline-primary {
  --bs-btn-color: var(--ca-azul);
  --bs-btn-border-color: var(--ca-azul);
  --bs-btn-hover-bg: var(--ca-azul);
  --bs-btn-hover-border-color: var(--ca-azul);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--ca-azul-osc);
  --bs-btn-active-border-color: var(--ca-azul-osc);
  --bs-btn-active-color: #fff;
  border-width: 2px;
}

/* --- Tarjetas --------------------------------------------------------- */
.card {
  --bs-card-bg: var(--ca-tarjeta);
  --bs-card-border-color: var(--ca-borde);
  --bs-card-border-radius: var(--ca-radio);
  --bs-card-inner-border-radius: calc(var(--ca-radio) - 1px);
  --bs-card-cap-bg: transparent;
  box-shadow: 0 4px 18px rgba(6, 50, 127, .04);
  transition: border-color .15s, box-shadow .15s;
}
.card:hover { border-color: rgba(var(--bs-primary-rgb), .35); box-shadow: 0 10px 30px rgba(11, 95, 255, .08); }
.card-header { border-bottom-color: var(--ca-borde); padding-top: 1rem; padding-bottom: 1rem; }
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5 { margin-bottom: 0; }

/* --- Menú lateral ----------------------------------------------------- */
#sidebarMenu .offcanvas-body {
  background: var(--ca-tarjeta);
  border: 1px solid var(--ca-borde);
  border-radius: var(--ca-radio);
  padding: .5rem;
}
#sidebarMenu .offcanvas-item { border: 0 !important; border-radius: .6rem; }
#sidebarMenu .offcanvas-item > a { color: var(--ca-texto-2); font-weight: 500; border-radius: .6rem; }
#sidebarMenu .offcanvas-item:hover { background: var(--bs-tertiary-bg); }
#sidebarMenu .offcanvas-item.active,
#sidebarMenu .offcanvas-item:has(> a.active) {
  background: rgba(var(--bs-primary-rgb), .1) !important;
  border-left: 0 !important;
}
#sidebarMenu .offcanvas-item.active > a,
#sidebarMenu .nav-link.active { color: var(--ca-azul) !important; font-weight: 600; }

/* --- Formularios ------------------------------------------------------ */
.form-control, .form-select { border-color: var(--ca-borde); background-color: var(--ca-tarjeta); }
.form-control:focus, .form-select:focus { border-color: var(--ca-azul); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .18); }
.form-check-input:checked { background-color: var(--ca-azul); border-color: var(--ca-azul); }
.form-label { font-weight: 600; }

/* --- Tablas, badges, paginación, alertas ------------------------------ */
.table { --bs-table-bg: transparent; --bs-table-hover-bg: rgba(var(--bs-primary-rgb), .04); }
.badge { border-radius: 999px; font-weight: 600; }
.pagination { --bs-pagination-active-bg: var(--ca-azul); --bs-pagination-active-border-color: var(--ca-azul); --bs-pagination-border-radius: 999px; }
.alert { border-radius: var(--ca-radio); }
.dropdown-menu { border-color: var(--ca-borde); border-radius: .8rem; box-shadow: 0 12px 30px rgba(6, 50, 127, .12); }
.dropdown-item { border-radius: .45rem; }
.dropdown-menu { padding: .35rem; }
.breadcrumb { font-size: .9rem; }
.breadcrumb a { text-decoration: none; }

/* Mensaje de bienvenida (showcase del panel) con el degradado de la web */
body.dashboard .alert-info[role="alert"] {
  background: var(--ca-degradado) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 1.5rem 1.75rem;
}
body.dashboard .alert-info[role="alert"] :is(h1, h2, h3, h4, p, a:not(.btn), strong) { color: #fff !important; }
body.dashboard .alert-info[role="alert"] .btn-primary { --bs-btn-bg: #fff; --bs-btn-border-color: #fff; --bs-btn-color: var(--ca-azul-osc); --bs-btn-hover-bg: #fff; --bs-btn-hover-color: var(--ca-azul-osc); }

/* --- Login, registro y recuperar contraseña: fondo de marca ------------ */
body:is(.page-login, .page-signup, .page-password-reset, .page-set-password) {
  background: var(--ca-degradado) fixed;
  min-height: 100vh;
}
body:is(.page-login, .page-signup, .page-password-reset, .page-set-password)::before { display: none; }
body:is(.page-login, .page-signup, .page-password-reset, .page-set-password) .card {
  border: 0;
  box-shadow: 0 24px 60px rgba(4, 20, 60, .35);
}
body:is(.page-login, .page-signup, .page-password-reset, .page-set-password) .card:hover { transform: none; }
/* Sobre el degradado, siempre el logo de letras blancas */
[data-bs-theme="light"] body:is(.page-login, .page-signup, .page-password-reset, .page-set-password) img.hide-theme-light { display: inline-block !important; }
[data-bs-theme="light"] body:is(.page-login, .page-signup, .page-password-reset, .page-set-password) img.hide-theme-dark { display: none !important; }
body:is(.page-login, .page-signup, .page-password-reset, .page-set-password) > .container > .row > div > a,
body:is(.page-login, .page-signup, .page-password-reset, .page-set-password) .text-muted { color: rgba(255, 255, 255, .85) !important; }

/* --- Cajas "bg-light" (p. ej. "¿Aún necesitas ayuda?" en la base de conocimientos) ---
   Bootstrap las deja claras también en modo oscuro: se pasan al tono de marca */
.card.bg-light {
  background: rgba(var(--bs-primary-rgb), .07) !important;
  border: 1px solid rgba(var(--bs-primary-rgb), .2) !important;
  box-shadow: none;
}
.card.bg-light :is(h1, h2, h3, h4, h5, h6) { color: var(--ca-texto); }
.card.bg-light .text-muted { color: var(--ca-texto-2) !important; }
.card.bg-light .btn { white-space: nowrap; flex-shrink: 0; }
[data-bs-theme="dark"] .card.bg-light { background: rgba(var(--bs-primary-rgb), .12) !important; }
[data-bs-theme="dark"] .bg-light:not(.card) { background-color: var(--bs-tertiary-bg) !important; color: var(--ca-texto); }
[data-bs-theme="dark"] .text-dark:not(.btn) { color: var(--ca-texto) !important; }
[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--ca-texto-2); --bs-btn-border-color: var(--ca-borde); --bs-btn-hover-bg: var(--bs-tertiary-bg); --bs-btn-hover-border-color: var(--ca-texto-2); --bs-btn-hover-color: var(--ca-texto); }

/* --- Contenido Markdown (artículos, noticias, textos de productos) ----------
   FOSSBilling usa el CSS de GitHub, con colores fijos de modo claro */
.markdown-body { color: inherit; background: transparent; font-family: inherit; color-scheme: normal; }
.markdown-body a { color: var(--ca-azul); }
.markdown-body :is(h1, h2) { border-bottom-color: var(--ca-borde); }
.markdown-body h6 { color: var(--ca-texto-2); }
.markdown-body hr { background-color: var(--ca-borde); border-bottom-color: var(--ca-borde); height: 1px; }
.markdown-body table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--ca-borde);
  border-radius: 12px;
}
.markdown-body table tr,
.markdown-body table tr:nth-child(2n) { background-color: transparent; border-top: 0; }
.markdown-body table tbody tr:nth-child(2n) { background-color: rgba(var(--bs-primary-rgb), .04); }
.markdown-body table th,
.markdown-body table td {
  color: var(--ca-texto);
  border: 0;
  border-bottom: 1px solid var(--ca-borde);
  padding: 9px 14px;
}
.markdown-body table :is(th, td) + :is(th, td) { border-left: 1px solid var(--ca-borde); }
.markdown-body table tbody tr:last-child td { border-bottom: 0; }
.markdown-body table thead th {
  background: rgba(var(--bs-primary-rgb), .08);
  color: var(--ca-texto-2);
}
.markdown-body table tbody td:first-child { font-weight: 600; }
.markdown-body blockquote {
  color: var(--ca-texto-2);
  background: rgba(var(--bs-primary-rgb), .06);
  border-left: 4px solid var(--ca-azul);
  border-radius: 0 10px 10px 0;
  padding: .75rem 1rem;
}
.markdown-body blockquote strong { color: var(--ca-texto); }
.markdown-body :is(code, tt) {
  color: var(--ca-azul-osc);
  background-color: rgba(var(--bs-primary-rgb), .08);
}
[data-bs-theme="dark"] .markdown-body :is(code, tt) { color: #9cbcff; }
.markdown-body pre { color: var(--ca-texto); background-color: var(--bs-tertiary-bg); border: 1px solid var(--ca-borde); }
.markdown-body pre code { color: inherit; background: transparent; }
.markdown-body kbd { color: var(--ca-texto); background-color: var(--bs-tertiary-bg); }
.markdown-body mark { background-color: rgba(255, 214, 0, .35); color: inherit; }

/* --- Pie -------------------------------------------------------------- */
#footer { color: var(--ca-texto-2) !important; padding-top: 1.25rem; border-top: 1px solid var(--ca-borde); margin-top: 2rem !important; }
#footer a { color: var(--ca-texto-2); }
#footer a:hover { color: var(--ca-azul); }

/* --- Móvil ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  header .navbar { margin-top: .6rem; border-radius: 12px; }
  header .navbar .nav-link.active { display: inline-block; }
}