/* =====================================================================
   POLARISCORE — Theme estándar
   Paleta institucional + hero CSS + patrones compartidos entre vistas.
   Cargar DESPUÉS de argon-dashboard.css y antes de los <style> inline.
   ===================================================================== */

:root {
  /* Paleta institucional */
  --ps-verde:        #00594E;
  --ps-verde-2:      #0e8675;
  --ps-verde-3:      #1ea89a;
  --ps-dorado:       #B5A160;
  --ps-dorado-2:     #D8C486;
  --ps-dorado-soft:  #FFF6DC;

  /* Neutros del sistema */
  --ps-ink:          #1b2b33;
  --ps-ink-soft:     #4b5b54;
  --ps-muted:        #64747a;
  --ps-surface:      #ffffff;
  --ps-surface-2:    #f6faf8;
  --ps-border:       rgba(0, 89, 78, .08);

  /* Gradientes reutilizables */
  --ps-gradient-brand:  linear-gradient(135deg, var(--ps-verde) 0%, var(--ps-verde-2) 100%);
  --ps-gradient-gold:   linear-gradient(135deg, var(--ps-dorado) 0%, var(--ps-dorado-2) 100%);
  --ps-gradient-brand-2:linear-gradient(135deg, var(--ps-verde) 0%, var(--ps-verde-2) 55%, var(--ps-verde-3) 100%);

  /* Sombras del sistema */
  --ps-shadow-sm:  0 2px 6px rgba(0, 89, 78, .06);
  --ps-shadow-md:  0 8px 28px rgba(0, 89, 78, .08);
  --ps-shadow-lg:  0 18px 44px rgba(0, 89, 78, .14);
}

/* =====================================================================
   HERO BACKGROUND — reemplazo del PNG estático
   Uso: <div class="ps-hero-bg"></div>  (en lugar del viejo min-height-300
   con background-image url(bg-gradient.png))
   ===================================================================== */

.ps-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 340px;
  min-height: 300px;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 80% at 12% 8%,  rgba(30, 168, 154, .55), transparent 60%),
    radial-gradient(ellipse 50% 70% at 88% 18%, rgba(181, 161, 96, .40), transparent 65%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(0, 0, 0, .22), transparent 60%),
    linear-gradient(135deg, var(--ps-verde) 0%, var(--ps-verde-2) 48%, #14a192 100%);
}

/* Capa 1: malla sutil para textura "pro" */
.ps-hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 35%, transparent 75%);
          mask-image: radial-gradient(ellipse at 50% 40%, #000 35%, transparent 75%);
  opacity: .9;
}

/* Capa 2: fade inferior para fundir con el body bg-gray-100 */
.ps-hero-bg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(245, 247, 250, .45) 55%,
    #f5f7fa 100%);
}

/* Variante "compacta" para vistas secundarias (listas, detalles) */
.ps-hero-bg--sm {
  height: 240px;
  min-height: 220px;
}

/* Animación opcional para hacer sentir el fondo "vivo" sin imagen */
@media (prefers-reduced-motion: no-preference) {
  .ps-hero-bg {
    animation: psHeroShift 18s ease-in-out infinite alternate;
  }
}

@keyframes psHeroShift {
  0%   { background-position: 0% 0%,   100% 0%, 50% 100%, 0% 0%; }
  100% { background-position: 4% 2%,   96% 3%,  50% 100%, 0% 0%; }
}

/* =====================================================================
   NAVBAR superior (dentro del main) — sobre el hero
   ===================================================================== */
.navbar-main .breadcrumb-item + .breadcrumb-item::before,
.navbar-main .breadcrumb-item,
.navbar-main .navbar-nav .nav-link,
.navbar-main .font-weight-bolder,
.navbar-main .fecha_actualizacion {
  color: #fff !important;
}

/* =====================================================================
   TARJETAS / CARDS — estándar PolariScore
   ===================================================================== */
.ps-card {
  border: 0;
  border-radius: 20px;
  background: var(--ps-surface);
  box-shadow: var(--ps-shadow-md);
  transition: transform .18s ease, box-shadow .2s ease;
  overflow: hidden;
}

.ps-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ps-shadow-lg);
}

/* Cabecera con el gradiente de marca */
.ps-card-header-brand {
  background: var(--ps-gradient-brand) !important;
  color: #fff;
  border: 0;
  padding: 1rem 1.25rem;
  font-weight: 700;
  letter-spacing: .2px;
  position: relative;
}

.ps-card-header-brand::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 140px;
  height: 100%;
  background: radial-gradient(circle at right, rgba(181, 161, 96, .22) 0%, transparent 70%);
  pointer-events: none;
}

/* =====================================================================
   KPI cards — versión branded (reemplaza bg-*-subtle genéricos)
   ===================================================================== */
.ps-kpi-card {
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 22px rgba(0, 89, 78, .08);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
  min-height: 128px;
  position: relative;
  overflow: hidden;
}

.ps-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--ps-gradient-brand);
  opacity: .9;
}

.ps-kpi-card.is-gold::before  { background: var(--ps-gradient-gold); }
.ps-kpi-card.is-dark::before  { background: linear-gradient(90deg, #1b2b33, #4b5b54); }

.ps-kpi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 89, 78, .16);
}

.ps-kpi-icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 1.25rem;
  color: #fff;
  margin-bottom: .55rem;
  box-shadow: 0 6px 14px rgba(0, 89, 78, .18);
}

.ps-kpi-icon--brand { background: var(--ps-gradient-brand); }
.ps-kpi-icon--gold  { background: var(--ps-gradient-gold);  color: #5a4a14; }
.ps-kpi-icon--ink   { background: linear-gradient(135deg, #1b2b33, #4b5b54); }
.ps-kpi-icon--teal  { background: linear-gradient(135deg, #0e8675, #1ea89a); }
.ps-kpi-icon--sage  { background: linear-gradient(135deg, #4b8378, #7bb3a6); }
.ps-kpi-icon--slate { background: linear-gradient(135deg, #5a6b72, #8a9aa1); }

.ps-kpi-label {
  font-size: .82rem;
  color: var(--ps-muted);
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.ps-kpi-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ps-ink);
  letter-spacing: -.5px;
}

.ps-kpi-value--brand {
  background: var(--ps-gradient-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =====================================================================
   Botones de marca (uso opcional)
   ===================================================================== */
.btn-ps-brand {
  background: var(--ps-gradient-brand);
  color: #fff;
  border: 0;
  font-weight: 600;
  box-shadow: 0 6px 14px rgba(0, 89, 78, .22);
}
.btn-ps-brand:hover,
.btn-ps-brand:focus {
  color: #fff;
  filter: brightness(1.05);
  box-shadow: 0 10px 22px rgba(0, 89, 78, .28);
}

.btn-ps-gold {
  background: var(--ps-gradient-gold);
  color: #3d3211;
  border: 0;
  font-weight: 700;
}
.btn-ps-gold:hover,
.btn-ps-gold:focus {
  color: #3d3211;
  filter: brightness(1.04);
}

/* =====================================================================
   Utilidades de texto de marca
   ===================================================================== */
.text-ps-verde   { color: var(--ps-verde) !important; }
.text-ps-verde-2 { color: var(--ps-verde-2) !important; }
.text-ps-dorado  { color: var(--ps-dorado) !important; }

.bg-ps-verde    { background: var(--ps-verde) !important; }
.bg-ps-gradient { background: var(--ps-gradient-brand) !important; }