:root{
  --cp-bg:#0c1220;
  --cp-surface:#ffffff;
  --cp-surface-2:#f4f7fb;
  --cp-line:#e8edf5;
  --cp-text:#18212f;
  --cp-muted:#627086;
  --cp-primary:#1e7a57;
  --cp-primary-2:#25a26f;
  --cp-warning:#f59f00;
  --cp-danger:#e03131;
  --cp-info:#1971c2;
  --cp-shadow:0 18px 40px rgba(15, 23, 42, .10);
  --cp-shadow-soft:0 10px 24px rgba(15, 23, 42, .07);
  --cp-radius:1.25rem;

  --tenant-primary:var(--cp-primary);
  --tenant-secondary:var(--cp-primary-2);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  color:var(--cp-text);
  background:
    radial-gradient(circle at top left, rgba(37,162,111,.14), transparent 26%),
    radial-gradient(circle at top right, rgba(25,113,194,.10), transparent 20%),
    linear-gradient(180deg, #f8fbff 0%, #eef4f8 100%);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px);
  background-size:30px 30px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.55), transparent 70%);
}

.app-shell{position:relative;z-index:1}
.container{position:relative}

a{
  color:var(--tenant-primary);
  text-decoration:none;
}

a:hover{
  color:var(--tenant-secondary);
}

.logo-comunicr{max-height:80px}

@media (max-width:768px){
  .logo-comunicr{max-height:60px}
}

/* =========================
   NAVBAR
========================= */
.navbar-comunicr{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(226,232,240,.9);
  box-shadow:0 8px 30px rgba(15,23,42,.05);
}

.navbar-comunicr .navbar-brand{
  text-decoration:none;
}

.navbar-comunicr .nav-link{
  transition:all .18s ease;
}

.navbar-comunicr .nav-link:hover{
  transform:translateY(-1px);
}

/* =========================
   BOTONES GENERALES
========================= */
.btn{
  border-radius:1rem;
  font-weight:700;
}

.btn-brand{
  background:var(--tenant-primary);
  border-color:var(--tenant-primary);
  color:#fff;
}

.btn-brand:hover,
.btn-brand:focus{
  background:var(--tenant-secondary);
  border-color:var(--tenant-secondary);
  color:#fff;
}

.btn-outline-brand{
  border:1px solid var(--tenant-primary);
  color:var(--tenant-primary);
  background:#fff;
}

.btn-outline-brand:hover,
.btn-outline-brand:focus{
  background:var(--tenant-primary);
  color:#fff;
}

.btn-soft{
  border-radius:999px;
  padding:.7rem 1rem;
  font-weight:700;
}

/* =========================
   TARJETAS
========================= */
.card-soft,
.glass-card,
.stats-card,
.report-card,
.detail-card,
.hero-card,
.chart-card{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:var(--cp-shadow);
  border-radius:var(--cp-radius);
}

.hero-card{padding:1.4rem}
.chart-card{padding:1rem}
.detail-card{padding:1.1rem}
.stats-card{padding:1rem}

/* =========================
   HERO / PORTADA
========================= */
.page-hero{
  padding:2rem 0 1.25rem;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.3fr .9fr;
  gap:1rem;
  align-items:stretch;
}

.hero-title{
  font-size:clamp(2rem, 4vw, 3.6rem);
  line-height:1.02;
  font-weight:900;
  letter-spacing:-.04em;
  margin:0 0 .65rem;
}

.hero-subtitle{
  font-size:1.08rem;
  color:var(--cp-muted);
  max-width:720px;
}

.hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin:1rem 0 1.2rem;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.72rem 1rem;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--cp-line);
  font-weight:700;
  color:var(--cp-text);
}

.hero-actions{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
}

.btn-xl{
  padding:1rem 1.2rem;
  border-radius:1rem;
  font-weight:800;
}

.hero-mini-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  height:100%;
}

.kpi-tile{
  padding:1rem 1.05rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:138px;
}

.kpi-tile .label{
  color:var(--cp-muted);
  font-weight:700;
  font-size:.9rem;
}

.kpi-tile .value{
  font-size:2rem;
  font-weight:900;
  letter-spacing:-.03em;
  margin-top:.4rem;
}

.kpi-tile .trend{
  font-size:.88rem;
  color:var(--tenant-primary);
  font-weight:700;
}

/* =========================
   FILTROS
========================= */
.filters-wrap{padding:1rem}

