/* ============================================================
   MECARD — Custom Theme
   Primary   #0A2440  (texts, headings, footer, sidebar)
   Accent    #16B8A0  (buttons, links, icons, hovers)
   BG        #FFFFFF  (main)  /  #F8FAFC (secondary sections)
   Button text: #0A2440 on accent bg (~6:1 contrast — WCAG AA ✓)
   ============================================================ */

/* ---- CSS Variables ---- */
:root {
  --clr-primary:        #0A2440;
  --clr-accent:         #16B8A0;
  --clr-accent-dark:    #129e89;   /* hover / active state */
  --clr-accent-light:   rgba(22, 184, 160, 0.12);
  --clr-bg:             #FFFFFF;
  --clr-bg-secondary:   #F8FAFC;
  --clr-text-on-accent: #0A2440;   /* text over accent buttons — 6:1 contrast */
}

/* =============================================================
   GLOBAL
   ============================================================= */

body {
  background-color: var(--clr-bg-secondary);
  color: var(--clr-primary);
}

/* =============================================================
   TYPOGRAPHY
   ============================================================= */

h1, h2, h3, h4, h5, h6,
.card-title,
.header {
  color: var(--clr-primary) !important;
}

a {
  color: var(--clr-accent);
}

a:hover,
a:focus {
  color: var(--clr-accent-dark);
  text-decoration: none;
}

/* Utility overrides */
.text-info {
  color: var(--clr-accent) !important;
}

.text-primary {
  color: var(--clr-primary) !important;
}

/* ".text-red" was used for forgot-password link — remap to accent */
.text-red {
  color: var(--clr-accent) !important;
}

.text-red:hover {
  color: var(--clr-accent-dark) !important;
}

/* =============================================================
   SIDEBAR
   ============================================================= */

.off-canvas-sidebar,
.sidebar {
  background: var(--clr-primary) !important;
}

/* Pseudo-element overlay (data-color=brown sets this) */
.off-canvas-sidebar[data-color=brown]:after,
.sidebar[data-color=brown]:after {
  background: var(--clr-primary) !important;
}

/* Logo text */
.off-canvas-sidebar .logo .simple-text,
.sidebar .logo .simple-text {
  color: #ffffff !important;
}

