/* =========================================================
   FreeLife UI System (Public + App)
   - fl-public: landing DARK premium tech
   - fl-app: dashboard DARK luxury
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
  --fl-green: #22c55e;
  --fl-green-2: #16a34a;
  --fl-cyan: #00e5ff;
  --fl-blue: #4f7cff;

  --fl-radius: 18px;

  /* Dark */
  --fl-dark-bg: #070b14;
  --fl-dark-surface: rgba(255,255,255,.06);
  --fl-dark-surface-2: rgba(255,255,255,.09);
  --fl-dark-border: rgba(255,255,255,.12);
  --fl-dark-text: rgba(255,255,255,.92);
  --fl-dark-muted: rgba(255,255,255,.62);
  --fl-dark-shadow: 0 18px 55px rgba(0,0,0,.55);
  --fl-dark-shadow-soft: 0 12px 30px rgba(0,0,0,.35);
}

/* ---------- Base (both) ---------- */
html, body{ min-height: 100%; }
html{ scroll-behavior: smooth; }

.container{ max-width: 1240px; }

.fl-card{
  border-radius: var(--fl-radius);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.fl-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .2px;
}

/* Buttons: base premium */
.btn{ border-radius: 14px; }
.btn-success{
  background: linear-gradient(90deg, var(--fl-green), var(--fl-green-2)) !important;
  border: none !important;
}
.btn-success:hover{ filter: brightness(1.06); }

.btn-outline-success{
  border-color: rgba(34,197,94,.55) !important;
}

/* Tables: base readability */
.table thead th{ font-weight: 700; }
.table td, .table th{ vertical-align: middle; }

/* =========================================================
   PUBLIC (Landing) — DARK premium tech
   ========================================================= */

.fl-public{
  background:
    radial-gradient(1200px 700px at 10% 10%, rgba(34,197,94,.18), transparent 60%),
    radial-gradient(1000px 700px at 90% 20%, rgba(0,229,255,.12), transparent 55%),
    radial-gradient(900px 700px at 70% 90%, rgba(79,124,255,.08), transparent 55%),
    linear-gradient(180deg, #070b14, #0a1220 45%, #070b14);
  color: var(--fl-dark-text);
  min-height: 100vh;
}

.fl-public h1, .fl-public h2, .fl-public h3, .fl-public h4, .fl-public h5{
  color: rgba(255,255,255,.95);
}
.fl-public .text-muted{ color: var(--fl-dark-muted) !important; }

/* Navbar pública: sticky + blur */
.fl-public .navbar{
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(7,11,20,.86) !important;
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.fl-public .navbar a,
.fl-public .navbar .nav-link{
  color: rgba(255,255,255,.85) !important;
}
.fl-public .navbar .nav-link:hover{
  color: rgba(255,255,255,.98) !important;
}

/* Hero (si usas .fl-hero) */
.fl-public .fl-hero{
  position: relative;
  overflow: hidden;
  padding-top: 56px;
  padding-bottom: 56px;
}
.fl-public .fl-hero::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(600px 300px at 15% 20%, rgba(34,197,94,.22), transparent 60%),
    radial-gradient(600px 300px at 85% 30%, rgba(0,229,255,.12), transparent 65%);
  filter: blur(8px);
  opacity: .9;
  pointer-events:none;
}
.fl-public .fl-hero > .container{ position: relative; z-index: 2; }

.fl-public .fl-hero .display-5{ letter-spacing: -.6px; }
.fl-public .fl-hero .lead{
  color: rgba(255,255,255,.72) !important;
  font-size: 1.12rem;
}

/* Pill en landing (oscuro tech) */
.fl-public .fl-pill{
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(34,197,94,.30);
  background: linear-gradient(90deg, rgba(34,197,94,.16), rgba(0,229,255,.10));
}

/* Mini cards del hero (si las tienes) */
.fl-public .fl-mini-card{
  border-radius: 16px;
  padding: 14px 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 16px 45px rgba(0,0,0,.35);
  transition: transform .18s ease, border-color .18s ease;
}
.fl-public .fl-mini-card:hover{
  transform: translateY(-2px);
  border-color: rgba(34,197,94,.30);
}

/* =========================================================
   CLAVE: en landing, bg-white NO debe ser blanco
   (tú usas bg-white en casi todas las cards del landing)
   ========================================================= */
.fl-public .bg-white{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: rgba(255,255,255,.92) !important;
}

/* Si usaste text-dark en algún card del hero, lo neutralizamos */
.fl-public .text-dark{ color: rgba(255,255,255,.92) !important; }

/* Cards hover */
.fl-public .fl-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 70px rgba(0,0,0,.45) !important;
  border-color: rgba(34,197,94,.25) !important;
}

/* Listas en landing */
.fl-public ol, .fl-public ul{ color: rgba(255,255,255,.78); }

/* Botones en landing */
.fl-public .btn-outline-light{
  border-color: rgba(255,255,255,.32) !important;
  color: rgba(255,255,255,.92) !important;
}
.fl-public .btn-outline-light:hover{
  background: rgba(255,255,255,.10) !important;
}
.fl-public .fl-btn-glow{
  box-shadow: 0 14px 40px rgba(34,197,94,.25);
}

/* Divider (si lo usas) */
.fl-public .fl-divider{
  height: 60px;
  width: 100%;
  background:
    radial-gradient(900px 40px at 50% 0%, rgba(34,197,94,.22), transparent 70%),
    linear-gradient(180deg, transparent, rgba(255,255,255,.03), transparent);
  opacity: .9;
}