.filters-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr auto;
  gap:.85rem;
  align-items:end;
}

.filter-label{
  font-size:.83rem;
  font-weight:800;
  color:var(--cp-muted);
  margin-bottom:.4rem;
  display:block;
}

.form-control,
.form-select{
  border-radius:1rem;
  border:1px solid #dbe4ef;
  padding:.9rem 1rem;
  background:#fff;
  color:var(--cp-text);
}

.form-control:focus,
.form-select:focus{
  box-shadow:0 0 0 .25rem rgba(30,122,87,.12);
  border-color:rgba(30,122,87,.34);
}

/* =========================
   SECCIONES
========================= */
.section-title{
  font-size:1.25rem;
  font-weight:900;
  letter-spacing:-.03em;
  margin:0;
}

.section-subtitle{
  color:var(--cp-muted);
  margin-top:.2rem;
}

/* =========================
   LISTADO Y MAPA
========================= */
.content-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:1rem;
  align-items:start;
}

.map-panel{padding:1rem}

.map-box{
  height:520px;
  border-radius:1.1rem;
  overflow:hidden;
  border:1px solid var(--cp-line);
}

.map-toolbar{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  margin-bottom:.9rem;
}

.map-chip{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem .8rem;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid var(--cp-line);
  font-size:.88rem;
  font-weight:700;
}

.feed-panel{padding:1rem}

.feed-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  margin-bottom:1rem;
}

.feed-count{
  font-size:.92rem;
  color:var(--cp-muted);
  font-weight:700;
}

/* =========================
   REPORTE CARD
========================= */
.report-card{
  padding:1rem;
  transition:transform .18s ease, box-shadow .18s ease;
  border:1px solid rgba(222,230,239,.9);
  margin-bottom:1rem;
}

.report-card:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 45px rgba(15,23,42,.12);
}

.report-thumb{
  width:100%;
  height:210px;
  object-fit:cover;
  border-radius:1rem;
  border:1px solid var(--cp-line);
  background:#eef3f8;
}

.report-meta{
  display:flex;
  gap:.55rem;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:.8rem;
}

.badge-modern{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .72rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:800;
  border:1px solid transparent;
}