/* Divider lines inside sidebar */
.sidebar hr {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Nav links — default */
.off-canvas-sidebar .nav li > a,
.off-canvas-sidebar .nav li > a i,
.sidebar .nav li > a,
.sidebar .nav li > a i {
  color: rgba(255, 255, 255, 0.72) !important;
  opacity: 1;
}

/* Nav links — hover / focus */
.off-canvas-sidebar .nav li:hover:not(.active) > a,
.off-canvas-sidebar .nav li:focus:not(.active) > a,
.sidebar .nav li:hover:not(.active) > a,
.sidebar .nav li:focus:not(.active) > a {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #ffffff !important;
  border-radius: 4px;
}

/* Nav links — ACTIVE (data-active-color=danger was white; remap to accent) */
.off-canvas-sidebar[data-active-color=danger] .nav li.active > a,
.off-canvas-sidebar[data-active-color=danger] .nav li.active > a i,
.off-canvas-sidebar[data-active-color=danger] .nav li.active > a[data-toggle=collapse],
.off-canvas-sidebar[data-active-color=danger] .nav li.active > a[data-toggle=collapse] i,
.off-canvas-sidebar[data-active-color=danger] .nav li.active > a[data-toggle=collapse] ~ div > ul > li.active .sidebar-mini-icon,
.off-canvas-sidebar[data-active-color=danger] .nav li.active > a[data-toggle=collapse] ~ div > ul > li.active > a,
.sidebar[data-active-color=danger] .nav li.active > a,
.sidebar[data-active-color=danger] .nav li.active > a i,
.sidebar[data-active-color=danger] .nav li.active > a[data-toggle=collapse],
.sidebar[data-active-color=danger] .nav li.active > a[data-toggle=collapse] i,
.sidebar[data-active-color=danger] .nav li.active > a[data-toggle=collapse] ~ div > ul > li.active .sidebar-mini-icon,
.sidebar[data-active-color=danger] .nav li.active > a[data-toggle=collapse] ~ div > ul > li.active > a {
  color: var(--clr-accent) !important;
  opacity: 1;
}

/* User section text inside sidebar */
.off-canvas-sidebar .user .info a span,
.off-canvas-sidebar .user .nav .sidebar-mini-icon,
.off-canvas-sidebar .user .nav .sidebar-normal,
.sidebar .user .info a span,
.sidebar .user .nav .sidebar-mini-icon,
.sidebar .user .nav .sidebar-normal {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* Sidebar dropdown (NEGOCIO ACTIVO) */
.sidebar .user-info .text-muted {
  color: rgba(255, 255, 255, 0.45) !important;
}

/* Sidebar dropdown menu (inside light dropdown card) */
.sidebar .dropdown-menu .dropdown-header {
  color: var(--clr-primary);
}

.sidebar .dropdown-menu .dropdown-item.active,
.sidebar .dropdown-menu .dropdown-item:active {
  background-color: var(--clr-accent) !important;
  color: var(--clr-text-on-accent) !important;
}

/* =============================================================
   NAVBAR (top bar)
   ============================================================= */

.navbar .navbar-brand {
  color: var(--clr-primary) !important;
  font-weight: 700;
}

.navbar-transparent .navbar-brand,
.navbar-transparent .nav-link {
  color: var(--clr-primary) !important;
}

/* =============================================================
   CARDS
   ============================================================= */

.card {
  background-color: var(--clr-bg) !important;
}

.card-header {
  background-color: var(--clr-bg) !important;
}

/* Subtle shadow for a clean, professional look */
.card {
  box-shadow: 0 2px 12px rgba(10, 36, 64, 0.08) !important;
  border: 1px solid rgba(10, 36, 64, 0.06) !important;
}

/* Auth cards (login / register) */
.login-page .card-login,
.register-page .card-signup {
  box-shadow: 0 8px 32px rgba(10, 36, 64, 0.14) !important;
  border-radius: 12px;
}

/* =============================================================
   BUTTONS — Primary action: btn-info → Accent
   ============================================================= */

.btn-info {
  background-color: var(--clr-accent) !important;
  border-color: var(--clr-accent) !important;
  color: var(--clr-text-on-accent) !important;
  font-weight: 600;
}

.btn-info.active,
.btn-info.active:focus,
.btn-info.active:hover,
.btn-info:active,
.btn-info:active:focus,
.btn-info:active:hover,
.btn-info:focus,
.btn-info:hover,
.show > .btn-info.dropdown-toggle,
.show > .btn-info.dropdown-toggle:focus,
.show > .btn-info.dropdown-toggle:hover {
  background-color: var(--clr-accent-dark) !important;
  border-color: var(--clr-accent-dark) !important;
  color: var(--clr-text-on-accent) !important;
  box-shadow: 0 4px 14px rgba(22, 184, 160, 0.35) !important;
}

.btn-info.btn-simple {
  color: var(--clr-accent) !important;
  border-color: var(--clr-accent) !important;
  background-color: transparent !important;
}

.btn-info.btn-simple:hover,
.btn-info.btn-simple:focus,
.btn-info.btn-simple:active {
  color: var(--clr-accent-dark) !important;
  border-color: var(--clr-accent-dark) !important;
  background-color: transparent !important;
}

.btn-info.btn-link {
  color: var(--clr-accent) !important;
  background-color: transparent !important;
}

.btn-info.btn-link:hover,
.btn-info.btn-link:focus {
  color: var(--clr-accent-dark) !important;
}

/* Disabled state */
.btn-info.disabled,
.btn-info:disabled,
.btn-info[disabled] {
  background-color: var(--clr-accent) !important;
  border-color: var(--clr-accent) !important;
  opacity: 0.6;
}

/* =============================================================
   BUTTONS — Google / OAuth (btn-outline-danger)
   Remap to a clean neutral outline on auth pages
   ============================================================= */

.login-page .btn-outline-danger,
.register-page .btn-outline-danger {
  background-color: #ffffff !important;
  border-color: #d1d9e0 !important;
  color: var(--clr-primary) !important;
}

.login-page .btn-outline-danger:hover,
.login-page .btn-outline-danger:focus,
.register-page .btn-outline-danger:hover,
.register-page .btn-outline-danger:focus {
  background-color: var(--clr-bg-secondary) !important;
  border-color: var(--clr-primary) !important;
  color: var(--clr-primary) !important;
  box-shadow: none !important;
}

/* =============================================================
   BUTTONS — btn-primary: Primary bg color
   ============================================================= */

.btn-primary {
  background-color: var(--clr-primary) !important;
  border-color: var(--clr-primary) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #0d2e53 !important;
  border-color: #0d2e53 !important;
  color: #ffffff !important;
}

/* =============================================================
   FORMS & INPUTS
   ============================================================= */

.form-control:focus {
  border-color: var(--clr-accent) !important;
  box-shadow: 0 0 0 3px rgba(22, 184, 160, 0.15) !important;
}

.input-group-text {
  color: var(--clr-accent) !important;
  border-color: #e3e9ef !important;
  background-color: #f9fbfc !important;
}

/* Input border */
.form-control {
  border-color: #dce3ea;
  color: var(--clr-primary);
}

.form-control::placeholder {
  color: #a8b5c2;
}

/* =============================================================
   ALERTS
   ============================================================= */

.alert-info {
  background-color: var(--clr-accent-light) !important;
  border-color: var(--clr-accent) !important;
  color: var(--clr-primary) !important;
}

.alert-info .alert-text,
.alert-info strong {
  color: var(--clr-primary) !important;
}

/* =============================================================
   DROPDOWNS
   ============================================================= */

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--clr-accent) !important;
  color: var(--clr-text-on-accent) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--clr-accent-light) !important;
  color: var(--clr-primary) !important;
}

