* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --font-body: 'Inter', sans-serif;
  --font-heading: 'Montserrat', sans-serif;
  --background: #f0f4f8;
  --panel: #fff;
  --text: #222;
  --border: #e0d4f5;
  --muted: #777;
}

:root[data-theme="dark"], body[data-theme="dark"] {
  --background: #121212;
  --panel: #1e1e2e;
  --text: #e0e0e0;
  --border: #2d2d44;
  --muted: #aaa;
}

html.dark-mode,
body.dark-mode {
  --background: #121212;
  --panel: #1e1e2e;
  --text: #e0e0e0;
  --border: #2d2d44;
  --muted: #aaa;
}

html { font-size: 15px; }
body {
  font-family: var(--font-body);
  background: var(--background);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--text);
}
h1, h2, h3, h4, h5, h6,
.page-title,
.card-value,
.stat-num,
.dashboard-hero-copy h1,
.auth-card h1 {
  font-family: var(--font-heading);
}

/* ── Topbar ── */
.topbar {
  background: #6B21A8;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-right { display: flex; align-items: center; gap: 0.9rem; flex: 1; justify-content: flex-end; }
.topbar-right {
    margin-right: auto; 
    margin-left: 15rem;
}
.global-search {
  margin-right: auto;
}
.global-search {
  display: flex; align-items: center; gap: 7px;
  width: min(290px, 32vw); min-width: 190px;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.35);
  border-radius: 18px; padding: 4px 6px 4px 10px;
}
.global-search i { font-size: 17px; }
.global-search input {
  width: 100%; min-width: 0; border: 0; outline: 0; background: transparent;
  color: #fff; font: inherit;
}
.global-search input::placeholder { color: rgba(255,255,255,0.78); }
.global-search button {
  border: 0; background: #fff; color: #6B21A8; border-radius: 10px;
  width: 28px; height: 28px; cursor: pointer; flex-shrink: 0;
}
.global-search .search-clear {
  background: transparent; color: rgba(255,255,255,0.85); width: 22px; height: 28px;
  padding: 0;
}
.global-search .search-clear:hover { color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}

.topbar-link {
  color: #fff;
  text-decoration: none;
  font-size: 0.85rem;
  border: 1px solid rgba(255,255,255,0.35);
  padding: 7px 12px;
  border-radius: 999px;
  transition: background 0.15s, transform 0.15s;
}
.topbar-link:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-1px);
}
@media (max-width: 720px) {
  .topbar { padding: 0 1rem; }

  .global-search { width: min(42vw, 210px); }
  .topbar-link { font-size: 0.8rem; padding: 6px 8px; }
}

