/* Riego > Tranques. Vista web independiente; no afecta las aplicaciones móviles. */
#irrigationTranques { padding: 20px 24px 40px; color: #182b3a; }
#irrigationTranques .trq-head {
  display:flex; justify-content:space-between; align-items:flex-start; gap:18px;
  margin-bottom:20px; flex-wrap:wrap;
}
#irrigationTranques .trq-head h2 { font-size:clamp(1.45rem,2.2vw,2rem); margin:0 0 6px; color:#102e44; }
#irrigationTranques .trq-head p { margin:0; color:#64798b; max-width:760px; font-size:.92rem; }
#irrigationTranques .trq-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#irrigationTranques .trq-actions select, #irrigationTranques .trq-actions button {
  border:1px solid #cbdce5; border-radius:10px; padding:10px 13px; background:#fff;
  color:#17415a; font:inherit; font-weight:600; cursor:pointer;
}
#irrigationTranques .trq-actions button { background:#eaf5fb; border-color:#b7d9ec; }
#irrigationTranques .trq-actions button:disabled { opacity:.55; cursor:progress; }
#irrigationTranques .trq-status { min-height:23px; font-size:.86rem; color:#566f80; margin-bottom:14px; }
#irrigationTranques .trq-error { background:#fff1ee; color:#a33f2f; padding:12px 14px;
  border:1px solid #f0c1b8; border-radius:10px; margin-bottom:12px; }
#irrigationTranques .trq-empty { padding:32px 20px; background:#f4f9fb; border:1px dashed #c2d9e7;
  border-radius:14px; text-align:center; color:#526d80; }
#irrigationTranques .trq-group { margin:24px 0 28px; }
#irrigationTranques .trq-group-head { display:flex; align-items:center; justify-content:space-between;
  padding:0 2px 10px; border-bottom:1px solid #e0e9ee; margin-bottom:14px; }
#irrigationTranques .trq-group-head h3 { color:#163b53; font-size:1.12rem; margin:0; }
#irrigationTranques .trq-group-head span { font-size:.82rem; color:#607b8d; }
#irrigationTranques .trq-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,350px),1fr)); gap:15px; }
#irrigationTranques .trq-card { border:1px solid #d6e5eb; background:#fff; border-radius:16px;
  padding:17px 18px; box-shadow:0 5px 17px rgba(19,54,76,.05); min-width:0; }
#irrigationTranques .trq-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
#irrigationTranques .trq-card h4 { margin:0; color:#183d56; font-size:1.06rem; }
#irrigationTranques .trq-chip { padding:4px 9px; font-size:.73rem; font-weight:700;
  border-radius:20px; background:#e9f4e9; color:#34764f; white-space:nowrap; }
#irrigationTranques .trq-chip.pending { background:#f6f0de; color:#8e6817; }
#irrigationTranques .trq-kpis { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:15px 0 18px; }
#irrigationTranques .trq-kpi { border-radius:11px; background:#f1f7fb; padding:12px 13px; min-width:0; }
#irrigationTranques .trq-kpi span { display:block; color:#647b89; font-size:.76rem; margin-bottom:4px; }
#irrigationTranques .trq-kpi strong { display:block; font-size:clamp(1.1rem,2vw,1.45rem);
  font-weight:800; color:#1478b4; overflow-wrap:anywhere; }
#irrigationTranques .trq-kpi strong.trq-percent { color:#168879; }
#irrigationTranques .trq-chart { display:grid; gap:11px; margin:0 0 14px; }
#irrigationTranques .trq-bar-title { display:flex; align-items:center; justify-content:space-between;
  margin-bottom:5px; gap:8px; font-size:.79rem; color:#496474; }
#irrigationTranques .trq-bar-title strong { color:#163f57; font-variant-numeric:tabular-nums; }
#irrigationTranques .trq-track { height:15px; border-radius:8px; overflow:hidden; background:#e5eef2; }
#irrigationTranques .trq-bar { height:100%; border-radius:8px; width:var(--trq-width,0%);
  background:linear-gradient(90deg,#40b7df,#1279bb); transition:width .3s ease; }
#irrigationTranques .trq-bar.maximum { background:linear-gradient(90deg,#90c6c0,#398c8e); }
#irrigationTranques .trq-bar.exceeded { background:linear-gradient(90deg,#f0ad56,#d77820); }
#irrigationTranques .trq-volume { padding:12px 13px; background:#f3f8f9;
  border-radius:10px; font-size:.88rem; color:#37586b; }
#irrigationTranques .trq-volume strong { color:#193e54; }
#irrigationTranques .trq-foot { margin-top:11px; color:#708493; font-size:.75rem;
  line-height:1.45; overflow-wrap:anywhere; }