/* =============================================================
   BADGES
   ============================================================= */

.badge-info {
  background-color: var(--clr-accent) !important;
  color: var(--clr-text-on-accent) !important;
}

.badge-primary {
  background-color: var(--clr-primary) !important;
  color: #ffffff !important;
}

/* =============================================================
   FOOTER
   ============================================================= */

.footer {
  background-color: var(--clr-primary) !important;
  color: rgba(255, 255, 255, 0.82);
}

.footer a,
.footer .footer-link {
  color: var(--clr-accent) !important;
}

.footer a:hover,
.footer .footer-link:hover {
  color: var(--clr-accent-dark) !important;
}

/* =============================================================
   CARD FOOTER LINKS (e.g. "¿Olvidaste tu contraseña?")
   ============================================================= */

.card-footer a,
.card-footer .footer-link {
  color: var(--clr-accent) !important;
}

.card-footer a:hover,
.card-footer .footer-link:hover {
  color: var(--clr-accent-dark) !important;
}

/* =============================================================
   CONTENT WRAPPER BACKGROUNDS
   ============================================================= */

.main-panel > .content {
  background-color: var(--clr-bg-secondary);
  min-height: 100vh;
}

/* =============================================================
   TABLES (if used)
   ============================================================= */

.table thead th {
  color: var(--clr-primary);
  border-bottom-color: rgba(10, 36, 64, 0.15);
}

/* =============================================================
   PAGINATION
   ============================================================= */

.page-item.active .page-link {
  background-color: var(--clr-accent) !important;
  border-color: var(--clr-accent) !important;
  color: var(--clr-text-on-accent) !important;
}

.page-link {
  color: var(--clr-accent) !important;
}

.page-link:hover {
  color: var(--clr-accent-dark) !important;
  background-color: var(--clr-accent-light) !important;
}

/* =============================================================
   BOOTSTRAP SWITCHES
   ============================================================= */

.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off {
  background-color: var(--clr-primary) !important;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
  background: var(--clr-accent) !important;
}

/* =============================================================
   CARD-USER (profile page) — header image overlay
   ============================================================= */

.card-user .image::after {
  background: linear-gradient(
    to bottom,
    rgba(10, 36, 64, 0.55),
    rgba(10, 36, 64, 0.05)
  );
}

/* =============================================================
   BUTTONS — btn-outline-primary
   ============================================================= */

.btn-outline-primary {
  border-color: var(--clr-primary) !important;
  color: var(--clr-primary) !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--clr-primary) !important;
  color: #ffffff !important;
  border-color: var(--clr-primary) !important;
}

/* =============================================================
   BUTTONS — btn-outline-secondary: subtle accent on hover
   ============================================================= */

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--clr-accent-light) !important;
  border-color: var(--clr-accent) !important;
  color: var(--clr-primary) !important;
}

/* =============================================================
   MISC OVERRIDES
   ============================================================= */

/* Sidebar mini icon color (nc-icon) */
.sidebar-mini-icon .nc-icon {
  color: var(--clr-accent) !important;
}

/* nc-icon text-primary in sidebar should be accent */
.sidebar .text-primary {
  color: var(--clr-accent) !important;
}

/* Scrollbar on sidebar (webkit) */
.sidebar .sidebar-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Auth page register/login "¿No tienes cuenta?" link */
.login-page a.text-info,
.register-page a.text-info {
  color: var(--clr-accent) !important;
  font-weight: 600;
}

.login-page a.text-info:hover,
.register-page a.text-info:hover {
  color: var(--clr-accent-dark) !important;
  text-decoration: underline;
}

/* btn-white with text-info (dashboard upgrade button) */
.btn.btn-white.text-info {
  color: var(--clr-primary) !important;
  border: 1px solid var(--clr-accent) !important;
}

.btn.btn-white.text-info:hover {
  background-color: var(--clr-accent) !important;
  color: var(--clr-text-on-accent) !important;
}

/* Sidebar text-info icon (facturación) */
.sidebar .nc-icon.text-primary {
  color: var(--clr-accent) !important;
}