/* Resumen con widgets e Informes (2026-09-26) */

/* ── Selector de período ── */
.rango { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: -6px 0 18px; }
.rango-pills { display: inline-flex; gap: 4px; background: var(--n-100); border-radius: 14px; padding: 4px; overflow-x: auto; max-width: 100%; }
.rango-pills a { padding: 7px 13px; border-radius: 10px; font-size: 12.5px; font-weight: 620; color: var(--text-muted); white-space: nowrap; }
.rango-pills a:hover { text-decoration: none; color: var(--text); }
.rango-pills a.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.rango-fechas { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--text-faint); }
.rango-fechas input[type=date] { width: auto; padding: 7px 10px; font-size: 13px; }

/* ── Tablero de widgets ── */
.widgets { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.widget { background: var(--surface); border: 1px solid var(--card-border); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; min-width: 0; }
.w-s { grid-column: span 3; } .w-m { grid-column: span 6; } .w-l { grid-column: span 12; }
@media (max-width: 1200px) { .w-s { grid-column: span 6; } }
@media (max-width: 900px) { .widgets { gap: 12px; } .w-s { grid-column: span 6; } .w-m, .w-l { grid-column: span 12; } }
@media (max-width: 380px) { .w-s { grid-column: span 12; } }
.w-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 10px; }
.w-cab h2 { margin: 0; font-size: 15px; font-weight: 720; letter-spacing: -.015em; }

