/* ==========================================================================
   Ecosistema Eligemicasa — SYNC TOTAL con topbar theme
   Usa SIEMPRE variables del topbar:
   --bg --panel --panel-elevated --subtle --line --txt --muted --brand --brand-2
   El modo se controla con html.light (lo pone el topbar)
   ========================================================================== */

:root{
  --eco-r-xl: 28px;
  --eco-r-lg: 18px;
  --eco-r-md: 14px;

  --eco-border: color-mix(in oklab, var(--line) 78%, transparent);
  --eco-border-strong: color-mix(in oklab, var(--line) 96%, transparent);

  --eco-surface: color-mix(in oklab, var(--panel) 92%, transparent);
  --eco-surface2: color-mix(in oklab, var(--panel-elevated) 92%, transparent);
  --eco-subtle: color-mix(in oklab, var(--subtle) 92%, transparent);

  --eco-grad: linear-gradient(135deg, var(--brand), var(--brand-2));

  --eco-shadow: 0 26px 70px -44px rgba(0,0,0,.80);
  --eco-shadow2: 0 14px 44px -32px rgba(0,0,0,.62);
}

/* Base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color: var(--txt) !important;

  /* FONDO 100% sincronizado */
  background:
    radial-gradient(900px 600px at 12% 6%,
      color-mix(in oklab, var(--brand-2) 22%, transparent),
      transparent 62%),
    radial-gradient(850px 580px at 88% 14%,
      color-mix(in oklab, #38bdf8 12%, transparent),
      transparent 60%),
    radial-gradient(900px 700px at 40% 112%,
      color-mix(in oklab, #22c55e 10%, transparent),
      transparent 55%),
    var(--bg) !important;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Neutraliza clases globales que puedan “pisar” el fondo */
.bg-base-100{ background: transparent !important; }
.text-base-content{ color: var(--txt) !important; }

/* Utilidades mínimas */
.max-w-6xl{ max-width:1180px; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.px-4{ padding-left:18px; padding-right:18px; }
.py-10{ padding-top:48px; padding-bottom:48px; }
.py-8{ padding-top:34px; padding-bottom:34px; }
.py-4{ padding-top:16px; padding-bottom:16px; }
.mt-2{ margin-top:8px; }
.mt-4{ margin-top:16px; }
.mt-6{ margin-top:26px; }
.mt-12{ margin-top:54px; }
.mt-14{ margin-top:66px; }
.mb-6{ margin-bottom:26px; }
.gap-3{ gap:12px; }
.gap-4{ gap:16px; }
.gap-8{ gap:36px; }
.flex{ display:flex; }
.items-center{ align-items:center; }
.items-start{ align-items:flex-start; }
.justify-between{ justify-content:space-between; }
.flex-wrap{ flex-wrap:wrap; }
.grid{ display:grid; }

.text-sm{ font-size:.92rem; }
.text-base{ font-size:1rem; }
.text-lg{ font-size:1.14rem; }
.text-2xl{ font-size:1.86rem; }
.text-3xl{ font-size:2.35rem; }
.md\:text-4xl{ font-size:3.05rem; }
.font-bold{ font-weight:800; }
.font-extrabold{ font-weight:900; }
.leading-tight{ line-height:1.02; }
.opacity-80{ opacity:.82; }
.opacity-90{ opacity:.92; }

@media (min-width: 768px){
  .md\:grid-cols-2{ grid-template-columns: 1fr 1fr; }
  .md\:text-4xl{ font-size:3.2rem; }
}
@media (min-width: 1024px){
  .lg\:grid-cols-2{ grid-template-columns: 1.25fr .75fr; }
  .lg\:grid-cols-3{ grid-template-columns: repeat(3, 1fr); }
}

/* Bordes */
.border{ border:1px solid var(--eco-border) !important; }
.border-base-200{ border-color: var(--eco-border) !important; }
.border-b{ border-bottom:1px solid var(--eco-border) !important; }
.border-t{ border-top:1px solid var(--eco-border) !important; }

/* Superficies */
.bg-base-200\/60{
  background: var(--eco-subtle) !important;
}

/* Breadcrumbs */
.breadcrumbs{
  display:inline-flex;
  border:1px solid var(--eco-border);
  background: var(--eco-surface);
  border-radius: 999px;
  padding: 8px 12px;
}
.breadcrumbs ul{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.breadcrumbs li{ display:flex; align-items:center; gap:10px; }
.breadcrumbs li+li:before{ content:"/"; opacity:.45; font-weight:900; }

/* Cards */
.card{
  background: var(--eco-surface2) !important;
  border: 1px solid var(--eco-border) !important;
  border-radius: var(--eco-r-xl);
  box-shadow: var(--eco-shadow2);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  overflow:hidden;
  position:relative;
}
.card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: var(--eco-r-xl);
  padding:1px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--brand) 62%, transparent),
    color-mix(in oklab, #38bdf8 22%, transparent),
    color-mix(in oklab, #22c55e 18%, transparent)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.55;
  pointer-events:none;
}
.card:hover{
  transform: translateY(-4px);
  border-color: var(--eco-border-strong) !important;
  box-shadow: var(--eco-shadow);
}
.card-body{ padding: 18px 18px 16px; }
.card-title{
  margin:0;
  font-size: 1.06rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--txt);
}

/* Botones */
.btn{
  appearance:none;
  border:1px solid var(--eco-border) !important;
  background: var(--eco-surface) !important;
  color: var(--txt) !important;
  padding: 10px 14px;
  border-radius: var(--eco-r-md);
  font-weight: 900;
  font-size: .95rem;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn:hover{
  transform: translateY(-1px);
  background: var(--eco-subtle) !important;
  border-color: var(--eco-border-strong) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}
.btn:active{ transform: translateY(0); }

.btn-primary{
  border-color: transparent !important;
  background: var(--eco-grad) !important;
  color: #fff !important;
}
.btn-primary:hover{
  box-shadow: 0 18px 48px -26px color-mix(in oklab, var(--brand-2) 60%, #000);
}

.btn-ghost{
  background: transparent !important;
  border-color: var(--eco-border) !important;
}

.btn-link{
  background: transparent !important;
  border: none !important;
  padding: 8px 0 !important;
  border-radius: 12px;
  color: color-mix(in oklab, var(--brand-2) 82%, var(--txt)) !important;
}
.btn-link:hover{ text-decoration: underline; }

.btn-sm{ padding: 8px 12px; font-size:.90rem; border-radius:12px; }

/* Links */
.link{
  color: color-mix(in oklab, var(--brand-2) 82%, var(--txt)) !important;
  font-weight: 900;
}
.link-hover:hover{ text-decoration: underline; }

/* Prose */
.prose{ line-height:1.78; max-width: 76ch; }
.prose h1,.prose h2,.prose h3{ color: var(--txt) !important; }
.prose p,.prose li{ color: var(--muted) !important; }
.prose strong{ color: var(--txt) !important; }
.prose a{ color: color-mix(in oklab, var(--brand-2) 82%, var(--txt)) !important; font-weight:900; }

/* Collapse */
.collapse{
  border:1px solid var(--eco-border) !important;
  background: var(--eco-surface2) !important;
  border-radius: var(--eco-r-xl);
  overflow:hidden;
}
.collapse input{ display:none; }
.collapse-title{ color: var(--txt) !important; }

/* Responsive */
@media (max-width: 420px){
  .btn{ width:100%; justify-content:center; }
}