.badge-state-recibido{background:#eef6ff;color:#2157a6;border-color:#d7e7ff}
.badge-state-revision{background:#fff7e6;color:#9c6a00;border-color:#ffe2a8}
.badge-state-asignado{background:#ecf8ff;color:#0b7285;border-color:#cdefff}
.badge-state-proceso{background:#fff4e6;color:#c26b00;border-color:#ffd8a8}
.badge-state-resuelto{background:#ebfbf2;color:#1c7c54;border-color:#c7f0d8}
.badge-state-cerrado{background:#f1f3f5;color:#495057;border-color:#e3e6ea}
.badge-state-rechazado{background:#fff0f0;color:#c92a2a;border-color:#ffd5d5}
.badge-category{background:#f7f9fc;color:#334155;border-color:#e3e9f2}

.report-title{
  font-size:1.18rem;
  font-weight:900;
  line-height:1.15;
  letter-spacing:-.03em;
  margin:0 0 .6rem;
}

.report-desc{
  color:var(--cp-muted);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:4.5em;
}

.report-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:1rem;
}

.report-stats{
  display:flex;
  gap:.9rem;
  flex-wrap:wrap;
  color:var(--cp-muted);
  font-size:.9rem;
  font-weight:700;
}

.report-stats span{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}

.card-link{
  font-weight:800;
  text-decoration:none;
}

/* =========================
   SKELETON
========================= */
.skeleton-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}

.skeleton-card{
  height:300px;
  border-radius:1.1rem;
  background:linear-gradient(90deg,#eef3f8 25%,#e4ebf3 37%,#eef3f8 63%);
  background-size:400% 100%;
  animation:shimmer 1.4s ease infinite;
}

@keyframes shimmer{
  0%{background-position:100% 0}
  100%{background-position:-100% 0}
}

.report-new{
  outline:3px solid rgba(30,122,87,.24);
}

/* =========================
   DETALLE
========================= */
.detail-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:1rem;
}

.detail-gallery-main{
  width:100%;
  height:380px;
  object-fit:cover;
  border-radius:1rem;
  border:1px solid var(--cp-line);
  background:#edf2f7;
}

.detail-thumbs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.65rem;
  margin-top:.65rem;
}

.detail-thumb{
  height:88px;
  width:100%;
  object-fit:cover;
  border-radius:.9rem;
  border:1px solid var(--cp-line);
  cursor:pointer;
  background:#edf2f7;
}

.detail-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-bottom:.9rem;
}

.metric-pills{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.8rem;
}

.metric-pill{
  padding:.95rem;
  border-radius:1rem;
  background:#f7fafc;
  border:1px solid var(--cp-line);
  text-align:center;
}

.metric-pill strong{
  display:block;
  font-size:1.35rem;
}

.timeline-item{
  position:relative;
  padding-left:1.25rem;
  margin-bottom:1rem;
}

.timeline-item::before{
  content:'';
  position:absolute;
  left:.18rem;
  top:.4rem;
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--tenant-primary);
}

.timeline-item::after{
  content:'';
  position:absolute;
  left:.38rem;
  top:1.1rem;
  bottom:-1rem;
  width:2px;
  background:#dce6ef;
}

.timeline-item:last-child::after{
  display:none;
}

.comment-box{
  background:#f8fafc;
  border:1px solid var(--cp-line);
  border-radius:1rem;
  padding:1rem;
  margin-bottom:.75rem;
}

/* =========================
   STATS / CHARTS
========================= */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
  margin-bottom:1rem;
}

.stats-card .label{
  color:var(--cp-muted);
  font-size:.9rem;
  font-weight:700;
}

.stats-card .value{
  font-size:2rem;
  font-weight:900;
  letter-spacing:-.03em;
}

.chart-wrap{
  height:340px;
}

.pagination .page-link{
  border-radius:.85rem !important;
  margin:0 .18rem;
  border:1px solid var(--cp-line);
  color:#1f2a37;
  font-weight:700;
}

.pagination .page-item.active .page-link{
  background:var(--tenant-primary);
  border-color:var(--tenant-primary);
  color:#fff;
}

/* =========================
   MOBILE NAV
========================= */
.mobile-nav{
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:1035;
  display:flex;
  justify-content:space-around;
  gap:.4rem;
  background:rgba(13,20,35,.92);
  backdrop-filter:blur(12px);
  padding:.6rem;
  border-radius:1.2rem;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 22px 40px rgba(15,23,42,.25);
}

.mobile-nav a{
  flex:1;
  text-align:center;
  text-decoration:none;
  color:rgba(255,255,255,.7);
  padding:.55rem .35rem;
  border-radius:1rem;
  font-size:.82rem;
  font-weight:700;
  transition:all .18s ease;
}

.mobile-nav a i{
  display:block;
  font-size:1.15rem;
  margin-bottom:.15rem;
}

.mobile-nav a.active{
  background:rgba(255,255,255,.08);
  color:#fff;
}

.mobile-nav a:hover{
  color:#fff;
}

/* =========================
   LEAFLET
========================= */
.leaflet-popup-content-wrapper{
  border-radius:1rem;
}

.popup-card{
  width:240px;
}

.popup-card img{
  width:100%;
  height:120px;
  object-fit:cover;
  border-radius:.8rem;
  margin-bottom:.55rem;
}

.popup-card h6{
  font-size:.98rem;
  font-weight:900;
  line-height:1.15;
  margin-bottom:.35rem;
}

.popup-card p{
  font-size:.86rem;
  color:#6b7280;
  margin:0 0 .5rem;
}

/* =========================
   UTILIDADES
========================= */
.text-muted-soft{color:var(--cp-muted)!important}
.border-soft{border-color:var(--cp-line)!important}
.shadow-soft{box-shadow:var(--cp-shadow-soft)!important}
.rounded-2xl{border-radius:1.25rem!important}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:991.98px){
  body{padding-bottom:92px}
  .hero-grid,
  .content-grid,
  .detail-grid,
  .filters-grid,
  .stats-grid{
    grid-template-columns:1fr;
  }

  .hero-mini-grid{
    grid-template-columns:1fr 1fr;
  }

  .map-box{height:360px}
  .detail-gallery-main{height:280px}
}

@media (max-width:575.98px){
  .page-hero{padding-top:1.25rem}

  .hero-actions,
  .map-toolbar,
  .feed-top{
    flex-direction:column;
    align-items:stretch;
  }

  .hero-mini-grid,
  .metric-pills,
  .detail-thumbs{
    grid-template-columns:1fr 1fr;
  }

  .report-thumb{height:180px}
  .hero-title{font-size:2rem}
}