/* =========================================================
   USMEF Dashboard – CSS (scopeado para WordPress)
   Todo está dentro de .usmef-dashboard y usa !important
   para minimizar conflictos con el theme anfitrión.
   ========================================================= */

.usmef-dashboard{
  --red:#EB3B43; --ink:#1F2937; --ink-2:#374151; --muted:#6B7280; --line:#E5E5E5;
  --bg:#FFFFFF; --bg-2:#F8FAFC; --good:#0F5132; --bad:#B42318;
  --radius:16px; --shadow:0 1px 2px rgba(16,24,40,.06), 0 12px 24px rgba(16,24,40,.08);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
  color:var(--ink) !important;
}

/* Normalización local */
.usmef-dashboard *{ box-sizing:border-box !important }

/* Contenedor */
.usmef-dashboard .container{
  max-width:1200px !important;
  margin:22px auto !important;
  padding:0 16px !important;
  background:transparent !important;
}

/* =================== HEADER =================== */
.usmef-dashboard .header{
  background:#fff !important; border:1px solid var(--line) !important; border-radius:var(--radius) !important;
  padding:16px 18px !important; box-shadow:var(--shadow) !important;
  display:flex !important; gap:24px !important; align-items:center !important; justify-content:space-between !important;
  margin-bottom:16px !important;
}
.usmef-dashboard .brand{ display:flex !important; gap:12px !important; align-items:center !important }
.usmef-dashboard .brand__logo{
  width:44px !important; height:44px !important; border-radius:12px !important;
  background:var(--red) !important; color:#fff !important; font-weight:800 !important;
  display:grid !important; place-items:center !important; letter-spacing:.5px !important;
}
.usmef-dashboard .brand__text h1{ margin:0 !important; font-size:1.6rem !important }
.usmef-dashboard .brand__text p{ margin:2px 0 0 !important; color:var(--muted) !important; font-size:.9rem !important }

/* Filtros */
.usmef-dashboard .filters{ display:flex !important; gap:12px !important; align-items:flex-end !important; flex-wrap:wrap !important }
.usmef-dashboard .field{ display:flex !important; flex-direction:column !important; /*gap:6px !important*/ }
.usmef-dashboard .field label{ font-size:1rem !important; color:var(--muted) !important }
.usmef-dashboard .field select{
  padding:10px 12px !important; border:1px solid var(--line) !important; border-radius:12px !important;
  background:#fff !important; min-width:180px !important; color:var(--ink) !important;
}
.usmef-dashboard .switch{ display:flex !important; align-items:center !important; gap:10px !important }
.usmef-dashboard .switch input{
  appearance:none !important; width:42px !important; height:26px !important; border-radius:999px !important;
  position:relative !important; outline:none !important; cursor:pointer !important; background:#e8e8e8 !important; transition:.2s !important;
}
.usmef-dashboard .switch input:checked{ background:rgba(235,59,67,.25) !important }
.usmef-dashboard .switch input::after{
  content:"" !important; position:absolute !important; top:3px !important; left:3px !important;
  width:20px !important; height:20px !important; background:#fff !important; border-radius:50% !important;
  box-shadow:0 1px 2px rgba(0,0,0,.2) !important; transition:.2s !important;
}
.usmef-dashboard .switch input:checked::after{ left:19px !important; background:var(--red) !important }
.usmef-dashboard .switch label{ font-size:.9rem !important; color:var(--ink-2) !important }

/* =================== KPIs =================== */
.usmef-dashboard .grid-kpi{
  display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:14px !important; margin-bottom:16px !important;
}
.usmef-dashboard .kpi{
  background:#fff !important; border:1px solid var(--line) !important; border-radius:var(--radius) !important;
  padding:14px 16px !important; box-shadow:var(--shadow) !important;
}
.usmef-dashboard .kpi header{ font-size:.9rem !important; color:var(--muted) !important; margin-bottom:6px !important }
.usmef-dashboard .kpi .val{ font-size:1.6rem !important; font-weight:800 !important; letter-spacing:.2px !important }
.usmef-dashboard .kpi .delta{ margin-top:6px !important; font-weight:700 !important; font-size:.95rem !important }
.usmef-dashboard .kpi .delta.up{ color:var(--good) !important }
.usmef-dashboard .kpi .delta.down{ color:var(--bad) !important }
.usmef-dashboard .kpi .delta.neutral{ color:var(--muted) !important }
.usmef-dashboard .kpi footer{ margin-top:8px !important; font-size:.1rem !important; color:var(--muted) !important }
.usmef-dashboard .kpi.accent{ border:1px solid rgba(235,59,67,.35) !important; box-shadow:0 4px 18px rgba(235,59,67,.08) !important }
.usmef-dashboard .kpi.accent header{ color:var(--red) !important }

