:root{
  --brand:#6f42c1;
}
body{ background:#0b0f19; color:#e8eaf0; }
a{ color:#b7a0ff; }
.navbar{ background:rgba(15,18,32,.9)!important; backdrop-filter: blur(10px); }
.card{ background:#0f1630; border:1px solid rgba(255,255,255,.08); }
.btn-brand{ background:var(--brand); border-color:var(--brand); color:white; }
.btn-brand:hover{ filter:brightness(1.05); }
.badge-brand{ background:rgba(111,66,193,.2); color:#d7c9ff; border:1px solid rgba(111,66,193,.35); }
.form-control, .form-select{
  background:#0b1228; border:1px solid rgba(255,255,255,.12); color:#e8eaf0;
}
.form-control:focus, .form-select:focus{
  background:#0b1228; color:#e8eaf0; border-color:rgba(183,160,255,.6);
  box-shadow:0 0 0 .25rem rgba(183,160,255,.15);
}
.table{ color:#e8eaf0; }
.table>:not(caption)>*>*{ background-color:transparent; border-color:rgba(255,255,255,.08); }
.alert{ border:1px solid rgba(255,255,255,.12); }
.hero{
  background: radial-gradient(1200px 600px at 10% 20%, rgba(111,66,193,.35), transparent 60%),
              radial-gradient(900px 500px at 80% 0%, rgba(0,179,255,.2), transparent 60%);
  border:1px solid rgba(255,255,255,.08);
}
.small-muted{ color:rgba(232,234,240,.7); }

/* v2 enhancements */
.glow{
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 10px 40px rgba(111,66,193,.18);
}
.card:hover{ transform: translateY(-1px); transition: .15s ease; }
.btn-brand{ box-shadow: 0 10px 24px rgba(111,66,193,.20); }
.kpi{ background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }


/* -------- v7: Alegre + mejor legibilidad (sin exagerar tamaños) -------- */
:root{
  --bg0:#0b1220;
  --bg1:#0f1a2e;
  --card:#121d33;
  --card2:#0f182a;
  --text:#e9f0ff;
  --muted:#b9c7e6;
  --brand:#7c5cff;
  --brand2:#22c55e;
  --warning:#f59e0b;
}

html, body{
  font-size: 16px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body{
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(124,92,255,.20), transparent 55%),
    radial-gradient(900px 500px at 90% 10%, rgba(34,197,94,.12), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 60%, #0a1020);
}

a{ color: #b7a7ff; }
a:hover{ color: #d7d0ff; }

.text-muted, .small-muted{
  color: var(--muted) !important;
}

p, li{
  line-height: 1.55;
}

h1,h2,h3,h4,h5{
  letter-spacing: .2px;
}

.navbar{
  backdrop-filter: blur(10px);
}

.card, .table, .modal-content{
  border: 1px solid rgba(255,255,255,.08) !important;
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}

.kpi{
  border: 1px solid rgba(255,255,255,.08);
}

.badge-brand{
  background: rgba(124,92,255,.22) !important;
  border: 1px solid rgba(124,92,255,.40);
  color: #efeaff !important;
}

.btn-brand{
  background: linear-gradient(180deg, rgba(124,92,255,1), rgba(124,92,255,.86));
  border: 0;
}
.btn-brand:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.alert{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.alert-info{
  border-color: rgba(124,92,255,.35);
  background: rgba(124,92,255,.10);
}

.alert-warning{
  border-color: rgba(245,158,11,.35);
  background: rgba(245,158,11,.10);
}

.table{
  color: var(--text);
}
.table td, .table th{
  vertical-align: middle;
}
.table-striped>tbody>tr:nth-of-type(odd)>*{
  color: var(--text);
  background-color: rgba(255,255,255,.02) !important;
}

.form-control, .form-select, textarea{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: var(--text) !important;
}
.form-control::placeholder, textarea::placeholder{
  color: rgba(185,199,230,.70) !important;
}
.form-control:focus, .form-select:focus, textarea:focus{
  border-color: rgba(124,92,255,.55) !important;
  box-shadow: 0 0 0 .2rem rgba(124,92,255,.15) !important;
}

footer{
  color: rgba(185,199,230,.85);
}
/* --------------------------------------------------------------------- */


/* -------- v8: detalles alegres + micro-animaciones -------- */
.hero-doodles{
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.hero-doodles svg{
  position:absolute;
  opacity:.18;
  filter: blur(.0px);
  animation: floaty 10s ease-in-out infinite;
}
.hero-doodles .d1{ left:-30px; top:40px; width:180px; animation-duration: 12s; }
.hero-doodles .d2{ right:-40px; top:20px; width:220px; animation-duration: 14s; animation-delay: -2s; }
.hero-doodles .d3{ right:10%; bottom:-60px; width:260px; animation-duration: 16s; animation-delay: -6s; opacity:.12;}

@keyframes floaty{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-10px) rotate(1.5deg); }
}

.fade-in{
  animation: fadeIn .35s ease-out both;
}
@keyframes fadeIn{
  from{ opacity:0; transform: translateY(4px); }
  to{ opacity:1; transform: translateY(0); }
}

/* Subir un poco contraste en textos muy pequeños */
.small, small{ color: rgba(233,240,255,.90); }

/* ===== FIX: textos oscuros -> claros (para fondo oscuro) ===== */
:root{
  --txt: #e9f0ff;
  --muted: rgba(233,240,255,.75);
  --muted2: rgba(233,240,255,.60);
}

/* texto general */
body{ color: var(--txt) !important; }

/* Bootstrap: muted / secondary */
.text-muted,
.small-muted,
small,
.small,
.text-secondary{
  color: var(--muted) !important;
}

/* labels y ayudas */
label,
.form-label,
.form-text{
  color: var(--muted) !important;
}

/* enlaces */
a{ color: rgba(215,208,255,.95); }
a:hover{ color: #ffffff; }

/* tablas */
.table,
.table th,
.table td{
  color: var(--txt) !important;
}
.table .text-muted{ color: var(--muted) !important; }

/* dropdown (menús) */
.dropdown-menu{
  background: rgba(10,16,32,.98) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
.dropdown-item{
  color: var(--txt) !important;
}
.dropdown-item:hover,
.dropdown-item:focus{
  background: rgba(124,92,255,.18) !important;
  color: #fff !important;
}

/* alerts de bootstrap que a veces meten texto oscuro */
.alert{ color: var(--txt) !important; }
.alert a{ color: #fff !important; }

/* placeholders más claros */
.form-control::placeholder,
textarea::placeholder{
  color: var(--muted2) !important;
}

/* ===== FIX EXTRA: títulos (Cómo funciona / Reglas) aún oscuros ===== */

/* fuerza color claro en TODOS los títulos */
h1, h2, h3, h4, h5, h6,
.card-title, .modal-title{
  color: var(--txt) !important;
}

/* si alguna página les pone text-dark, lo anulamos */
.text-dark,
.link-dark{
  color: var(--txt) !important;
}

/* a veces Bootstrap mete negro en listas/accordions/contenidos */
.accordion-button,
.list-group-item,
.nav-tabs .nav-link{
  color: var(--txt) !important;
}

/* si algún bloque usa bg-light y vuelve texto oscuro, lo estabilizamos */
.bg-light, .bg-white{
  color: var(--txt) !important;
}
/* ===== FIX EXTRA: Pack Inicial / items de listas / tarjetas ===== */

/* elementos de list-group suelen venir con texto oscuro */
.list-group-item,
.list-group-item-action{
  background: rgba(255,255,255,.03) !important;
  color: var(--txt) !important;
  border-color: rgba(255,255,255,.10) !important;
}
.list-group-item a{ color: var(--txt) !important; }

/* texto dentro de cards (a veces Bootstrap lo pone oscuro) */
.card, .card *{
  color: inherit;
}
.card-title, .card-text, .card-header{
  color: var(--txt) !important;
}

/* si "Pack Inicial" es enlace o está en tabla */
.table a, .list-group a{
  color: rgba(215,208,255,.95) !important;
}
.table a:hover, .list-group a:hover{
  color: #fff !important;
}

/* ==================== FIX modal (admin) ==================== */

.modal-content{
  background:#0b1228 !important;
  color:#e8eaf0 !important;
  border:1px solid rgba(255,255,255,.10) !important;
}
.modal-header, .modal-footer{
  border-color: rgba(255,255,255,.10) !important;
}
.modal .form-label{
  color:#e8eaf0 !important;
}
.modal .btn-close{
  filter: invert(1);
  opacity: .9;
}
.modal .btn-close:hover{ opacity: 1; }

/* Permitir escribir aunque el backdrop tenga conflicto de capas */
.modal {
  position: fixed !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
}
.modal-dialog, .modal-content {
  pointer-events: auto !important;
}
.modal-backdrop {
  z-index: 99998 !important;
  pointer-events: none !important;
}


/* --- Branding logo --- */
.site-logo{
  height: 34px;
  width: auto;
  border-radius: 6px;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10);
}

/* --- Legal compliance widget (Nominalia-style) --- */
.legal-compliance{
  position: relative;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 14px 16px;
  overflow: hidden;
}

.legal-compliance .lc-label{
  font-size: 12px;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: rgba(232,234,240,.75);
  margin-bottom: 6px;
}

.legal-compliance .lc-percent{
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: #ff4d4d;
}

.legal-compliance .lc-bar{
  margin-top: 10px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  max-width: 240px;
}
.legal-compliance .lc-bar span{
  display:block;
  height:100%;
  background: rgba(255,77,77,.75);
  width:0%;
}

.legal-compliance .lc-links{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.legal-compliance .lc-box{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 210px;
}
.legal-compliance .lc-box:hover{
  border-color: rgba(124,92,255,.35);
  background: rgba(124,92,255,.08);
}

.legal-compliance .lc-icon{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,77,77,.15);
  border: 1px solid rgba(255,77,77,.35);
}

.legal-compliance .lc-title{
  font-size: 12px;
  line-height: 1.1;
  color: rgba(232,234,240,.85);
  font-weight: 700;
}

.legal-compliance .lc-scan{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(232,234,240,.65);
}

@media (min-width: 992px){
  .legal-compliance{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 18px;
  }
  .legal-compliance .lc-links{ margin-top: 0; }
  .legal-compliance .lc-scan{
    margin-top: 0;
    white-space: nowrap;
  }
}

/* ===== BOTONES FLOTANTES ===== */

.floating-buttons {
  position: fixed;
  bottom: 25px;
  right: 25px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9999;
}

.float-btn {
  padding: 12px 20px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  color: white;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  transition: all 0.25s ease;
  text-align: center;
  min-width: 180px;
}

.float-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.35);
}

/* No logeado */
.btn-register {
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
}

.btn-login {
  background: linear-gradient(135deg, #0f172a, #1e293b);
}

/* Logeado */
.btn-points {
  background: linear-gradient(135deg, #16a34a, #22c55e);
}

/* Responsive móvil */
@media (max-width: 576px) {
  .floating-buttons {
    right: 15px;
    bottom: 15px;
  }

  .float-btn {
    font-size: 13px;
    padding: 10px 16px;
    min-width: 160px;
  }
}