/* Diseño limpio HTML5 para Sistema de Registro de Campañas de Comunicación Locales */
:root{
  --app-bg:#f4f7f6;
  --app-surface:#ffffff;
  --app-surface-soft:#f8fafc;
  --app-border:#e6ecea;
  --app-text:#18212f;
  --app-muted:#6b7280;
  --app-green:#0b3d2e;
  --app-green-2:#0f766e;
  --app-green-3:#e3f2ed;
  --app-gold:#c9a227;
  --app-radius:18px;
  --app-radius-sm:13px;
  --app-shadow:0 16px 34px rgba(15,23,42,.075);
  --app-shadow-soft:0 10px 22px rgba(15,23,42,.055);
  --app-focus:0 0 0 .22rem rgba(15,118,110,.18);
}
*{ text-rendering:optimizeLegibility; }
html{ scroll-behavior:smooth; }
body{
  background:
    radial-gradient(circle at top left, rgba(15,118,110,.11), transparent 31rem),
    radial-gradient(circle at 95% 20%, rgba(201,162,39,.12), transparent 24rem),
    linear-gradient(180deg,#fbfdfc 0%, var(--app-bg) 100%) !important;
  color:var(--app-text) !important;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(11,61,46,.035) 1px, transparent 1px),linear-gradient(90deg, rgba(11,61,46,.035) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), transparent 72%);
  z-index:-1;
}
.skip-link{
  position:absolute;
  left:1rem;
  top:-100px;
  z-index:2000;
  padding:.7rem 1rem;
  background:#fff;
  color:var(--app-green);
  border:2px solid var(--app-green-2);
  border-radius:999px;
  font-weight:800;
  text-decoration:none;
  box-shadow:var(--app-shadow-soft);
}
.skip-link:focus{ top:1rem; outline:none; }
.top-navbar{
  background:rgba(11,61,46,.95) !important;
  backdrop-filter:saturate(130%) blur(12px);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.top-navbar::after{ height:4px !important; opacity:.95; }
.topbar-logos img{ filter:drop-shadow(0 6px 12px rgba(0,0,0,.18)); }
.topbar-center{ border-radius:999px; padding:.45rem 1.1rem !important; transition:background-color .15s ease, transform .15s ease; }
.topbar-center:hover{ background:rgba(255,255,255,.08); transform:translateY(-1px); }
.badge-rol{ border-radius:999px; letter-spacing:.03em; }
.sidebar{
  background:rgba(255,255,255,.88) !important;
  backdrop-filter:blur(16px) saturate(140%);
  border-right:1px solid rgba(230,236,234,.9) !important;
  box-shadow:14px 0 30px rgba(15,23,42,.055) !important;
}
.sidebar .sidebar-title{ color:#64748b !important; }
.sidebar .nav-link{
  min-height:42px;
  border-radius:14px !important;
  font-weight:750;
  position:relative;
}
.sidebar .nav-link i{ font-size:1.05rem; }
.sidebar .nav-link.active::before{
  content:"";
  position:absolute;
  left:-.45rem;
  width:4px;
  height:24px;
  border-radius:999px;
  background:var(--app-gold);
}
.content-wrapper .container-fluid{ max-width:1420px !important; }
.content-wrapper{ padding:1.75rem 1.35rem 2.5rem !important; }
.page-head,
.hero-card,
.ranking-hero,
.filter-card,
.card-form,
.start-card,
.kpi-card,
.stat-card,
.card.border-0.shadow-sm{
  border-radius:var(--app-radius) !important;
  border:1px solid var(--app-border) !important;
  box-shadow:var(--app-shadow-soft) !important;
}
.hero-card,
.ranking-hero{
  background:
    linear-gradient(135deg,rgba(11,61,46,.98),rgba(15,118,110,.92)),
    radial-gradient(circle at top right,rgba(255,255,255,.24),transparent 22rem) !important;
  box-shadow:var(--app-shadow) !important;
}
.hero-card h2,
.ranking-hero h3,
.page-head h4{ letter-spacing:-.025em; }
.page-head{
  background:rgba(255,255,255,.9) !important;
  backdrop-filter:blur(12px);
  padding:1.15rem 1.25rem !important;
}
.page-head small{ font-size:.92rem; }
.start-card,
.kpi-card,
.stat-card{
  overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease !important;
}
.start-card:hover,
.kpi-card-link:hover,
.stat-card-link:hover{
  transform:translateY(-4px) !important;
  box-shadow:var(--app-shadow) !important;
  border-color:rgba(15,118,110,.35) !important;
}
.start-card-primary{ border-left:0 !important; border-top:5px solid var(--app-green-2) !important; }
.start-card-cresca{ border-left:0 !important; border-top:5px solid #2563eb !important; }
.icon-bubble,
.kpi-icon,
.filter-title i,
.section-title i{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6), 0 8px 18px rgba(15,23,42,.06);
}
.step-strip{ gap:1rem !important; }
.step-pill{
  border-radius:var(--app-radius-sm) !important;
  background:rgba(255,255,255,.88) !important;
  box-shadow:0 8px 18px rgba(15,23,42,.045);
}
.step-number{ background:linear-gradient(135deg,var(--app-green),var(--app-green-2)) !important; }
.btn{
  border-radius:12px !important;
  box-shadow:none !important;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--app-green-2) !important; border-color:var(--app-green-2) !important; }
.btn-success{ background:var(--app-green) !important; border-color:var(--app-green) !important; }
.btn-outline-warning{ color:#8a6411 !important; border-color:#e2c766 !important; }
.btn-outline-warning:hover{ color:#111827 !important; background:#fef3c7 !important; }
.form-label{ font-size:.86rem; font-weight:800 !important; color:#334155 !important; }
.form-control,
.form-select,
.select2-container--default .select2-selection--single{
  min-height:42px;
  border-radius:12px !important;
  border-color:#dbe4e1 !important;
  background-color:#fff !important;
}
.form-control:focus,
.form-select:focus{ box-shadow:var(--app-focus) !important; }
.help{ color:#64748b !important; }
.filter-card{
  background:rgba(255,255,255,.92) !important;
  backdrop-filter:blur(12px);
}
.filter-title{ color:var(--app-green) !important; }
.platform-tabs{ overflow-x:auto; flex-wrap:nowrap !important; padding:.25rem .1rem .45rem; scrollbar-width:thin; }
.platform-tabs .nav-link{
  min-width:max-content;
  border-radius:999px !important;
  padding:.55rem .8rem !important;
  font-weight:800;
}
.platform-tabs .nav-link.active{
  background:#fff !important;
  color:var(--app-green) !important;
  border-color:rgba(15,118,110,.38) !important;
  box-shadow:0 12px 22px rgba(15,118,110,.12) !important;
}
.platform-tabs .nav-link.active .brand-icon{ transform:scale(1.05); }
.platform-tabs .nav-link.active .badge{ background:var(--app-green-3)!important; color:var(--app-green)!important; }
.brand-icon{ flex:0 0 auto; }
.kpi-card-link.active,
.stat-card-link.active{ background:#f0fdfa !important; }
.count-up{ font-variant-numeric:tabular-nums; }
.metric-link,
.ranking-number{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  min-width:36px;
  padding:.18rem .35rem;
  border-radius:9px;
  transition:background-color .14s ease, color .14s ease, border-color .14s ease;
}
.metric-link:hover,
.ranking-number:hover{ background:#ecfdf5; text-decoration:none !important; }
.table-wrap{
  border-radius:var(--app-radius) !important;
  background:#fff;
  box-shadow:0 8px 20px rgba(15,23,42,.045);
}
.table{ --bs-table-hover-bg:#f8fcfb; }
.table thead th,
.table-sticky thead th{
  background:#f7faf9 !important;
  color:#475569 !important;
  border-bottom:1px solid #e2e8f0 !important;
  font-size:.76rem !important;
}
.table tbody td{ border-color:#eef2f1; }
.table tbody tr{ transition:background-color .12s ease; }
.table .badge{ border-radius:999px; }
.card-header.bg-white,
.card-footer.bg-white{ background:rgba(255,255,255,.96)!important; }
.card-form{ border-top:0 !important; }
.card-form::before{
  content:"";
  display:block;
  height:5px;
  border-radius:var(--app-radius) var(--app-radius) 0 0;
  background:linear-gradient(90deg,var(--app-green),var(--app-green-2),var(--app-gold));
}
.section-title{
  padding:.65rem .75rem;
  background:#f7faf9;
  border:1px solid #e6ecea;
  border-radius:14px;
}
.metric-title{ border-radius:14px !important; }
.submit-bar{ position:sticky; bottom:0; z-index:5; backdrop-filter:blur(12px); background:rgba(248,250,252,.92)!important; }
.rank-badge{ box-shadow:0 7px 16px rgba(15,23,42,.06); }
.section-reveal{ opacity:0; transform:translateY(10px); transition:opacity .36s ease, transform .36s ease; }
body.is-ready .section-reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .section-reveal{ opacity:1; transform:none; transition:none; }
  .start-card,.kpi-card,.stat-card,.btn{ transition:none !important; }
  .start-card:hover,.kpi-card-link:hover,.stat-card-link:hover,.btn:hover{ transform:none !important; }
}
@media (max-width:767.98px){
  .content-wrapper{ padding:1rem .8rem 1.75rem !important; }
  .page-head,.hero-card .card-body,.ranking-hero .card-body{ padding:1rem !important; }
  .page-actions{ width:100%; }
  .page-actions .btn{ flex:1 1 100%; }
  .topbar-center{ border-radius:14px; }
  .table-wrap{ max-height:none !important; }
}
@media print{
  .top-navbar,.sidebar,.page-actions,.filter-card,.btn,.submit-bar{ display:none !important; }
  .content-wrapper{ margin-left:0 !important; padding:0 !important; }
  body{ background:#fff !important; }
  .card,.page-head,.table-wrap{ box-shadow:none !important; border:1px solid #ddd !important; }
}
.metric-placeholder{
  border:1px dashed #bfd8cf;
  background:linear-gradient(135deg,#f8fafc,#f0fdfa);
  color:#475569;
  border-radius:16px;
  padding:1.25rem;
  display:flex;
  align-items:center;
  gap:.85rem;
}
.metric-placeholder i{
  width:42px;
  height:42px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#e3f2ed;
  color:#0b3d2e;
  font-size:1.2rem;
}

/* Ajuste solicitado: encabezado fijo y menú lateral estable */
html{
  scroll-padding-top:96px;
}
.top-navbar.fixed-top,
.top-navbar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:1080 !important;
  width:100% !important;
  transform:none !important;
}
.layout-wrapper{
  margin-top:88px !important;
}
.sidebar{
  top:88px !important;
  z-index:1035 !important;
}
.sidebar .nav{
  gap:.15rem;
}
.sidebar .nav-item{
  width:100%;
}
.sidebar .nav-link{
  width:100%;
  box-sizing:border-box;
  overflow:hidden;
  transform:none !important;
  border:1px solid transparent;
  padding-left:.95rem !important;
  padding-right:.95rem !important;
}
.sidebar .nav-link:hover,
.sidebar .nav-link:focus{
  transform:none !important;
  background:#edf7f3 !important;
  border-color:rgba(15,118,110,.16);
  box-shadow:inset 4px 0 0 rgba(15,118,110,.22), 0 6px 16px rgba(15,23,42,.045);
}
.sidebar .nav-link.active{
  border-color:rgba(11,61,46,.12);
}
.sidebar .nav-link.active::before{
  left:.22rem !important;
  top:50%;
  transform:translateY(-50%);
}
.sidebar .nav-link i{
  width:1.25rem;
  min-width:1.25rem;
  text-align:center;
  line-height:1;
}
.sidebar .nav-link span{
  min-width:0;
  line-height:1.15;
}
.topbar-center:hover{
  transform:none !important;
}
@media (max-width:767.98px){
  html{ scroll-padding-top:86px; }
  .layout-wrapper{ margin-top:78px !important; }
  .top-navbar.fixed-top,
  .top-navbar{
    min-height:78px !important;
  }
}