/* ============================================================================
   SayProposals · sección Estadísticas del panel
   Patrones de las apps de analítica serias: fila de KPIs con delta, gráfico de
   vistas por día, embudo con caída entre pasos, dos columnas de detalle, tabla
   de sesiones y tarjeta de mapa de calor que abre en modal.
   ========================================================================== */

/* ---------- Pantalla de selección ---------- */

/* Toolbar: buscador, estado, período, orden y el toggle de vista. */
.est-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
.est-buscar{position:relative;display:flex;align-items:center;flex:1;min-width:200px;max-width:280px;}
.est-buscar .ico{position:absolute;left:13px;width:15px;height:15px;color:var(--gris2);pointer-events:none;}
.est-buscar input{padding-left:38px;background:#fff;border:1.5px solid var(--line);font-size:13.5px;}
.est-buscar input:focus{border-color:var(--celeste);}

.est-vista{display:flex;gap:2px;margin-left:auto;background:#fff;
  border:1.5px solid var(--line);border-radius:10px;padding:2px;}
.est-vista button{display:flex;align-items:center;justify-content:center;width:34px;height:32px;
  border:0;border-radius:8px;background:none;color:var(--gris2);cursor:pointer;
  transition:background .15s, color .15s;}
.est-vista button:hover{color:var(--navy);}
.est-vista button.act{background:var(--navy);color:#fff;}
.est-vista .ico{width:16px;height:16px;}

/* Vista lista: tabla compacta, la fila entera abre el detalle. */
.est-lista{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;}
.est-lista th{text-align:left;font-size:10px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris2);padding:11px 10px;white-space:nowrap;
  border-bottom:1px solid var(--line);}
.est-lista th.num,.est-lista td.num{text-align:right;}
.est-lista td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle;
  white-space:nowrap;}
.est-lista td.num{font-variant-numeric:tabular-nums;font-weight:700;}
.est-lista tbody tr{cursor:pointer;}
.est-lista tbody tr:hover td{background:#fff;}
.ef-marca{font-weight:800;font-size:13.5px;}
.ef-slug{font-size:11px;color:var(--gris2);margin-top:2px;}

/* Vista tarjetas: compactas, 3 o 4 por fila. */
.est-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:12px;}
.est-tarjeta{display:block;width:100%;text-align:left;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px 13px;
  font-family:inherit;color:inherit;cursor:pointer;
  transition:border-color .16s, box-shadow .16s, transform .16s;}
.est-tarjeta:hover{border-color:var(--celeste);box-shadow:var(--sombra);transform:translateY(-2px);}
.est-tarjeta .et-marca{font-size:14px;font-weight:800;letter-spacing:-.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.est-tarjeta .et-slug{font-size:11px;font-weight:600;color:var(--gris2);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.est-tarjeta .et-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  margin-top:12px;padding-top:11px;border-top:1px solid var(--line);}
.est-tarjeta .et-k .n{font-size:17px;font-weight:800;line-height:1.1;
  font-variant-numeric:tabular-nums;}
.est-tarjeta .et-k .e{font-size:9px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gris2);margin-top:3px;}
.est-tarjeta .et-pie{margin-top:10px;font-size:11px;font-weight:600;color:var(--gris);}

.est-volver{margin-bottom:14px;}

/* ---------- Barra superior ---------- */
.est-barra{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:22px;}
.est-barra .campo{display:flex;flex-direction:column;gap:7px;}
.est-barra .campo > label{margin-bottom:0;}
.est-barra .der{margin-left:auto;font-size:12.5px;color:var(--gris);font-weight:600;
  display:flex;align-items:center;gap:7px;padding-bottom:10px;}
.est-barra .der a{font-weight:700;color:var(--navy);border-bottom:1.5px solid var(--celeste);}

/* ---------- Fila de KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;margin-bottom:18px;}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 16px;}
.kpi .n{font-size:31px;font-weight:800;letter-spacing:-1px;line-height:1.05;
  font-variant-numeric:tabular-nums;}
.kpi .n small{font-size:15px;font-weight:800;letter-spacing:-.2px;color:var(--gris);margin-left:2px;}
.kpi .et{font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gris2);margin-top:8px;}
.kpi .pie{margin-top:11px;display:flex;align-items:center;gap:7px;min-height:20px;}
.kpi .pie .ref{font-size:11px;color:var(--gris2);font-weight:600;}

/* ---------- Grillas ---------- */
.est-grid2{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;margin-bottom:16px;}
.est-grid2 > .card{padding:20px 22px;display:flex;flex-direction:column;}
.est-col{display:flex;flex-direction:column;gap:16px;}
.est-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;margin-bottom:16px;}

/* ---------- Gráfico de vistas por día ---------- */
/* El gráfico llena el alto que le deja la tarjeta vecina (el embudo). */
.graf-wrap{position:relative;flex:1;min-height:190px;}
.graf{width:100%;height:100%;display:block;}
.graf-tip{position:absolute;pointer-events:none;background:var(--navy);color:#fff;
  padding:7px 11px;border-radius:9px;font-size:12px;font-weight:700;white-space:nowrap;
  transform:translate(-50%,-125%);opacity:0;transition:opacity .12s;box-shadow:0 8px 22px rgba(28,43,72,.28);}