/* =================== TARJETAS / VISUALES =================== */
.usmef-dashboard .grid-viz{ display:grid !important; grid-template-columns:2fr 3fr !important; gap:14px !important; margin-bottom:16px !important }
.usmef-dashboard .card{ background:#fff !important; border:1px solid var(--line) !important; border-radius:var(--radius) !important; box-shadow:var(--shadow) !important; overflow:hidden !important }
.usmef-dashboard .card__head{ padding:14px 16px !important; border-bottom:1px solid var(--line) !important }
.usmef-dashboard .card__head h2{ margin:0 !important; font-size:1.6rem !important }
.usmef-dashboard .hint{ margin:6px 0 0 !important; color:var(--muted) !important; font-size:.9rem !important }
.usmef-dashboard .card__body{ padding:14px 16px !important }

/* ---- Barras comparativas ---- */
.usmef-dashboard .bars{ display:flex !important; flex-direction:column !important; gap:14px !important }
.usmef-dashboard .bar{ display:grid !important; grid-template-columns:160px 1fr !important; gap:12px !important; align-items:center !important }
.usmef-dashboard .bar__label{ font-weight:600 !important; color:var(--ink-2) !important }

/* Track mejorado + bordes redondeados */
.usmef-dashboard .bar__track{
  position:relative !important;
  height:22px !important;
  background:linear-gradient(#F6F8FA,#EFF3F6) !important;
  border:1px solid #D7DCE1 !important;
  border-radius:999px !important;
  overflow:visible !important;  /* deja salir el tooltip */
  --tip-x: 100% !important;     /* posición del tooltip (la seta JS) */
  z-index:1 !important;
}

/* Rellenos */
.usmef-dashboard .bar__fill{
  height:100% !important;
  border-radius:999px !important;
  display:flex !important; align-items:center !important; justify-content:flex-end !important;
  padding-right:8px !important; font-weight:800 !important; font-size:.78rem !important; letter-spacing:.2px !important;
  color:#fff !important; text-shadow:0 1px 1px rgba(0,0,0,.25) !important;
}
.usmef-dashboard .bar__fill.sa{ background:linear-gradient(#F25A62,#EB3B43) !important; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08) !important }
.usmef-dashboard .bar__fill.rest{ background:linear-gradient(#222,#111) !important }
.usmef-dashboard .bar__fill.world{
  background:#fff !important; color:#111 !important; text-shadow:none !important; font-weight:700 !important;
  border:2px solid var(--red) !important;
}

/* ---- Tooltips de barras ---- */
.usmef-dashboard .bar__track::after{
  content: attr(data-tip) !important;
  position:absolute !important;
  left: var(--tip-x) !important;
  bottom: calc(100% + 8px) !important;
  transform: translateX(-50%) !important;
  background: rgba(0,0,0,.88) !important;
  color:#fff !important;
  padding:6px 10px !important;
  font-size:.80rem !important;
  border-radius:8px !important;
  white-space:nowrap !important;
  box-shadow:0 8px 18px rgba(16,24,40,.25) !important;
  pointer-events:none !important;
  opacity:0 !important;
  transition: opacity .15s ease, transform .15s ease !important;
}
.usmef-dashboard .bar__track::before{
  content:"" !important;
  position:absolute !important;
  left: var(--tip-x) !important;
  bottom: calc(100% + 2px) !important;
  transform: translateX(-50%) !important;
  border:6px solid transparent !important;
  border-top-color: rgba(0,0,0,.88) !important;
  opacity:0 !important;
  transition: opacity .15s ease !important;
}
.usmef-dashboard .bar__track:hover::after,
.usmef-dashboard .bar__track:focus-within::after,
.usmef-dashboard .bar__track:hover::before,
.usmef-dashboard .bar__track:focus-within::before{
  opacity:1 !important;
}
/* Colores del tooltip por serie */
.usmef-dashboard .bar__track.sa::after{ background: var(--red) !important }
.usmef-dashboard .bar__track.sa::before{ border-top-color: var(--red) !important }
.usmef-dashboard .bar__track.rest::after{ background:#111 !important }
.usmef-dashboard .bar__track.rest::before{ border-top-color:#111 !important }
.usmef-dashboard .bar__track.world::after{
  background:#fff !important; color:#111 !important; border:2px solid var(--red) !important;
}
.usmef-dashboard .bar__track.world::before{ border-top-color:#fff !important }

/* ---- Pie / leyenda ---- */
.usmef-dashboard .canvas-wrap{ display:grid !important; grid-template-columns:1fr !important; gap:10px !important }
.usmef-dashboard .legend{ list-style:none !important; display:flex !important; gap:16px !important; padding:0 !important; margin:0 !important; color:var(--muted) !important; font-size:.9rem !important; flex-wrap:wrap !important }
.usmef-dashboard .dot{ width:10px !important; height:10px !important; border-radius:50% !important; display:inline-block !important; margin-right:6px !important; vertical-align:middle !important }
.usmef-dashboard .dot.sa{ background:var(--red) !important }
.usmef-dashboard .dot.rest{ background:#111 !important }
.usmef-dashboard .dot.world{ background:#fff !important; border:2px solid var(--red) !important }

/* =================== TABLA =================== */
.usmef-dashboard .table-card{ overflow:hidden !important }
.usmef-dashboard .table-scroll{ overflow:auto !important }
.usmef-dashboard .tbl{ width:100% !important; border-collapse:separate !important; border-spacing:0 !important }
.usmef-dashboard .tbl thead th{
  position:sticky !important; top:0 !important; z-index:1 !important; background:#fff !important;
  border-bottom:1px solid var(--line) !important; padding:12px 14px !important; text-align:left !important;
  font-size:.92rem !important; color:var(--ink-2) !important;
}
.usmef-dashboard .tbl th.num,
.usmef-dashboard .tbl td.num{ text-align:right !important; white-space:nowrap !important }
.usmef-dashboard .tbl tbody td{ padding:11px 14px !important; border-bottom:1px solid var(--line) !important }
.usmef-dashboard .tbl tbody tr:nth-child(even){ background:#FCFCFD !important }
.usmef-dashboard .tbl .world td:first-child{ border-left:4px solid var(--red) !important }
.usmef-dashboard .tbl .region td:first-child{ border-left:4px solid var(--red) !important }
.usmef-dashboard .tbl .rest td:first-child{ border-left:4px solid #111 !important }
.usmef-dashboard .tbl .subhead td{ background:#fff !important; font-weight:700 !important; border-top:2px solid var(--line) !important }
.usmef-dashboard .pill{
  display:inline-block !important; margin-left:6px !important; padding:2px 8px !important;
  font-size:.72rem !important; border-radius:999px !important; color:var(--red) !important;
  background:rgba(235,59,67,.08) !important; border:1px solid rgba(235,59,67,.35) !important;
}
.usmef-dashboard .num.pos{ color:var(--good) !important; font-weight:700 !important }
.usmef-dashboard .num.neg{ color:var(--bad) !important; font-weight:700 !important }
.usmef-dashboard .foot{ padding:12px 14px !important; font-size:.9rem !important; color:var(--muted) !important }

/* =================== RESPONSIVO =================== */
@media (max-width: 1000px){
  .usmef-dashboard .grid-kpi{ grid-template-columns:repeat(2,1fr) !important }
  .usmef-dashboard .grid-viz{ grid-template-columns:1fr !important }
}
@media (max-width: 640px){
  .usmef-dashboard .header{ flex-direction:column !important; align-items:flex-start !important }
  .usmef-dashboard .brand__text h1{ font-size:1rem !important }
  .usmef-dashboard .field select{ min-width:unset !important }
  .usmef-dashboard .grid-kpi{ grid-template-columns:1fr !important }
  .usmef-dashboard .bar{ grid-template-columns:1fr !important }
  .usmef-dashboard .bar__label{ margin-bottom:4px !important }

  /* Tabla en formato “cards” móvil */
  .usmef-dashboard .tbl thead{ display:none !important }
  .usmef-dashboard .tbl, .usmef-dashboard .tbl tbody, .usmef-dashboard .tbl tr, .usmef-dashboard .tbl td{
    display:block !important; width:100% !important
  }
  .usmef-dashboard .tbl tr{ margin:10px 0 !important; border:1px solid var(--line) !important; border-radius:12px !important; overflow:hidden !important }
  .usmef-dashboard .tbl td{ display:flex !important; justify-content:space-between !important; gap:10px !important }
  .usmef-dashboard .tbl td:first-child{ background:#F9FAFB !important; font-weight:700 !important }
}
/* === Desactiva el antiguo tooltip basado en ::after/::before === */
.usmef-dashboard .bar__track::after,
.usmef-dashboard .bar__track::before{ display:none !important; }

/* === Tooltip como elemento === */
.usmef-dashboard .bar-tip{
  position:absolute !important;
  bottom: calc(100% + 8px) !important;
  left: 0 !important; /* JS setea left en px (centrado ya calculado) */
  transform: translateY(4px) !important;
  background: rgba(0,0,0,.88) !important;
  color:#fff !important;
  padding:6px 10px !important;
  font-size:.80rem !important;
  border-radius:8px !important;
  white-space:nowrap !important;
  box-shadow:0 8px 18px rgba(16,24,40,.25) !important;
  pointer-events:none !important;
  opacity:0 !important;
  transition: opacity .15s ease, transform .15s ease !important;
  z-index: 2 !important;
}
.usmef-dashboard .bar-tip::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  bottom:-6px !important;
  transform: translateX(-50%) !important;
  border:6px solid transparent !important;
  border-top-color: rgba(0,0,0,.88) !important;
}
.usmef-dashboard .bar__track:hover .bar-tip,
.usmef-dashboard .bar__track:focus-within .bar-tip{
  opacity:1 !important;
  transform: translateY(0) !important;
}

/* Colores por serie */
.usmef-dashboard .bar-tip.sa{ background: var(--red) !important; }
.usmef-dashboard .bar-tip.sa::after{ border-top-color: var(--red) !important; }
.usmef-dashboard .bar-tip.rest{ background:#111 !important; }
.usmef-dashboard .bar-tip.rest::after{ border-top-color:#111 !important; }
.usmef-dashboard .bar-tip.world{
  background:#fff !important; color:#111 !important; border:2px solid var(--red) !important;
}
.usmef-dashboard .bar-tip.world::after{ border-top-color:#fff !important; }

/* Oculta el texto dentro de la barra si es angosta; solo lo mostramos en barras "anchas" */
.usmef-dashboard .bar__fill span{ display:none !important; }
.usmef-dashboard .bar__fill.wide span{ display:block !important; }

/* Tooltip para dona por país */
.usmef-dashboard .pie-tooltip{
  position:absolute !important;
  background: rgba(0,0,0,.88) !important;
  color:#fff !important;
  padding:6px 10px !important;
  font-size:.80rem !important;
  border-radius:8px !important;
  white-space:nowrap !important;
  box-shadow:0 8px 18px rgba(16,24,40,.25) !important;
  pointer-events:none !important;
  opacity:0;
  transform: translateY(0); /* manejado vía JS */
  z-index: 3 !important;
}

/* Contenedor del canvas para posicionar el tooltip dentro */
.usmef-dashboard .canvas-wrap{
  position: relative !important;
}

/* ==== Pie responsive (canvas + leyenda) ==== */
.usmef-dashboard .pie-grid{
  display:grid !important;
  gap:14px !important;
  align-items:start !important;
}

/* Desktop: dos columnas (dona | leyenda) */
@media (min-width: 900px){
  .usmef-dashboard .pie-grid{
    grid-template-columns: 1fr 320px !important;
  }
}

/* Móvil: una columna (dona arriba, leyenda abajo) */
@media (max-width: 899.98px){
  .usmef-dashboard .pie-grid{
    grid-template-columns: 1fr !important;
  }
}

/* El contenedor del canvas sirve de referencia para tooltip y sizing */
.usmef-dashboard .canvas-wrap{
  position: relative !important;
  width: 100% !important;
  /* Altura la maneja JS según el ancho; aquí solo aseguramos un mínimo */
  min-height: 220px !important;
}

/* El canvas se estira a lo ancho; la altura la setea JS (pixeles exactos) */
.usmef-dashboard #pieCanvasSA{
  display:block !important;
  width:100% !important;
  height:auto !important; /* JS la sobreescribe con px exactos */
}

/* Leyenda: lista legible y scrollable cuando hay muchos países */
.usmef-dashboard #legendSA{
  list-style:none !important;
  padding:0 !important;
  margin:0 !important;
  color:var(--muted) !important;
  font-size:.92rem !important;
  display:block !important;
  max-height: 360px !important;   /* para desktop: evita alargar la tarjeta */
  overflow: auto !important;
  padding-right: 6px !important;  /* espacio para scrollbar */
}
@media (max-width: 899.98px){
  .usmef-dashboard #legendSA{
    max-height: none !important;  /* en móvil, que fluya */
    font-size:.90rem !important;
  }
}
.usmef-dashboard #legendSA li{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:4px 0 !important;
  line-height:1.2 !important;
  white-space:normal !important;
}
.usmef-dashboard #legendSA .dot{
  flex:0 0 10px !important;
  width:10px !important; height:10px !important; border-radius:50% !important;
  border:1px solid rgba(0,0,0,.15) !important;
  margin:0 6px 0 0 !important;
}

/* Tooltip de dona: ya lo tienes, solo aseguramos que quede sobre la leyenda */
.usmef-dashboard .pie-tooltip{
  z-index: 4 !important; /* por encima de la leyenda */
}