/* ── Layout ── */
.main {
  display: flex;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

/* ── Sidebar ── */
.sidebar {
  position: sticky;
  top: 56px;
  width: 220px;
  height: calc(100vh - 56px);
  background: var(--panel);
  border-right: 1px solid var(--border);
  padding: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-color: transparent transparent;
}
/* Scrollbar visible solo cuando el mouse está dentro del sidebar */
.sidebar:hover {
  scrollbar-color: rgba(107,33,168,0.35) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.sidebar:hover::-webkit-scrollbar-thumb { background: rgba(107,33,168,0.35); }
body.dark-mode .sidebar:hover { scrollbar-color: rgba(255,255,255,0.25) transparent; }
body.dark-mode .sidebar:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 1.5rem;
  font-size: 14px; font-weight: 570;
  color: var(--muted);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.15s, color 0.15s;
}
.nav-item:hover { background: #f5f0ff; color: #6B21A8; }
.nav-item.active { background: #f5f0ff; color: #6B21A8; border-left-color: #6B21A8; }

/* ── Contenido ── */
.content {
  flex: 1;
  padding: 1.25rem;
  overflow-y: auto;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 0;
}

.page-title {
  font-size: 36px; font-weight: 800;
  color: #6B21A8; text-align: center;
  margin-bottom: 1rem;
}

/* ── Grid de tarjetas ── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.card, .dash-card {
  background: var(--panel);
  border-radius: 12px;
  padding: 1rem;
  border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
  text-decoration: none;
}
.card:hover, .dash-card:hover {
  box-shadow: 0 6px 24px rgba(107,33,168,0.08);
  transform: translateY(-2px);
}

.icon-wrap {
  width: 66px; height: 66px; border-radius: 12px;
  background: #f5f0ff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.icon-wrap i { font-size: 22px; color: #6B21A8; justify-content: center; align-items: center; }
.icon-wrap.teal { background: #e1f5ee; }
.icon-wrap.teal i { color: #0F6E56; }
.icon-wrap.blue { background: #e6f1fb; }
.icon-wrap.blue i { color: #185FA5; }
.icon-wrap.amber { background: #faeeda; }
.icon-wrap.amber i { color: #854F0B; }
.icon-wrap.red { background: #fcebeb; }
.icon-wrap.red i { color: #A32D2D; }
.valve-status-card { cursor: default; display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 1.6rem 1.25rem; }
.valve-status-card:hover { transform: none; box-shadow: none; }
.valve-last-update { color: var(--muted); font-size: 12px; font-weight: 600; }

.card-label { font-size: 15px; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.6px; }
.card-value { font-size: 18px; font-weight: 700; color: #2d1a4a; line-height: 1.1; }
.card-sub { font-size: 11px; color: #777; font-weight: 600; }

.badge {
  display: inline-block; font-size: 11px; font-weight: 800;
 padding-top:1rem; padding-right:0.6rem; border-radius: 20px; color:#6B21A8;
}
.badge-normal  { display: inline-block; font-size:11px; padding-top:1rem; padding-right:0.6rem; font-weight: 800; color: #0F6E56; }
.badge-perfect { display: inline-block; font-size:11px; padding-top:1rem; padding-right:0.6rem; font-weight: 800; color: #185FA5; }
.badge-high    { display: inline-block; font-size:11px; padding-top:1rem; padding-right:0.6rem; font-weight: 800; color: #854F0B; }

.card-link {
  font-size: 12px; color: #8e6fbf; font-weight: 600;
  border-top: 1px solid #f0ecf7;
  padding-top: 8px;
  display: flex; align-items: center; gap: 6px;
}

/* ── Barra de tanque ── */
.tank-bar-wrap {
  background: #f0e8ff; border-radius: 8px;
  height: 10px; overflow: hidden;
}
.tank-bar {
  height: 100%; border-radius: 8px;
  background: linear-gradient(90deg,#7c3aed,#a78df0);
  transition: width 0.6s;
}

/* ── Stats inferiores ── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.9rem; margin-top: 1rem;
}
.stat {
  background: #fff; border-radius: 10px;
  border: 1px solid #e6dff6;
  padding: 0.8rem 1rem; text-align: center;
}
.stat-num { font-size: 20px; font-weight: 700; color: #6B21A8; }
.stat-label { font-size: 15px; color: #666; font-weight: 600; margin-top: 2px; }

/* ── Footer ── */
footer.site-footer {
  min-height: 58px;
  flex: 0 0 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  background: #66319b;
  color: #fff;
  padding: 0.65rem 1rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0;
  position: relative;
  z-index: 2;
}
.site-footer-mark {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: cover;
  object-position: left center;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .sidebar { display: none; }
  .cards-grid { grid-template-columns: 1fr; }
  html { font-size: 14px; }
}

@media (max-width: 420px) {
  .icon-wrap { width: 40px; height: 40px; }
  .icon-wrap i { font-size: 18px; }
  .page-title { font-size: 18px; }
  .stat-num { font-size: 18px; }
}

/* ===== Consumo page styles ===== */
.tab-row {
  display: flex; gap: 8px; justify-content: flex-start; align-items: center;
  margin-bottom: 0.75rem;
}
.tab-btn {
  background: transparent; border: 1px solid #e6dff6; color: #4b2f7a;
  padding: 6px 10px; border-radius: 6px; font-weight: 700; font-size: 13px;
  cursor: pointer; transition: background 0.12s, transform 0.08s;
}
.tab-btn:hover { background: #f7f3fb; transform: translateY(-1px); }
.tab-btn.active { background: #7c3aed; color: #fff; border-color: #7c3aed; }

.consumo-layout { display: grid; grid-template-columns: 1fr 320px; gap: 1rem; align-items: start; }
.chart-card {
  background: #fff; border-radius: 12px; padding: 14px; border: 1px solid #eee8f8;
  box-shadow: 0 4px 16px rgba(107,33,168,0.03);
}
.chart-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px; }
.chart-status { font-size:13px; font-weight:800; color:#6B21A8; }
.chart-value { font-size:22px; font-weight:900; color:#2d1a4a; }
.chart-canvas-wrap { width:100%; height:300px; padding-top:6px; }

.consumo-side { display:grid;  grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.comparison-card, .historial-card { background:#fff; border-radius:10px; padding:12px; height: 100%; border:1px solid #f1e8fb; }

.comparison-val { font-weight:700; color:#2d1a4a; }
.comparison-val.up { color:#0F6E56; }

.month-nav { display:flex; align-items:center; gap:8px; }
.month-nav button { background:transparent; border:1px solid #eee; padding:4px 8px; border-radius:6px; cursor:pointer; }

/* ── Dark theme ── */
:root[data-theme="dark"] body,
body[data-theme="dark"] { background: var(--background); color: var(--text); }
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .dash-card,
:root[data-theme="dark"] .stat,
:root[data-theme="dark"] .chart-card,
:root[data-theme="dark"] .comparison-card,
:root[data-theme="dark"] .historial-card,
:root[data-theme="dark"] .info-card,
:root[data-theme="dark"] .valve-card,
:root[data-theme="dark"] .settings-card,
body[data-theme="dark"] .card,
body[data-theme="dark"] .dash-card,
body[data-theme="dark"] .stat,
body[data-theme="dark"] .chart-card,
body[data-theme="dark"] .comparison-card,
body[data-theme="dark"] .historial-card,
body[data-theme="dark"] .info-card,
body[data-theme="dark"] .valve-card,
body[data-theme="dark"] .settings-card { background: var(--panel); border-color: var(--border); }
:root[data-theme="dark"] .card-value,
:root[data-theme="dark"] .chart-value,
:root[data-theme="dark"] .comparison-val,
:root[data-theme="dark"] .detail-val,
:root[data-theme="dark"] .info-card-value,
:root[data-theme="dark"] .card-label,
body[data-theme="dark"] .card-value,
body[data-theme="dark"] .chart-value,
body[data-theme="dark"] .comparison-val,
body[data-theme="dark"] .detail-val,
body[data-theme="dark"] .info-card-value,
body[data-theme="dark"] .card-label { color: var(--text); }
:root[data-theme="dark"] .nav-item:hover,
:root[data-theme="dark"] .nav-item.active,
body[data-theme="dark"] .nav-item:hover,
body[data-theme="dark"] .nav-item.active { background: #2d2d44; }
:root[data-theme="dark"] .month-nav button,
body[data-theme="dark"] .month-nav button { color: var(--text); border-color: var(--border); }
body[data-theme="dark"] .content,
body[data-theme="dark"] .usuario-profile,
body[data-theme="dark"] .usuario-profile.card,
body[data-theme="dark"] .settings-card {
  color: var(--text);
}
body[data-theme="dark"] .usuario-profile {
  background: var(--panel);
  border-color: var(--border);
}
body[data-theme="dark"] .toggle-row { border-color: var(--border); }
body[data-theme="dark"] .toggle-label,
body[data-theme="dark"] .profile-name,
body[data-theme="dark"] .detail-row { color: var(--text); }
body.dark-mode { background: #121212 !important; color: #e0e0e0 !important; }
body.dark-mode .sidebar,
body.dark-mode .card,
body.dark-mode .dash-card,
body.dark-mode .stat,
body.dark-mode .chart-card,
body.dark-mode .comparison-card,
body.dark-mode .historial-card,
body.dark-mode .info-card,
body.dark-mode .settings-card,
body.dark-mode .usuario-profile { background: #1e1e2e !important; border-color: #2d2d44 !important; }
body.dark-mode .card-value,
body.dark-mode .chart-value,
body.dark-mode .comparison-val,
body.dark-mode .detail-val,
body.dark-mode .info-card-value,
body.dark-mode .card-label,
body.dark-mode .toggle-label,
body.dark-mode .profile-name,
body.dark-mode .detail-row { color: #e0e0e0 !important; }
#dark-mode-toggle { background: #ede8f0; }
#dark-mode-toggle.off::after { transform: translateX(0); }
#dark-mode-toggle:not(.off) { background: #7c3aed; }
#dark-mode-toggle:not(.off)::after { transform: translateX(14px); }

#historial-list > div { padding:8px 0; display:flex; justify-content:space-between; align-items:center; font-size:13px; }
#historial-list > div span:first-child { color:#6f6f7a; }
#historial-list > div span:last-child { color:#2d1a4a; font-weight:800; }

.detail-row { display:flex; justify-content:space-between; padding:6px 0; border-top:1px solid #f6f0fb; gap: 8px; align-items: center;}
.detail-val { font-weight:700; color:#2d1a4a; }

/* Small screens: stack */
@media (max-width: 900px) {
  .consumo-layout { grid-template-columns: 1fr; }
  .chart-canvas-wrap { height: 260px; }
  .consumo-side { order: 2; }
}

/* ===== Retroalimentación page styles ===== */
.retro-heading { max-width:1200px; margin:0 auto; }
.retro-heading .page-title { text-align:left; font-size:50px; font-weight:800; margin-top: 1rem; margin-bottom: 3rem; padding-top: 1rem; }
.retro-heading .page-subtitle { text-align:left; font-size: 1.05rem; margin: 0 0 2rem 0; }
.retro-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.9fr);
  grid-template-rows: minmax(150px, auto) minmax(150px, auto) auto;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: stretch;
}
.retro-layout > .retro-main {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-width: 0;
  min-height: 330px;
  padding: 1rem;
  border-radius: 16px;
  box-shadow: 0 2px 4px rgba(61,35,93,0.12);
}

.retro-summary-heading { display:flex; align-items:center; gap:0.55rem; }
.retro-icon { font-size:23px; background: #e6f1fb; border-radius: 12px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; color:#1596d1; }
.retro-icon i { font-size:23px; }
.retro-summary-heading .card-header { margin:0; }

.speech-bubble { background: #f7f3fb; padding: 10px 14px; border-radius: 10px; display: inline-block; font-weight:700; color: #6B21A8; }
.retro-state { font-size: 16px; font-weight: 800; color: #000000; margin-top: 0.4rem; }
.retro-consumo-actual { font-size: 20px; font-weight: 800; color: #6B21A8; margin-top: 8px; }
.drop-indicator { display:flex; justify-content:center; margin:12px 0; }
.drop-indicator svg { width: 300px; height: auto; max-width: 100%; display: block; }

.retro-side { display: contents; }
.retro-side > .retro-stat,
.retro-side > .card:nth-child(2),
.retro-side > .alert-box.full-width,
.retro-side > .card:last-child {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 2px 4px rgba(61,35,93,0.12);
}
.retro-side > .retro-stat .card-header {
  align-self: stretch;
  text-align: left;
}
.retro-side > .retro-stat { grid-column: 2; grid-row: 1; }
.retro-side > .card:nth-child(2) { grid-column: 2; grid-row: 2; }
.retro-side > .alert-box.full-width {
  grid-column: 1;
  grid-row: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  text-align: center;
}
.retro-side > .alert-box.full-width > div { max-width: 100%; }
.retro-stat-num { font-size:18px; font-weight:800; align-items: center; }
.retro-trend .trend-icon { font-size:36px; align-items: center; }

.retro-side > .retro-stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}

.retro-card { display: flex; flex: 2; flex-direction: column; justify-content: center; text-align: center; align-items: center; gap: 6px; }
.retro-side .card-header { font-size: 15px; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.6px; }
.retro-side > .retro-stat {
  align-self: stretch;
  text-align: left;
  text-transform: uppercase;
  color: #888;
  font-size: 0.82rem;
}
.trend-icon.up { color:#A32D2D; }
.trend-icon.down { color:#0F6E56; }
.alert-icon { font-size:40px; color:#0F6E56; margin-right:8px; }

@media (max-width: 900px) {
  .retro-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .retro-layout > .retro-main,
  .retro-side > .retro-stat,
  .retro-side > .card:nth-child(2),
  .retro-side > .alert-box.full-width,
  .retro-side > .card:last-child {
    grid-column: 1;
    grid-row: auto;
  }
  .drop-indicator svg { width: 140px; }
}

/* ===== Recomendaciones page styles ===== */
.reco-heading { max-width:1200px; margin:0 auto; }
.reco-heading .page-title { text-align:left; font-size:50px; font-weight:800; margin-top:1rem; margin-bottom:3rem; padding-top:1rem; }
.reco-heading .page-subtitle { text-align:left; font-size: 1.05rem; margin: 0 0 2rem 0; }
.reco-summary { max-width:1200px; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr); gap:1.1rem; margin-bottom:3rem; margin-top:2rem; }
.reco-summary-card { min-width:0; min-height:122px; display:flex; flex-direction:column; justify-content:center; gap:0.7rem; padding:1rem; background:var(--panel); border:1px solid var(--border); border-radius:14px; box-shadow:0 2px 4px rgba(61,35,93,0.12); }
.reco-progress-card { justify-content:space-evenly; align-content:space-around; }
.reco-summary-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:0.2rem;  }
.reco-summary-label { display:flex; align-items:center; gap:0.65rem; font-size: 15px; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.6px; }
.reco-summary-label i { display:flex; width:28px; height:28px; align-items:center; justify-content:center; flex:0 0 28px; border-radius:6px; background:#f0e8ff; color:#6b21a8; font-size:15px; }
.reco-impact-card .reco-summary-label i { background:#e1f5ee; color:#0f6e56; }
.reco-summary-total { display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; }
.reco-summary-total strong { color:var(--text); font-size:1.35rem; }
.reco-summary-total small { color:var(--muted); font-size:0.62rem; }
.reco-progress-track { height:10px; overflow:hidden; border-radius:999px; background:#eee8f7; }
.reco-progress-fill { width:0; height:100%; border-radius:inherit; background:#b9a6dc; transition:width 0.35s ease; }
.reco-progress-footer { display:flex; justify-content:space-between; color:var(--muted); font-size:0.68rem; }
.reco-progress-footer strong { font-weight:500; }
.reco-impact-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:0.35rem; border-bottom:1px solid var(--border); color:var(--muted); font-size:0.76rem; }
.reco-impact-row strong { color:var(--text); font-size:0.76rem; }
.reco-impact-row:last-of-type strong { color:#45bb52; }
.reco-consumption-note { margin:0; color:var(--muted); font-size:0.65rem; line-height:1.4; }
.tips-grid { max-width:1200px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.15rem; margin-bottom:3rem; margin-top:2rem; align-items:stretch; }
.tip-card { min-width:0; min-height:225px; height:100%; display:flex; flex-direction:column; gap:0.75rem; padding:1rem; background:var(--panel); border:1px solid var(--border); border-radius:14px; box-shadow:0 2px 4px rgba(61,35,93,0.12); transition:transform 0.12s, box-shadow 0.12s; }
.tip-card:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgba(107,33,168,0.08); }
.tip-card-heading { display:flex; align-items:center; justify-content:space-between; }
.tip-icon { display:flex; width:28px; height:28px; align-items:center; justify-content:center; border-radius:5px; background:#e6f1fb; color:#319ed8; font-size:15px; }
.tip-number { color:var(--text); font-size:0.72rem; font-weight:600; }
.tip-title { color:var(--text); font-size:0.82rem; line-height:1.4; font-weight:700; }
.tip-description { flex:1; margin:0; color:var(--muted); font-size:0.72rem; line-height:1.55; }
.tip-impact { margin:0; color:var(--text); font-size:0.68rem; line-height:1.4; }
.tip-impact strong { font-weight:700; }
.tip-complete-button { width:100%; min-height:32px; margin-top:auto; border:0; border-radius:5px; padding:0.4rem 0.65rem; background:#5b3495; color:#fff; font:inherit; font-size:0.7rem; font-weight:600; cursor:pointer; transition:background 0.15s; }
.tip-complete-button:hover { background:#482775; }
.tip-complete-button:focus-visible { outline:2px solid #b9a6dc; outline-offset:2px; }
.tip-card.is-completed .tip-complete-button { background:#0f6e56; }
.tip-card.is-completed .tip-icon { background:#e1f5ee; color:#0f6e56; }

@media (max-width:700px) {
  .reco-heading .page-title { font-size:2rem; }
  .tips-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px) {
  .reco-summary { grid-template-columns:1fr; margin-bottom:2rem; }
  .tips-grid { grid-template-columns:1fr; }
}

/* ===== Auth form styles ===== */
.auth-panel {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 1.5rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.auth-panel > *:not(.auth-card):not(.auth-bg) {
  display: none !important;
}

.auth-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(0.9) brightness(1.05);
}

.auth-card {
  position: relative;
  z-index: 1;
  width: min(480px, 100%);
  min-height: 380px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 2.5rem 2.8rem 2.4rem;
  box-shadow: 0 10px 24px rgba(46, 35, 91, 0.16);
  border: 1px solid rgba(224, 212, 245, 0.75);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-card h1 {
  font-size: 1.45rem;
  margin-bottom: 0.2rem;
  color: #4f1f9a;
  letter-spacing: 0;
  width: 100%;
  text-align: left;
}
.auth-card p {
  color: #55505f;
  margin-bottom: 0.8rem;
  line-height: 1.35;
  font-size: 0.82rem;
  width: 100%;
}
.auth-card label {
  display: block;
  margin-top: 1.2rem;
  margin-bottom: 0.3rem;
  font-size: 0.76rem;
  color: #474052;
  font-weight: 600;
  width: 100%;
}
.auth-card input,
.auth-card select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d4dff2;
  border-radius: 6px;
  padding: 0.72rem 0.8rem;
  background: #e7eef9;
  font-size: 0.88rem;
  color: #31274c;
  min-height: 46px;
}
.auth-card input:focus,
.auth-card select:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}
.btn-primary {
  width: 100%;
  margin-top: 1.2rem;
  padding: 0.72rem 1rem;
  border: none;
  border-radius: 4px;
  background: #6b2aa5;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.14s, box-shadow 0.14s;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(124, 58, 237, 0.18);
}
.form-error {
  background: #fcebea;
  color: #9d1b1b;
  border: 1px solid #f5c2c7;
  border-radius: 4px;
  padding: 0.6rem 0.7rem;
  margin-bottom: 0.75rem;
  font-size: 0.72rem;
}
.auth-footer {
  margin-top: 1.2rem;
  margin-bottom: 2rem;
  text-align: center;
  font-size: 0.75rem;
  color: #6f6f7a;
}
.auth-footer a {
  color: #6b21a8;
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 720px) {
  .auth-panel { padding: 1rem; }
  .auth-card { padding: 1.5rem 1.25rem 1.2rem; }
}

/* ===== Tanque page styles ===== */
.tanque-layout { display:grid; grid-template-columns: 1fr 360px; gap: 16px; align-items:stretch; }

.capacity-icon { color:#7c3aed; font-size:23px; background:#f0e8ff; border-radius: 12px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; }
.capacity-text { font-size:15px; }
.card-label-content { display: flex; align-items: center; gap: 8px; }

.cylinder-wrap { display:flex; justify-content:center; padding:10px 0; }
.cylinder { position:relative; width:160px; height:260px; background:#fff; border-radius:18px; border:1px solid #f1e8fb; box-shadow:0 6px 18px rgba(107,33,168,0.03); overflow:hidden; }
.cylinder-fill { position:absolute; left:0; right:0; bottom:0; background:linear-gradient(180deg,#7c3aed,#a78df0); opacity:0.9; transition:height 0.6s ease; }
.cylinder-label { position:absolute; bottom:8px; left:0; right:0; text-align:center; font-weight:800; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,0.08); }
.cylinder-ladder { position:absolute; inset:12px 6px auto 6px; top:20px; display:flex; flex-direction:column; gap:8px; align-items:center; }
.cylinder-ladder .rung { width:60%; height:2px; background:rgba(255,255,255,0.5); border-radius:2px; }

.tank-available { font-size:13px; padding:6px 14px; display:inline-block; margin-top:8px; }

.tanque-info { display:grid; flex-direction:column; gap:16px; align-items: stretch; }
.info-card { display:flex; gap:10px; align-items:flex-start; padding:12px; background:#fff; border-radius:10px; border:1px solid #f3ecfb; }
.info-icon { font-size:20px; color:#7c3aed; flex-shrink:0; }
.info-card-body { flex:1; }
.info-card-label { font-size: 16px; font-weight:700; color:#6B21A8; margin-bottom:6px; text-transform: uppercase; letter-spacing: 0.6px; padding-bottom: 0.5rem;  }
.info-card-value { font-weight:800; color:#333; }
.info-card-sub { font-size:12px; color:#888; margin-top:4px; }
.status-badge { padding:4px 8px; }

.tank-bar-wrap.tank-bar-small { margin-top:8px; }
.tank-legend { display:flex; justify-content:space-between; font-size:11px; color:#888; font-weight:600; margin-top:6px; }

@media (max-width: 1000px) {
  .tanque-layout { grid-template-columns: 1fr; }
  .cylinder { width:140px; height:220px; }
  .cylinder-ladder .rung { width:65%; }
}

@media (max-width: 420px) {
  .cylinder { width:120px; height:200px; }
  .capacity-text { font-size:14px; }
}

/* ===== Calidad page styles ===== */
.calidad-heading { max-width:1200px; margin:0 auto; }
.calidad-heading .page-title { text-align:left; font-size:50px; font-weight:800; margin-top: 1rem; margin-bottom: 3rem; padding-top: 1rem; }
.calidad-heading .page-subtitle { text-align:left; font-size: 1.05rem; margin: 0 0 2rem 0; }
.quality-summary-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(190px,0.75fr) minmax(190px,0.75fr); gap:1rem; }
.quality-summary-grid .card { min-height:150px; padding:1rem; border-radius:12px; }
.quality-summary-heading { display:flex; align-items:center; gap:0.55rem; }
.quality-icon, .parameter-icon { font-size:23px; background: #e6f1fb; border-radius: 12px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; color:#1596d1; }
.quality-icon i, .parameter-icon i { font-size:23px; }
.quality-summary-heading .card-header { margin:0; }
.quality-summary-card .safe-label { font-size:1.15rem; color:#1596d1; margin-top:0.55rem; }
.quality-summary-card .stars { font-size:1.15rem; margin:0.3rem 0; }
.quality-summary-card .calidad-desc { font-size:0.88rem; margin:0.5rem 0; }
.quality-summary-card .alert-box.full-width { padding:0.55rem 0.7rem; font-size:0.72rem; }
.quality-analysis { display:flex; justify-content:space-between; color:var(--muted); font-size:0.8rem; margin-top:0.75rem; }
.quality-analysis strong { color:var(--text); }
.quality-state-card .card-header, .quality-sensor-card .card-header { margin-bottom:0.65rem; }

.quality-sensor-card { display:flex; flex-direction:column; padding: 20px; min-height: 260px; background: #fff; border-radius: 24px; }
.quality-sensor-card strong { font-family:var(--font-heading); font-size:1.15rem; }
.quality-sensor-card .sensor-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 17px; }
.quality-sensor-card span { color:var(--muted); text-align:center; max-width: 200px; line-height:1.3; }
.quality-parameters-title { font-size: 15px; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom:0.5rem; margin-top:2rem; }
.quality-parameters-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.quality-parameter { gap:0.95rem; min-height:132px; padding:0.9rem; border-radius:11px; display:grid; grid-template-columns:28px 1fr; grid-template-rows:auto auto 1fr auto; column-gap:0.55rem; align-items:center; }
.quality-parameter > span:not(.parameter-icon) { color:#666; font-size:0.82rem; }
.quality-parameter strong { grid-column:1 / -1; font-family:var(--font-heading); font-size:1.2rem; margin-top:0.25rem; }
.quality-parameter strong small { font-family:var(--font-body); font-size:0.72rem; font-weight:500; }
.parameter-bar { grid-column:1 / -1; height:7px; border-radius:7px; background:#e5eef8; overflow:hidden; margin-top:0.35rem; }
.parameter-bar i { display:block; height:100%; border-radius:inherit; background:#d2e4f5; }
.quality-parameter > small { grid-column:1 / -1; color:#888; font-size:0.62rem; }
.quality-parameter > small b { float:right; font-weight:500; }
.quality-parameter .card-header {
  margin-left: 8px;
}
.safe-label { font-size:20px; font-weight:800; color:#0F6E56; margin-top:6px; }
.stars { color:#222; margin:8px 0; font-size:18px; letter-spacing:2px; }
.calidad-desc { margin:8px 0 12px; color:#444; }
.alert-box.full-width { display:flex; gap:10px; align-items:center; padding:12px; background:#fff; border-radius:8px; border:1px solid #e6f4f0; }
.alert-box.full-width i { color:#0F6E56; font-size:20px; }
.alert-text { margin:0; color:#444; }
.calidad-details { display:flex; flex-direction:column; gap:0.5rem; margin-top:0.8rem; }

.card-header { font-size: 15px; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.6px; }

@media (max-width: 1000px) {
  .quality-summary-grid { grid-template-columns:1fr 1fr; }
  .quality-summary-card { grid-row:span 2; }
}

@media (max-width: 620px) {
  .quality-summary-grid, .quality-parameters-grid { grid-template-columns:1fr; }
  .quality-summary-card { grid-row:auto; }
}

/* ===== Presion page styles ===== */
.presion-heading { max-width:1200px; margin:0 auto; }
.presion-heading .page-title { text-align:left; font-size:50px; font-weight:800; margin-top: 1rem; margin-bottom: 3rem; padding-top: 1rem; }
.presion-heading .page-subtitle { text-align:left; font-size: 1.05rem; margin: 0 0 2rem 0; }
.presion-layout { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr); gap:1rem; align-items:start; grid-template-rows: auto auto; }
.presion-main { min-height:360px; padding:1.2rem; grid-column: 1; grid-row: 1 / span 2; height: 100%; }
.presion-main i { color:#6b21a8; font-size:23px; background: #f5f0ff; border-radius: 12px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; }
.presion-main .valve-row { margin-bottom:0.4rem; }
.presion-main .card {position: relative;}
.presion-main .card-label { font-size: 15px; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.6px; display: flex;
  align-items: center; gap: 8px; }
.presion-side { display:grid; flex-direction:column; gap:1.25rem;  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.presion-side .card { padding:1rem; border-radius:12px; }
.presion-card-title { font-size: 15px; font-weight: 700; color: #666; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.6px; display: flex; align-items: center; gap: 8px; }
.presion-range-block { min-height:min-content; padding:1.2rem; grid-column: 2; grid-row: 1; }
.pressure-note { min-height:min-content; padding:1.2rem; }
.pressure-info { min-height:min-content; padding:1.2rem; }
.presion-note-text { margin: 0; color: #222; line-height: 1.7; font-size: 1rem; text-align: justify; }
.pressure-summary { min-height:min-content; padding:1.2rem; grid-column: 2; grid-row: 2; }
.presion-main .gauge-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.presion-main .gauge-svg { width:260px; }
.presion-main .gauge-value-text { margin-top:0.2rem; }
.presion-main .gauge-num { font-size:2.5rem; }
.presion-main .gauge-unit { font-size:1rem; }
.presion-main .current-pressure { margin-top:0.5rem; }
.pressure-details { display:flex; flex-direction:column; gap:0.5rem; margin-top:0.8rem; }

/* ===== Electroválvulas page styles ===== */
.valves-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1rem; }
.valve-card { background:#fff; border:1px solid #e0d4f5; border-radius:12px; padding:1.25rem; }
.valve-card-header { display:flex; align-items:center; gap:12px; }
.valve-card-header h2 { color:#2d1a4a; font-size:17px; }
.valve-card-header p, .valve-topic { color:#888; font-size:12px; margin-top:4px; }
.valve-status-row { display:flex; justify-content:space-between; align-items:center; margin:1.25rem 0; color:#555; font-weight:700; }
.valve-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.valve-actions form { min-width:0; }
.valve-button { width:100%; border:0; border-radius:8px; color:#fff; cursor:pointer; padding:10px 8px; font:inherit; font-weight:800; }
.valve-button:disabled { cursor:not-allowed; opacity:.45; }
.valve-button-open { background:#0f766e; }
.valve-button-close { background:#b42318; }
.valve-topic { border-top:1px solid #ede8f8; margin-top:1rem; padding-top:.75rem; overflow-wrap:anywhere; }
.valve-message { display:flex; align-items:center; gap:8px; padding:12px 14px; margin-bottom:1rem; border-radius:8px; font-weight:700; }
.valve-message-error { background:#fcebeb; color:#a32d2d; border:1px solid #f3caca; }
.empty-state { text-align:center; color:#666; }
.empty-state i { color:#6b21a8; font-size:32px; }
.empty-state h2 { color:#2d1a4a; font-size:18px; margin:8px 0; }
.valve-row { display:flex; align-items:center; gap:12px; font-weight:800; color:#222; margin-bottom:4px; margin-top:4px; }
.valve-label { font-weight:bold; font-size: 21px; padding-top: 0.9rem; }
.valve-badge { font-size:15px; padding-top:0.9rem; padding-right:0.6rem; }

.gauge-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; padding-top:6px; margin-top: -40px; margin-bottom: 10px; }
.gauge-svg { width:220px; height: 220px; overflow: visible; }
.gauge-value-text { display:flex; gap:8px; align-items:baseline; margin-top:6px; }
.gauge-num { font-size:34px; font-weight:900; color:#6B21A8; }
.gauge-unit { color:#6f6f7a; font-weight:700; }

.current-pressure { display:flex; gap:12px; align-items:center; margin-top:4px; }
.pressure-badge { display: inline-block; font-size:11px; padding-top:1rem; padding-right:0.6rem; font-weight: 800; color:#6B21A8 }
.update-chip { background:#f5f0ff; border:1px solid #efe6fb; padding:6px 10px; border-radius:8px; color:#6b21a8; font-weight:700; max-width:max-content; font-size:12px; gap: 3px; display: flex; align-items: center; }
.update-chip i { font-size:22px; }
.presion-range-label { font-size: 15px; font-weight: 700; color: #666; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.6px; display: flex; align-items: center; gap: 8px; }
.presion-bar-wrap { position:relative; background:#f7f3fb; height:12px; border-radius:12px; overflow:hidden; }
.presion-bar { position:absolute; left:0; top:0; bottom:0; right:0; background:linear-gradient(90deg,#7c3aed,#a78df0); opacity:0.95; }
.presion-bar-needle { position:absolute; top:-6px; width:3px; height:24px; background:#2d1a4a; border-radius:2px; transform:translateX(-50%); box-shadow:0 2px 8px rgba(45,26,74,0.12); }
.presion-bar-labels { display:flex; justify-content:space-between; font-size:12px; color:#222; margin-top:5px; margin-bottom: 4px; }

.presion-main .gauge-value-text .gauge-num { font-size:32px; }

@media (max-width: 1000px) {
  .presion-layout { grid-template-columns: 1fr; }
  .presion-main { min-height:0; }
  .presion-main .gauge-svg { width:220px; }
  .gauge-svg { width:180px; }
  .gauge-num { font-size:28px; }
}

@media (max-width: 420px) {
  .gauge-svg { width:140px; }
  .gauge-num { font-size:22px; }
}

/* ===== Usuario page styles ===== */
.usuario-heading { max-width:1200px; margin:0 auto; }
.usuario-heading .page-title { text-align:left; font-size:50px; font-weight:800; margin-top: 1rem; margin-bottom: 3rem; padding-top: 1rem; }
.usuario-heading .page-subtitle { text-align:left; font-size: 1.05rem; margin: 0 0 2rem 0; }
.usuario-layout { max-width:1200px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; align-items:stretch; margin:0 auto; }
.usuario-profile { min-width:0; display:flex; flex-direction:column; align-items:center; padding:1.25rem; border:1px solid var(--border); border-radius:16px; background:var(--panel); box-shadow:0 2px 4px rgba(61,35,93,0.12); text-align:center; }
.profile-avatar { width:72px; height:72px; border:1px solid #e2d6f3; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:0.45rem; color:#5d3697; font-size:1.7rem; font-weight:600; }
.profile-name { max-width:100%; overflow-wrap:anywhere; color:var(--text); font-size:1rem; font-weight:700; }
.profile-email { max-width:100%; overflow-wrap:anywhere; color:var(--muted); font-size:0.78rem; }
.profile-details { width:100%; margin-top:0.8rem; display:flex; flex-direction:column; text-align:left; }
.profile-detail { display:flex; flex-direction:column; gap:0.2rem; padding:0.55rem 0; border-bottom:1px solid var(--border); }
.profile-detail:last-child { border-bottom:0; }
.profile-detail span { color:var(--muted); font-size:0.62rem; text-transform:uppercase; }
.profile-detail strong { color:var(--text); font-size:0.75rem; font-weight:500; line-height:1.4; overflow-wrap:anywhere; }

.settings-card { background:#fff; border-radius:18px; padding:1rem 1.2rem; border:1px solid #f1e8fb; box-shadow:0 12px 28px rgba(107,33,168,0.05); }

.profile-info-card { min-width:0; }
.profile-info-header { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; margin-bottom:0.8rem; }

.edit-profile-button { display:inline-flex; align-items:center; gap:0.3rem; border:0; padding:0; background:transparent; color:#5d3697; font:inherit; font-size:0.72rem; font-weight:600; cursor:pointer; }
.profile-info-fields { display:flex; flex-direction:column; gap:0.55rem; }
.profile-info-field { min-width:0; display:flex; flex-direction:column; gap:0.15rem; padding:0.45rem; border-radius:5px; background:#e8eef9; }
.profile-info-field span { color:#555; font-size:0.55rem; text-transform:uppercase; }
.profile-info-field strong { color:#171717; font-size:0.72rem; font-weight:500; overflow-wrap:anywhere; }
.edit-profile-form[hidden], .profile-info-fields[hidden] { display:none; }
.edit-profile-fields { display:grid; grid-template-columns:1fr; gap:0.35rem; }
.edit-profile-fields label { margin-top:0.25rem; color:var(--muted); font-size:0.7rem; font-weight:600; }
.edit-profile-fields input { width:100%; min-width:0; border:1px solid var(--border); border-radius:6px; padding:0.55rem 0.65rem; background:var(--panel); color:var(--text); font:inherit; font-size:0.78rem; }
.edit-profile-fields input:focus { outline:2px solid #b9a6dc; outline-offset:1px; }
.profile-form-error { color:#a32d2d; font-size:0.72rem; }
.edit-profile-actions { display:flex; justify-content:flex-end; gap:0.5rem; margin-top:0.8rem; }
.profile-cancel-button, .profile-save-button { border:0; border-radius:6px; padding:0.5rem 0.75rem; font:inherit; font-size:0.72rem; font-weight:600; cursor:pointer; }
.profile-cancel-button { background:#eee8f7; color:#4f3d8e; }
.profile-save-button { background:#5b3495; color:#fff; }
.profile-message { margin:0 auto 1rem; max-width:1200px; padding:0.65rem 0.85rem; border-radius:7px; background:#e1f5ee; color:#0f6e56; font-size:0.8rem; }
.profile-message.msg-error { background:#fcebeb; color:#a32d2d; }
.toggle-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid #f4effc; }
.toggle-row:last-child { border-bottom:none; }
.toggle-label { font-size:14px; font-weight:600; color:#333; display:flex; align-items:center; gap:8px; }
.toggle-icon { font-size:16px; color:#7c3aed; }
.toggle { flex:0 0 38px; width:38px; height:22px; border:0; border-radius:999px; padding:0; background:#7c3aed; position:relative; cursor:pointer; transition: background .2s; }
.toggle::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,0.08); transition: transform .2s; }
.toggle.off { background:#ede8f0; }
.toggle.off::after { transform:translateX(16px); }
.account-card { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:1rem; }

.account-card p { max-width:620px; margin:0; padding:0.55rem; border-radius:5px; background:#e8eef9; color:#555; font-size:0.72rem; line-height:1.4; }
.danger-button { min-width:160px; display:inline-flex; justify-content:center; align-items:center; border:none; border-radius:6px; padding:0.7rem 1rem; background:#5b3495; color:#fff; font-size:0.72rem; font-weight:700; text-decoration:none; text-transform:uppercase; }
.danger-button:hover { background:#482775; }
body.dark-mode .profile-info-field,
body.dark-mode .account-card p { background:#2d2d44; color:var(--text); }
body.dark-mode .profile-info-field span,
body.dark-mode .profile-info-field strong { color:var(--text); }

@media (max-width:720px) {
  .usuario-layout { grid-template-columns:1fr; }
}
@media (max-width: 520px) {
  .usuario-profile { padding:1.2rem; }
  .settings-card { padding:0.95rem 1rem; }
  .account-card { align-items:stretch; flex-direction:column; }
  .danger-button { width:100%; }
  .profile-info-header { align-items:flex-start; }
}

/* Tank page reference layout */
.tanque-page { max-width:1200px; margin:0 auto; }
.tanque-page .page-title { text-align:left; font-size:50px; font-weight:800; margin-top: 1rem; margin-bottom: 3rem; padding-top: 1rem; }
.tanque-page .page-subtitle { text-align:left; font-size: 1.05rem; margin: 0 0 2rem 0; }
.tanque-page .tanque-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(320px,0.9fr); gap:1.25rem; align-items:start; }
.tanque-page .tanque-visual { min-height:390px; padding:1.35rem 1.5rem; border-radius:14px; }

.tanque-page .capacity-text { font-size:0.9rem; padding-top:0.7rem; }
.tanque-page .cylinder-wrap { padding:0.8rem 0 1rem; }
.tanque-page .cylinder { width:120px; height:230px; border-radius:16px; }
.tanque-page .cylinder-label { font-size:0.78rem; padding:0 0.25rem; }
.tanque-page .cylinder-ladder { gap:6px; }
.tanque-page .cylinder-ladder .rung { width:58%; }
.tanque-page .tank-available { display:block; width:max-content; margin:0 auto; font-size:0.78rem; padding:5px 10px; }
.tanque-page .tanque-info { display:grid; flex-direction:column; gap:16px; align-items:start; grid-template-rows: auto auto; }
.tanque-page .info-card { min-height:88px; padding:1.05rem; border-radius:12px; }
.tanque-page .info-card-label { font-size:0.82rem; margin-bottom:0.45rem; text-transform:uppercase; }
.tanque-page .info-card-value { font-size:1.05rem; }
.tanque-page .info-card-value .status-badge { font-size:0.9rem; padding:0; background:transparent; color:var(--text); }
.tanque-page .info-card-sub { font-size:0.75rem; }
.tanque-page .tank-bar-wrap { margin-top:0.4rem; }
.tanque-page .tank-legend { font-size:0.68rem; }
.tank-note { margin-bottom:3rem; margin-top:2rem; padding:1.1rem 1.25rem; border-radius:14px; background:#dcecf9; color:#34495e; }
.tank-note strong { display:block; color:#1578ad; font-size:1rem; margin-bottom:0.45rem; }
.tank-note p { margin:0; font-size:0.82rem; line-height:1.4; }

/* Shared page heading scale */
.content .page-title { text-align:left; font-size:1.8rem; margin-bottom:0.35rem; }
.content .page-subtitle { text-align:left; font-size:0.9rem; margin-top:0; margin-bottom:1.9rem; }
.dashboard-heading .page-title { text-align:left; font-size:2.75rem; }
.system-dashboard .page-title { text-align:left; font-size:50px; font-weight:800; margin-top: 1rem; margin-bottom: 3rem; padding-top: 1rem; }
.system-dashboard .page-subtitle { text-align:left; font-size: 1.05rem; margin: 0 0 2rem 0;}
.calidad-page-subtitle { text-align:left; }

@media (max-width:1000px) {
  .tanque-page .tanque-layout { grid-template-columns:1fr; }
}

/* Dashboard reference layout */
.sidebar { width:252px; padding:1rem 0.8rem; position: sticky; }
.sidebar-brand { display:flex; align-items:center; width:100%; color:#5d2498; text-decoration:none; margin:0; padding:0.25rem 0 1.25rem; overflow:visible; flex-shrink:0; }
.sidebar-brand img { display:block; width:80%; height:70px; object-fit:cover; object-position:left center; }
.nav-section-label { color:#a5a3ad; font-size:0.78rem; font-weight:590; padding:0.9rem 0.95rem 0.28rem; }
.nav-item { padding:11px 0.9rem; font-size:13px; }
.nav-item i { font-size:17px; }
.content { padding:1.25rem 1.4rem 1.7rem; }
.dashboard-hero { min-height:320px; border-radius:20px; overflow:hidden; display:flex; align-items:center; padding:1.8rem; margin-bottom:1.25rem; position:relative; background-image:linear-gradient(90deg,rgba(255,255,255,0.98) 0%,rgba(241,252,255,0.84) 46%,rgba(210,239,247,0.16) 100%),url("/static/App/img/Imagen principal.0c294061071a.jpg"); background-size:cover; background-position:center; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.7); }
.dashboard-hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; pointer-events:none; }
.dashboard-hero-copy h1 { color:#080808; font-size:2.3rem; line-height:1; margin-bottom:0.6rem; }
.dashboard-hero-copy p { color:#171717; font-size:0.78rem; font-weight:600; }
.dashboard-heading { display:block; margin-bottom:3rem; margin-top: 3rem; }
.dashboard-heading .page-title { margin: 2px 0; text-align:center; }
.page-subtitle { color:#777; font-size:0.74rem; }
.dashboard-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); gap:0.9rem; }
.dashboard-metrics .dash-card { display:flex; flex-direction:column; height:100%; min-height:146px; padding:0.85rem 0.95rem 0.75rem; gap:0.55rem; }
.dashboard-metrics .metric-head { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:0.55rem; min-height:34px; }
.dashboard-metrics .icon-wrap { width:34px; height:34px; border-radius:8px; }
.dashboard-metrics .icon-wrap i { display:flex; width:100%; height:100%; align-items:center; justify-content:center; font-size:17px; line-height:1; }
.dashboard-metrics .card-label { font-size:11px; letter-spacing:0.15px; line-height:1.15; }
.dashboard-metrics .card-value { font-size:13px; margin-top:0.25rem;}
.dashboard-metrics .friendly-message { margin-top:0.25rem; font-size:14px; line-height:normal; font-weight:700; color:#171717; }
.dashboard-metrics .card-value.exact-value,
.dashboard-metrics .consumption-value { display:flex; flex:1 1 auto; min-height:4.5rem; align-items:center; font-family:var(--font-heading); font-size:1.35rem; font-weight:800; line-height:1.1; color:#171717; }
.dashboard-metrics .badge { justify-self:end; font-size:9px; padding:2px 6px; margin:0; white-space:nowrap; }
.dashboard-metrics .card-sub { font-size:10px; margin-top:-0.35rem; }
.dashboard-metrics .card-link { font-size:9px; padding-top:6px; margin-top:auto; }
.dashboard-lower { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(250px,0.85fr); gap:1.1rem; margin-bottom:3rem; margin-top:2rem; align-items:stretch; }
.dashboard-system-card { display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  margin: 0;
  gap: 10px;
  padding: 1.6rem 1.25rem; }
.dashboard-system-card > .icon-wrap { display:flex; align-items:center; justify-content:center; margin-inline:auto; }
.dashboard-system-card > .icon-wrap i { display:flex; width:100%; height:100%; align-items:center; justify-content:center; }
.dashboard-lower .stats-row { margin-top:0; grid-template-columns:1fr; gap:0.65rem; }
.dashboard-lower .stat { display:flex; align-items:center; justify-content:space-between; padding:0.65rem 0.9rem; text-align:left; }
.dashboard-lower .stat-num { font-size:0.78rem; order:2; }
.dashboard-lower .stat-label { font-size:0.68rem; order:1; margin-top:0; text-transform:uppercase; }
.toggle-exact-label { display:flex; align-items:center; gap:0.55rem; cursor:pointer; user-select:none; }
.toggle-checkbox { width:16px; height:16px; cursor:pointer; accent-color:#6b21a8; }
.toggle-text { color:#171717; font-size:0.78rem; font-weight:600; }
.dashboard-overview-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-bottom:3rem; margin-top:2rem; }
.overview-card { min-height:88px; display:flex; align-items:center; justify-content:center; gap:0.65rem; padding:0.95rem 1.1rem; background:#fff; border:1px solid #e2d6f3; border-radius:14px; box-shadow:0 2px 4px rgba(61,35,93,0.12); text-align:center; }
.overview-card > div { display:flex; flex-direction:column; align-items:center; gap:0.3rem; }
.overview-card strong { color:#171717; font-size:0.95rem; font-weight:700; }
.overview-card span { color:#555; font-size:0.78rem; }
.overview-card-icon { color:#6b21a8; background:#f0e8ff; border-radius:50%; padding:0.25rem; font-size:0.85rem; }
.overview-action { display:inline-block; border:0; border-radius:5px; padding:0.25rem 0.55rem; color:#6b21a8; background:#eadcf8; font-size:0.6rem; text-decoration:none; cursor:pointer; }
.exact-overview .toggle-exact-label { border:0; padding:0; background:transparent; box-shadow:none; border-radius:0; font-size:0.78rem; }
.exact-overview .toggle-text { font-size:0.95rem; color:#171717; }
.exact-overview .toggle-checkbox { width:18px; height:18px; }
.update-overview { flex-direction:column; gap:0.35rem; }
.system-dashboard { max-width:1200px; margin:0 auto; }
.system-dashboard .page-title { margin-bottom:0.35rem; font-size:1.65rem; }
.system-dashboard .page-subtitle { margin-bottom:1.9rem; font-size:0.85rem; }
.system-dashboard-top { display:grid; grid-template-columns:1.15fr 0.85fr; gap:1.25rem; min-height: 250px; align-items:stretch; margin-bottom:3rem; margin-top:2rem; }
.system-status-panel, .system-info-card, .system-notification-card { background:var(--panel); border:1px solid var(--border); border-radius:12px; }
.system-status-panel { display:flex; flex-direction: column; align-items:center; text-align: center; gap:1.25rem; min-height:190px; padding:1.35rem 1.45rem; }
.system-status-icon { display:flex; align-items:center; justify-content:center; flex:0 0 62px; width:62px; height:62px; border-radius:10px; }
.system-status-icon i { font-size:30px; }
.system-status-icon.is-open { background:#e1f5ee; color:#0f6e56; }
.system-status-icon.is-closed { background:#fcebeb; color:#a32d2d; }
.system-status-copy { display:flex; flex-direction:column; gap:0.35rem; }
.system-status-value { color:var(--text); font-family:var(--font-heading); font-size:1.5rem; font-weight:800; }
.system-status-updated { color:var(--muted); font-size:0.78rem; font-weight:600; margin:0.7rem 0 0; }
.system-info-card { display:flex; align-items:flex-start; flex-direction: column; gap:0.85rem; padding:1.35rem; color:var(--muted); }
.system-info-card i { color:#6b21a8; font-size:23px; background: #f5f0ff; border-radius: 12px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; }
.system-info-card strong { display:block; align-items: center; color:#666; font: size 15px; font-weight: 700; margin-bottom:0.5rem; text-transform:uppercase; }
.system-info-card p { font-size:0.82rem; line-height:1.35; margin:0; }
.system-info-top { display:grid; grid-template-columns:34px minmax(0,1fr) auto; text-align: center; align-items: center; gap:0.55rem; min-height:38px; }
.system-info-top .card-label { font-size: 15px; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.6px; display: flex;
  align-items: center; gap: 8px; }
.system-info-description { margin: 0; color: #222; line-height: 1.7; font-size: 1rem; padding-top: 0.9rem; text-align: justify; }
.system-notification-card { display:flex; align-items:center; gap:0.85rem; max-width:680px; min-height:68px; margin-bottom:3rem; margin-top:2rem; margin: auto; padding:0.95rem 1.25rem; color:var(--muted); }
.system-notification-card > i { color:#6b21a8; font-size:22px; }
.system-notification-card strong { display:block; color:#666; font-size:0.82rem; font-weight:700; margin-bottom:0.5rem; text-transform:uppercase; }
.system-notification-card p { font-size:0.76rem; font-weight:600; margin:0; color: #222; }
.notification-button { margin-left:auto; border:0; border-radius:6px; padding:0.45rem 0.75rem; background:#eadcf8; color:#6b21a8; cursor:pointer; font:inherit; font-size:0.76rem; font-weight:700; }
.notification-button:disabled { cursor:default; opacity:.55; }
.pressure-panel { display:flex; gap:1.35rem; flex-direction: column; margin-bottom:3rem; margin-top:2rem; align-items:stretch; }
.presion-info-description { margin: 0; color: #222; line-height: 1.7; font-size: 1rem; text-align: justify; }

.content:has(.consumo-heading) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}
.consumo-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 0 2rem;
  gap: 0.75rem 1rem;
}
.consumo-heading .page-title {
  text-align: left;
  font-size: 1.8rem;
  font-weight: 800;
  margin-top: 1rem;
  padding-top: 1rem;
}
.consumo-heading .page-subtitle {
  text-align: left;
  font-size: 0.9rem;
  margin: 0;
}
.consumo-heading .tab-row {
  justify-content: flex-end;
  margin: 0.35rem 0 0;
}
.content:has(.consumo-heading) > .page-subtitle {
  margin: 0 0 0.5rem;
  color: #555;
  font-size: 0.82rem;
}
.consumo-layout { display: contents; }
.consumo-layout > .chart-card {
  width: 100%;
  border-color: var(--border);
  border-radius: 16px;
  padding: 0.9rem;
  box-shadow: 0 2px 4px rgba(61,35,93,0.12);
}
.chart-header { margin-bottom: 0.35rem; }
.chart-status { font-size: 15px; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.6px; }
.chart-value { color: #171717; font-size: 1.05rem; }
.chart-card .chart-badge,
.chart-card .badge {
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: #faf7e8;
  color: #9b873d;
  font-size: 0.62rem;
  line-height: 1.2;
}
.chart-canvas-wrap { height: 250px; }
#consumo-detail { color: #6b21a8 !important; font-size: 0.78rem !important; }
.consumo-side {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3.5vw, 2rem);
  align-items: stretch;
  margin-bottom:0.5rem; 
  margin-top:2rem;
}
.comparison-card,
.historial-card,
.consumo-side > .card {
  min-width: 0;
  min-height: 230px;
  height: auto;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 2px 4px rgba(61,35,93,0.12);
}

.month-nav { gap: 0.4rem; font-size: 0.72rem; }
.month-nav button { padding: 0.15rem 0.4rem; border-radius: 4px; }
.comparison-card { display: flex; flex-direction: column; }

.comparison-val { margin: auto 0; text-align: center; }

@media (max-width: 620px) {
  .consumo-heading { margin-bottom: 1.5rem; }
  .consumo-heading .tab-row { justify-content: flex-start; }
  .chart-canvas-wrap { height: 220px; }
  .consumo-side { grid-template-columns: 1fr; margin-top: 1.5rem; }
}

@media (max-width:1024px) {
  .dashboard-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dashboard-lower { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .dashboard-metrics { grid-template-columns:1fr; }
  .dashboard-heading { align-items:flex-start; flex-direction:column; }
  .dashboard-hero { min-height:125px; }
  .dashboard-hero-copy h1 { font-size:1.8rem; }
  .dashboard-overview-cards { grid-template-columns:1fr; }
  .system-dashboard-top { grid-template-columns:1fr; }
  .system-status-panel { min-height:130px; }
  .system-notification-card { align-items:flex-start; }
}

/* Keep the dashboard's Estado del Agua heading in its original centered format. */
.dashboard-heading .page-title { text-align:center; font-size:1.65rem; }

/* ════════════════════════════════════════════════════════════
   Sistema de reportes de usuarios, comunidad, alertas y chat
   ════════════════════════════════════════════════════════════ */
.reportes-heading { max-width:1200px; margin:0 auto; }
.reportes-heading .page-title { text-align:left; font-size:1.8rem; font-weight:800; margin-top:1rem; margin-bottom:0.35rem; padding-top:1rem; }
.reportes-heading .page-subtitle { text-align:left; font-size:0.9rem; margin:0 0 1.9rem; }
.reporte-detalle-heading .reportes-link { margin-bottom:.4rem; display:inline-flex; gap:.35rem; }
.reportes-layout { display:grid; grid-template-columns:2fr 1fr; gap:1.35rem; align-items:start; }
.reporte-detalle-layout { display:grid; grid-template-columns:3fr 2fr; gap:1rem; align-items:start; }
.reportes-main { display:grid; flex-direction:column; gap:1rem; min-width:0; align-items: stretch;  }
.reportes-side { display:grid; flex-direction:column; gap:1rem; min-width:0; align-items:stretch; margin-bottom:3rem; }
.reportes-hint { color:var(--muted); font-size:.85rem; margin:.35rem 0 .8rem; }
.reportes-empty { color:var(--muted); font-size:.9rem; padding:.8rem 0; }
.reportes-link { color:#6B21A8; text-decoration:none; font-weight:600; font-size:.88rem; display:inline-flex; align-items:center; gap:.35rem; margin-top:.5rem; }
.reportes-link:hover { text-decoration:underline; }
.msg-success { border-left:4px solid #0F6E56; }
.msg-error { border-left:4px solid #b91c1c; }
.msg-warning { border-left:4px solid #b45309; }

.tipos-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.6rem; }
.tipo-card { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:.8rem; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:.3rem; color:var(--text); font-family:var(--font-body); transition:border-color .15s, transform .1s; }
.tipo-card:hover { border-color:#6B21A8; }
.tipo-card.selected { border-color:#6B21A8; box-shadow:0 0 0 2px rgba(107,33,168,.25); }
.tipo-card .ti { font-size:1.3rem; color:#6B21A8; }
.tipo-label { font-weight:700; font-size:.9rem; }
.tipo-desc { color:var(--muted); font-size:.78rem; }

.field-label { display:block; font-weight:600; font-size:.85rem; margin:.8rem 0 .3rem; }
.field-input { width:100%; padding:.6rem .7rem; border:1px solid var(--border); border-radius:10px; background:var(--panel); color:var(--text); font-family:var(--font-body); font-size:.9rem; }
.field-input:focus { outline:none; border-color:#6B21A8; }
textarea.field-input { resize:vertical; min-height:110px; }
.reportes-submit { margin-top:1rem; display:inline-flex; align-items:center; justify-content: center; gap:.4rem; }
.reportes-submit:disabled { opacity:.5; cursor:not-allowed; }

.adjuntos-drop { border:2px dashed var(--border); border-radius:12px; padding:1.2rem; text-align:center; color:var(--muted); display:flex; flex-direction:column; gap:.4rem; align-items:center; }
.adjuntos-drop.dragover { border-color:#6B21A8; background:rgba(107,33,168,.06); }
.adjuntos-drop .ti { font-size:1.6rem; }
.adjuntos-btn { color:#6B21A8; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:.35rem; }
.adjuntos-btn:hover { text-decoration:underline; }
.adjuntos-preview { list-style:none; margin-top:.5rem; display:flex; flex-direction:column; gap:.25rem; font-size:.82rem; color:var(--muted); }

.reportes-list { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.reporte-row { display:flex; flex-direction:column; gap:.15rem; padding:.6rem .7rem; border:1px solid var(--border); border-radius:10px; text-decoration:none; color:var(--text); }
.reporte-row:hover { border-color:#6B21A8; }
.reporte-row-title { font-weight:700; font-size:.9rem; }
.reporte-row-desc { color:var(--muted); font-size:.82rem; }
.reporte-row-meta { color:var(--muted); font-size:.75rem; display:flex; gap:.4rem; align-items:center; }

.badge { display:inline-block; padding:.15rem .55rem; border-radius:999px; font-size:.72rem; font-weight:700; }
.badge-estado-pendiente { background:#fef3c7; color:#92400e; }
.badge-estado-en_proceso { background:#dbeafe; color:#1d4ed8; }
.badge-estado-resuelto { background:#d1fae5; color:#0F6E56; }
.badge-estado-confirmada, .badge-estado-resuelta { background:#d1fae5; color:#0F6E56; }
.badge-estado-descartada { background:#e5e7eb; color:#4b5563; }
.badge-prio-baja { background:#e0f2fe; color:#0369a1; }
.badge-prio-media { background:#fef3c7; color:#92400e; }
.badge-prio-alta { background:#fee2e2; color:#b91c1c; }
.badge-propio { background:#ede9fe; color:#6B21A8; }
.badge-sin-leer { background:#6B21A8; color:#fff; border-radius:999px; padding:.05rem .45rem; font-size:.7rem; }
:root[data-theme="dark"] .badge-estado-pendiente, body[data-theme="dark"] .badge-estado-pendiente { background:#453a16; color:#fbbf24; }
:root[data-theme="dark"] .badge-estado-en_proceso, body[data-theme="dark"] .badge-estado-en_proceso { background:#1e3a5f; color:#93c5fd; }
:root[data-theme="dark"] .badge-estado-resuelto, body[data-theme="dark"] .badge-estado-resuelto { background:#0b3b2e; color:#6ee7b7; }

.reporte-descripcion { font-size:.95rem; line-height:1.55; }
.respuesta-oficial { border-left:4px solid #0F6E56; }
.respuesta-oficial-mini { margin-top:.7rem; background:rgba(15,110,86,.08); border-radius:10px; padding:.6rem .7rem; font-size:.85rem; }

.evidencia-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.6rem; margin-top:.6rem; }
.evidencia-item { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; border:1px solid var(--border); background:#000; }
.adjuntar-mas { margin-top:.8rem; }

.chat-card { display:flex; flex-direction:column; max-height:70vh; position:sticky; top:72px; }
.chat-messages { overflow-y:auto; display:flex; flex-direction:column; gap:.55rem; padding:.6rem 0; min-height:160px; }
.chat-msg { background:var(--background); border:1px solid var(--border); border-radius:12px 12px 12px 4px; padding:.55rem .7rem; max-width:88%; align-self:flex-start; }
.chat-msg.propio { background:#6B21A8; color:#fff; border-color:#6B21A8; border-radius:12px 12px 4px 12px; align-self:flex-end; }
.chat-msg-autor { font-size:.72rem; font-weight:700; opacity:.85; display:flex; gap:.3rem; align-items:center; }
.chat-msg-texto { font-size:.9rem; margin:.15rem 0; white-space:pre-wrap; word-break:break-word; }
.chat-msg-fecha { font-size:.68rem; opacity:.7; }
.chat-form { display:flex; gap:.5rem; padding-top:.6rem; border-top:1px solid var(--border); }
.chat-send { background:#6B21A8; color:#fff; border:none; border-radius:10px; padding:0 .9rem; cursor:pointer; font-size:1.1rem; }
.chat-send:hover { background:#581c87; }

.conteos-row { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-bottom:1rem; }
.filtros-row { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-bottom:1rem; }
.filtros-row .field-input { width:auto; min-width:170px; }
.btn-filtrar { display:inline-flex; align-items:center; gap:.35rem; }
.tabla-reportes-wrap { overflow-x:auto; }
.tabla-reportes { width:100%; border-collapse:collapse; font-size:.85rem; }
.tabla-reportes th, .tabla-reportes td { text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--border); vertical-align:top; }
.tabla-reportes th { font-size:.72rem; text-transform:uppercase; color:var(--muted); letter-spacing:.04em; }
.autor-nombre { font-weight:700; }
.autor-correo { color:var(--muted); font-size:.75rem; }
.desc-cell { max-width:260px; }
.btn-ver { color:#6B21A8; font-weight:700; text-decoration:none; }
.btn-ver:hover { text-decoration:underline; }
.admin-gestion-row { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.admin-gestion-row label, .admin-gestion label { font-weight:600; font-size:.85rem; display:flex; flex-direction:column; gap:.3rem; }

.comunidad-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-bottom:1rem; }
.comunidad-form-grid label { font-weight:600; font-size:.85rem; display:flex; flex-direction:column; gap:.3rem; }
.comunidad-form-grid .span-2 { grid-column:span 2; }
.comunidad-feed { display:flex; flex-direction:column; gap:1rem; margin-top:1rem; }
.comunidad-card-head { display:flex; justify-content:space-between; align-items:center; gap:.6rem; }
.comunidad-autor { font-weight:700; }
.comunidad-meta { color:var(--muted); font-size:.8rem; }
.comunidad-titulo { margin:.5rem 0 .2rem; font-size:1.05rem; }
.comunidad-desc { font-size:.9rem; line-height:1.5; }
.comunidad-card-foot { margin-top:.7rem; }

.alertas-list { list-style:none; display:flex; flex-direction:column; gap:.7rem; }
.alerta-row { display:flex; gap:.8rem; padding:.7rem; border:1px solid var(--border); border-radius:12px; border-left-width:4px; }
.alerta-row.prioridad-alta { border-left-color:#b91c1c; }
.alerta-row.prioridad-media { border-left-color:#b45309; }
.alerta-row.prioridad-baja { border-left-color:#0369a1; }
.alerta-icon { font-size:1.4rem; color:#6B21A8; }
.alerta-titulo { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.alerta-msg { margin:.25rem 0; font-size:.9rem; }
.alerta-detalle { margin:.2rem 0 .3rem; }
.alerta-detalle summary { cursor:pointer; color:#6b21a8; font-weight:700; font-size:.85rem; }
.alerta-fecha { color:var(--muted); font-size:.78rem; }

.dashboard-interrupciones { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem; margin-bottom:3rem; margin-top:2rem; align-items:stretch; }
.mini-list { list-style:none; display:flex; flex-direction:column; gap:.45rem; margin-top:.6rem; font-size:.85rem; }
.mini-list a { color:var(--text); text-decoration:none; }
.mini-list a:hover { color:#6B21A8; }
.mini-empty { color:var(--muted); font-size:.85rem; margin-top:.6rem; }
.mini-link { display:inline-block; margin-top:.6rem; color:#6B21A8; font-weight:600; font-size:.82rem; text-decoration:none; }

@media (max-width:1000px) {
  .reportes-layout, .reporte-detalle-layout { grid-template-columns:1fr; }
  .dashboard-interrupciones { grid-template-columns:1fr; }
  .chat-card { position:static; max-height:none; }
}
@media (max-width:600px) {
  .comunidad-form-grid { grid-template-columns:1fr; }
  .comunidad-form-grid .span-2 { grid-column:span 1; }
  .admin-gestion-row { grid-template-columns:1fr; }
  .conteos-row { grid-template-columns:1fr; }
}

.valves-page { max-width:1200px; margin:0 auto; }
.valves-page .page-title { text-align:left; font-size:1.8rem; font-weight:800; margin-top:1rem; padding-top:1rem; }
.valves-page .page-subtitle { text-align:left; font-size:0.9rem; margin:0 0 1.9rem; }
.valve-message { display:flex; align-items:center; gap:8px; padding:12px 14px; margin-bottom:16px; border-radius:10px; font-weight:700; }
.valve-message-error { background:#fcebeb; color:#a32d2d; border:1px solid #f3caca; }
.valves-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:12px; }
.valve-card { background:#fff; border:1px solid #efe5fb; border-radius:12px; padding:16px; box-shadow:0 6px 18px rgba(43,20,60,.04); }
.valve-card-header { display:flex; align-items:center; gap:12px; }
.valve-card-header h2 { color:#2d1a4a; font-size:17px; }
.valve-card-header p, .valve-topic { color:#6f6f7a; font-size:12px; margin-top:4px; }
.valve-status-row { display:flex; justify-content:space-between; align-items:center; margin:16px 0; color:#555; font-weight:700; }
.valve-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.valve-actions form { min-width:0; }
.valve-button { width:100%; border:0; border-radius:8px; color:#fff; cursor:pointer; padding:9px 8px; font:inherit; font-weight:800; transition:opacity .15s, transform .15s; }
.valve-button:hover:not(:disabled) { transform:translateY(-1px); }
.valve-button:disabled { cursor:not-allowed; opacity:.45; }
.valve-button-open { background:#0f766e; }
.valve-button-close { background:#b42318; }
.valve-timer-panel { margin-top:16px; padding-top:12px; border-top:1px solid #f0ecf7; }
.valve-timer-label { display:block; margin-bottom:6px; font-size:11px; font-weight:800; letter-spacing:.04em; color:#6f6f7a; text-transform:uppercase; }
.valve-timer-buttons { display:flex; flex-wrap:wrap; gap:6px; }
.valve-timer-button { border:1px solid #d8c8f3; background:#f7f2ff; border-radius:8px; color:#4c1d95; cursor:pointer; font:inherit; font-size:12px; font-weight:800; padding:6px 8px; }
.valve-timer-button:hover { background:#efe4ff; }
.valve-timer-custom { display:flex; gap:8px; margin-top:8px; }
.valve-custom-duration { flex:1; border:1px solid #e0d4f5; border-radius:8px; background:#fff; color:#2d1a4a; font:inherit; font-size:13px; padding:8px 10px; }
.valve-custom-duration:focus { border-color:#8b5cf6; box-shadow:0 0 0 3px rgba(139,92,246,.12); outline:none; }
.valve-timer-status { margin-top:10px; padding:10px 12px; border-radius:10px; background:#f8f5ff; border:1px solid #eadcff; }
.valve-timer-status-header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.valve-timer-status-label { font-size:12px; font-weight:800; color:#6b21a8; }
.valve-timer-countdown { font-size:13px; font-weight:800; color:#2d1a4a; }
.valve-timer-cancel { margin-top:8px; width:100%; border:1px solid #f3caca; background:#fff1f2; border-radius:8px; color:#a32d2d; cursor:pointer; font:inherit; font-size:12px; font-weight:800; padding:8px 10px; }
.valve-timer-cancel.is-hidden { display:none; }
.valve-topic { border-top:1px solid #f0ecf7; margin-top:16px; padding-top:10px; overflow-wrap:anywhere; }
.empty-state { text-align:center; color:#6f6f7a; }
.empty-state i { color:#6b21a8; font-size:32px; }
.empty-state h2 { color:#2d1a4a; font-size:18px; margin:8px 0; }
.movement-panel { margin-top:24px; background:#fff; border:1px solid #efe5fb; border-radius:12px; overflow:hidden; }
.movement-panel-header { padding:16px; border-bottom:1px solid #f0ecf7; }
.movement-panel-header h2 { margin:0; color:#2d1a4a; font-size:18px; }
.movement-panel-header p { margin:4px 0 0; color:#6f6f7a; font-size:13px; }
.movement-table-wrap { overflow-x:auto; }
.movement-table { width:100%; border-collapse:collapse; min-width:720px; }
.movement-table th, .movement-table td { padding:12px 16px; border-bottom:1px solid #f4f0f8; text-align:left; font-size:13px; }
.movement-table th { background:#faf8fd; color:#6b21a8; font-size:12px; text-transform:uppercase; letter-spacing:.03em; }
.movement-table tr:last-child td { border-bottom:0; }
.movement-empty { margin:0; padding:18px 16px; color:#6f6f7a; }
.movement-type { display:inline-block; padding:4px 8px; border-radius:999px; font-weight:800; font-size:12px; }
.movement-type-manual { background:#f3e8ff; color:#6b21a8; }
.movement-type-auto { background:#e1f5ee; color:#0f6e56; }
.history-toolbar { display:flex; flex-wrap:wrap; align-items:end; gap:10px; padding:14px 16px; background:#fcfaff; border-bottom:1px solid #f0ecf7; }
.history-field { display:flex; flex:1 1 150px; flex-direction:column; gap:5px; min-width:140px; }
.history-field label { color:#6f6f7a; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.history-field input { width:100%; border:1px solid #e0d4f5; border-radius:8px; background:#fff; color:#2d1a4a; font:inherit; font-size:13px; padding:9px 10px; outline:none; transition:border-color .15s, box-shadow .15s; }
.history-field input:focus { border-color:#8b5cf6; box-shadow:0 0 0 3px rgba(139,92,246,.12); }
.history-actions { display:flex; gap:8px; align-items:center; }
.history-button, .history-export { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:0; border-radius:8px; cursor:pointer; font:inherit; font-size:13px; font-weight:800; padding:9px 12px; text-decoration:none; transition:transform .15s, box-shadow .15s, background .15s; }
.history-button { background:#6b21a8; color:#fff; }
.history-export { background:#e1f5ee; color:#0f6e56; }
.history-button:hover, .history-export:hover { transform:translateY(-1px); box-shadow:0 4px 10px rgba(43,20,60,.12); }
.history-reset { color:#6f6f7a; font-size:12px; font-weight:700; padding:8px 4px; text-decoration:none; }
.history-reset:hover { color:#6b21a8; }
.valve-button.is-loading { cursor:wait; opacity:.7; }
.valve-button.is-loading i { animation: valve-spin .8s linear infinite; }
.valve-live-message { min-height:20px; margin:0 0 12px; color:#6f6f7a; font-size:13px; font-weight:700; }
.valve-live-message.is-error { color:#a32d2d; }
.timer-confirm-modal { position:fixed; inset:0; background:rgba(29,18,38,.45); display:flex; align-items:center; justify-content:center; padding:20px; z-index:1000; }
.timer-confirm-modal.is-hidden { display:none; }
.timer-confirm-dialog { width:min(420px, 100%); background:#fff; border-radius:12px; border:1px solid #efe5fb; box-shadow:0 18px 40px rgba(43,20,60,.18); padding:22px 20px; }
.timer-confirm-dialog h3 { margin:0 0 8px; color:#2d1a4a; font-size:20px; }
.timer-confirm-dialog p { margin:0; color:#6f6f7a; line-height:1.6; }
.timer-confirm-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.timer-confirm-button { border:0; border-radius:8px; padding:9px 14px; font:inherit; font-weight:800; cursor:pointer; }
.timer-confirm-button-cancel { background:#f3e8ff; color:#6b21a8; }
.timer-confirm-button-confirm { background:#0f766e; color:#fff; }
@keyframes valve-spin { to { transform:rotate(360deg); } }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; padding:16px; }
.stat-tile { background:#fcfaff; border:1px solid #f0ecf7; border-radius:10px; padding:14px; color:#6f6f7a; font-size:13px; line-height:1.45; }
.stat-tile strong { display:block; color:#2d1a4a; font-size:19px; line-height:1.2; margin-top:4px; }
.stat-tile-accent strong { color:#6b21a8; }
.stats-chart { height:340px; padding:14px 22px 22px; }
.stats-chart canvas { width:100% !important; height:100% !important; }
:root[data-theme="dark"] .history-toolbar, body[data-theme="dark"] .history-toolbar,
:root[data-theme="dark"] .stat-tile, body[data-theme="dark"] .stat-tile { background:var(--panel); border-color:var(--border); }
:root[data-theme="dark"] .history-field input, body[data-theme="dark"] .history-field input { background:var(--panel); border-color:var(--border); color:var(--text); }
:root[data-theme="dark"] .history-field label, body[data-theme="dark"] .history-field label,
:root[data-theme="dark"] .stat-tile, body[data-theme="dark"] .stat-tile { color:var(--muted); }
:root[data-theme="dark"] .stat-tile strong, body[data-theme="dark"] .stat-tile strong { color:var(--text); }
@media (max-width:600px) {
    .valve-actions { grid-template-columns:1fr; }
    .history-toolbar { align-items:stretch; }
    .history-actions { width:100%; }
    .history-button, .history-export { flex:1; }
    .history-reset { padding:9px 4px; }
}

.admin-heading { max-width:1200px; margin:0 auto; }
.admin-heading .page-title { text-align:left; font-size:1.8rem; font-weight:800; margin-top:1rem; margin-bottom:2rem; padding-top:1rem; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.metric-grid > a { min-width:0; display:block; color:inherit; text-decoration:none; }
.metric-grid > a .metric { height:100%; }
.metric { background:#fff; border-radius:12px; padding:12px; border:1px solid #efe5fb; }
.metric .label { font-size:12px; color:#6f6f7a; font-weight:800; text-transform:uppercase }
.metric .val { font-size:22px; font-weight:900; color:#2d1a4a }
.metric .val.val-alert { color:#b91c1c }
.table-styled { width:100%; border-collapse:collapse; margin-top:12px; }
.table-styled th, .table-styled td { padding:8px 10px; border-bottom:1px solid #f0ecf7; font-size:13px; }
.table-styled th { text-align:left; color:#6B21A8; font-weight:800; }
.chart-wrap { background:#fff; padding:12px; border-radius:12px; border:1px solid #efe5fb; }
.cards-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:12px; }
.dash-card { background:#fff; border-radius:10px; padding:12px; border:1px solid #efe5fb; display:block; text-decoration:none; color:inherit }

.icon-wrap { width:44px;height:44px;border-radius:8px;background:#f7f3fb;display:flex;align-items:center;justify-content:center }
    /* Sensor cards */
.sensor-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin-bottom:16px; }
.sensor-card { background:#fff; padding:12px; border-radius:10px; border:1px solid #efe5fb; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; box-shadow: 0 6px 18px rgba(43, 20, 60, 0.04); min-height:72px }
.sensor-card .info { overflow:hidden }
.sensor-card .info .title { font-weight:800; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sensor-card .info .meta { font-size:12px; color:#6f6f7a; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sensor-card .actions { display:flex; flex-direction:column; align-items:flex-end; gap:8px }
.sensor-card .status { font-size:12px; color:#6f6f7a; text-transform:capitalize }
.btn { display:inline-block; background:#6B21A8; color:#fff; padding:6px 10px; border-radius:8px; text-decoration:none; font-size:13px }
.btn:hover { background:#53148f }
    /* Layout del panel: clases propias para no colisionar con la página de consumo */
.admin-layout { display:grid; grid-template-columns: 1fr; gap:16px; align-items:stretch; margin-bottom:2rem; margin-top:2rem; }
.admin-sensors { min-width:0; }
.admin-sensors > .card-header { margin:0 0 12px; }
.admin-sensors .sensor-grid { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.admin-side { display:grid; gap:12px; align-content:start; grid-template-columns: 1fr; }
.admin-side > * { min-width:0; }
.admin-side .comparison-card, .admin-side .historial-card { min-height:0; height:auto; }
.admin-history { min-width:0; width:100%; margin-top:16px; padding:16px; overflow-x:auto; background:var(--panel); border:1px solid var(--border); border-radius:12px; }
.admin-history > .card-header { margin:0 0 10px; }
.admin-history .table-styled { margin-top:0; }
@media (max-width:900px) { .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px){ .admin-layout { grid-template-columns:1fr; } }
@media (max-width:600px){ .sensor-card{ flex-direction:column; align-items:stretch } .sensor-card .actions{ align-items:flex-start } }
/* ===== Avisos de fuga (admin) ===== */
.leak-bell { position:relative; display:inline-flex; color:inherit; text-decoration:none; }
.leak-bell-badge { position:absolute; top:-7px; right:-9px; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:#b3261e; color:#fff; font-size:0.62rem; font-weight:800; line-height:17px; text-align:center; }
.leak-toasts { position:fixed; top:70px; right:18px; z-index:2000; display:flex; flex-direction:column; gap:10px; width:min(360px, calc(100vw - 36px)); }
.leak-toast { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; background:var(--panel); border:1px solid #f5c2c7; border-left:5px solid #b3261e; border-radius:12px; box-shadow:0 10px 28px rgba(46,35,91,0.22); animation:leak-toast-in .25s ease-out; }
.leak-toast.prioridad-alta { border-left-color:#d9822b; border-color:#f3d9b8; }
.leak-toast-icon { color:#b3261e; font-size:1.4rem; }
.leak-toast-body { display:flex; flex-direction:column; gap:2px; font-size:0.78rem; color:var(--muted); flex:1; }
.leak-toast-body strong { color:var(--text); font-size:0.85rem; }
.leak-toast-body a { color:#6b21a8; font-weight:700; text-decoration:none; margin-top:4px; }
.leak-toast-close { border:0; background:transparent; font-size:1.2rem; line-height:1; cursor:pointer; color:#777; }
@keyframes leak-toast-in { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
/* ===== Pantalla de carga de predicciones (admin) ===== */
.ml-overlay { position:fixed; inset:0; z-index:3000; display:flex; align-items:center; justify-content:center; background:rgba(34,18,58,0.55); backdrop-filter:blur(3px); }
.ml-overlay-card { width:min(420px, calc(100vw - 32px)); padding:28px 26px 24px; background:var(--panel); border-radius:18px; text-align:center; box-shadow:0 20px 50px rgba(34,18,58,0.35); }
.ml-overlay-title { font-size:1.15rem; font-weight:800; color:#4f1f9a; margin:12px 0 4px; }
.ml-overlay-step { min-height:1.2em; margin:0 0 16px; color:var(--text); font-size:0.85rem; }
.ml-progress { height:10px; border-radius:999px; background:var(--border); overflow:hidden; }
.ml-progress-bar { height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#7c3aed,#a855f7); transition:width .5s ease; }
.ml-overlay-meta { margin:10px 0 0; color:var(--muted); font-size:0.75rem; font-weight:700; }
.ml-drops { display:flex; justify-content:center; gap:10px; height:34px; }
.ml-drops span { width:14px; height:14px; border-radius:50% 50% 50% 0; background:#7c3aed; transform:rotate(-45deg); animation:ml-drop 1.2s ease-in-out infinite; }
.ml-drops span:nth-child(2) { animation-delay:.2s; background:#9b7bd8; }
.ml-drops span:nth-child(3) { animation-delay:.4s; background:#c4a8f0; }
@keyframes ml-drop { 0%,100% { transform:translateY(0) rotate(-45deg); opacity:.6; } 50% { transform:translateY(16px) rotate(-45deg); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .ml-drops span { animation:none; } .ml-progress-bar { transition:none; } }

/* Perfil: ayudas de los interruptores y reporte semanal */
.preference-help { color:var(--muted); font-size:13px; margin:-4px 0 6px; }
.toggle-label > span { display:flex; flex-direction:column; }
.toggle-hint { color:var(--muted); font-size:12px; font-weight:500; margin-top:2px; }
.toggle:disabled { opacity:.6; cursor:wait; }
.weekly-report { margin-top:12px; padding:10px 12px; border-radius:10px; background:rgba(124,58,237,.08); font-size:13px; display:flex; flex-direction:column; gap:4px; }
.weekly-report[hidden] { display:none; }
.weekly-report strong { color:#6B21A8; }
.preference-status { min-height:18px; margin-top:8px; font-size:12px; color:var(--muted); }

/* Estado de la válvula (panel de presión) */
.valve-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-weight:800; font-size:13px; }
.badge-open { background:#e6f7ee; color:#1a7a4c; }
.badge-closed { background:#fdeaea; color:#b3261e; }
.badge-unknown { background:#f0ecf7; color:var(--muted); }
.pressure-badge.badge-open, .pressure-badge.badge-closed, .pressure-badge.badge-unknown { padding:3px 10px; border-radius:999px; }
.valve-updated { margin:4px 0 0; font-size:12px; color:var(--muted); min-height:14px; }
body[data-theme="dark"] .valve-label,
body.dark-mode .valve-label { color: var(--text, #e0e0e0); }
body[data-theme="dark"] .badge-unknown,
body.dark-mode .badge-unknown { background: rgba(255,255,255,.08); }