#irrigationTranques .trq-warning { color:#ad5c23; font-weight:650; }
@media (max-width:680px) {
  #irrigationTranques { padding:14px 12px 28px; }
  #irrigationTranques .trq-head { gap:12px; }
  #irrigationTranques .trq-actions { width:100%; }
  #irrigationTranques .trq-actions select { flex:1; min-width:120px; }
  #irrigationTranques .trq-card { padding:14px; }
}


/* Análisis de Fuentes: distinguir flujo In/Out de volumen almacenado. */
#irrigationTranques .trq-source-analysis {
  display:grid;gap:8px;padding:12px;margin:0 0 12px;
  border:1px solid #b9dce5;border-radius:11px;background:#edf8fb;color:#20485b;
}
#irrigationTranques .trq-source-analysis > strong {font-size:.84rem;color:#125775;}
#irrigationTranques .trq-source-metrics {
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
}
#irrigationTranques .trq-source-metrics > div {
  padding:8px 9px;border-radius:8px;background:#fff;font-size:.76rem;
}
#irrigationTranques .trq-source-metrics b {
  display:block;margin-top:3px;color:#10769b;font-size:.98rem;
  font-variant-numeric:tabular-nums;
}
#irrigationTranques .trq-source-analysis small {line-height:1.45;color:#526e7a;}
@media (max-width:650px) {
 #irrigationTranques .trq-source-metrics {grid-template-columns:1fr;}
}

/* Coincidencias del catálogo no verificadas; nunca se usan como nivel real. */
#irrigationTranques .trq-alias-review { margin:12px 0; padding:10px 13px;
 border:1px solid #e0d4a3;border-radius:10px;background:#fbf9ee;
 color:#6b5528;font-size:.83rem; }
#irrigationTranques .trq-alias-review summary {cursor:pointer;font-weight:700;}
#irrigationTranques .trq-alias-review p {margin:9px 0;line-height:1.5;}
#irrigationTranques .trq-alias-scope {border-top:1px solid #e8dcbd;padding:9px 0;}
#irrigationTranques .trq-alias-scope small {font-size:.78rem;}
#irrigationTranques .trq-alias-measure {margin:3px 0 3px 9px;font-variant-numeric:tabular-nums;}

/* Barras de llenado respecto del máximo histórico medido una sola vez. */
#irrigationTranques .trq-metric-chart { margin:0 0 15px; padding:10px 0; }
#irrigationTranques .trq-metric-chart .trq-bar-title { margin-bottom:9px; }
#irrigationTranques .trq-metric-chart .trq-bar-title strong { font-size:.83rem; }
#irrigationTranques .trq-metric-chart .trq-bar-title span { font-weight:800;color:#187f9b; }
#irrigationTranques .trq-metric-range { display:flex;justify-content:space-between;
 gap:10px;margin-top:7px;color:#627e8c;font-size:.74rem;flex-wrap:wrap; }
#irrigationTranques .trq-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }

