/* =====================================================
   base.css — Variables y estilos globales
   Colores extraídos directamente del logo oficial
   Municipalidad de Catemu
   ===================================================== */
:root{
  /* Paleta oficial del logo */
  --catemu-purple:      #570066;   /* morado oscuro (texto CATEMU) */
  --catemu-purple-dark: #3D0049;   /* hover / acento más oscuro */
  --catemu-purple-mid:  #6B1676;   /* variante media */
  --catemu-orange:      #F27500;   /* naranja principal (árbol) */
  --catemu-orange-dark: #DA5616;   /* naranja oscuro hover */
  --catemu-orange-light:#FEF3E8;   /* naranja muy suave (fondos) */

  /* Neutros */
  --catemu-ink:    #1F2937;
  --catemu-muted:  #6B7280;
  --catemu-bg:     #F7F5F9;        /* fondo con tinte lila muy suave */
  --catemu-border: #E5E0EB;
  --catemu-surface:#FFFFFF;

  /* Aliases legacy */
  --brand:  #570066;
  --brand2: #F27500;
  --text-muted: #6B7280;
}

/* Base */
body{
  background: var(--catemu-bg);
  color: var(--catemu-ink);
  scroll-behavior: smooth;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
.small-muted{ color: var(--text-muted); }

/* Fondo sutil con overlay de marca */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: url("../img/bg-catemu.png") center/cover no-repeat;
  opacity: .15;
  pointer-events: none;
  z-index: -2;
}
body::after{
  content:"";
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(87,0,102,.06) 0%,
    rgba(242,117,0,.04) 50%,
    rgba(255,255,255,.08) 100%
  );
  pointer-events: none;
  z-index: -1;
}

/* ─── Botones ─────────────────────────────────────── */
.btn-primary{
  background: var(--catemu-purple) !important;
  border-color: var(--catemu-purple) !important;
  box-shadow: 0 2px 8px rgba(87,0,102,.28);
  transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
}
.btn-primary:hover{
  background: var(--catemu-purple-dark) !important;
  border-color: var(--catemu-purple-dark) !important;
  box-shadow: 0 5px 16px rgba(87,0,102,.38);
  transform: translateY(-1px);
}
.btn-primary:active{ transform: translateY(0); }

.btn-outline-primary{
  border-color: var(--catemu-purple) !important;
  color: var(--catemu-purple) !important;
}
.btn-outline-primary:hover{
  background: var(--catemu-purple) !important;
  color: #fff !important;
}

.btn-outline-secondary{
  border-color: var(--catemu-purple) !important;
  color: var(--catemu-purple) !important;
}
.btn-outline-secondary:hover{
  background: var(--catemu-purple) !important;
  color: #fff !important;
  border-color: var(--catemu-purple) !important;
}

/* CTA naranja */
.btn-catemu{
  background: var(--catemu-orange) !important;
  border-color: var(--catemu-orange) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(242,117,0,.30);
  transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
}
.btn-catemu:hover{
  background: var(--catemu-orange-dark) !important;
  border-color: var(--catemu-orange-dark) !important;
  box-shadow: 0 5px 16px rgba(242,117,0,.42);
  transform: translateY(-1px);
}
.btn-catemu:active{ transform: translateY(0); }

/* Outline naranja */
.btn-outline-catemu{
  border-color: rgba(242,117,0,.6) !important;
  color: var(--catemu-orange-dark) !important;
}
.btn-outline-catemu:hover{
  background: rgba(242,117,0,.10) !important;
  border-color: var(--catemu-orange) !important;
}

/* ─── Links ───────────────────────────────────────── */
a{ color: var(--catemu-purple); }
a:hover{ color: var(--catemu-purple-dark); }

/* ─── Forms ───────────────────────────────────────── */
.form-control:focus{
  border-color: rgba(87,0,102,.35);
  box-shadow: 0 0 0 .2rem rgba(87,0,102,.15);
}

/* ─── Cards ───────────────────────────────────────── */
.card{
  border: 1px solid rgba(87,0,102,.08) !important;
  border-radius: 16px;
  transition: transform .22s ease, box-shadow .22s ease;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 .85rem 1.75rem rgba(87,0,102,.12) !important;
}
.shadow-sm{
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.06) !important;
}

/* ─── Título con subrayado de marca ───────────────── */
.catemu-title{
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}
.catemu-title::after{
  content:"";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--catemu-orange), var(--catemu-purple));
}

/* ─── Subnavbar institucional ─────────────────────── */
.catemu-subnav{
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--catemu-border);
  border-bottom: 1px solid var(--catemu-border);
}
.catemu-subnav .nav-link{
  position: relative;
  color: var(--catemu-ink);
  transition: color .15s ease;
}
.catemu-subnav .nav-link:hover{
  color: var(--catemu-purple);
}
.catemu-subnav .nav-link.active{
  color: var(--catemu-purple);
  font-weight: 600;
}
.catemu-subnav .nav-link.active::after{
  content:"";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -10px;
  height: 3px;
  border-radius: 999px;
  background: var(--catemu-orange);
}

/* ─── Paginación ──────────────────────────────────── */
.page-link{ color: var(--catemu-purple); }
.page-item.active .page-link{
  background: var(--catemu-purple);
  border-color: var(--catemu-purple);
}

/* ─── Badge destacado ─────────────────────────────── */
.badge-catemu{
  background: var(--catemu-orange-light);
  color: var(--catemu-orange-dark);
  border: 1px solid rgba(242,117,0,.25);
  font-weight: 600;
}