.graf-tip.on{opacity:1;}
.graf-tip small{display:block;font-weight:600;opacity:.72;font-size:10.5px;}
.graf-ejes{display:flex;justify-content:space-between;margin-top:9px;font-size:10.5px;
  font-weight:700;color:var(--gris2);}

/* ---------- Embudo ---------- */
.embudo{display:flex;flex-direction:column;}
.emb-paso{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:baseline;}
.emb-paso .et{font-size:13px;font-weight:700;}
.emb-paso .n{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;}
.emb-paso .n span{font-size:11.5px;font-weight:700;color:var(--gris2);margin-left:6px;}
.emb-pista{grid-column:1 / -1;height:26px;border-radius:8px;background:#eef1f5;overflow:hidden;}
.emb-llena{height:100%;border-radius:8px;background:linear-gradient(90deg,#1c2b48,#3d5680);
  transition:width .55s cubic-bezier(.2,.8,.3,1);}
.emb-conector{display:flex;align-items:center;gap:10px;padding:7px 0 7px 13px;}
.emb-conector .linea{width:2px;height:16px;background:var(--line);border-radius:2px;flex:none;}
.emb-caida{font-size:11px;font-weight:800;color:var(--rojo);background:var(--rojo-soft);
  padding:2px 8px;border-radius:7px;}
.emb-caida.ok{color:var(--verde);background:var(--verde-soft);}

/* ---------- Listas de dispositivos / geografía ---------- */
.est-bloque + .est-bloque{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);}

/* ---------- Tabla de sesiones ---------- */
.tabla-wrap{overflow-x:auto;}
.tabla-wrap .tabla{min-width:620px;}
.scroll-mini{display:inline-flex;align-items:center;gap:8px;}
.scroll-mini .pista{width:54px;height:6px;border-radius:99px;background:#eef1f5;overflow:hidden;}
.scroll-mini .llena{height:100%;background:var(--celeste);border-radius:99px;}

/* ---------- Tarjeta del mapa de calor ---------- */
.hm-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;}
.hm-card-cuerpo{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;}
.hm-mini{position:relative;width:280px;height:210px;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:#e8ecef;cursor:pointer;flex:none;
  transition:box-shadow .18s, transform .18s;}
.hm-mini:hover{box-shadow:0 14px 34px rgba(28,43,72,.18);transform:translateY(-2px);}
.hm-mini-lienzo{position:absolute;top:0;left:0;transform-origin:top left;pointer-events:none;}
.hm-mini iframe{border:0;display:block;background:#e8ecef;}
.hm-mini canvas{position:absolute;top:0;left:0;opacity:.62;pointer-events:none;}
.hm-mini .lupa{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(16,25,43,.28);opacity:0;transition:opacity .18s;}
.hm-mini:hover .lupa{opacity:1;}
.hm-mini .lupa span{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--navy);
  padding:9px 16px;border-radius:99px;font-size:12.5px;font-weight:800;
  box-shadow:0 8px 22px rgba(12,20,36,.25);}
.hm-mini .lupa .ico{width:15px;height:15px;}
.hm-datos .txt{font-size:13.5px;color:var(--gris);line-height:1.55;max-width:460px;}
.hm-datos .num-grande{font-size:26px;font-weight:800;letter-spacing:-.6px;margin-bottom:2px;}
.hm-datos .btn{margin-top:16px;}

/* ---------- Modal del mapa de calor ---------- */
.mdl-hm .mdl{max-height:calc(100vh - 48px);}
.mdl-hm .mdl-body{background:#eef1f5;padding:0;}

.hm-head-tools{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}

.hm-toggle{display:inline-flex;background:#f2f5f8;border-radius:10px;padding:3px;gap:2px;}
.hm-toggle button{display:inline-flex;align-items:center;gap:7px;background:none;border:0;
  border-radius:8px;padding:7px 13px;font-family:inherit;font-size:12.5px;font-weight:700;
  color:var(--gris);cursor:pointer;transition:background .16s, color .16s;}
.hm-toggle button .ico{width:14px;height:14px;}
.hm-toggle button.act{background:#fff;color:var(--navy);box-shadow:0 2px 8px rgba(28,43,72,.12);}

.hm-leyenda{display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gris2);}
.hm-leyenda .gradiente{width:132px;height:9px;border-radius:99px;
  background:linear-gradient(90deg,#8eb1d1 0%,#8eb1d1 22%,#f4c542 55%,#f08a3c 78%,#e0433a 100%);}

.hm-escenario{display:flex;justify-content:center;padding:24px;}
.hm-lienzo{position:relative;background:#e8ecef;box-shadow:0 10px 40px rgba(28,43,72,.16);
  border-radius:10px;overflow:hidden;}
.hm-lienzo iframe{border:0;display:block;background:#e8ecef;}
.hm-lienzo canvas{position:absolute;top:0;left:0;pointer-events:none;}
.hm-cargando{display:flex;align-items:center;justify-content:center;height:240px;
  font-size:13px;color:var(--gris);font-weight:600;}

/* ---------- Vacíos ---------- */
.est-vacio{background:var(--card);border:1px dashed var(--line);border-radius:var(--radius);
  padding:34px 22px;text-align:center;color:var(--gris);font-size:13.5px;}

@media(max-width:900px){
  .est-grid2{grid-template-columns:1fr;}
  .hm-card-cuerpo{grid-template-columns:1fr;}
  .hm-mini{width:100%;}
}