/* css/dashboard-fw.css — Larry Dashboard framework (F5.1-F5.3). Aditivo. */
.dwidget-skel{height:100%;min-height:40px;border-radius:8px;background:linear-gradient(90deg,var(--bg-raised,#f0ede8) 25%,var(--bg-border,#e6e2db) 37%,var(--bg-raised,#f0ede8) 63%);background-size:400% 100%;animation:dwidgetShimmer 1.4s ease infinite}
@keyframes dwidgetShimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.dwidget-err,.dwidget-empty{display:flex;align-items:center;justify-content:center;height:100%;min-height:40px;font-size:12.5px;color:var(--text-muted,#8a8580);text-align:center;padding:8px}
.dwidget-list{padding:10px;height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.dwidget-row{font-size:12.5px;color:var(--text,#2b2926);padding:5px 8px;background:var(--bg-raised,#f0ede8);border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dwidget-limits{padding:10px 12px;height:100%;overflow-y:auto}
.dwidget-lim-row{margin-bottom:9px}
.dwidget-lim-row:last-child{margin-bottom:0}
.dwidget-lim-lbl{font-size:11.5px;color:var(--text-muted,#8a8580);display:block}
.dwidget-lim-val{font-size:13px;font-weight:700;color:var(--text,#2b2926)}
.dwidget-lim-bar{height:5px;border-radius:3px;background:var(--bg-border,#e6e2db);overflow:hidden;margin-top:3px}
.dwidget-lim-bar div{height:100%;border-radius:3px}
.dwidget-upgrade{padding:12px;text-align:center;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px}
.dwidget-greet{padding:14px;font-size:14px;font-weight:600;color:var(--text,#2b2926);height:100%;display:flex;align-items:center}

/* Toolbar del dashboard (F5.3: guardar/plantillas/agregar widget).
   Auditoría final (post-Fase 19, hallazgo HIGH confirmado, mobile-first CLAUDE.md): esta era una
   sola fila flex SIN flex-wrap — en ancho de teléfono (375px) los botones siempre visibles
   (Ayuda+What-if+Marcadores+Marketplace+Plantillas) necesitan ~450-500px, y el contenedor real
   (.main{overflow-x:hidden}) RECORTA en silencio en vez de dejar scroll — Marketplace/Plantillas
   quedaban fuera del área tocable, sin forma de alcanzarlos. Mobile-first real: el wrap es el
   comportamiento DEFAULT (no un @media que "arregla" un layout de escritorio después) — el título
   toma su propia línea y los botones bajan en cuantas líneas hagan falta, todos siempre visibles
   y tocables, en cualquier ancho. */
.dashfw-toolbar{display:flex;align-items:center;gap:8px;padding:8px 0 12px;flex-wrap:wrap}
.dashfw-toolbar h1{font-size:18px;margin:0;flex:1 1 100%}
@media (min-width:768px){
  .dashfw-toolbar h1{flex:1 1 auto}
}
.dashfw-grid{min-height:200px}
.dashfw-grid .grid-stack-item-content{background:var(--bg-surface,#fff);border:1px solid var(--bg-border,#e6e2db);box-shadow:0 1px 3px rgba(0,0,0,.06)}

.dashfw-pick-bk{position:fixed;inset:0;background:rgba(20,18,16,.5);z-index:99995;display:flex;align-items:center;justify-content:center;padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.dashfw-pick-box{background:var(--bg-surface,#fff);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.3);width:min(520px,calc(100% - 32px));max-height:80vh;overflow:auto;padding:20px}
.dashfw-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.dashfw-pick-it{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border:1px solid var(--bg-border,#e6e2db);border-radius:10px;background:var(--bg-page,#fff);cursor:pointer;font-size:11.5px;color:var(--text,#2b2926);font-family:inherit;text-align:center}
.dashfw-pick-it:hover{background:var(--bg-raised,#f0ede8);border-color:var(--yt-orange,#EC6628)}
/* Auditoría F4+F5 (2026-07-17, hallazgo MEDIUM, AND-C5): state-layer :active dedicado para Android. */
:root[data-os="android"] .dashfw-pick-it:active{background:var(--row-selected,rgba(0,0,0,.08))}
.dashfw-mkt-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 4px;border-bottom:1px solid var(--bg-border,#e6e2db);font-size:13px}
.dashfw-mkt-row:last-child{border-bottom:none}

/* Widgets nuevos: termómetro real/caricatura, gauge, sankey, heatmap (F5.2b) */
.dwidget-therm{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px;gap:2px}
.dwidget-therm-svg{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.dwidget-therm-val{font-size:15px;font-weight:700;color:var(--text,#2b2926)}
.dwidget-therm-lbl{font-size:11px;color:var(--text-muted,#8a8580);text-align:center}
.dwidget-therm-toggle{position:absolute;top:2px;right:2px;border:none;background:var(--bg-raised,#f0ede8);border-radius:8px;width:28px;height:28px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.dwidget-therm-toggle:hover{background:var(--bg-border,#e6e2db)}