/* Bacias de detenção.
 *
 * Base compartilhada da família de hidrologia e o mesmo vocabulário de gráfico
 * do módulo de Blocos Alternados. Aqui ficam só o editor de dispositivos de
 * saída e as cores próprias do corte do reservatório.
 */
@import url("../chuva-vazao/styles.css");
@import url("../shared/ep-como-usar.css");

.device-card {
  margin-top: 8px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--chart-blue-dark);
  border-radius: 9px;
  background: white;
}
.device-card.is-off { border-left-color: var(--line); opacity: .62; }
.device-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.device-head strong { font-size: 12px; font-weight: 550; }
.device-head .device-actions { display: inline-flex; gap: 10px; }
.device-head button { padding: 0; border: 0; background: transparent; color: var(--blue); font-size: 10.5px; font-weight: 600; }
.device-head button.remove { color: #b0392c; }
.device-card .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.device-card label { font-size: 10.5px; margin-top: 6px; }
.device-card .input-with-unit input { height: 34px; font-size: 12px; }
.device-card .device-note { margin: 7px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.device-check { display: inline-flex; align-items: center; gap: 6px; margin-top: 0; font-size: 10.5px; }
.device-check input { width: 14px; height: 14px; margin: 0; accent-color: var(--blue); }

.device-add { display: flex; gap: 8px; margin-top: 12px; }
.device-add select { flex: 1 1 auto; height: 38px; margin-top: 0; font-size: 12px; }
.device-add .secondary-button { min-height: 38px; margin-top: 0; }

/* Corte do reservatório. */
.basin-fill { fill: #d8c9a8; opacity: .5; }
.basin-outline { fill: none; stroke: #6f5b3e; stroke-width: 2.2; stroke-linejoin: round; }
.basin-water { fill: #bcdcef; }
.basin-water-line { stroke: #2e86c1; stroke-width: 2.2; }
.basin-crest { stroke: #b0392c; stroke-width: 1.4; stroke-dasharray: 7 4; }
.basin-device { stroke: #0f6f52; stroke-width: 2.4; fill: none; }
.inflow-line { fill: none; stroke: #2e86c1; stroke-width: 2.6; stroke-linejoin: round; }
.outflow-line { fill: none; stroke: var(--chart-blue-dark); stroke-width: 2.6; stroke-linejoin: round; }
.stored-area { fill: #2e86c1; opacity: .13; }

.canvas-legend i.swatch-inflow { height: 3px; background: #2e86c1; border-color: #2e86c1; }
.canvas-legend i.swatch-outflow { height: 3px; background: var(--chart-blue-dark); border-color: var(--chart-blue-dark); }
.canvas-legend i.swatch-stored { background: #b9d6ea; border-color: #7fb2d2; }
.canvas-legend i.swatch-water { background: #bcdcef; border-color: #2e86c1; }
.canvas-legend i.swatch-basin { background: #d8c9a8; border-color: #6f5b3e; }

/* Origem da vazão da bomba: constante ou ponto de operação pela curva. */
.pump-modes { display: inline-flex; margin: 2px 0 10px; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: #f3f6f5; }
.pump-modes button { padding: 4px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 10.5px; font-weight: 600; }
.pump-modes button[aria-pressed="true"] { background: var(--navy); color: #fff; }

/* ALINHAMENTO DOS CAMPOS DA GRADE.
 *
 * O label era `display: block`, então o campo começava onde o texto acabasse:
 * "Garantia temporal pretendida" ocupa duas linhas, "Anos mínimos de série"
 * ocupa uma, e os dois campos da mesma linha saíam em alturas diferentes.
 *
 * Coluna flexível com o campo empurrado para o fim resolve sem depender de o
 * rótulo caber numa linha — que é uma condição que nenhum texto em português
 * respeita por muito tempo. O `:not(.checkbox)` preserva a caixa de marcação,
 * que é deitada de propósito. */
.field-grid label:not(.checkbox) { display: flex; flex-direction: column; gap: 5px; }
.field-grid label:not(.checkbox) > .input-with-unit,
.field-grid label:not(.checkbox) > input,
.field-grid label:not(.checkbox) > select,
.field-grid label:not(.checkbox) > textarea { margin-top: auto; }