/* ===== KPI minimal, consistente y accesible ===== */
.kpi-cards .kpi{
  border:1px solid rgba(0,0,0,.06); border-radius:16px; background:#fff;
  box-shadow:0 4px 18px rgba(0,0,0,.04);
}
.kpi-cards .kpi-top{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:.25rem;
}
.kpi-cards .kpi-title{ color:#64748b; font-size:.9rem; }
.kpi-cards .kpi-icon{
  width:36px; height:36px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  background: var(--soft,#eef2ff); color: var(--accent,#4f46e5);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.kpi-cards .kpi-value{ font-weight:700; letter-spacing:.3px; }
.kpi-cards .kpi-sub{ margin-top:.1rem; }

/* Barra proporcional con el color del KPI */
.kpi-cards .kpi-meter{ height:6px; margin-top:.5rem; background:#f1f5f9; border-radius:999px; overflow:hidden; }
.kpi-cards .kpi-meter > span{ display:block; height:100%; background: var(--bar, #4f46e5); }

/* Esquemas de color por KPI */
.kpi-cards .accent-blue { --accent:#2563eb; --soft:#e9f0ff; --bar:linear-gradient(90deg,#c7d7ff,#2563eb); }
.kpi-cards .accent-red  { --accent:#ef4444; --soft:#fff5f5; --bar:linear-gradient(90deg,#fecaca,#ef4444); }
.kpi-cards .accent-cyan { --accent:#0ea5e9; --soft:#e6f8ff; --bar:linear-gradient(90deg,#c7f0ff,#0ea5e9); }
.kpi-cards .accent-amber{ --accent:#f59e0b; --soft:#fff3e0; --bar:linear-gradient(90deg,#ffe8bf,#f59e0b); }

/* Hover sutil */
.kpi-cards .kpi:hover{ transform: translateY(-1px); transition:.12s ease; box-shadow:0 6px 22px rgba(0,0,0,.06); }

/* Responsive: más aire en pantallas pequeñas */
@media (max-width:576px){
  .kpi-cards .kpi{ border-radius:14px; }
}

	/* ===== Tendencia 24h ===== */
.trend-cards .tile{ border:1px solid rgba(0,0,0,.06); border-radius:14px; background:#fff; }
.trend-cards .tile:hover{ background:#f8fafc; border-color:rgba(0,0,0,.10); box-shadow:0 6px 18px rgba(0,0,0,.05); transition:.12s ease; }

/* Cabecera en 3 columnas: flag | número | operador */
.trend-cards .tile-head{
  display:grid; grid-template-columns: 44px 1fr auto; gap:.75rem; align-items:center;
}
.trend-cards .tile-number{ font-size:1rem; letter-spacing:.2px; color:#0f172a; }

.trend-cards .tile-op{ white-space:nowrap; }
.trend-cards .chip{ border-radius:999px; padding:.12rem .55rem; font-size:.82rem; line-height:1.1; display:inline-flex; align-items:center; gap:.3rem; }
.trend-cards .chip-op{ background:#eef2ff; color:#2563eb; }
.trend-cards .chip-ghost{ background:#f1f5f9; color:#64748b; }

/* Flag + burbuja + prefijo */
.trend-cards .tile-flag{ position:relative; width:44px; }
.trend-cards .flag-wrap{
  width:44px; height:32px; border-radius:8px; overflow:hidden; background:#f1f5f9;
  display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}
.trend-cards .flag-wrap img, .trend-cards .flag-wrap svg{ width:100%; height:100%; object-fit:cover; display:block; }
.trend-cards .prefix{
  position:absolute; left:2px; bottom:-8px; font-size:.72rem; line-height:1;
  background:#fff; color:#64748b; border:1px solid rgba(0,0,0,.06);
  padding:0 .28rem; border-radius:6px; box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.trend-cards .bubble{
  position:absolute; right:-6px; top:-8px; z-index:2;
  background:#fff5f5; color:#ef4444; border:1px solid #ffe3e3; border-radius:999px;
  padding:.12rem .45rem; font-size:.78rem; line-height:1; display:inline-flex; align-items:center; gap:.25rem;
}

/* Meta */
.trend-cards .tile-meta{ display:flex; flex-wrap:wrap; gap:.35rem .5rem; margin-top:.4rem; }

/* Barra + fuego cuando está llena */
.trend-cards .meter{
  position: relative;
  height: 6px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: visible;
}
.trend-cards .meter > span{
  display:block; height:100%; border-radius:999px;
}
	
/* Colores por estado */
.trend-cards .meter-green  > span{ background: linear-gradient(90deg,#d6f8df,#16a34a); } /* verde */
.trend-cards .meter-yellow > span{ background: linear-gradient(90deg,#fff3bf,#f59e0b); } /* amarillo */
.trend-cards .meter-red    > span{ background: linear-gradient(90deg,#fecaca,#ef4444); } /* rojo */
.trend-cards .meter-hot    > span{ background: linear-gradient(90deg,#fca5a5,#dc2626); } /* rojo intenso */
	

/* Icono fire cuando está al 100% */
.trend-cards .meter .hot-ico{
  position:absolute; right:-2px; top:-12px;
  font-size:1.05rem; line-height:1; pointer-events:none;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.15));
  animation: flamePulse 1.1s ease-in-out infinite;
}
@keyframes flamePulse{
  0%,100%{ transform: translateY(0) scale(1); opacity:.95; }
  50%    { transform: translateY(-1px) scale(1.10); opacity:1; }
}

/* Responsive compacto */
@media (max-width: 576px){
  .trend-cards .tile-head{ grid-template-columns: 40px 1fr auto; gap:.6rem; }
  .trend-cards .flag-wrap{ width:40px; height:28px; }
  .trend-cards .tile-flag{ width:40px; }
}

	
/* ===== Countries Cards (UX estilo referencia) ===== */
.countries-cards .panel{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:14px;
  box-shadow:0 4px 18px rgba(0,0,0,.04);
}
.countries-cards .panel-head{
  display:grid; grid-template-columns:1fr auto; align-items:center; margin-bottom:8px;
}
.countries-cards .countries-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
}

/* Card */
.countries-cards .country-card{
  border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:12px;
  background:#fff;
}
.countries-cards .cc-head{
  display:grid; grid-template-columns:40px 1fr auto; gap:10px; align-items:center;
}
.countries-cards .cc-flag{
  width:40px; height:28px; border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:#f1f5f9; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}
.countries-cards .cc-flag img, .countries-cards .cc-flag svg{ width:100%; height:100%; object-fit:cover; }
.countries-cards .cc-name{ font-weight:600; color:#0f172a; }
.countries-cards .cc-count .pill{
  border-radius:999px; padding:.18rem .55rem; font-size:.82rem; line-height:1;
  border:1px solid rgba(0,0,0,.06); background:#fff; white-space:nowrap;
}
.countries-cards .pill.soft-danger{ background:#fff5f5; border-color:#ffe3e3; color:#ef4444; }
.countries-cards .pill.soft-primary{ background:#eef5ff; border-color:#dbe7ff; color:#2563eb; }

.countries-cards .cc-sub{ margin-top:4px; }
.countries-cards .cc-meter{ height:6px; margin-top:6px; background:#f1f5f9; border-radius:999px; overflow:hidden; }
.countries-cards .cc-meter > span{ display:block; height:100%; background:linear-gradient(90deg,#fecaca,#ef4444); }
.countries-cards .cc-meter.alt > span{ background:linear-gradient(90deg,#c7d7ff,#2563eb); }

/* Responsive cariño */
@media (max-width: 576px){
  .countries-cards .countries-grid{ grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); }
  .countries-cards .cc-head{ grid-template-columns: 36px 1fr auto; }
  .countries-cards .cc-flag{ width:36px; height:26px; }
}
	
/* ===== UX Top categorías 7d ===== */
.cats7 .cat-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));  /* 3 cols desktop */
}
/* Tarjetas con misma altura */
.cats7 .cat-item{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:12px;
  display:flex; flex-direction:column; min-height:108px;
}
.cats7 .cat-row{ display:grid; grid-template-columns: 1fr auto; align-items:center; column-gap:12px; }
.cats7 .left{ display:flex; align-items:center; gap:.5rem; min-width:0; }
.cats7 .rank{ width:22px; height:22px; border-radius:999px; background:#f1f5f9; color:#64748b;
  display:inline-flex; align-items:center; justify-content:center; font-size:.78rem; line-height:1; }
.cats7 .name{ font-weight:600; color:#0f172a; }
.cats7 .right .count{ border-radius:999px; padding:.18rem .55rem; font-size:.82rem; line-height:1;
  background:#fff5f5; border:1px solid #ffe3e3; color:#ef4444; white-space:nowrap; }

/* Barra y pie anclados al fondo para alturas iguales */
.cats7 .meter{ height:6px; margin-top:8px; background:#f1f5f9; border-radius:999px; overflow:hidden; }
.cats7 .meter > span{ display:block; height:100%; background:linear-gradient(90deg,#fecaca,#ef4444); }
.cats7 .sub{ margin-top:6px; }

/* Tonos (si ya los tenías, se mantienen) */
.cats7 .dot{ opacity:.9; }
.cats7 .tone-warning .dot{ color:#f59e0b; } .cats7 .tone-info .dot{ color:#0ea5e9; }
.cats7 .tone-success .dot{ color:#16a34a; } .cats7 .tone-primary .dot{ color:#2563eb; }
.cats7 .tone-secondary .dot{ color:#94a3b8; } .cats7 .tone-danger .dot{ color:#ef4444; }
.cats7 .tone-warning .meter>span{ background:linear-gradient(90deg,#ffe8bf,#f59e0b); }
.cats7 .tone-info .meter>span{    background:linear-gradient(90deg,#c7f0ff,#0ea5e9); }
.cats7 .tone-success .meter>span{ background:linear-gradient(90deg,#d6f8df,#16a34a); }
.cats7 .tone-primary .meter>span{ background:linear-gradient(90deg,#d6e4ff,#2563eb); }
.cats7 .tone-secondary .meter>span{background:linear-gradient(90deg,#e6e9ef,#94a3b8); }

/* Respira un poco más entre ítems en móvil */
@media (max-width: 992px){
  .cats7 .cat-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 2 cols tablet */
}
@media (max-width: 576px){
  .cats7 .cat-list{ grid-template-columns: 1fr; } /* 1 col móvil */
}
	
/* ===== Layout tipo Numeros con mas denuncias y nuevos , con grid interno 2× ===== */
.numbers-panels .panel{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:14px;
  box-shadow:0 4px 18px rgba(0,0,0,.04);
}
.numbers-panels .panel-head{
  display:grid; grid-template-columns:1fr auto; align-items:center; margin-bottom:8px;
}

/* Grid interno 2 columnas (1 en móvil) */
.numbers-panels .mini-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 576px){
  .numbers-panels .mini-grid{ grid-template-columns: 1fr; }
}

/* Tarjeta */
.numbers-panels .mini-card{
  display:block; text-decoration:none; color:inherit;
  border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:12px; background:#fff;
  transition: box-shadow .12s ease, transform .06s ease, border-color .12s ease;
}
.numbers-panels .mini-card:hover{
  background:#f8fafc; border-color:rgba(0,0,0,.10); box-shadow:0 6px 18px rgba(0,0,0,.05); transform: translateY(-1px);
}

/* Cabecera: flag | número + tipo | burbuja a la derecha */
.numbers-panels .mc-head{
  display:grid; grid-template-columns: 40px 1fr auto; gap:10px; align-items:center;
}
.numbers-panels .mc-flag{
  width:40px; height:28px; border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:#f1f5f9; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.numbers-panels .mc-flag img, .numbers-panels .mc-flag svg{ width:100%; height:100%; object-fit:cover; }
.numbers-panels .mc-number{ font-weight:700; letter-spacing:.2px; color:#0f172a; }
.numbers-panels .chip{ border-radius:999px; padding:.12rem .55rem; font-size:.82rem; line-height:1.1; white-space:nowrap; }
.numbers-panels .chip-type{ background:#eef2ff; color:#2563eb; }

/* Burbuja superior derecha (conteo/fecha) */
.numbers-panels .mc-bubble{
  border-radius:999px; padding:.18rem .55rem; font-size:.78rem; line-height:1; white-space:nowrap;
  border:1px solid rgba(0,0,0,.06); background:#fff; color:#334155;
}
.numbers-panels .mc-bubble.danger{ background:#fff5f5; border-color:#ffe3e3; color:#ef4444; }
.numbers-panels .mc-bubble.primary{ background:#eef5ff; border-color:#dbe7ff; color:#2563eb; }

/* Línea inferior: ubicación */
.numbers-panels .mc-sub{ margin-top:6px; }

/* Tonos laterales sutiles por clasificación (si quieres mantenerlos) */
.numbers-panels .mini-card[class*="tone-"]{ box-shadow: inset 3px 0 0 0 transparent; }
.numbers-panels .tone-danger   { box-shadow: inset 3px 0 0 0 #ef4444; }
.numbers-panels .tone-warning  { box-shadow: inset 3px 0 0 0 #f59e0b; }
.numbers-panels .tone-info     { box-shadow: inset 3px 0 0 0 #0ea5e9; }
.numbers-panels .tone-success  { box-shadow: inset 3px 0 0 0 #16a34a; }
.numbers-panels .tone-primary  { box-shadow: inset 3px 0 0 0 #2563eb; }
.numbers-panels .tone-secondary{ box-shadow: inset 3px 0 0 0 #94a3b8; }

	
	
.badge-soft-danger{ background:rgba(220,53,69,.12); color:#dc3545; }
.badge-soft-warning{ background:rgba(255,193,7,.15); color:#d39e00; }
.badge-soft-info{ background:rgba(13,202,240,.15); color:#0dcaf0; }
.badge-soft-success{ background:rgba(25,135,84,.15); color:#198754; }
.badge-soft-primary{ background:rgba(13,110,253,.12); color:#0d6efd; }
.badge-soft-secondary{ background:rgba(108,117,125,.12); color:#6c757d; }

/* ——— Prefijos mas populares——— */
.number-tile .pf-flag{
  width: 24px; height: 16px; border-radius: 4px; overflow: hidden;
  display:inline-flex; align-items:center; justify-content:center;
  background:#f1f5f9; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.number-tile .pf-flag img, .number-tile .pf-flag svg{ width:100%; height:100%; object-fit:cover; }

.number-tile:hover .pf-copy{ opacity:1; }
.number-tile .pf-copy.copied{ color:#16a34a; border-color:#b7ebc4; background:#ecfdf5; }
/* Estilo minimal para los hits */
.hits-pill{
  border-radius:999px; padding:.18rem .55rem; font-size:.78rem; line-height:1;
  background:#eef5ff; border:1px solid #dbe7ff; color:#2563eb; white-space:nowrap;
}

/* ==== Mini-UX para reportes (sin cambiar el card base) ==== */
.report-card{ color:#0f172a; }
.report-card .rc-head{
  display:grid; grid-template-columns: 1fr auto; align-items:start; gap:.5rem; margin-bottom:.35rem;
}
.report-card .number{ font-size:1.05rem; }
.report-card .rc-time i{ color:#94a3b8; }          /* menos azul */
.report-card .chip-user{
  display:inline-flex; align-items:center; gap:.35rem;
  background:#f1f5f9; color:#475569; border:1px solid rgba(0,0,0,.06);
  padding:.15rem .5rem; border-radius:999px; font-size:.82rem; white-space:nowrap;
}
.report-card .rc-stars{ display:block; margin-top:.25rem; font-size:.9rem; }
.report-card .star-on{ color:#f59e0b; }            /* dorado */
.report-card .star-off{ color:#cbd5e1; }           /* gris suave */

.report-card .rc-text{ font-size:.92rem; color:#334155; } /* menos grande/azul */

/* Footer ordenado */
.report-card .rc-foot{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:.6rem;
}
.report-card .rc-loc i{ color:#94a3b8; }
.report-card .rc-type .badge{ font-size:.8rem; }    /* badge_tipo_llamada */

/* Clamp 2 líneas */
.clamp-2{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