/* Inputs landing */
.fl-public .form-control, .fl-public .form-select, .fl-public textarea{
  border-radius: 14px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
}
.fl-public .form-control::placeholder,
.fl-public textarea::placeholder{
  color: rgba(255,255,255,.45) !important;
}
.fl-public .form-control:focus, .fl-public textarea:focus{
  box-shadow: 0 0 0 .25rem rgba(34,197,94,.18) !important;
  border-color: rgba(34,197,94,.55) !important;
}

/* Public tables (si algún día usas tablas en landing) */
.fl-public .table{
  color: rgba(255,255,255,.88);
}
.fl-public .table thead th{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(255,255,255,.14);
}

/* Imágenes: borde premium */
.fl-public img{
  border: 1px solid rgba(255,255,255,.10);
}

/* =========================================================
   APP (Dashboard) — dark luxury (tu actual)
   ========================================================= */

.fl-app{
  background:
    radial-gradient(900px 520px at 10% 10%, rgba(34,197,94,.18), transparent 55%),
    radial-gradient(850px 520px at 92% 18%, rgba(0,229,255,.14), transparent 55%),
    radial-gradient(900px 600px at 70% 92%, rgba(79,124,255,.10), transparent 55%),
    var(--fl-dark-bg);
  color: var(--fl-dark-text);
  min-height: 100vh;
}

.fl-app .text-muted{ color: var(--fl-dark-muted) !important; }
.fl-app h1, .fl-app h2, .fl-app h3, .fl-app h4, .fl-app h5{ color: rgba(255,255,255,.95); }

/* bg-white => glass oscuro dentro del app */
.fl-app .bg-white{
  background: linear-gradient(180deg, var(--fl-dark-surface), rgba(255,255,255,.03)) !important;
  border: 1px solid var(--fl-dark-border) !important;
  box-shadow: var(--fl-dark-shadow-soft) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.fl-app .fl-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--fl-dark-shadow);
  border-color: rgba(34,197,94,.25) !important;
}

.fl-app .fl-pill{
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(34,197,94,.30);
  background: linear-gradient(90deg, rgba(34,197,94,.16), rgba(0,229,255,.10));
}

/* Sidebar/menu */
.fl-app .list-group-item{
  background: rgba(255,255,255,.04) !important;
  color: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  margin-bottom: 8px;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.fl-app .list-group-item:hover{
  transform: translateY(-1px);
  border-color: rgba(34,197,94,.22) !important;
  background: rgba(255,255,255,.07) !important;
}
.fl-app .list-group-item.active{
  border-color: rgba(34,197,94,.35) !important;
  background: linear-gradient(90deg, rgba(34,197,94,.20), rgba(0,229,255,.10)) !important;
}

/* Inputs (App) */
.fl-app .form-control, .fl-app .form-select{
  border-radius: 14px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.92) !important;
}
.fl-app .form-control::placeholder{ color: rgba(255,255,255,.45) !important; }
.fl-app .form-label{ color: rgba(255,255,255,.75) !important; }

/* Tables (App) */
.fl-app .table{
  color: rgba(255,255,255,.88) !important;
}
.fl-app .table thead th{
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.72) !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
}
.fl-app .table td, .fl-app .table th{
  border-color: rgba(255,255,255,.10) !important;
}
.fl-app .table tbody tr{
  background: rgba(255,255,255,.03) !important;
}
.fl-app .table tbody tr:hover{
  background: rgba(255,255,255,.06) !important;
}

/* KPI */
.fl-app .fl-kpi{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  position: relative;
}
.fl-app .fl-kpi::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(34,197,94,.9), rgba(0,229,255,.55));
  opacity: .65;
}
.fl-app .fl-kpi .label{ color: rgba(255,255,255,.66); font-size: 12px; }
.fl-app .fl-kpi .value{ font-size: 28px; font-weight: 900; letter-spacing: .2px; line-height: 1.05; margin-top: 2px; }
.fl-app .fl-kpi .hint{ color: rgba(255,255,255,.55); font-size: 12px; }
.fl-app .fl-kpi .icon{
  width: 46px; height: 46px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, rgba(34,197,94,.20), rgba(0,229,255,.12));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 38px rgba(0,0,0,.25);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .4px;
}

/* Ref link */
.fl-app #refLink{
  font-size: 13px;
  line-height: 1.25;
  color: rgba(255,255,255,.80);
}

/* Topbar actions */
.fl-app .fl-topbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap: wrap;
}

/* Charts */
.fl-app canvas{ filter: drop-shadow(0 16px 40px rgba(0,0,0,.35)); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 991.98px){
  .container{ padding-left: 14px; padding-right: 14px; }

  /* Dashboard: sidebar abajo */
  .fl-app .col-lg-3{ order: 2; }
  .fl-app .col-lg-9{ order: 1; }

  .fl-app .bg-white{ box-shadow: 0 10px 24px rgba(0,0,0,.28) !important; }
  .fl-app .fl-kpi .value{ font-size: 22px; }
  .fl-app .fl-kpi .icon{ width: 42px; height: 42px; border-radius: 12px; }
}

@media (max-width: 575.98px){
  .fl-app .py-4{ padding-top: 16px !important; padding-bottom: 16px !important; }
  .fl-app .p-3{ padding: 14px !important; }

  .fl-app .table{ font-size: 12px; }
  .fl-app .table td, .fl-app .table th{ padding: .55rem .55rem; }

  .fl-app #refLink{ font-size: 12px; }
  .fl-public .display-5{ font-size: 2.05rem; }
  .fl-public .fl-mini-card{ padding: 12px; }
}