/* ===== Tableros UDATA - tema claro tipo Data Studio =====
   Tokens validados con el validador de paleta (modo claro, superficie #ffffff):
   banda de luminosidad, piso de croma, separacion CVD y contraste.
   Los 3 slots bajo 3:1 aplican la regla de relieve: etiquetas visibles + tabla siempre presente. */
.ds{
  --ds-plane:#f1f3f4;      /* plano de la pagina del informe */
  --ds-surface:#ffffff;    /* superficie de panel */
  --ds-ink:#0b0b0b;
  --ds-ink-2:#52514e;
  --ds-muted:#898781;
  --ds-grid:#e8eaed;
  --ds-axis:#c3c2b7;
  --ds-border:rgba(11,11,11,.10);
  --ds-series:#2a78d6;     /* slot categorico 1 (serie unica) */
  --ds-s1:#2a78d6; --ds-s2:#eb6834; --ds-s3:#1baf7a;
  --ds-s4:#eda100; --ds-s5:#e87ba4; --ds-s6:#008300;
  --ds-live:#0ca30c;

  max-width:1000px;margin:34px auto;background:var(--ds-plane);
  border-radius:10px;overflow:hidden;text-align:left;
  color:var(--ds-ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  box-shadow:0 1px 3px rgba(0,0,0,.35),0 12px 30px -16px rgba(0,0,0,.8);
}

/* ---------- Barra superior del informe ---------- */
.ds-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--ds-surface);border-bottom:1px solid var(--ds-border);padding:14px 20px;
}
.ds-eyebrow{
  display:flex;align-items:center;gap:7px;margin:0 0 3px;text-align:left;
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ds-muted);
}
.ds-title{margin:0;text-align:left;font-size:20px;font-weight:600;color:var(--ds-ink);line-height:1.3;letter-spacing:-.01em}
.ds-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.ds-live{display:inline-flex;align-items:center;gap:5px;color:var(--ds-live);font-weight:700}
.ds-live i{width:6px;height:6px;border-radius:50%;background:currentColor;position:relative;flex:none}
.ds-live i::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid currentColor;opacity:.7;animation:ds-pulse 2s ease-out infinite}
@keyframes ds-pulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.55);opacity:0}}
.ds-live[data-live="0"]{color:var(--ds-muted)}
.ds-live[data-live="0"] i::after{animation:none;opacity:0}