/* Riego → Tranques: tarjetas operativas condensadas, 2-3 por fila. */
#irrigationTranques {
  padding:12px clamp(11px,1.65vw,24px) 24px;
  color:#193c56;
}
#irrigationTranques .trq-head {
  gap:10px;margin-bottom:6px;align-items:center;
}
#irrigationTranques .trq-head h2 {
  font-size:clamp(1.25rem,1.7vw,1.7rem);margin:0 0 2px;
}
#irrigationTranques .trq-head p {font-size:.75rem;line-height:1.4;}
#irrigationTranques .trq-actions {gap:7px;}
#irrigationTranques .trq-actions button {
  padding:6px 11px;border-radius:9px;font-size:.75rem;
  background:#f4faff;border-color:#d0e2ee;
  transition:border-color .2s ease,background .2s ease;
}
#irrigationTranques .trq-actions button:hover:not(:disabled) {
  background:#e1f2ff;border-color:#82bddb;
}
#irrigationTranques .trq-status {
  min-height:14px;margin:0 0 8px;color:#73879a;
  font-size:.68rem;font-variant-numeric:tabular-nums;
}
#irrigationTranques .trq-group {margin:7px 0 16px;}
#irrigationTranques .trq-group-head {
  padding:0 1px 6px;margin-bottom:9px;
  border-color:#dfe8f0;
}
#irrigationTranques .trq-group-head h3 {font-size:.92rem;}
#irrigationTranques .trq-group-head span {font-size:.7rem;}
#irrigationTranques .trq-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,510px),1fr));
  align-items:start;
  gap:11px;
}
#irrigationTranques .trq-card-horizontal {
  position:relative;
  container-type:inline-size;
  min-width:0;
  padding:12px 13px 9px;
  border:1px solid #cfdfeb;
  border-radius:15px;
  background:linear-gradient(155deg,#fff 5%,#f7fbff 85%);
  box-shadow:0 5px 18px rgba(21,61,101,.065);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
#irrigationTranques .trq-card-horizontal:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(21,61,101,.12);
  border-color:#96c6e5;
}
#irrigationTranques .trq-card-horizontal::before {
  content:"";
  position:absolute;top:0;left:13px;right:13px;height:2px;
  background:linear-gradient(90deg,#14a9d8,#52d2f5,transparent);
  border-radius:0 0 3px 3px;opacity:.85;
}
#irrigationTranques .trq-card-horizontal .trq-card-header {
  display:flex;align-items:center;
  gap:8px;margin:0 0 8px;padding:0 0 7px;
  border-bottom:1px solid #e4edf4;min-width:0;
}
#irrigationTranques .trq-card-name {
  display:flex;align-items:center;gap:8px;min-width:0;flex:1;
}
#irrigationTranques .trq-card-name h4 {
  font-size:clamp(.91rem,1.04vw,1.1rem);
  font-weight:760;line-height:1.2;
  color:#183e59;overflow-wrap:anywhere;
}
#irrigationTranques .trq-card-water-icon {
  display:grid;place-items:center;flex:none;
  width:27px;height:27px;border-radius:8px;
  font-size:1.3rem;line-height:1;
  background:linear-gradient(145deg,#e0f7ff,#d4ebfd);
  border:1px solid #c1e7fa;color:#087eae;
}
#irrigationTranques .trq-chip {
  flex-shrink:0;
  font-size:.61rem;font-weight:720;line-height:1.15;
  padding:4px 7px;border-radius:7px;
  background:#eaf7ef;color:#28714d;
  letter-spacing:.005em;
}
#irrigationTranques .trq-chip.pending {
  background:#fff3df;color:#87591c;
}
#irrigationTranques .trq-horizontal-layout {
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:10px;
  align-items:start;min-width:0;
}
#irrigationTranques .trq-tank-section,
#irrigationTranques .trq-readings {
  display:flex;flex-direction:column;min-width:0;
}
#irrigationTranques .trq-section-label {
  color:#648199;
  text-transform:uppercase;letter-spacing:.09em;
  font-size:.62rem;font-weight:790;line-height:1.2;
  margin:0 0 6px;
}
#irrigationTranques .trq-reservoir-basin {
  position:relative;isolation:isolate;
  overflow:hidden;flex:none;width:100%;
  height:clamp(96px,8vw,140px);
  border:2px solid #6b91ad;border-radius:12px;
  background:
    repeating-linear-gradient(0deg,transparent 0 21px,rgba(72,118,158,.055) 21px 22px),
    linear-gradient(180deg,#f5fbff 0%,#e8f2fa 100%);
  box-shadow:
    inset 0 3px 12px rgba(41,84,118,.13),
    inset 0 -5px 9px rgba(41,84,118,.07),
    0 2px 6px rgba(17,58,89,.06);
}
#irrigationTranques .trq-reservoir-basin::before {
  content:"";
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.42),transparent 35%,
    transparent 69%,rgba(255,255,255,.19) 85%,transparent);
}
#irrigationTranques .trq-reservoir-basin::after {
  content:"";
  position:absolute;inset:4px;z-index:3;pointer-events:none;
  border:1px solid rgba(255,255,255,.6);
  border-radius:8px;
}
#irrigationTranques .trq-reservoir-water {
  position:absolute;inset:auto 0 0;z-index:0;
  width:100%;height:var(--trq-fill,0%);min-height:0;
  overflow:visible;pointer-events:none;
  background:
    radial-gradient(ellipse at 48% 0%,rgba(213,248,255,.42),transparent 50%),
    linear-gradient(180deg,#6bd4ff 0%,#35b0ed 31%,#1284cf 72%,#075baf 100%);
  box-shadow:inset 0 10px 13px rgba(255,255,255,.16),
    inset 0 -11px 19px rgba(3,42,108,.18);
  animation:trq-water-rise .8s cubic-bezier(.2,.65,.25,1) both;
  transition:height .65s ease;
}
#irrigationTranques .trq-reservoir-water-empty {
  background:transparent;box-shadow:none;
}
#irrigationTranques .trq-reservoir-wave {
  position:absolute;left:-70px;top:-8px;
  width:calc(100% + 140px);height:17px;
  background:
    radial-gradient(ellipse 31px 10px at 31px 9px,
      rgba(162,233,255,.96) 96%,transparent 100%) repeat-x;
  background-size:62px 17px;
  opacity:.9;
  animation:trq-wave-drift 7s linear infinite alternate;
}
#irrigationTranques .trq-reservoir-wave-alt {
  top:-5px;opacity:.52;
  filter:blur(1.5px);
  background:
    radial-gradient(ellipse 23px 8px at 23px 8px,
      #e0faff 98%,transparent 100%) repeat-x;
  background-size:46px 17px;
  animation-duration:5s;animation-direction:alternate-reverse;
}
#irrigationTranques .trq-water-sheen {
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 16% 31%,rgba(250,255,255,.19),transparent 20%),
    linear-gradient(110deg,transparent 16%,rgba(255,255,255,.17) 34%,
      transparent 47%,transparent 72%,rgba(235,255,255,.12) 86%,transparent);
  background-size:100% 100%,170% 100%;
  animation:trq-water-shimmer 10s ease-in-out infinite alternate;
}
#irrigationTranques .trq-reservoir-water-empty .trq-reservoir-wave,
#irrigationTranques .trq-reservoir-water-empty .trq-water-sheen {display:none;}
#irrigationTranques .trq-reservoir-percent {
  position:absolute;inset:0;z-index:4;
  display:grid;place-items:center;
  font-size:clamp(1.55rem,2.25vw,2.15rem);
  font-weight:840;letter-spacing:-.06em;
  color:#fff;text-shadow:0 1px 9px rgba(0,43,89,.52);
  font-variant-numeric:tabular-nums;
}
#irrigationTranques .trq-reservoir-percent.is-low {
  color:#155177;text-shadow:0 1px 8px rgba(255,255,255,.9);
}
#irrigationTranques .trq-height-scale {
  position:absolute;right:11px;top:11px;bottom:12px;z-index:4;
  border-right:2px solid rgba(30,94,142,.55);
  width:12px;opacity:.74;
}
#irrigationTranques .trq-height-scale::before {
  content:"";position:absolute;top:0;bottom:0;right:-1px;width:7px;
  background:repeating-linear-gradient(180deg,rgba(25,76,115,.62) 0 1px,
    transparent 1px 15px);
}
#irrigationTranques .trq-level-max-marker,
#irrigationTranques .trq-level-current-marker,
#irrigationTranques .trq-level-zero-marker {
  position:absolute;right:-5px;transform:translateY(50%);
  width:10px;height:10px;border-radius:50%;
  border:2px solid #f4fbff;
  background:#1c79b3;box-shadow:0 0 0 1px rgba(14,86,139,.25);
}
#irrigationTranques .trq-level-max-marker {top:-4px;transform:none;}
#irrigationTranques .trq-level-current-marker {
  bottom:var(--trq-level,0%);z-index:2;background:#00afd9;
}
#irrigationTranques .trq-level-zero-marker {
  bottom:-4px;transform:none;background:#cbdfea;
}
#irrigationTranques .trq-tank-caption {
  margin:5px 0 0;min-height:12px;
  font-size:.61rem;line-height:1.3;
  color:#74899a;
  overflow-wrap:anywhere;
}
#irrigationTranques .trq-zero-caption {color:#976627;font-weight:680;}
#irrigationTranques .trq-readings {gap:6px;padding-top:17px;}
#irrigationTranques .trq-height-panel,
#irrigationTranques .trq-volume-panel {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;min-width:0;
  padding:0;border:0;background:none;
}
#irrigationTranques .trq-reading-stat {
  display:flex;flex-direction:column;justify-content:center;
  min-height:53px;min-width:0;padding:6px 8px;
  background:#f2f6fa;border:1px solid #e9eff5;
  border-radius:9px;
}
#irrigationTranques .trq-reading-stat.is-current {
  background:linear-gradient(145deg,#e7f4fe,#e9f7ff);
  border-color:#d6e9f8;
}
#irrigationTranques .trq-reading-label {
  display:block;color:#6b8295;
  font-size:.63rem;line-height:1.24;
  font-weight:650;margin:0 0 4px;
}
#irrigationTranques .trq-reading-stat strong {
  display:block;min-width:0;
  color:#184367;font-size:clamp(.86rem,1.05vw,1.14rem);
  line-height:1.15;font-weight:810;
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
#irrigationTranques .trq-reading-stat.is-volume strong {color:#135986;}
#irrigationTranques .trq-reading-stat.is-maximum strong {
  color:#526c80;font-weight:760;
}
#irrigationTranques .trq-reading-stale-date {
  display:block;margin-top:3px;color:#976327;
  font-size:.58rem;line-height:1.3;overflow-wrap:anywhere;
}
#irrigationTranques .trq-zero-note {
  margin-top:4px;font-size:.57rem;line-height:1.3;
  color:#916326;
}
#irrigationTranques .trq-volume-pct {
  font-size:.61rem;line-height:1.2;
  color:#718a99;
}
#irrigationTranques .trq-volume-pct strong {color:#147eab;}
#irrigationTranques .trq-source-analysis {
  display:block;
  margin:7px 0 0;padding:0;
  border:1px solid #e3edf4;border-radius:8px;
  background:#f6fafe;
}
#irrigationTranques .trq-source-summary {
  display:flex;align-items:center;gap:8px;
  padding:6px 9px;cursor:pointer;
  list-style:none;outline-offset:2px;
}
#irrigationTranques .trq-source-summary::-webkit-details-marker {display:none;}
#irrigationTranques .trq-source-summary::before {
  content:"";width:6px;height:6px;flex:none;
  border-right:1.6px solid #4884a5;
  border-bottom:1.6px solid #4884a5;
  transform:rotate(-45deg);transition:transform .2s ease;
}
#irrigationTranques .trq-source-analysis[open] .trq-source-summary::before {
  transform:rotate(45deg);
}
#irrigationTranques .trq-source-summary strong {
  font-size:.66rem;white-space:nowrap;color:#38667c;font-weight:730;
}
#irrigationTranques .trq-source-preview {
  font-size:.61rem;color:#657c8e;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;flex:1;
}
#irrigationTranques .trq-source-count {
  margin-left:auto;color:#5e7a8a;
  font-size:.59rem;white-space:nowrap;
}
#irrigationTranques .trq-source-analysis[open] .trq-source-metrics {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,115px),1fr));
  gap:5px;padding:0 7px 7px;
}
#irrigationTranques .trq-source-metrics > div {
  padding:6px 7px;background:#fff;border:1px solid #edf1f5;
  font-size:.62rem;color:#628095;
}
#irrigationTranques .trq-source-metrics b {
  margin-top:3px;font-size:.82rem;color:#106e9b;
}
#irrigationTranques .trq-card-horizontal .trq-foot {
  margin:7px 0 0;padding:5px 0 0;
  font-size:.61rem;line-height:1.3;
  border-top:1px solid #edf1f6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#irrigationTranques .trq-card-zero-reading .trq-reading-stat.is-level.is-current {
  border-color:#f2dfbd;background:#fffaef;
}
@media(min-width:2100px) {
  #irrigationTranques .trq-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@container(max-width:405px) {
  #irrigationTranques .trq-horizontal-layout {
    grid-template-columns:minmax(0,1fr);
    gap:8px;
  }
  #irrigationTranques .trq-reservoir-basin {
    height:115px;
  }
  #irrigationTranques .trq-readings {padding-top:0;}
  #irrigationTranques .trq-reading-stat {min-height:48px;}
}
@media(max-width:700px) {
  #irrigationTranques {padding:12px 11px 24px;}
  #irrigationTranques .trq-head {gap:9px;}
  #irrigationTranques .trq-actions {width:100%;}
  #irrigationTranques .trq-actions button {flex:1;min-width:0;}
  #irrigationTranques .trq-grid {
    grid-template-columns:minmax(0,1fr);gap:11px;
  }
  #irrigationTranques .trq-card-horizontal {padding:11px;}
}
@keyframes trq-water-rise {
  from {height:0%;}
  to {height:var(--trq-fill,0%);}
}
@keyframes trq-wave-drift {
  from {transform:translateX(-28px);}
  to {transform:translateX(28px);}
}
@keyframes trq-water-shimmer {
  from {background-position:0 0,0% 0;}
  to {background-position:0 0,100% 0;}
}
@media(prefers-reduced-motion:reduce) {
  #irrigationTranques .trq-card-horizontal,
  #irrigationTranques .trq-reservoir-water,
  #irrigationTranques .trq-reservoir-wave,
  #irrigationTranques .trq-water-sheen,
  #irrigationTranques .trq-source-summary::before {
    animation:none!important;
    transition:none!important;
  }
}


/* Lectura histórica del Tranque 6: agua visible como referencia tenue,
   sin aparentar que el sensor entrega un porcentaje en tiempo real. */
#irrigationTranques .trq-reservoir-water-historical {
  opacity:.47;
  filter:saturate(.60);
}
#irrigationTranques .trq-reservoir-water-historical .trq-reservoir-wave,
#irrigationTranques .trq-reservoir-water-historical .trq-water-sheen {
  animation:none !important;
}