/* ============================================================
   TABLERO — componentes: tarjetas, tiles, tablas, badges, estados
   ============================================================ */

/* ---------------- cabecera de tarjeta ---------------- */
.card-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.card-head h3{font-size:13.5px}
.card-head p{margin:2px 0 0;font-size:11.5px;color:var(--ink-muted)}
.card-tools{margin-left:auto;display:flex;gap:4px;align-items:center}
.icon-btn{
  border:1px solid var(--hair);background:none;border-radius:7px;height:26px;padding:0 8px;
  font-size:11.5px;color:var(--ink-2);cursor:pointer;
}
.icon-btn:hover{background:var(--plane);color:var(--ink)}
.icon-btn.on{border-color:var(--s1);color:var(--s1)}

/* ---------------- stat tiles ---------------- */
.tile-label{font-size:12px;color:var(--ink-2)}
.tile-value{font-size:30px;font-weight:600;line-height:1.15;margin-top:2px;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.hero-value{font-size:52px;font-weight:600;line-height:1.05;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.tile-delta{font-size:12px;color:var(--ink-2);margin-top:3px;display:flex;align-items:center;gap:5px}
.up-good{color:var(--good-text)} .down-bad{color:var(--crit)}
.spark{margin-top:8px;display:block}
.tiles{display:flex;flex-wrap:wrap;gap:22px}
.tiles > div{min-width:110px}

/* ---------------- tabla ---------------- */
table{border-collapse:collapse;width:100%;font-size:12.5px}
th,td{text-align:left;padding:6px 9px;border-bottom:1px solid var(--grid)}
th{color:var(--ink-muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.05em}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--plane)}
.table-view{display:none;margin-top:10px;max-height:340px;overflow:auto}
.card.show-table .table-view{display:block}
.card.show-table .chart-wrap{display:none}
.tabla-scroll{overflow-x:auto}

/* ---------------- leyenda ---------------- */
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:12px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.key{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.key.line{width:14px;height:2px;border-radius:2px}

/* ---------------- badges y estados ---------------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:2px 8px;
  border-radius:20px;border:1px solid var(--hair);color:var(--ink-2);white-space:nowrap;
}
.badge .dot{width:7px;height:7px}
/* insignia de laboratorio: el color va con un punto, nunca solo el color */
.badge-lab{font-size:11px}

/* ---------------- apertura por laboratorio ---------------- */
.por-lab{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px}
.por-lab .item{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2)}
.por-lab .item b{color:var(--ink);font-variant-numeric:tabular-nums}
.por-lab .item i{width:9px;height:9px;border-radius:3px;display:block;flex:0 0 auto}

/* ---------------- meter ---------------- */
.meter{height:8px;border-radius:5px;background:var(--seq-1);overflow:hidden;margin-top:6px}
:root[data-skin="guardia"] .meter{background:var(--surface-3)}
.meter i{display:block;height:100%;border-radius:5px}

/* ---------------- tarjetas de sector ---------------- */
.sectores{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.sector{
  border:1px solid var(--hair);border-radius:9px;padding:11px 12px;background:var(--plane);
}
.sector h4{font-size:13px}
.sector .sub{font-size:11.5px;color:var(--ink-muted);margin-top:1px}
.sector .n{font-size:22px;font-weight:600;margin-top:6px;font-variant-numeric:tabular-nums}
.sector .pie{font-size:11.5px;color:var(--ink-2);margin-top:2px}

/* ---------------- estados del widget ---------------- */
.estado{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:22px 4px;color:var(--ink-muted);font-size:12.5px;
}
.estado b{color:var(--ink-2);font-size:13px;font-weight:600}
.estado.cargando{opacity:.75}
.skeleton{
  height:9px;border-radius:5px;background:var(--grid);width:100%;
  animation:pulso 1.2s ease-in-out infinite;
}
.skeleton.w60{width:60%} .skeleton.w40{width:40%}
@keyframes pulso{0%,100%{opacity:.5}50%{opacity:1}}
/* al refrescar no se parpadea: se mantiene el render anterior atenuado */
.card.refrescando .chart-wrap,.card.refrescando .cuerpo{opacity:.55;transition:opacity .12s}
.estado .icon-btn{margin-top:4px}

/* ---------------- tooltip único ---------------- */
#tt{
  position:fixed;z-index:100;pointer-events:none;opacity:0;transition:opacity .08s;
  background:var(--surface);border:1px solid var(--hair);border-radius:9px;padding:8px 10px;
  font-size:12px;box-shadow:0 6px 22px rgba(0,0,0,.14);max-width:280px;
}
#tt .tt-title{font-weight:600;margin-bottom:5px;font-size:12px}
#tt .tt-row{display:flex;align-items:center;gap:7px;margin-top:3px;color:var(--ink-2)}
#tt .tt-row b{margin-left:auto;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------------- escala del mapa de calor ---------------- */
.scale-legend{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:11.5px;color:var(--ink-2)}
.scale-legend .sw{display:flex;gap:2px}
.scale-legend .sw i{width:20px;height:10px;border-radius:2px;display:block}

/* ---------------- modo edición ---------------- */
/* La tarjeta se ve claramente "agarrable": borde punteado + asa visible. Sin eso nadie
   descubre que se puede arrastrar. */
body.editing .card{border-style:dashed;border-color:var(--s1)}
body.editing .card::after{
  content:"⠿ arrastrar"; position:absolute; top:-9px; left:12px; font-size:10px;
  background:var(--s1); color:var(--ink-on-fill); padding:1px 7px; border-radius:6px; letter-spacing:.02em;
}
body.editing .card{cursor:grab}
.card.drag-over{outline:2px solid var(--s1);outline-offset:2px}
.card.dragging{opacity:.45}

.hidden-tray{
  display:none; margin-bottom:14px; padding:10px 12px; border:1px dashed var(--hair);
  border-radius:var(--radius); background:var(--surface); gap:8px; align-items:center; flex-wrap:wrap;
}
body.editing .hidden-tray{display:flex}
.hidden-tray .lbl{
  font-size:11.5px;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.06em;
}

/* ---------------- aviso de guardado ---------------- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(8px);
  background:var(--ink); color:var(--plane); padding:9px 16px; border-radius:20px;
  font-size:12.5px; opacity:0; pointer-events:none; transition:opacity .16s, transform .16s;
  z-index:120;
}
.toast.visible{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.error{background:var(--crit); color:var(--ink-on-fill)}

/* ---------------- explorador ---------------- */
.explorador-barra{margin-bottom:14px}
.explorador-barra .presets{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.explorador-barra .controles{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.campo-inline{display:flex;flex-direction:column;gap:3px}
.campo-inline > span{
  font-size:11px;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.05em;
}
.campo-inline select{max-width:220px}
.sug{
  border:1px solid var(--hair);background:var(--surface);border-radius:20px;padding:5px 11px;
  font-size:12px;color:var(--ink-2);cursor:pointer;
}
.sug:hover{border-color:var(--s1);color:var(--s1)}