/* ============================================================
   Flip tool — extensiones mínimas sobre base.css
   (sin tocar tu sistema de cards/fields)
   ============================================================ */

/* Inputs sugeridos (gris claro) */
input[data-state="suggested"],
select[data-state="suggested"]{
  color: rgba(139, 153, 196, .95); /* similar a --muted */
  border-style: dashed;
  border-color: rgba(255,255,255,.18);
}

input[data-state="confirmed"],
select[data-state="confirmed"]{
  color: inherit;
  border-style: solid;
}

/* Hints de sugerencia */
#f-ccaaHint,
[id^="hint-"]{
  opacity: .95;
}

/* Tablas con inputs estrechos */
.comp-table .in-table,
.scen-table .in-table,
.comp-table input,
.comp-table select{
  width: auto;
  min-width: 90px;
  max-width: 160px;
  padding: 8px 10px;
}

.comp-table input[type="text"]{
  min-width: 140px;
  max-width: 220px;
}

.comp-table .btn-del{
  width: auto;
  padding: 7px 10px;
}

/* Texto de estado */
#f-suggestState{
  user-select: none;
}

/* Charts */
.charts-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width: 980px){
  .charts-grid{
    grid-template-columns:1fr 1fr;
  }
  .chart-wide{
    grid-column:1 / -1;
  }
}
.chart-card{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,.02);
}
.chart-card canvas{
  width: 100%;
  height: auto;
  display:block;
  margin-top:6px;
}