/* ---------- Controles ---------- */
.ds-seg{display:inline-flex;background:var(--ds-plane);border:1px solid var(--ds-border);border-radius:6px;padding:2px;gap:2px}
.ds-seg button{
  background:transparent;border:0;color:var(--ds-ink-2);font:inherit;font-size:13px;
  padding:8px 15px;border-radius:4px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s;
}
.ds-seg button:hover{background:rgba(11,11,11,.05);color:var(--ds-ink)}
.ds-seg button[aria-pressed="true"]{background:#256abf;color:#fff}  /* paso 500 de la rampa azul: 5.39:1 con blanco */
.ds-seg button:focus-visible{outline:2px solid var(--ds-series);outline-offset:1px}
.ds-btn{
  background:var(--ds-surface);border:1px solid var(--ds-border);color:var(--ds-ink-2);
  font:inherit;font-size:13px;padding:9px 15px;border-radius:6px;cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;
}
.ds-btn:hover{background:var(--ds-plane);border-color:var(--ds-axis);color:var(--ds-ink)}
.ds-btn:disabled{opacity:.55;cursor:default}
.ds-btn:focus-visible{outline:2px solid var(--ds-series);outline-offset:2px}

/* ---------- Cuerpo y rejilla de paneles ---------- */
.ds-body{padding:14px;display:flex;flex-direction:column;gap:14px;transition:opacity .2s ease}
.ds-body[data-busy="1"]{opacity:.45}          /* el refetch conserva el marco */
.ds-panel{background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:10px;padding:20px 22px;min-width:0;
  transition:box-shadow .18s,border-color .18s}
.ds-panel-t{margin:0 0 16px;text-align:left;font-size:14px;font-weight:600;color:var(--ds-ink-2);letter-spacing:.02em}
.ds-grid{display:grid;grid-template-columns:1.85fr 1fr;gap:16px;min-width:0;align-items:start}

/* ---------- Scorecards ---------- */
.ds-scorecards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ds-sc{position:relative;background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:10px;
  padding:18px 20px 16px;min-width:0;overflow:hidden;transition:box-shadow .18s,border-color .18s}
.ds-sc-l{margin:0 0 7px;text-align:left;font-size:12.5px;color:var(--ds-muted);line-height:1.35}
.ds-sc-v{margin:0;text-align:left;font-size:32px;font-weight:600;color:var(--ds-ink);line-height:1.15;letter-spacing:-.02em;overflow-wrap:anywhere}
.ds-sc-v small{font-size:15px;font-weight:500;color:var(--ds-muted);margin-left:3px;letter-spacing:0}

/* ---------- Barras horizontales ---------- */
.ds-rows{min-width:0}
.ds-row{display:flex;align-items:center;gap:12px;padding:7px 8px;margin:0 -6px;border-radius:4px;transition:background .13s}
.ds-row:hover,.ds-row:focus-visible{background:rgba(42,120,214,.07)}
.ds-row:focus-visible{outline:2px solid var(--ds-series);outline-offset:-2px}
.ds-rank{flex:0 0 22px;text-align:right;font-size:12px;color:var(--ds-muted);font-variant-numeric:tabular-nums}
.ds-lab{flex:0 0 33%;max-width:33%;display:flex;align-items:center;gap:7px;min-width:0;font-size:14px;color:var(--ds-ink-2)}
.ds-lab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-row:hover .ds-lab{color:var(--ds-ink)}
.ds-logo{width:16px;height:16px;border-radius:3px;flex:none;object-fit:cover;background:var(--ds-plane)}
.ds-track{flex:1;display:flex;align-items:center;gap:8px;min-width:0}
.ds-bar{
  height:20px;                                  /* <=24px: la banda deja aire */
  background:var(--ds-series);
  border-radius:0 3px 3px 0;                    /* extremo de dato redondeado, base cuadrada */
  min-width:2px;width:0;
  transition:width .7s cubic-bezier(.22,.61,.36,1),filter .13s;
  transition-delay:calc(var(--i,0) * 40ms);
}
.ds-rows[data-in="1"] .ds-bar{width:var(--w)}
.ds-row:hover .ds-bar{filter:brightness(1.1)}
.ds-val{flex:0 0 auto;font-size:13.5px;color:var(--ds-ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.ds-row:hover .ds-val{color:var(--ds-ink)}
.ds-base{height:1px;background:var(--ds-grid);margin:9px 0 0 calc(33% + 38px)}

/* ---------- Dona (parte-todo, <=6 segmentos) ---------- */
.ds-donut{display:flex;flex-direction:column;align-items:center;gap:14px}
.ds-donut svg{width:100%;max-width:215px;height:auto;display:block}
.ds-donut circle{transition:stroke-width .15s,opacity .15s;cursor:default}
.ds-donut circle:hover{stroke-width:30}
.ds-hole-v{font-size:22px;font-weight:600;fill:var(--ds-ink)}
.ds-hole-l{font-size:9.5px;fill:var(--ds-muted)}
/* Leyenda: siempre presente con >=2 series; los valores visibles cubren la regla de relieve */
.ds-legend{width:100%;display:flex;flex-direction:column;gap:7px}
.ds-leg{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ds-ink-2);min-width:0}
.ds-leg i{width:9px;height:9px;border-radius:2px;flex:none}
.ds-leg span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ds-leg b{font-weight:600;color:var(--ds-ink);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- Dumbbell: dos cohortes por plataforma ----------
   Forma documentada para "antes -> despues por item": un solo tono en dos
   intensidades (rampa ordinal validada), nunca dos hues distintos. */
.ds-dumbtrack{flex:1;position:relative;height:20px;min-width:0}
.ds-dumb-line{position:absolute;top:9px;height:2px;background:var(--ds-grid);border-radius:1px}
.ds-dumb-dot{position:absolute;top:3px;width:14px;height:14px;border-radius:50%;
  box-shadow:0 0 0 2px var(--ds-surface)}            /* anillo de superficie, no borde */
.ds-dumb-a{background:#86b6ef}                        /* paso claro: referencia */
.ds-dumb-b{background:#2a78d6}                        /* paso oscuro: grupo elegido */
.ds-dumb-val{flex:0 0 auto;font-size:13px;color:var(--ds-ink-2);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.ds-row:hover .ds-dumb-val{color:var(--ds-ink)}
.ds-keys{display:flex;gap:16px;flex-wrap:wrap;margin:-4px 0 14px}
.ds-key{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ds-ink-2)}
.ds-key i{width:11px;height:11px;border-radius:50%;flex:none}
.ds-delta{font-variant-numeric:tabular-nums}
.ds-up{color:#006300}      /* texto de exito, no color de serie */
.ds-down{color:#d03b3b}   /* status critical documentado: 4.80:1 */

/* ---------- Tabla (panel permanente = vista accesible) ---------- */
.ds-scroll{overflow-x:auto}
.ds-table{width:100%;border-collapse:collapse;font-size:14px}
.ds-table caption{caption-side:bottom;text-align:left;color:var(--ds-muted);font-size:12px;padding-top:12px}
.ds-table th,.ds-table td{padding:11px 14px;border-bottom:1px solid var(--ds-grid);text-align:left;color:var(--ds-ink-2);white-space:nowrap}
.ds-table th{font-size:11.5px;font-weight:600;color:var(--ds-muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--ds-axis)}
.ds-table tbody tr:hover td{background:rgba(42,120,214,.06);color:var(--ds-ink)}
.ds-table td.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--ds-ink)}
.ds-table th.num{text-align:right}
.ds-table td.nm{white-space:normal;min-width:180px}

.ds-source{margin:0;padding:12px 20px 14px;text-align:left;background:var(--ds-surface);
  border-top:1px solid var(--ds-border);font-size:12px;color:var(--ds-muted);line-height:1.65}
.ds-source a{color:var(--ds-ink-2)}

/* ---------- Tooltip ---------- */
.ds-tip{
  position:fixed;z-index:9999;pointer-events:none;opacity:0;transform:translateY(3px);
  transition:opacity .12s,transform .12s;background:#ffffff;border:1px solid var(--ds-border);
  border-radius:6px;padding:9px 11px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:13px;color:var(--ds-ink-2);box-shadow:0 6px 22px rgba(0,0,0,.22);max-width:300px;
}
.ds-tip[data-show="1"]{opacity:1;transform:translateY(0)}
.ds-tip .v{display:block;font-size:18px;font-weight:600;color:var(--ds-ink);font-variant-numeric:tabular-nums;margin-bottom:2px}
.ds-tip .k{display:inline-block;width:10px;height:2px;vertical-align:middle;margin-right:6px;border-radius:1px;background:var(--ds-series)}

/* ---------- Relieve y acentos ---------- */
.ds-panel:hover{box-shadow:0 2px 10px rgba(11,11,11,.07);border-color:rgba(11,11,11,.16)}
.ds-sc:hover{box-shadow:0 2px 10px rgba(11,11,11,.07);border-color:rgba(11,11,11,.16)}
/* filo superior en el color de serie: identidad visual sin teñir texto */
.ds-sc::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--ds-series),rgba(42,120,214,.25))}
.ds-topbar{background:linear-gradient(180deg,#ffffff 0%,#fbfbfa 100%)}
.ds-body{padding:16px;gap:16px}
.ds-scorecards{gap:16px}
.ds-keys{gap:20px}
/* la fila resaltada gana un filo a la izquierda, no solo fondo */
/* En reposo la sombra es transparente: con un color solido y tamano 0,
   Firefox pinta un artefacto de un pixel en las esquinas de la fila. */
.ds-row{box-shadow:inset 0 0 0 0 rgba(42,120,214,0);transition:background .13s,box-shadow .13s}
.ds-row:hover{box-shadow:inset 3px 0 0 0 var(--ds-series)}

/* ---------- Vista previa plegable ----------
   En reposo el tablero muestra cabecera, scorecards y la grafica principal.
   El resto (tabla de detalle, panel de comparacion) solo aparece al abrirlo,
   para no saturar la pagina con tres tableros completos. */
.ds[data-expanded="0"] [data-extra]{display:none}
.ds-more{position:relative;background:var(--ds-surface);border-top:1px solid var(--ds-border);
  padding:0;display:flex;justify-content:center}
/* degradado que insinua que hay mas contenido debajo */
.ds[data-expanded="0"] .ds-more::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;height:44px;pointer-events:none;
  background:linear-gradient(180deg,rgba(241,243,244,0),var(--ds-plane))}
.ds-more-btn{
  width:100%;background:transparent;border:0;color:var(--ds-series);font:inherit;
  font-size:13.5px;font-weight:600;padding:14px 16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .15s,color .15s;
}
.ds-more-btn:hover{background:rgba(42,120,214,.07)}
.ds-more-btn:focus-visible{outline:2px solid var(--ds-series);outline-offset:-3px}
.ds-more-btn svg{width:14px;height:14px;transition:transform .2s}
.ds[data-expanded="1"] .ds-more-btn svg{transform:rotate(180deg)}
/* toda la zona de graficas invita al clic mientras esta plegada */
.ds[data-expanded="0"] .ds-body{cursor:pointer}

/* ---------- Escala mayor en el tablero de nubes ---------- */
#udv-nubes .ds-title{font-size:22px}
#udv-nubes .ds-panel-t{font-size:15.5px}
#udv-nubes .ds-sc-l{font-size:13.5px}
#udv-nubes .ds-sc-v{font-size:34px}
#udv-nubes .ds-lab{font-size:15.5px}
#udv-nubes .ds-val{font-size:15px}
#udv-nubes .ds-rank{font-size:13px}
#udv-nubes .ds-table{font-size:15px}
#udv-nubes .ds-table th{font-size:12.5px}
#udv-nubes .ds-key,#udv-nubes .ds-dumb-val{font-size:14px}
#udv-nubes .ds-bar{height:22px}
#udv-nubes .ds-row{padding:8px 8px}

/* Valores de texto largo en scorecards: dos escalones menores */
.ds-sc-v--sm{font-size:24px}
.ds-sc-v--xs{font-size:20px;line-height:1.3}
#udv-nubes .ds-sc-v--sm{font-size:26px}
#udv-nubes .ds-sc-v--xs{font-size:22px;line-height:1.3}

/* ---------- Responsivo ---------- */
@media (max-width:860px){
  .ds-grid{grid-template-columns:1fr}
  .ds-scorecards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .ds{margin:24px auto;border-radius:8px}
  .ds-topbar{padding:12px 14px}
  .ds-title{font-size:15.5px}
  .ds-body{padding:10px;gap:10px}
  .ds-panel{padding:14px}
  .ds-scorecards{grid-template-columns:1fr}
  .ds-sc-v{font-size:22px}
  .ds-rank{display:none}
  .ds-lab{flex-basis:44%;max-width:44%;font-size:11.5px}
  .ds-base{margin-left:calc(44% + 10px)}
}
@media (prefers-reduced-motion:reduce){
  .ds-bar{transition:none;transition-delay:0s}
  .ds-live i::after{animation:none}
  .ds-tip{transition:none}
}

/* ---------- Ruptura de la columna del sitio ----------
   Los tableros viven dentro de .col-sm-8.col-sm-offset-2, que solo da ~690px.
   Como esa columna esta centrada en la pagina, centrar sobre su propio eje
   equivale a centrar en el viewport. El tope de 1080px es el mismo
   max-width que styles.css le da a .container, asi que el tablero llega
   justo al ancho maximo del sitio sin desbordarlo.
   El margen de 64px da aire en los anchos intermedios y absorbe de paso
   la barra de scroll, que 100vw si cuenta. */
@media (min-width:768px){
  .ds{
    width:min(960px, calc(100vw - 64px));
    max-width:none;
    margin-left:50%;
    transform:translateX(-50%);
  }
}