/* CajaClara — Home (v2)
   Regla: dorado = micro-acento (no fondos grandes)
*/

.cc-home{
  /* Acentos por módulo (vienen de tokens.css) */
  --cc-ac-ventas:      var(--mod-ventas);
  --cc-ac-ventas-2:    var(--mod-ventas-2);

  --cc-ac-productos:   var(--mod-productos);
  --cc-ac-productos-2: var(--mod-productos-2);

  --cc-ac-clientes:    var(--mod-clientes);
  --cc-ac-clientes-2:  var(--mod-clientes-2);

  --cc-ac-compras:     var(--mod-compras);
  --cc-ac-compras-2:   var(--mod-compras-2);

  /* CTA de la home (Ventas) */
  --cc-cta-1: var(--cc-ac-ventas);
  --cc-cta-2: var(--cc-ac-ventas-2);
}

.cc-home .card{ background: var(--cc-surface); }

/* KPI: números tranquilos, alineados */
.cc-kpi{
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* HERO */
.cc-home-hero{
  border: 1px solid rgba(148,163,184,.14);
  background:
    radial-gradient(900px circle at 18% 26%, color-mix(in srgb, var(--cc-brand) 18%, transparent), transparent 60%),
    radial-gradient(900px circle at 90% 0%, rgba(242,178,27,.08), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 52%);
}

html[data-bs-theme="light"] .cc-home-hero{
  border-color: rgba(11,18,32,.12);
  background:
    radial-gradient(900px circle at 18% 26%, color-mix(in srgb, var(--cc-brand) 12%, transparent), transparent 62%),
    radial-gradient(900px circle at 90% 0%, rgba(242,178,27,.06), transparent 70%),
    linear-gradient(180deg, rgba(11,18,32,.02), transparent 65%);
}

.cc-home-mark{
  display:block;
  width: min(280px, 72%);
  height: auto;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.18));
}

.cc-home-lead{
  max-width: 62ch;
  color: rgba(var(--cc-text-rgb), .84);
}

/* Badges */
.cc-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .85rem;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(255,255,255,.04);
  color: rgba(var(--cc-text-rgb), .90);
}
html[data-bs-theme="light"] .cc-badge{
  background: rgba(11,18,32,.03);
  border-color: rgba(11,18,32,.14);
  color: rgba(11,18,32,.84);
}
.cc-badge--soft{ opacity: .95; }
.cc-badge--gold{
  border-color: rgba(242,178,27,.30);
  background: rgba(242,178,27,.06);
  color: rgba(242,178,27,.95);
}

/* Buttons */
.cc-btn-soft{
  border: 1px solid rgba(148,163,184,.18) !important;
  background: rgba(255,255,255,.04) !important;
  color: rgba(var(--cc-text-rgb), .92) !important;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.cc-btn-soft:hover{
  background: rgba(255,255,255,.07) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-brand) 18%, transparent);
  transform: translateY(-1px);
}
.cc-btn-soft:active{ transform: translateY(0); }

html[data-bs-theme="light"] .cc-btn-soft{
  background: rgba(11,18,32,.03) !important;
  border-color: rgba(11,18,32,.14) !important;
  color: rgba(11,18,32,.86) !important;
}
html[data-bs-theme="light"] .cc-btn-soft:hover{ background: rgba(11,18,32,.05) !important; }

/* CTA principal: contraste real */
.cc-btn-hero{
  position: relative;
  border: 1px solid color-mix(in srgb, var(--cc-cta-1) 38%, rgba(148,163,184,.20)) !important;

  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cc-cta-1) 52%, #000),
    color-mix(in srgb, var(--cc-cta-2) 52%, #000)
  ) !important;

  color: rgba(255,255,255,.96) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  box-shadow: 0 18px 44px rgba(0,0,0,.30);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.cc-btn-hero:hover{ transform: translateY(-1px); box-shadow: 0 22px 56px rgba(0,0,0,.36); }
.cc-btn-hero:active{ transform: translateY(0); }
.cc-btn-hero:focus-visible{
  outline: none;
  box-shadow:
    0 22px 56px rgba(0,0,0,.36),
    0 0 0 3px color-mix(in srgb, var(--cc-cta-1) 22%, transparent);
}

/* Micro-acento dorado (joya) */
.cc-btn-hero::after{
  content:"";
  position:absolute;
  top: 10px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--cc-gold);
  box-shadow: 0 0 0 3px rgba(242,178,27,.16);
}

.cc-btn-hero--sm{ padding: 10px 14px !important; font-weight: 750; }

/* Icon tiles */
.cc-ico{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(255,255,255,.04);
  color: rgba(var(--cc-text-rgb), .92);
}
.cc-ico i{ font-size: 1.25rem; }

/* Acentos por módulo (Home) */
.cc-ico--inicio{
  background: color-mix(in srgb, var(--mod-inicio) 14%, transparent);
  border-color: color-mix(in srgb, var(--mod-inicio) 30%, rgba(148,163,184,.14));
  color: var(--mod-inicio);
}
.cc-ico--productos{
  background: color-mix(in srgb, var(--cc-ac-productos) 14%, transparent);
  border-color: color-mix(in srgb, var(--cc-ac-productos) 30%, rgba(148,163,184,.14));
  color: var(--cc-ac-productos);
}
.cc-ico--ventas{
  background: color-mix(in srgb, var(--cc-ac-ventas) 14%, transparent);
  border-color: color-mix(in srgb, var(--cc-ac-ventas) 30%, rgba(148,163,184,.14));
  color: var(--cc-ac-ventas);
}
.cc-ico--clientes{
  background: color-mix(in srgb, var(--cc-ac-clientes) 14%, transparent);
  border-color: color-mix(in srgb, var(--cc-ac-clientes) 30%, rgba(148,163,184,.14));
  color: var(--cc-ac-clientes);
}
.cc-ico--compras{
  background: color-mix(in srgb, var(--cc-ac-compras) 14%, transparent);
  border-color: color-mix(in srgb, var(--cc-ac-compras) 30%, rgba(148,163,184,.14));
  color: var(--cc-ac-compras);
}

/* Cards de módulos: profundidad sutil + foco usable */
.cc-home-modcard{
  position: relative;
  border: 1px solid rgba(148,163,184,.12);
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.cc-home-modcard:hover,
.cc-home-modcard:focus-within{
  transform: translateY(-1px);
  border-color: rgba(148,163,184,.18);
  box-shadow: var(--cc-shadow-soft);
}
.cc-home-modcard::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events:none;
  opacity: .95;
}

/* “Luz” por módulo */
.cc-home-modcard--productos::before{
  background: radial-gradient(700px circle at 18% 0%, color-mix(in srgb, var(--cc-ac-productos) 18%, transparent), transparent 60%);
}
.cc-home-modcard--ventas::before{
  background: radial-gradient(700px circle at 18% 0%, color-mix(in srgb, var(--cc-ac-ventas) 18%, transparent), transparent 60%);
}
.cc-home-modcard--clientes::before{
  background: radial-gradient(700px circle at 18% 0%, color-mix(in srgb, var(--cc-ac-clientes) 18%, transparent), transparent 60%);
}
.cc-home-modcard--compras::before{
  background: radial-gradient(700px circle at 18% 0%, color-mix(in srgb, var(--cc-ac-compras) 18%, transparent), transparent 60%);
}

/* Mobile: un poco más compacto */
@media (max-width: 575.98px){
  .cc-ico{ width: 42px; height: 42px; border-radius: 12px; }
  .cc-ico i{ font-size: 1.15rem; }
}