.kpi { padding: 18px 20px; position: relative; height: 100%; }
.kpi-ic { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.kpi-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.kpi-lab { font-size: 12.5px; color: var(--text-muted); font-weight: 620; margin-bottom: 8px; padding-right: 44px; }
.kpi-num { font-size: 30px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 12px; color: var(--text-faint); margin-top: 6px; }
.kpi-var { display: inline-block; margin-top: 8px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.kpi-var.sube { background: var(--ok-soft); color: var(--ok); }
.kpi-var.baja { background: var(--danger-soft); color: var(--danger); }
.kpi-var.neutro { background: var(--n-100); color: var(--text-faint); font-weight: 600; }
@media (max-width: 900px) {
  .kpi { padding: 14px 15px; } .kpi-num { font-size: 24px; }
  .kpi-ic { width: 32px; height: 32px; border-radius: 10px; top: 12px; right: 12px; } .kpi-ic svg { width: 16px; height: 16px; }
  .kpi-lab { padding-right: 36px; }
}

.w-lista { display: flex; flex-direction: column; padding: 0 8px 10px; }
.w-fila { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; color: var(--text); }
.w-fila:hover { background: var(--n-50); text-decoration: none; }
.w-hora { font-weight: 750; font-size: 13px; min-width: 64px; font-variant-numeric: tabular-nums; }
.w-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.w-txt b { font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-txt small { font-size: 12px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-der { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12.5px; }
.w-der small { color: var(--text-faint); font-size: 11px; }
.w-badge { background: var(--accent); color: #fff; border-radius: 999px; min-width: 22px; height: 22px; padding: 0 7px; font-size: 11.5px; font-weight: 750; display: flex; align-items: center; justify-content: center; }
.w-mas { display: block; padding: 8px 10px; font-size: 12.5px; font-weight: 650; }

.w-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; padding: 8px 18px 10px; }
.w-dia { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; border-radius: 12px; color: var(--text); }
.w-dia:hover { background: var(--n-50); text-decoration: none; }
.w-dia-num { font-weight: 800; font-size: 15px; }
.w-dia-barra { position: relative; width: 22px; height: 70px; background: var(--n-100); border-radius: 8px; overflow: hidden; }
.w-dia-barra i { position: absolute; bottom: 0; left: 0; right: 0; background: #8CC5AE; border-radius: 8px; }
.w-dia-barra i.conf { background: var(--accent); }
.w-dia-lab { font-size: 12px; font-weight: 650; color: var(--text-muted); }
.w-dia small { font-size: 11px; color: var(--text-faint); margin-top: -4px; }

/* ── Gráficas ── */
.g-caja { width: 100%; }
.g-grid { stroke: var(--border-soft); stroke-width: 1; }
.g-eje { fill: var(--text-faint); font-size: 12px; font-family: var(--font); }
.g-leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.g-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.g-leyenda i, .g-dona-ley i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: 0 0 10px; }
.g-vacio { padding: 26px 18px; text-align: center; color: var(--text-faint); font-size: 13px; }
.g-rank { display: flex; flex-direction: column; gap: 11px; }
.g-rank-cab { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; margin-bottom: 5px; }
.g-rank-cab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.g-rank-cab b { font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
.g-rank-cab small { font-weight: 500; color: var(--text-faint); margin-left: 6px; font-size: 11.5px; }
.g-rank-barra { height: 8px; background: var(--n-100); border-radius: 8px; overflow: hidden; }
.g-rank-barra span { display: block; height: 100%; border-radius: 8px; }
.g-dona { display: flex; gap: 18px; align-items: center; }
.g-dona-svg { width: 150px; height: 150px; flex: 0 0 150px; }
.g-dona-num { fill: var(--text); font-size: 17px; font-weight: 800; font-family: var(--font); }
.g-dona-sub { fill: var(--text-faint); font-size: 9.5px; font-family: var(--font); }
.g-dona-ley { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; }
.g-dona-ley div { display: flex; align-items: center; gap: 8px; }
.g-dona-ley span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.g-dona-ley b { font-variant-numeric: tabular-nums; }
.g-dona-ley small { color: var(--text-faint); width: 34px; text-align: right; }
@media (max-width: 480px) { .g-dona { flex-direction: column; } .g-dona-ley { width: 100%; } }
.g-medidor { width: 100%; max-width: 220px; }
.g-medidor-num { fill: var(--text); font-size: 24px; font-weight: 800; font-family: var(--font); }

/* ── Panel para personalizar ── */
.w-panel { position: fixed; inset: 0; z-index: 95; background: rgba(15, 25, 20, .35); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.w-panel[hidden] { display: none; }
.w-panel-caja { width: min(620px, 100%); max-height: 88vh; display: flex; flex-direction: column; background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-lg); overflow: hidden; }
.w-panel-cab { display: flex; justify-content: space-between; gap: 12px; padding: 20px 22px 12px; }
.w-panel-cab h2 { margin: 0; font-size: 18px; font-weight: 780; }
.w-panel-cab p { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }
.w-panel-lista { overflow-y: auto; padding: 4px 14px; }
.w-op { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; }
.w-op:hover { background: var(--n-50); }
.w-op-check { flex: 1; display: flex; gap: 12px; align-items: center; margin: 0; cursor: pointer; min-width: 0; }
.w-op-check input { width: 19px; height: 19px; accent-color: var(--accent); flex: 0 0 19px; }
.w-op-check span { display: flex; flex-direction: column; min-width: 0; }
.w-op-check b { font-size: 13.5px; color: var(--text); font-weight: 650; }
.w-op-check small { font-size: 12px; color: var(--text-faint); font-weight: 500; }
.w-op-tam { font-size: 11px; color: var(--text-faint); background: var(--n-100); border-radius: 999px; padding: 2px 8px; }
.w-op-btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; font-size: 14px; }
.w-op-btn:hover { background: var(--n-100); color: var(--text); }
.w-panel-pie { display: flex; justify-content: space-between; padding: 14px 22px 18px; border-top: 1px solid var(--border-soft); }
@media (max-width: 900px) {
  .w-panel { align-items: flex-end; padding: 0; }
  .w-panel-caja { border-radius: 22px 22px 0 0; max-height: 92vh; padding-bottom: env(safe-area-inset-bottom); }
  .w-op-tam { display: none; }
  .rango { margin-top: 0; }
}
@media print { .rango, .tabs { display: none !important; } .widget { break-inside: avoid; box-shadow: none; } }


/* ── Barras interactivas ── */
.g-plot { position: relative; padding-left: 46px; }
.g-ejey { position: absolute; left: 0; top: 0; bottom: 0; width: 40px; }
.g-ejey span { position: absolute; right: 0; transform: translateY(-50%); font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-svg2 { display: block; overflow: visible; }
.g-grid { stroke: var(--border-soft); stroke-width: 1; stroke-dasharray: 3 4; }
.g-eje { fill: var(--text-faint); font-size: 11.5px; font-family: var(--font); }
.g-val { fill: var(--text-muted); font-size: 11px; font-weight: 700; font-family: var(--font); transition: fill .15s; pointer-events: none; }
.g-bar { cursor: pointer; }
.g-bar .g-seg { transform-box: fill-box; transform-origin: 50% 100%; animation: g-crece .7s cubic-bezier(.2, .8, .2, 1) both;
  filter: drop-shadow(0 3px 6px rgba(22, 43, 34, .12)); transition: opacity .18s ease, filter .18s ease; }
@keyframes g-crece { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.g-plot.enfoque .g-bar .g-seg { opacity: .35; }
.g-plot.enfoque .g-bar .g-val { opacity: .35; }
.g-plot.enfoque .g-bar.on .g-seg { opacity: 1; filter: drop-shadow(0 6px 12px rgba(22, 43, 34, .25)) brightness(1.08); }
.g-plot.enfoque .g-bar.on .g-val { opacity: 1; fill: var(--text); }
.g-bar.on .g-hit { fill: var(--n-50); }
@media (prefers-reduced-motion: reduce) { .g-bar .g-seg { animation: none; } }

/* Dona interactiva */
.g-arco { cursor: pointer; transition: stroke-width .18s ease, opacity .18s ease; }
.g-dona.enfoque .g-arco { opacity: .35; }
.g-dona.enfoque .g-arco.on { opacity: 1; stroke-width: 20; }

/* Ranking con resalte */
.g-rank-fila { border-radius: 8px; transition: background .15s; padding: 2px 4px; margin: 0 -4px; }
.g-rank-fila:hover { background: var(--n-50); }
.g-rank-fila:hover .g-rank-barra span { filter: brightness(1.1); }
.g-rank-barra span { animation: g-ancho .8s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left; }
@keyframes g-ancho { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Tarjeta flotante */
.g-tip { position: fixed; z-index: 120; pointer-events: none; min-width: 170px; max-width: 280px; padding: 10px 12px; border-radius: 14px;
  background: var(--surface); color: var(--text); border: 1px solid var(--card-border); box-shadow: var(--shadow-lg);
  font-size: 12.5px; opacity: 0; transform: translateY(4px); transition: opacity .12s ease, transform .12s ease; }
.g-tip.on { opacity: 1; transform: none; }
.g-tip b { display: block; font-size: 13px; margin-bottom: 6px; font-weight: 750; }
.g-tip-l { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.g-tip-l i { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 9px; }
.g-tip-l span { flex: 1; color: var(--text-muted); }
.g-tip-l strong { font-variant-numeric: tabular-nums; }
.g-tip-x { margin-top: 5px; color: var(--text-muted); font-size: 12px; }
.g-tip-x.sube { color: var(--ok); font-weight: 650; }
.g-tip-x.baja { color: var(--danger); font-weight: 650; }
.g-tip-link { margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--border-soft); color: var(--accent); font-weight: 650; font-size: 11.5px; }

.g-plot.sin-valores .g-val { display: none; }
@media (max-width: 600px) { .g-plot { padding-left: 38px; } .g-ejey { width: 34px; } .g-ejey span { font-size: 10px; } .g-eje { font-size: 10.5px; } }