/**
 * mobile.less — Mobile webview styles entry point.
 *
 * Compiled by: grunt buildMobile
 * Output:      assets/styles/mobile.css  (tracked in git)
 *
 * Re-run after editing this file or layout-just-body.less.
 * Loaded exclusively by views/layouts/mobile.ejs.
 *
 * Structure:
 *   1. Shared layout base       → layouts/layout-just-body
 *   2. contadores-webview       → meter list, odometer, pull-to-refresh
 *   3. contadores-mapa-webview  → full-screen map, markers, popups
 *   4. herramientas-webview     → tools placeholder
 *   5. herramientas-contador    → counter detail, manual reading, modals
 *   6. informes-webview         → reports, chart, records table
 *   7. user-webview             → user profile, edit form, toggles
 */
/* ── 1. Shared layout base ─────────────────────────────── */
/* ============================================================
   layout-just-body.ejs — Mobile webview (IoT device screens)
   Scoped entirely to body.mobile-webview-layout to avoid
   bleeding into other layouts when compiled into one CSS file.
   ============================================================ */
/* ── Scoped CSS custom properties ───────────────────────── */
:root {
  --mobile-bg: #f2f4f8;
  --mobile-surface: #ffffff;
  --mobile-surface-muted: #f7f9fc;
  --mobile-text: #16202a;
  --mobile-text-soft: #667281;
  --mobile-border: rgba(22, 32, 42, 0.08);
  --mobile-primary: #0a84ff;
  --mobile-primary-dark: #0064d2;
  --mobile-shadow: 0 10px 28px rgba(10, 29, 50, 0.08);
  --mobile-radius-xl: 24px;
  --mobile-radius-lg: 18px;
}
/* ── Base layout ─────────────────────────────────────────── */
/* Scoped to class to avoid overriding other layout backgrounds */
body.mobile-webview-layout {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--mobile-text);
  background: linear-gradient(180deg, #f7f9fc 0%, var(--mobile-bg) 100%);
  min-height: 100%;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.mobile-webview-layout *,
body.mobile-webview-layout *::before,
body.mobile-webview-layout *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
body.mobile-webview-layout a {
  color: inherit;
}
/* ── Shell ───────────────────────────────────────────────── */
.mobile-webview {
  min-height: 100vh;
  padding: 20px 16px 28px;
}
.mobile-webview__shell {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}
.mobile-webview__stack {
  display: grid;
  gap: 16px;
}
/* ── Hero card ───────────────────────────────────────────── */
.mobile-webview__hero {
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid var(--mobile-border);
  border-radius: var(--mobile-radius-xl);
  background:
    radial-gradient(circle at top right, rgba(10, 132, 255, 0.18), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  box-shadow: var(--mobile-shadow);
}
.mobile-webview__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mobile-primary-dark);
}
.mobile-webview__title {
  margin: 6px 0 0;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 800;
  color: var(--mobile-text);
}
.mobile-webview__subtitle {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--mobile-text-soft);
}
/* ── Actions ─────────────────────────────────────────────── */
.mobile-webview__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.mobile-webview__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--mobile-primary);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
  box-shadow: 0 8px 20px rgba(10, 132, 255, 0.22);
}
.mobile-webview__button:hover,
.mobile-webview__button:focus {
  background: var(--mobile-primary-dark);
}
.mobile-webview__button:active {
  transform: scale(0.985);
}
.mobile-webview__button--secondary {
  border-color: rgba(10, 132, 255, 0.16);
  background: rgba(10, 132, 255, 0.1);
  color: var(--mobile-primary-dark);
  box-shadow: none;
}
.mobile-webview__button--block {
  width: 100%;
}
/* ── Sections ────────────────────────────────────────────── */
.mobile-webview__section {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid var(--mobile-border);
  border-radius: var(--mobile-radius-xl);
  background: var(--mobile-surface);
  box-shadow: var(--mobile-shadow);
}
.mobile-webview__section-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--mobile-text);
}
.mobile-webview__section-copy {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--mobile-text-soft);
}
.mobile-webview__subheading {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mobile-text-soft);
}
.mobile-webview__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  color: var(--mobile-primary-dark);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
/* ── Empty states ────────────────────────────────────────── */
.mobile-webview__empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--mobile-text-soft);
}
.mobile-webview__empty-icon {
  font-size: 42px;
  margin-bottom: 10px;
}
.mobile-webview__empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--mobile-text);
}
.mobile-webview__empty-subtitle {
  margin-top: 4px;
  font-size: 13px;
}
/* ── List cards ──────────────────────────────────────────── */
.mobile-webview__list-card {
  border: 1px solid var(--mobile-border);
  border-radius: var(--mobile-radius-xl);
  background: var(--mobile-surface);
  box-shadow: var(--mobile-shadow);
  overflow: hidden;
}
.mobile-webview__list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(22, 32, 42, 0.06);
}
.mobile-webview__list-row:last-child {
  border-bottom: none;
}
.mobile-webview__icon-badge {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(10, 132, 255, 0.1);
  color: var(--mobile-primary-dark);
}
/* ── Map ─────────────────────────────────────────────────── */
/* .mobile-webview__map {
  width: 100%;
  min-height: 360px;
  margin-top: 14px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--mobile-border);
  background: var(--mobile-surface-muted);
} */
/* ── Chips & notes ───────────────────────────────────────── */
.mobile-webview__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.mobile-webview__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.08);
  color: var(--mobile-primary-dark);
  font-size: 12px;
  font-weight: 700;
}
.mobile-webview__note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(10, 132, 255, 0.07);
  color: var(--mobile-text-soft);
  font-size: 13px;
}
/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .mobile-webview {
    padding: 16px 14px 24px;
  }
  .mobile-webview__hero,
  .mobile-webview__section {
    padding: 16px;
  }
  .mobile-webview__title {
    font-size: 24px;
  }
  .mobile-webview__map {
    min-height: 300px;
  }
}
/* ── 2. contadores-webview ─────────────────────────────── */
#contadores-app {
  min-height: 100vh;
}
#contadores-app[data-state="loading"] #contadores-ready,
#contadores-app[data-state="error"] #contadores-ready,
#contadores-app[data-state="empty"] #contadores-ready {
  display: none !important;
}
#contadores-app[data-state="ready"] #contadores-loading,
#contadores-app[data-state="ready"] #contadores-error,
#contadores-app[data-state="ready"] #contadores-empty {
  display: none !important;
}
#contadores-app[data-state="loading"] #contadores-error,
#contadores-app[data-state="loading"] #contadores-empty,
#contadores-app[data-state="error"] #contadores-loading,
#contadores-app[data-state="error"] #contadores-empty,
#contadores-app[data-state="empty"] #contadores-loading,
#contadores-app[data-state="empty"] #contadores-error {
  display: none !important;
}
.pull-indicator {
  height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8e8e93;
  font-size: 13px;
  transition:
    height 0.18s ease,
    opacity 0.18s ease;
  opacity: 0;
}
.pull-indicator.visible {
  opacity: 1;
}
.pull-indicator.ready {
  color: #007aff;
  font-weight: 600;
}
.pull-indicator.refreshing {
  height: 52px !important;
  opacity: 1;
  color: #007aff;
  font-weight: 600;
}
.pull-indicator-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(22, 32, 42, 0.06);
}
.spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(0, 122, 255, 0.18);
  border-top-color: #007aff;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.cards-list {
  padding: 0 0 24px;
}
.contadores-hero {
  display: grid;
  gap: 14px;
  margin: 2px 0 18px;
}
.contadores-hero__top {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
}
.contadores-hero__title {
  margin: 0;
  font-size: 26px;
  line-height: 1.04;
  font-weight: 720;
  letter-spacing: -0.04em;
  color: #111827 !important;
}
.contadores-hero__view-toggle {
  margin-top: 6px;
  min-height: 34px;
  min-width: 146px;
  padding: 0 11px;
  border: 1px solid rgba(190, 208, 235, 0.34);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 249, 255, 0.98) 100%);
  box-shadow: 0 10px 22px rgba(10, 29, 50, 0.05);
  color: #1757cf;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  cursor: pointer;
}
.contadores-hero__dropdown-icon,
.contadores-hero__dropdown-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contadores-hero__dropdown-icon {
  color: #2e7bff;
  opacity: 0.96;
}
.contadores-hero__dropdown-label {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: -0.015em;
}
.contadores-hero--floating {
  padding: 18px 18px 12px;
  border-radius: 24px;
  background: rgba(248, 250, 253, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 28px rgba(10, 29, 50, 0.12);
  backdrop-filter: blur(14px);
}
.contadores-concessions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.contadores-concession {
  padding: 18px 18px 16px;
  border-radius: 24px;
  border: 1px solid rgba(190, 208, 235, 0.36);
  background:
    radial-gradient(circle at top right, rgba(46, 123, 255, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 250, 255, 0.98) 100%);
  box-shadow: 0 18px 34px rgba(10, 29, 50, 0.07);
}
.contadores-concession__hero {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.contadores-concession__hero-icon {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, #6ca7ff 0%, #2e7bff 54%, #1e5fe2 100%);
  box-shadow: 0 9px 16px rgba(46, 123, 255, 0.18);
  margin-top: 3px;
}
.contadores-concession__hero-icon svg {
  width: 18px;
  height: 18px;
}
.contadores-concession__hero-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title eyebrow"
    "subtitle eyebrow";
  column-gap: 12px;
  row-gap: 3px;
  align-items: start;
}
.contadores-concession__eyebrow {
  grid-area: eyebrow;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "icon label"
    "date date";
  align-items: center;
  justify-self: end;
  align-self: start;
  column-gap: 5px;
  row-gap: 1px;
  margin-top: 0;
  color: #7a89a4;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  text-align: right;
}
.contadores-concession__eyebrow-icon {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contadores-concession__eyebrow > span:nth-child(2) {
  grid-area: label;
}
.contadores-concession__date {
  grid-area: date;
  justify-self: end;
}
.contadores-concession__date {
  color: #20304a;
  font-weight: 650;
}
.contadores-concession__title {
  grid-area: title;
  color: #16223a;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.contadores-concession__subtitle {
  grid-area: subtitle;
  margin-top: 0;
  color: #16223a;
  color: #8a98b0;
  font-size: 12px;
  font-weight: 500;
}
.contadores-concession__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 12px;
}
.contadores-concession__stat {
  min-width: 0;
  padding: 0 12px;
  border-left: 1px solid rgba(140, 162, 199, 0.16);
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}
.contadores-concession__stat:first-child {
  padding-left: 0;
  border-left: none;
}
.contadores-concession__stat:last-child {
  padding-right: 0;
}
.contadores-concession__stat-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #226dff;
  background: rgba(46, 123, 255, 0.08);
}
.contadores-concession__stat-label {
  color: #8695ae;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}
.contadores-concession__stat-value {
  color: #16223a;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  word-break: normal;
  overflow-wrap: anywhere;
  text-align: center;
}
.contadores-concession__stat-value--accent {
  color: #226dff;
}
.contadores-list-panel,
.contadores-map-panel {
  transform-origin: top center;
  will-change: opacity, transform;
}
#contadores-app[data-view="list"] .contadores-list-panel,
#contadores-app[data-view="map"] .contadores-map-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition:
    opacity 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}
#contadores-app[data-view="list"] .contadores-map-panel,
#contadores-app[data-view="map"] .contadores-list-panel {
  opacity: 0;
  transform: translateY(8px) scale(0.996);
  pointer-events: none;
  transition:
    opacity 0.36s ease,
    transform 0.36s ease;
}
#contadores-app[data-view="list"] .contadores-map-panel {
  max-height: 0;
  overflow: hidden;
  padding: 0;
}
#contadores-app[data-view="map"] {
  --contadores-map-offset: 146px;
  --contadores-map-height: calc(100dvh - var(--contadores-map-offset));
}
#contadores-app[data-view="map"] #contadores-ready {
  min-height: var(--contadores-map-height);
  display: flex;
  flex-direction: column;
}
#contadores-app[data-view="map"] .contadores-hero {
  flex-shrink: 0;
  margin-bottom: 8px;
}
#contadores-app[data-view="map"] .contadores-list-panel {
  max-height: 0;
  overflow: hidden;
}
#contadores-app[data-view="list"] .contadores-list-panel {
  max-height: none;
}
#contadores-app[data-view="map"] .contadores-map-panel {
  flex: 0 0 auto;
  width: 100%;
  height: var(--contadores-map-height);
  max-height: var(--contadores-map-height);
  min-height: var(--contadores-map-height);
  opacity: 1;
  overflow: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  padding: 0 0 8px;
}
.contadores-map-card {
  width: 100%;
  height: var(--contadores-map-height);
  min-height: var(--contadores-map-height);
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(190, 208, 235, 0.36);
  background:
    radial-gradient(circle at top right, rgba(46, 123, 255, 0.1), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 250, 255, 0.98) 100%);
  box-shadow: 0 18px 34px rgba(10, 29, 50, 0.07);
}
.contadores-map-card__map {
  display: none;
  width: 100%;
  height: var(--contadores-map-height) !important;
  min-height: var(--contadores-map-height);
  margin-top: 0;
  border: none;
  border-radius: 0;
}
#contadores-mapa.leaflet-container {
  width: 100%;
  height: var(--contadores-map-height) !important;
  overflow: hidden;
  background: #dfe7f2;
}
#contadores-mapa .leaflet-pane,
#contadores-mapa .leaflet-tile,
#contadores-mapa .leaflet-marker-icon,
#contadores-mapa .leaflet-marker-shadow,
#contadores-mapa .leaflet-tile-container,
#contadores-mapa .leaflet-pane > svg,
#contadores-mapa .leaflet-pane > canvas,
#contadores-mapa .leaflet-zoom-box,
#contadores-mapa .leaflet-image-layer,
#contadores-mapa .leaflet-layer {
  position: absolute;
  left: 0;
  top: 0;
}
#contadores-mapa .leaflet-container img,
#contadores-mapa .leaflet-marker-pane img,
#contadores-mapa .leaflet-shadow-pane img,
#contadores-mapa .leaflet-tile-pane img,
#contadores-mapa img.leaflet-image-layer,
#contadores-mapa img.leaflet-tile,
#contadores-mapa .leaflet-tile {
  display: block !important;
  max-width: none !important;
  max-height: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
}
#contadores-mapa .leaflet-tile {
  visibility: hidden;
}
#contadores-mapa .leaflet-tile-loaded {
  visibility: inherit;
}
.contadores-map-card__state {
  display: none;
  padding: 24px 18px;
}
#contadores-map-panel[data-state="ready"] .contadores-map-card__map {
  display: block;
}
#contadores-map-panel[data-state="loading"] #contadores-map-loading,
#contadores-map-panel[data-state="empty"] #contadores-map-empty,
#contadores-map-panel[data-state="error"] #contadores-map-error,
#contadores-map-panel[data-state="idle"] #contadores-map-loading {
  display: block;
}
@keyframes contadoresViewEnter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.counter-list {
  padding: 0 0 24px;
}
.contadores-group {
  margin-bottom: 18px;
}
.contadores-group:last-child {
  margin-bottom: 0;
}
.contadores-group > .contadores-concession {
  margin-bottom: 12px;
}
.meter-shot {
  margin-bottom: 14px;
}
.meter-shot__button {
  width: 100%;
  border: 1px solid rgba(194, 208, 232, 0.34);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 255, 0.98) 100%);
  border-radius: 24px;
  box-shadow: 0 12px 28px rgba(10, 29, 50, 0.05);
  padding: 14px 14px 13px;
  display: grid;
  grid-template-columns: 176px 1fr auto;
  gap: 14px;
  align-items: center;
  text-align: left;
  cursor: pointer;
}
#contadores-app .meter-shot__button {
  position: relative;
  align-items: stretch;
}
#contadores-app .meter-shot__dial {
  align-self: center;
}
#contadores-app .meter-shot__chevron {
  align-self: center;
}
.meter-shot__button:active {
  transform: scale(0.995);
}
.meter-shot__dial {
  display: flex;
  align-items: center;
  justify-content: center;
}
.meter-shot__content {
  min-width: 0;
  display: grid;
  gap: 8px;
}
#contadores-app .meter-shot__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}
.meter-shot__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: -7px;
}
.meter-shot__heading {
  min-width: 0;
}
.meter-shot__name {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.025em;
  color: #1f2940;
  line-height: 1.12;
}
.meter-shot__subtitle {
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #98a4bb;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#contadores-app .meter-shot__subtitle {
  color: #566884;
}
.meter-shot__subtitle-icon {
  color: #9aa8c4;
  display: inline-flex;
  align-items: center;
}
#contadores-app .meter-shot__subtitle-icon {
  color: #5d708d;
}
.meter-shot__status {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.meter-shot__status--active {
  background: rgba(53, 122, 255, 0.1);
  color: #357aff;
}
.meter-shot__status--inactive {
  background: rgba(148, 163, 184, 0.12);
  color: #8393ad;
}
.meter-shot__status--neutral {
  background: rgba(34, 197, 94, 0.1);
  color: #21a16b;
}
.meter-shot__stats {
  display: grid;
  gap: 10px;
}
#contadores-app .meter-shot__stats {
  gap: 16px;
  margin-top: 6px;
}
.meter-shot__stat {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
}
.meter-shot__stat-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(235, 242, 255, 0.96) 0%, rgba(245, 248, 255, 1) 100%);
  color: #3076ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.meter-shot__stat-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
#contadores-app .meter-shot__stat-body {
  gap: 6px;
}
.meter-shot__stat-label {
  font-size: 10px;
  font-weight: 400;
  color: #aab5c8;
  line-height: 1;
}
#contadores-app .meter-shot__stat-label {
  font-size: 11px;
  color: #5d708b;
  line-height: 1.15;
  white-space: nowrap;
}
.meter-shot__stat-value {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 13px;
  font-weight: 650;
  color: #1d2940;
  line-height: 1.1;
  white-space: nowrap;
}
#contadores-app .meter-shot__stat-value {
  color: #0b1930;
  font-weight: 700;
}
.meter-shot__stat-unit {
  font-size: 11px;
  font-weight: 600;
  color: #55637e;
}
#contadores-app .meter-shot__stat-unit {
  color: #33455f;
}
.meter-shot__stat-date {
  font-size: 12px;
  font-weight: 500;
  color: #7f8eaa;
  line-height: 1.15;
  white-space: nowrap;
}
#contadores-app .meter-shot__stat-date {
  color: #4f6481;
  font-weight: 550;
  line-height: 1.25;
}
.meter-shot__meta {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
  font-size: 9px;
  font-weight: 600;
  color: #a6b2c6;
  line-height: 1.05;
  letter-spacing: -0.01em;
  white-space: nowrap;
  gap: 0;
  overflow: visible;
}
#contadores-app .meter-shot__meta {
  color: #60738e;
}
#contadores-app .meter-shot__meta {
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: auto;
  margin: 0;
}
.meter-shot__meta-item {
  display: inline-flex;
  align-items: baseline;
  flex: 0 0 auto;
  gap: 4px;
  white-space: nowrap;
}
.meter-shot__meta-item + .meter-shot__meta-item {
  margin-left: 16px;
}
.meter-shot__meta-item.dna-show {
  display: inline-flex !important;
}
.meter-shot__meta-item + .meter-shot__meta-item::before {
  content: none;
}
.meter-shot__meta-k {
  font-weight: 600;
}
.meter-shot__meta-v {
  font-weight: 700;
}
.meter-shot__chevron {
  color: #a6b2c6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.watermeter--showcase {
  --wm-size: 178px;
}
.watermeter--showcase .watermeter__body {
  background:
    radial-gradient(
      circle at 28% 24%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.06) 18%,
      rgba(255, 255, 255, 0) 38%
    ),
    linear-gradient(180deg, #58a2ff 0%, #1f7dff 36%, #0f5fd8 72%, #0949ad 100%);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.28),
    inset 0 -14px 18px rgba(5, 48, 122, 0.22),
    0 18px 34px rgba(14, 54, 118, 0.2);
}
.watermeter--showcase .watermeter__body::before {
  inset: 24px;
  background: radial-gradient(
    circle at 35% 22%,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0) 36%
  );
}
.watermeter--showcase .watermeter__body::after {
  content: none;
}
.watermeter--showcase .watermeter__lug {
  display: none;
}
.watermeter--showcase .watermeter__glass {
  width: 164px;
  height: 164px;
  background: radial-gradient(
    circle at 42% 26%,
    #ffffff 0%,
    #fafdff 46%,
    #edf3fb 78%,
    #dce6f1 100%
  );
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.8),
    inset 0 -14px 22px rgba(160, 177, 201, 0.18),
    0 10px 24px rgba(15, 38, 70, 0.12);
}
.watermeter--showcase .watermeter__face {
  inset: 12px;
  grid-template-rows: auto auto auto 1fr;
  gap: 5px;
  justify-items: center;
  padding-top: 14px;
}
.watermeter--showcase .watermeter__brand {
  font-size: 9px;
  font-weight: 800;
  color: #2e7bff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.watermeter--showcase .watermeter__model {
  font-size: 8px;
  font-weight: 800;
  color: #2e7bff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: -2px;
}
.watermeter__model {
  font-size: 7px;
  font-weight: 800;
  color: #8c9ab1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.watermeter--showcase .watermeter__window-row {
  align-items: flex-end;
  gap: 5px;
  margin-top: 10px;
}
.watermeter--showcase .watermeter__window {
  padding: 3px 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #e3e8ef 0%, #f8fbff 100%);
  border: 1px solid rgba(17, 24, 39, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 1px 2px rgba(34, 51, 84, 0.08);
}
.watermeter--showcase .watermeter-odometer {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.watermeter--showcase .watermeter-odometer .odometer-digit {
  width: 16px;
  height: 27px;
  font-family: "Roboto Mono", "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  justify-content: center;
  align-items: center;
  color: #121826;
  border-radius: 1px;
  background: linear-gradient(180deg, #fcfdff 0%, #f0f4f8 100%);
  box-shadow: 0 0 0 1px rgba(31, 41, 55, 0.18);
}
.watermeter--showcase .watermeter-odometer .odometer-digit::before,
.watermeter--showcase .watermeter-odometer .odometer-digit::after {
  content: none;
}
.watermeter--showcase .watermeter-odometer .odometer-digit--decimal {
  width: 16px;
  height: 27px;
  font-size: 16px;
  color: #b42318;
  border-radius: 1px;
  background: linear-gradient(180deg, #fff7f6 0%, #fde6e2 100%);
  box-shadow: 0 0 0 1px rgba(180, 35, 24, 0.18);
}
.watermeter--showcase .watermeter__unit {
  font-size: 9px;
  font-weight: 900;
  color: #5c6a7f;
  line-height: 1;
  align-self: flex-end;
  margin-bottom: 1px;
}
.watermeter__specs {
  width: calc(100% - 18px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  margin-left: auto;
  margin-right: auto;
}
.watermeter__specs-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 7px;
  line-height: 1.1;
  font-weight: 800;
  color: #4f5f78;
}
.watermeter__spec-k {
  color: #5a6b86;
  letter-spacing: 0.02em;
}
.watermeter__spec-v {
  color: #1f2a44;
  font-weight: 900;
}
.watermeter__specs-col--right {
  align-items: flex-end;
  text-align: right;
}
#contadores-app .watermeter__specs-col {
  font-size: 10px;
  line-height: 1.1;
}
#contadores-app .watermeter__spec-k,
#contadores-app .watermeter__spec-v,
#contadores-app .watermeter__specs-col--right span {
  font-size: 11px;
}
#herramientas-app .watermeter__specs-col {
  font-size: 10px;
  line-height: 1.1;
}
#herramientas-app .watermeter__spec-k,
#herramientas-app .watermeter__spec-v,
#herramientas-app .watermeter__specs-col--right span {
  font-size: 11px;
}
.watermeter--showcase .watermeter__gauge {
  width: 32px;
  height: 32px;
  margin-top: 22px;
  margin-left: 6px;
  border-width: 1px;
  border-color: rgba(75, 127, 207, 0.22);
  background: radial-gradient(circle at 45% 28%, #ffffff 0%, #eef4fa 72%, #e1e8f2 100%);
}
.watermeter--showcase .watermeter__gauge::before {
  inset: 6px;
  border-width: 1px;
}
.watermeter--showcase .watermeter__gauge::after {
  width: 2px;
  height: 10px;
  background: #e11d48;
}
.meter-card {
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  border-radius: 22px;
  box-shadow: 0 8px 20px rgba(10, 29, 50, 0.06);
  padding: 15px 16px 14px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.meter-actions--top {
  align-self: flex-end;
  margin-bottom: -2px;
}
.meter-card-header.meter-card-header--premium {
  align-items: center;
}
.meter-title-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.meter-title-stack--in-meta {
  margin-bottom: 2px;
}
.meter-ids {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.meter-ids__row {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.08);
  color: #0064d2;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.meter-ids__row .val {
  margin-left: 6px;
  font-weight: 900;
  color: #0f172a;
}
.meter-subtitle {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.meter-subtitle__pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.08);
  color: #0064d2;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.meter-subtitle__plain {
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}
.meter-subtitle__plain .val {
  color: #0f172a;
  font-weight: 900;
}
.meter-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.meter-status-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}
.meter-row {
  border: none;
  background: none;
  padding: 0;
  width: 100%;
  display: grid;
  --wm-size: 160px;
  grid-template-columns: var(--wm-size) 1fr auto;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  text-align: left;
}
.meter-row:active {
  transform: scale(0.995);
}
.meter-row__dial {
  display: flex;
  justify-content: center;
  align-items: center;
}
.watermeter {
  width: var(--wm-size, 148px);
  height: var(--wm-size, 148px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.watermeter__body {
  width: var(--wm-size, 148px);
  height: var(--wm-size, 148px);
  border-radius: 50%;
  position: relative;
  background: radial-gradient(
    circle at 34% 30%,
    #7cc6ff 0%,
    #1c86ff 35%,
    #0b5ec7 64%,
    #094aa7 100%
  );
  box-shadow: 0 18px 32px rgba(10, 29, 50, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.watermeter__body::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 40% 30%,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 0) 40%
  );
  opacity: 0.55;
  pointer-events: none;
}
.watermeter__lug {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 44px;
  margin-top: -22px;
  border-radius: 16px;
  background: linear-gradient(180deg, #0f78e5 0%, #074fb2 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -8px 12px rgba(10, 29, 50, 0.22);
}
.watermeter__lug--left {
  left: -7px;
}
.watermeter__lug--right {
  right: -7px;
}
.watermeter__glass {
  width: calc(var(--wm-size, 148px) - 32px);
  height: calc(var(--wm-size, 148px) - 32px);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #ffffff 0%, #f6fbff 56%, #dbe7f2 100%);
  box-shadow:
    inset 0 0 0 1px rgba(15, 23, 42, 0.12),
    inset 0 -14px 20px rgba(148, 163, 184, 0.18),
    0 10px 20px rgba(10, 29, 50, 0.12);
  position: relative;
  overflow: hidden;
}
.watermeter__glass::before {
  content: "";
  position: absolute;
  top: -22px;
  left: -18px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 66%);
  opacity: 0.8;
  pointer-events: none;
}
.watermeter__face {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 8px;
  align-content: start;
}
.watermeter__brand {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #0b5ec7;
  line-height: 1;
}
.watermeter__window-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  justify-self: start;
}
.watermeter__window {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 7px;
  border-radius: 10px;
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  border: 1px solid rgba(15, 23, 42, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  justify-self: start;
}
.watermeter-odometer {
  gap: 1px;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.watermeter-odometer .odometer-digit {
  width: 14px;
  height: 24px;
  font-size: 16px;
  color: #0b0f14;
  font-weight: 900;
  border-radius: 4px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 52%, #eef2f7 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -2px 3px rgba(148, 163, 184, 0.22),
    0 0 0 1px rgba(15, 23, 42, 0.16);
}
.watermeter-odometer .odometer-digit::after {
  height: 1px;
  opacity: 0.55;
}
.watermeter-odometer .odometer-digit--decimal {
  width: 12px;
  height: 20px;
  font-size: 12px;
  background: linear-gradient(180deg, #f7b2ad 0%, #ffe6e2 45%, #f1a39b 100%);
  color: #8c1d18;
  align-self: flex-end;
}
.watermeter__unit {
  align-self: center;
  margin-top: 0;
  font-size: 11px;
  font-weight: 900;
  color: rgba(71, 85, 105, 0.9);
  line-height: 1;
  white-space: nowrap;
}
.watermeter__gauge {
  justify-self: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(59, 130, 246, 0.2);
  background: radial-gradient(circle at 45% 30%, #ffffff 0%, #f2f6fb 70%, #e2e8f0 100%);
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -8px 10px rgba(148, 163, 184, 0.14);
}
.watermeter__gauge::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px dashed rgba(15, 23, 42, 0.12);
}
.watermeter__gauge::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 14px;
  background: #e11d48;
  border-radius: 999px;
  transform-origin: bottom center;
  transform: translate(-50%, -100%) rotate(-22deg);
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.22);
}
.meter-row__meta {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.meter-metric {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: center;
}
.meter-metric__icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(10, 132, 255, 0.1);
  color: #0064d2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.meter-metric__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.meter-metric__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(100, 116, 139, 0.95);
  line-height: 1.1;
}
.meter-metric__value {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.15;
}
.meter-metric__unit {
  font-size: 13px;
  font-weight: 900;
  color: rgba(71, 85, 105, 0.9);
  margin-left: 4px;
}
.meter-metric__meta {
  font-size: 13px;
  font-weight: 800;
  color: #0a84ff;
  line-height: 1.2;
}
.meter-row__chevron {
  color: rgba(100, 116, 139, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.meter-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.meter-name {
  margin: 0;
  font-size: 1.26rem;
  font-weight: var(--font-weight-bold, 800);
  color: #111827 !important;
  line-height: 1.15;
  word-break: break-word;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}
.meter-meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.meter-tag {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  background: linear-gradient(180deg, #f7fafc 0%, #eef2f7 100%);
  border: 1px solid rgba(148, 163, 184, 0.15);
  padding: 5px 9px;
  border-radius: 8px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
.meter-tag .val {
  color: #475569;
  font-weight: 800;
}
.meter-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.meter-icon-btn {
  width: var(--touch-target, 44px);
  height: var(--touch-target, 44px);
  border: 1px solid rgba(0, 90, 156, 0.08);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color, #005a9c);
  background: linear-gradient(180deg, #ffffff 0%, #edf5fd 100%);
  box-shadow: 0 4px 10px rgba(10, 29, 50, 0.06);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}
.meter-icon-btn:active {
  transform: scale(0.95);
  background: linear-gradient(180deg, #f2f8fe 0%, #e2eef9 100%);
  box-shadow: 0 2px 6px rgba(10, 29, 50, 0.06);
}
.meter-card-body {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
  position: relative;
}
.meter-dial {
  position: relative;
  width: 192px;
  height: 192px;
  margin: 0 auto;
  background: transparent;
  isolation: isolate;
}
.meter-dial::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, #ffffff 0%, #f7fbff 58%, #d7e3ef 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.96),
    inset 0 -10px 18px rgba(148, 163, 184, 0.16),
    0 10px 24px rgba(10, 29, 50, 0.08);
  z-index: 0;
}
.meter-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}
.meter-arc {
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(90deg, #40b4ff 0%, var(--primary-color, #005a9c) 100%);
  z-index: 2;
  opacity: 0.92;
  box-shadow:
    inset 0 1px 2px rgba(10, 29, 50, 0.08),
    0 0 0 5px rgba(255, 255, 255, 0.58),
    0 8px 18px rgba(10, 29, 50, 0.04);
  overflow: hidden;
}
.meter-arc::before {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, #ffffff 0%, #f8fbfe 56%, #d8e2ec 100%);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    inset 0 -10px 16px rgba(148, 163, 184, 0.12);
  opacity: 1;
  pointer-events: none;
}
.meter-arc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0) 0deg,
    rgba(255, 255, 255, 0.06) 36deg,
    rgba(255, 255, 255, 0.28) 68deg,
    rgba(255, 255, 255, 0.08) 104deg,
    rgba(255, 255, 255, 0) 148deg,
    rgba(255, 255, 255, 0) 360deg
  );
  animation: meterArcSpin 3.8s linear infinite;
  opacity: 0.78;
  pointer-events: none;
}
.meter-arc .meter-ring-glow {
  display: none;
}
.meter-dial::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 136px;
  height: 136px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, #ffffff 0%, #f8fbfe 56%, #d8e2ec 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -10px 18px rgba(148, 163, 184, 0.16);
  pointer-events: none;
  z-index: 1;
}
.odometer-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 100%;
  display: flex;
  justify-content: center;
}
.odometer-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: linear-gradient(180deg, #d9e0e8 0%, #b8c2ce 100%);
  padding: 6px 9px 6px 7px;
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -3px 5px rgba(71, 85, 105, 0.2),
    0 10px 16px rgba(10, 29, 50, 0.14);
  border: 1px solid rgba(31, 41, 55, 0.34);
  overflow: hidden;
}
.odometer-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(12, 19, 30, 0.24),
    inset 0 0 0 2px rgba(255, 255, 255, 0.16);
  pointer-events: none;
}
.odometer-wrapper::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 8px;
  right: 8px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
.odometer {
  display: flex;
  gap: 1px;
  padding: 2px;
  border-radius: 3px;
  background: #101825;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(15, 23, 42, 0.12);
}
.odometer-digit {
  width: 19px;
  height: 32px;
  background: linear-gradient(
    180deg,
    #ebeef2 0%,
    #ffffff 20%,
    #ffffff 48%,
    #e4e8ee 52%,
    #ffffff 82%,
    #dce3ea 100%
  );
  color: #101826;
  font-family: "SFMono-Regular", "Roboto Mono", "Menlo", "Consolas", monospace;
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 3px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.86),
    inset 0 -2px 3px rgba(148, 163, 184, 0.18),
    0 0 0 1px rgba(15, 23, 42, 0.12);
  position: relative;
  transition: transform 0.52s cubic-bezier(0.22, 0.8, 0.22, 1);
  font-variant-numeric: tabular-nums;
}
.odometer-digit::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.58),
    inset -1px 0 0 rgba(15, 23, 42, 0.08);
}
.odometer-digit::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.12) 0%, rgba(255, 255, 255, 0.38) 100%);
  transform: translateY(-50%);
}
.odometer-digit--decimal {
  background: linear-gradient(
    180deg,
    #f4b4b0 0%,
    #ffe1dd 20%,
    #ffe8e4 48%,
    #ffd5cf 52%,
    #ffe7e3 82%,
    #efa59d 100%
  );
  color: #8c1d18;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.78),
    inset 0 -2px 3px rgba(185, 28, 28, 0.16),
    0 0 0 1px rgba(127, 29, 29, 0.12);
}
.odometer-unit {
  color: #5e6a78;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0;
  margin-left: 2px;
  margin-right: 2px;
  opacity: 1;
  align-self: center;
  line-height: 1;
  transform: translateY(0);
}
.meter-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid rgba(226, 232, 240, 0.88);
  gap: 8px;
}
.meter-last-reading-compact {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 110px;
  white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}
.meter-last-reading-compact__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #4b5563);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}
.meter-last-reading-compact__value {
  font-size: 14px;
  font-weight: 800;
  color: var(--primary-color, #005a9c);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

@media (max-width: 390px) {
  .contadores-hero__title {
    font-size: 24px;
  }
  .contadores-hero__count {
    font-size: 13px;
  }
  .contadores-concession {
    padding: 16px 16px 14px;
  }
  .contadores-hero__title {
    font-size: 27px;
  }
  .contadores-hero__view-toggle {
    margin-top: 10px;
  }
  .contadores-hero__view-toggle {
    min-width: 146px;
    min-height: 40px;
    padding: 0 12px;
  }
  .contadores-concession__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }
  .meter-shot__button {
    grid-template-columns: 152px 1fr auto;
    padding: 12px 11px;
    gap: 10px;
  }
  .meter-shot__name {
    font-size: 16px;
  }
  .watermeter--showcase {
    --wm-size: 152px;
  }
  .watermeter--showcase .watermeter__glass {
    width: 136px;
    height: 136px;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.78),
      inset 0 -8px 14px rgba(160, 177, 201, 0.14),
      0 6px 14px rgba(15, 38, 70, 0.08);
  }
  .watermeter--showcase .watermeter__face {
    inset: 8px;
    gap: 4px;
    padding-top: 12px;
  }
  .watermeter--showcase .watermeter__model {
    font-size: 7px;
    letter-spacing: 0.02em;
    margin-bottom: -1px;
  }
  .watermeter--showcase .watermeter__window-row {
    gap: 4px;
    margin-top: 7px;
    justify-self: center;
  }
  .watermeter--showcase .watermeter__window {
    padding: 1px;
  }
  .watermeter--showcase .watermeter-odometer .odometer-digit {
    width: 12px;
    height: 21px;
    font-size: 13px;
  }
  .watermeter--showcase .watermeter-odometer .odometer-digit--decimal {
    width: 12px;
    height: 21px;
    font-size: 13px;
  }
  .watermeter--showcase .watermeter__unit {
    font-size: 8px;
    margin-bottom: 0;
  }
  .watermeter__specs {
    width: calc(100% - 12px);
    gap: 2px;
    margin-top: 5px;
  }
  .watermeter__specs-col {
    gap: 1px;
    line-height: 1;
  }
  .watermeter__spec-k,
  .watermeter__spec-v,
  .watermeter__specs-col--right span {
    font-size: 8px;
  }
  .watermeter--showcase .watermeter__gauge {
    width: 24px;
    height: 24px;
    margin-top: 4px;
  }
  .meter-row {
    --wm-size: 142px;
    grid-template-columns: var(--wm-size) 1fr auto;
    gap: 12px;
  }
  .meter-card {
    padding: 14px;
  }
  .meter-icon-btn {
    width: 40px;
    height: 40px;
  }
  .meter-name {
    font-size: 1.1rem;
  }
  .meter-dial {
    width: 176px;
    height: 176px;
  }
  .meter-dial::before {
    inset: 15px;
  }
  .meter-arc {
    inset: 10px;
  }
  .meter-dial::after {
    width: 126px;
    height: 126px;
  }
  .odometer-digit {
    width: 18px;
    height: 30px;
    font-size: 18px;
  }
  .odometer-unit {
    font-size: 11px;
  }
}
@media (max-width: 375px) {
  .contadores-concession__hero {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
  }
  .contadores-concession__hero-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }
  .contadores-concession__hero-icon svg {
    width: 12px;
    height: 12px;
  }
  .meter-shot__button {
    grid-template-columns: 144px minmax(0, 1fr) auto;
    padding: 11px 10px;
    gap: 9px;
  }
  .meter-shot__name {
    font-size: 15px;
  }
  .meter-shot__subtitle {
    font-size: 10px;
  }
  .meter-shot__stats {
    gap: 9px;
  }
  .meter-shot__stat {
    grid-template-columns: 32px 1fr;
    gap: 8px;
  }
  .meter-shot__stat-icon {
    width: 32px;
    height: 32px;
  }
  .meter-shot__stat-label {
    font-size: 9px;
  }
  .meter-shot__stat-value {
    font-size: 12px;
    gap: 3px;
  }
  .meter-shot__stat-unit {
    font-size: 10px;
  }
  .meter-shot__stat-date {
    font-size: 11px;
  }
  .watermeter--showcase {
    --wm-size: 144px;
  }
  .watermeter--showcase .watermeter__glass {
    width: 132px;
    height: 132px;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.78),
      inset 0 -8px 14px rgba(160, 177, 201, 0.14),
      0 6px 14px rgba(15, 38, 70, 0.08);
  }
  .watermeter--showcase .watermeter__face {
    inset: 7px;
    gap: 3px;
    padding-top: 11px;
  }
  .watermeter--showcase .watermeter__model {
    font-size: 6px;
    letter-spacing: 0.02em;
    margin-bottom: -1px;
  }
  .watermeter--showcase .watermeter__window-row {
    gap: 3px;
    margin-top: 6px;
    justify-self: center;
  }
  .watermeter--showcase .watermeter__window {
    padding: 1px;
  }
  .watermeter--showcase .watermeter-odometer .odometer-digit {
    width: 12px;
    height: 21px;
    font-size: 13px;
  }
  .watermeter--showcase .watermeter-odometer .odometer-digit--decimal {
    width: 12px;
    height: 21px;
    font-size: 13px;
  }
  .watermeter--showcase .watermeter__unit {
    font-size: 7px;
    margin-bottom: 0;
  }
  .watermeter__specs {
    width: calc(100% - 10px);
    gap: 3px;
    margin-top: 5px;
  }
  .watermeter__specs-col {
    gap: 2px;
    font-size: 6px;
    line-height: 1;
  }
  .watermeter__spec-k,
  .watermeter__spec-v,
  .watermeter__specs-col--right span {
    font-size: 8px;
  }
  .watermeter--showcase .watermeter__gauge {
    width: 24px;
    height: 24px;
    margin-top: 4px;
  }
  .watermeter--showcase .watermeter__gauge::before {
    inset: 5px;
  }
  .watermeter--showcase .watermeter__gauge::after {
    height: 7px;
  }
}
@media (max-width: 340px) {
  .meter-shot__button {
    grid-template-columns: 138px minmax(0, 1fr) auto;
    gap: 8px;
  }
  .watermeter--showcase {
    --wm-size: 138px;
  }
  .watermeter--showcase .watermeter__glass {
    width: 128px;
    height: 128px;
  }
  #contadores-app .watermeter__specs-col {
    font-size: 9px;
  }
  #contadores-app .watermeter__spec-k,
  #contadores-app .watermeter__spec-v,
  #contadores-app .watermeter__specs-col--right span {
    font-size: 10px;
  }
  #herramientas-app .watermeter__specs-col {
    font-size: 9px;
  }
  #herramientas-app .watermeter__spec-k,
  #herramientas-app .watermeter__spec-v,
  #herramientas-app .watermeter__specs-col--right span {
    font-size: 10px;
  }
  .meter-shot__meta {
    font-size: 8px;
  }
  #contadores-app .meter-shot__meta {
    right: 10px;
    bottom: 8px;
  }
  #contadores-app .meter-shot__stats {
    margin-top: 4px;
  }
  .meter-shot__meta-item + .meter-shot__meta-item {
    margin-left: 12px;
  }
  .meter-shot__name {
    font-size: 15px;
  }
  .meter-shot__subtitle {
    font-size: 11px;
  }
  .meter-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .meter-last-reading-compact {
    align-items: flex-start;
  }
  .meter-card-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* ── 3. contadores-mapa-webview ────────────────────────── */
#contadores-mapa-app[data-state="loading"] #contadores-mapa-ready,
#contadores-mapa-app[data-state="error"] #contadores-mapa-ready,
#contadores-mapa-app[data-state="empty"] #contadores-mapa-ready {
  display: none !important;
}
#contadores-mapa-app[data-state="ready"] #contadores-mapa-loading,
#contadores-mapa-app[data-state="ready"] #contadores-mapa-error,
#contadores-mapa-app[data-state="ready"] #contadores-mapa-empty {
  display: none !important;
}
#contadores-mapa-app[data-state="loading"] #contadores-mapa-error,
#contadores-mapa-app[data-state="loading"] #contadores-mapa-empty,
#contadores-mapa-app[data-state="error"] #contadores-mapa-loading,
#contadores-mapa-app[data-state="error"] #contadores-mapa-empty,
#contadores-mapa-app[data-state="empty"] #contadores-mapa-loading,
#contadores-mapa-app[data-state="empty"] #contadores-mapa-error {
  display: none !important;
}
.map-location-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.map-location-card {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(22, 32, 42, 0.08);
  background: #f9fbff;
}
.map-location-card__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.map-location-card__name {
  font-size: 15px;
  font-weight: 800;
  color: #16202a;
}
.map-location-card__meta {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.map-location-card__meta span {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.08);
  color: #0064d2;
  font-size: 12px;
  font-weight: 700;
}
.map-location-card__cta {
  color: #0a84ff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.map-summary-count {
  color: #0a84ff;
  font-weight: 800;
}
#contadores-mapa-counters .mobile-webview__chip {
  opacity: 0;
  transform: translateY(10px) scale(0.96);
}
.map-marker {
  position: relative;
  width: 40px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px) scale(0.82);
  transform-origin: 50% 100%;
}
.map-marker.map-marker--enter {
  animation: mapMarkerEnter 980ms cubic-bezier(0.2, 0.82, 0.2, 1) both;
  animation-delay: var(--marker-delay, 0ms);
}
.map-marker.map-marker--enter .map-marker__pin {
  animation: mapMarkerFloat 4200ms ease-in-out calc(var(--marker-delay, 0ms) + 980ms) infinite;
}
.map-marker__pulse {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 30px;
  height: 30px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(10, 132, 255, 0.18);
  box-shadow: 0 0 0 1px rgba(10, 132, 255, 0.08);
  opacity: 0;
}
.map-marker.map-marker--enter .map-marker__pulse {
  animation:
    mapMarkerPulse 1400ms ease-out calc(var(--marker-delay, 0ms) + 220ms) 1,
    mapMarkerPulse 3200ms ease-out calc(var(--marker-delay, 0ms) + 1900ms) infinite;
}
.map-marker__pin {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: 18px 18px 18px 4px;
  transform: rotate(-45deg);
  background: linear-gradient(180deg, #1ea0ff 0%, #0a84ff 100%);
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 22px rgba(10, 132, 255, 0.32);
}
.map-marker__meter {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(10, 132, 255, 0.08);
}
.map-marker__meter::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 2px;
  border-radius: 999px;
  background: #0a84ff;
  transform-origin: 0% 50%;
  transform: translate(-12%, -50%) rotate(-32deg);
}
.map-marker__meter::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #0a84ff;
  transform: translate(-50%, -50%);
}
.map-marker__base {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(10, 132, 255, 0.14);
  transform: translateX(-50%);
}
.contadores-mapa-popup .leaflet-popup-content-wrapper {
  border-radius: 18px;
  padding: 0;
  background: #ffffff;
  box-shadow: 0 18px 34px rgba(10, 29, 50, 0.16);
}
.contadores-mapa-popup .leaflet-popup-content {
  margin: 0;
  min-width: 214px;
}
.contadores-mapa-popup .leaflet-popup-tip {
  background: #ffffff;
  box-shadow: none;
}
.map-popup {
  padding: 14px;
}
.map-popup__eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a8694;
}
.map-popup__title {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  color: #162331;
}
.map-popup__meta {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.map-popup__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 12px;
  background: #f7faff;
  border: 1px solid rgba(10, 132, 255, 0.07);
}
.map-popup__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7b8794;
}
.map-popup__value {
  font-size: 13px;
  font-weight: 800;
  color: #162331;
  text-align: right;
}
.map-popup__cta {
  margin-top: 12px;
}
.map-popup__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, #1e9fff 0%, #0a84ff 100%);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 20px rgba(10, 132, 255, 0.22);
}
.map-popup__button:active {
  transform: scale(0.985);
}
.map-popup__hint {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #0a84ff;
  text-align: center;
}
#contadores-mapa .leaflet-control-zoom {
  display: block !important;
}
#contadores-mapa .leaflet-bar {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 28px rgba(10, 29, 50, 0.18);
}
#contadores-mapa .leaflet-control-zoom a {
  width: 44px;
  height: 44px;
  line-height: 44px;
  font-size: 22px;
  font-weight: 800;
  color: #16202a;
  background: #ffffff;
}
#contadores-mapa .leaflet-bottom .leaflet-control {
  margin-bottom: 16px;
}
#contadores-mapa .leaflet-right .leaflet-control {
  margin-right: 16px;
}
@keyframes mapMarkerEnter {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.82);
  }
  68% {
    opacity: 1;
    transform: translateY(-2px) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes mapMarkerPulse {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.72);
  }
  35% {
    opacity: 0.28;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(2.35);
  }
}
@keyframes mapMarkerFloat {
  0%,
  100% {
    transform: rotate(-45deg) translateY(0);
  }
  50% {
    transform: rotate(-45deg) translateY(-1px);
  }
}
/* ── 4. herramientas-webview ───────────────────────────── */
#herramientas-app {
  min-height: 100vh;
}
.placeholder-card {
  padding: 28px 20px;
  text-align: center;
}
.placeholder-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(10, 132, 255, 0.1);
  color: #007aff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.placeholder-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #16202a;
}
.placeholder-message {
  font-size: 14px;
  line-height: 1.5;
  color: #667281;
}
/* ── 5. herramientas-contador ──────────────────────────── */
#herramientas-app[data-state="loading"] #herramientas-ready,
#herramientas-app[data-state="error"] #herramientas-ready {
  display: none !important;
}
#herramientas-app[data-state="ready"] #herramientas-loading,
#herramientas-app[data-state="ready"] #herramientas-error {
  display: none !important;
}
#herramientas-app[data-state="loading"] #herramientas-error,
#herramientas-app[data-state="error"] #herramientas-loading {
  display: none !important;
}
.detail-reading {
  padding: 28px 14px 10px;
  gap: 8px;
  border-radius: 16px;
  background: linear-gradient(180deg, #fcfdff 0%, #f5f9fe 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 90, 156, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.7);
}
.detail-reading__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #4b5563);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
  margin-bottom: 0;
}
.detail-reading__value {
  font-size: 31px;
  font-weight: 800;
  color: var(--text-main, #111827);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  letter-spacing: -0.03em;
}
.detail-reading__value .detail-reading__unit {
  font-size: 15px;
  color: #5e6d80;
  font-weight: 800;
}
.detail-reading__hint {
  font-size: 12px;
  color: var(--text-muted, #4b5563);
  margin-top: 2px;
}
.detail-reading__hint span {
  font-weight: 700;
  margin-left: 2px;
}
.meter-card--detail {
  padding: 14px;
  gap: 12px;
}
.meter-card--detail .meter-card-header {
  align-items: flex-start;
  gap: 10px;
}
.meter-card--detail .meter-name {
  font-size: 18px;
  line-height: 1.15;
}
.meter-card--detail .meter-card-body {
  padding-top: 0;
}
.meter-card-footer--detail {
  padding: 12px 14px 10px;
  border-top: 1px solid var(--border-color, #e5e7eb);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

/* Bateria */
.meter-battery-status {
  display: flex;
  align-items: center;
}
.meter-battery-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: #ecfdf5;
  color: var(--status-success, #059669);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 1px 4px rgba(5, 150, 105, 0.08);
}
.meter-battery-icon {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.meter-battery-icon__body {
  width: 18px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 3px;
  padding: 1px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.3);
}
.meter-battery-icon__fill {
  display: block;
  width: 52%;
  height: 100%;
  border-radius: 1px;
  background: currentColor;
  transition: width 0.3s ease;
}
.meter-battery-icon__cap {
  width: 3px;
  height: 6px;
  border-radius: 0 2px 2px 0;
  background: currentColor;
  opacity: 0.9;
}
.meter-battery-value {
  line-height: 1;
}
.meter-battery-pill--warning {
  background: #fffbeb;
  color: var(--status-warning, #d97706);
  box-shadow: 0 2px 4px rgba(217, 119, 6, 0.1);
}
.meter-battery-pill--low {
  background: #fef2f2;
  color: var(--status-error, #dc2626);
  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.1);
  animation: pulse-low-battery 2s infinite;
}
.meter-battery-pill .icon {
  margin: 0;
  font-size: 16px;
}

@keyframes pulse-low-battery {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(220, 38, 38, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
  }
}

/* Progreso Consumo */
.meter-progress-container {
  width: 100%;
  padding: 2px 2px 0;
}
.meter-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 9px;
  gap: 12px;
}
.meter-progress-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--primary-color, #005a9c);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 4px;
}
.meter-progress-label::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-color, #005a9c);
}
.meter-progress-text {
  font-size: 13px;
  color: #637286;
  white-space: nowrap;
}
.meter-progress-text strong {
  color: var(--text-main, #111827);
  font-size: 15px;
  font-weight: 800;
}
.meter-progress-track {
  width: 100%;
  height: 12px;
  background: linear-gradient(180deg, #e5e7eb 0%, #dde3ea 100%);
  border-radius: 999px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 3px rgba(10, 29, 50, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.65);
  position: relative;
}
.meter-progress-track::after {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  right: 10%;
  width: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}
.meter-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #40b4ff 0%, var(--primary-color, #005a9c) 100%);
  border-radius: 999px;
  transition:
    width 0.8s cubic-bezier(0.2, 0.85, 0.2, 1),
    background 0.3s ease;
  position: relative;
  overflow: hidden;
}
.meter-progress-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer 2s infinite;
}
.meter-progress-fill--warning {
  background: linear-gradient(90deg, #fbbf24 0%, var(--status-warning, #d97706) 100%);
}
.meter-progress-fill--danger {
  background: linear-gradient(90deg, #f87171 0%, var(--status-error, #dc2626) 100%);
}
.meter-progress-meta {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.meter-progress-percent {
  font-size: 12px;
  font-weight: 700;
  color: #5f6f83;
  white-space: nowrap;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes meterArcSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.dna-show {
  display: block !important;
}
.meter-battery-status.dna-show {
  display: flex !important;
}
.meter-card-footer.dna-show {
  display: block !important;
}

.tool-section-header {
  margin: 0 0 8px;
  padding: 0 2px;
  font-size: 13px;
  font-weight: 600;
  color: #667281;
  letter-spacing: -0.01em;
}
.tool-card {
  border: 1px solid rgba(0, 90, 156, 0.12);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(10, 29, 50, 0.08);
  overflow: hidden;
  margin-bottom: 16px;
}
.tool-card__button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 16px 17px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}
.tool-card__button:active {
  background: rgba(0, 90, 156, 0.03);
  transform: scale(0.995);
}
.tool-card__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(64, 180, 255, 0.18) 0%, rgba(0, 90, 156, 0.12) 100%);
  color: var(--primary-color, #005a9c);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(0, 90, 156, 0.08);
}
.tool-card__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.tool-card__eyebrow {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary-color, #005a9c);
}
.tool-card__title {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: var(--text-main, #111827);
  margin-bottom: 3px;
}
.tool-card__copy {
  display: block;
  font-size: 13px;
  color: #445266;
  line-height: 1.4;
}
.alerts-config-copy {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted, #4b5563);
  margin-bottom: 14px;
}
.alerts-config-list .item {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
}
.alerts-config-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.04);
}
.alerts-config-icon svg {
  width: 22px;
  height: 22px;
  display: block;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.alerts-config-icon--battery {
  color: #d97706;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.14) 0%, rgba(245, 158, 11, 0.08) 100%);
}
.alerts-config-icon--consumption {
  color: var(--primary-color, #005a9c);
  background: linear-gradient(180deg, rgba(46, 123, 255, 0.12) 0%, rgba(46, 123, 255, 0.06) 100%);
}
.alerts-config-icon--communication {
  color: #2563eb;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.12) 0%, rgba(37, 99, 235, 0.06) 100%);
}
.alerts-config-list .content {
  flex: 1 1 auto;
  min-width: 0;
}
.alerts-config-list .header {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main, #111827);
  margin-bottom: 2px;
}
.alerts-config-list .description {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted, #4b5563);
}
.tool-card__arrow {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: var(--primary-color, #005a9c);
  background: rgba(46, 123, 255, 0.1);
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}
.tool-card__button:hover .tool-card__arrow,
.tool-card__button:focus .tool-card__arrow {
  transform: translateX(2px);
  background: rgba(46, 123, 255, 0.15);
  box-shadow: 0 6px 14px rgba(46, 123, 255, 0.12);
}

#herramientas-app {
  --primary-color: #2e7bff;
  --primary-color-dark: #1e5fe2;
}

#herramientas-app .herramientas-hero {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 12px;
}

#herramientas-app .herramientas-hero__back {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(194, 208, 232, 0.42);
  background: rgba(255, 255, 255, 0.9);
  color: #1f2940;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(10, 29, 50, 0.06);
}

#herramientas-app .herramientas-hero__back:active {
  transform: scale(0.99);
}

#herramientas-app .herramientas-hero__title {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #1f2940;
}

#herramientas-app .meter-shot--detail {
  margin-bottom: 16px;
}

#herramientas-app .meter-shot__button--static {
  cursor: default;
}

#herramientas-app .meter-shot--detail .meter-shot__button--static {
  border: 1px solid rgba(35, 94, 210, 0.45);
  background:
    radial-gradient(circle at 22% 26%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, #1f7dff 0%, #0f5fd8 55%, #0949ad 100%);
  box-shadow: 0 18px 34px rgba(14, 54, 118, 0.22);
  overflow: hidden;
}

#herramientas-app .meter-shot--detail .meter-shot__name {
  color: rgba(255, 255, 255, 0.96);
  font-weight: 600;
}

#herramientas-app .meter-shot--detail .meter-shot__subtitle {
  color: rgba(220, 233, 255, 0.75);
}

#herramientas-app .meter-shot--detail .meter-shot__subtitle-icon {
  color: rgba(220, 233, 255, 0.7);
}

#herramientas-app .meter-shot--detail .meter-shot__status {
  font-weight: 600;
}

#herramientas-app .meter-shot--detail .meter-shot__status--active {
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.92);
}

#herramientas-app .meter-shot--detail .meter-shot__status--inactive {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(220, 233, 255, 0.78);
}

#herramientas-app .meter-shot--detail .meter-shot__status--neutral {
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.92);
}

#herramientas-app .meter-shot--detail .meter-shot__stat-icon {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

#herramientas-app .meter-shot--detail .meter-shot__stat-label {
  color: rgba(255, 255, 255, 0.88);
}

#herramientas-app .meter-shot--detail .meter-shot__stat-value {
  color: rgba(255, 255, 255, 0.96);
  font-weight: 600;
}

#herramientas-app .meter-shot--detail .meter-shot__stat-unit {
  color: rgba(220, 233, 255, 0.75);
  font-weight: 600;
}

#herramientas-app .meter-shot--detail .meter-shot__stat-date {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 450;
}

#herramientas-app .meter-shot--detail .meter-shot__content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#herramientas-app .meter-shot--detail .meter-shot__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

#herramientas-app .meter-shot--detail .meter-shot__footer-right {
  margin-right: 14px;
}

#herramientas-app .meter-shot--detail .meter-shot__footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

#herramientas-app .meter-shot--detail .meter-lock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#herramientas-app .meter-shot--detail .meter-lock-pill {
  width: 34px;
  height: 28px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

#herramientas-app .meter-shot--detail .meter-lock-pill svg {
  width: 16px;
  height: 16px;
}

#herramientas-app .meter-shot--detail .meter-lock__label {
  color: rgba(220, 233, 255, 0.86);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}

#herramientas-app .meter-shot--detail .meter-battery-pill {
  padding: 6px 9px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  box-shadow: none;
  font-weight: 650;
}

#herramientas-app .meter-shot--detail .meter-battery-pill--warning {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(245, 158, 11, 0.4);
}

#herramientas-app .meter-shot--detail .meter-battery-pill--low {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(220, 38, 38, 0.42);
  animation: none;
}

#herramientas-app .meter-shot--detail .meter-battery-icon__body {
  width: 18px;
  height: 10px;
  border-width: 2px;
}

#herramientas-app .meter-shot--detail .meter-battery-icon__cap {
  width: 3px;
  height: 6px;
}

#herramientas-app .herramientas-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

#herramientas-app .herramientas-tool {
  border: 1px solid rgba(0, 90, 156, 0.12);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(10, 29, 50, 0.08);
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

#herramientas-app .herramientas-tool:active {
  transform: scale(0.995);
  background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
  box-shadow: 0 8px 18px rgba(10, 29, 50, 0.08);
}

#herramientas-app .herramientas-tool__icon {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(46, 123, 255, 0.18) 0%, rgba(46, 123, 255, 0.1) 100%);
  color: #2e7bff;
  box-shadow: inset 0 0 0 1px rgba(46, 123, 255, 0.16);
}

#herramientas-app .herramientas-tool__title {
  font-size: 13px;
  font-weight: 650;
  color: var(--text-main, #111827);
  letter-spacing: -0.01em;
}

#herramientas-app .herramientas-tool__copy {
  font-size: 11px;
  color: #445266;
  line-height: 1.32;
}

#herramientas-app .herramientas-tech {
  border: 1px solid rgba(0, 90, 156, 0.12);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(10, 29, 50, 0.08);
  padding: 18px 18px 16px;
  margin-bottom: 16px;
}

#herramientas-app .herramientas-tech__row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

#herramientas-app .herramientas-tech__left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

#herramientas-app .herramientas-tech__badge {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(46, 123, 255, 0.1);
  color: #2e7bff;
  box-shadow: inset 0 0 0 1px rgba(46, 123, 255, 0.16);
  flex-shrink: 0;
}

#herramientas-app .herramientas-tech__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

#herramientas-app .herramientas-tech__title {
  color: #16223a;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

#herramientas-app .herramientas-tech__stats {
  display: grid;
  grid-template-columns: 1.25fr 0.875fr 0.875fr;
  gap: 0;
  padding: 0;
}

#herramientas-app .herramientas-tech__stat {
  min-width: 0;
  padding: 0 14px;
  border-left: 1px solid rgba(140, 162, 199, 0.16);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
}

#herramientas-app .herramientas-tech__stat:first-child {
  padding-left: 0;
  border-left: none;
}

#herramientas-app .herramientas-tech__stat:first-child .herramientas-tech__stat-label {
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: -0.01em;
}

#herramientas-app .herramientas-tech__stat:last-child {
  padding-right: 0;
}

#herramientas-app .herramientas-tech__stat-label {
  color: #8695ae;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  display: block;
}

#herramientas-app .herramientas-tech__stat-value {
  color: #16223a;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  word-break: normal;
  overflow-wrap: anywhere;
  text-align: left;
  display: block;
}

#herramientas-app .herramientas-tech__serial {
  border-top: 1px solid rgba(140, 162, 199, 0.16);
  padding: 14px 0 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

#herramientas-app .herramientas-tech__serial-k {
  color: #8695ae;
  font-size: 12px;
  font-weight: 500;
}

#herramientas-app .herramientas-tech__serial-v {
  color: #16223a;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

@media (max-width: 420px) {
  #herramientas-app .herramientas-tech__row {
    grid-template-columns: 56px minmax(0, 1fr);
  }
  #herramientas-app .herramientas-tech__stats {
    grid-template-columns: 1.25fr 0.875fr 0.875fr;
  }
}
.herramientas-enter {
  opacity: 0;
  transform: translateY(18px);
}
.herramientas-enter.herramientas-enter--active {
  animation: herramientasEnter 620ms cubic-bezier(0.2, 0.85, 0.2, 1) both;
}
.detail-reading__value.counter-reading-panel__value--animate {
  animation: readingValueGlow 760ms ease-out both;
}
#herramientas-app .mobile-webview__empty-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  background: rgba(0, 90, 156, 0.08);
  color: var(--primary-color, #005a9c);
}
.ui.page.modals.dimmer,
.ui.dimmer.modals {
  background: rgba(17, 24, 39, 0.08) !important;
  backdrop-filter: blur(1px);
}
.ui.modal {
  border-radius: 24px !important;
  overflow: hidden;
  border: 1px solid rgba(22, 32, 42, 0.08);
  box-shadow: 0 18px 48px rgba(10, 29, 50, 0.18);
}
.ui.modal .content {
  padding: 18px 18px 20px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
}
.manual-reading-modal .content {
  padding-bottom: 28px;
}
.ui.modal .actions {
  padding: 18px 16px 24px !important;
  background: rgba(247, 250, 252, 0.96) !important;
  border-top: 1px solid rgba(22, 32, 42, 0.06) !important;
}
.ui.modal .actions > .button {
  border-radius: 14px !important;
  min-height: 46px;
  font-weight: 700 !important;
  box-shadow: none !important;
}
#herramientas-app .ui.modal .ui.primary.button {
  background: var(--primary-color, #2e7bff) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 10px 22px rgba(46, 123, 255, 0.22) !important;
}
#herramientas-app .ui.modal .ui.primary.button:hover,
#herramientas-app .ui.modal .ui.primary.button:focus {
  background: var(--primary-color-dark, #1e5fe2) !important;
}
.ui.modal .ui.form .field > label {
  font-size: 12px;
  font-weight: 700;
  color: #667281;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.ui.modal .ui.form input[type="text"],
.ui.modal .ui.form input[type="number"] {
  border-radius: 14px !important;
  border: 1px solid rgba(22, 32, 42, 0.1) !important;
  background: #fff !important;
  min-height: 46px;
}
.ui.modal .ui.form input[type="text"]:focus,
.ui.modal .ui.form input[type="number"]:focus {
  border-color: rgba(46, 123, 255, 0.38) !important;
  box-shadow: 0 0 0 4px rgba(46, 123, 255, 0.12) !important;
}
.ui.modal .ui.calendar .ui.input > input {
  border-radius: 14px !important;
}
.manual-reading-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 188px) minmax(0, 188px);
  justify-content: center;
  gap: 10px;
  margin-top: 22px !important;
  margin-bottom: 4px !important;
}
.manual-reading-actions .column {
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.manual-reading-modal .manual-reading-cancel,
.manual-reading-modal .manual-reading-submit {
  min-height: 48px !important;
  border-radius: 16px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  box-shadow: none !important;
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    opacity 0.15s ease !important;
}
.manual-reading-modal .manual-reading-cancel {
  background: #f4f7fa !important;
  color: #16202a !important;
  border: 1px solid rgba(22, 32, 42, 0.08) !important;
}
.manual-reading-modal .manual-reading-submit {
  background: var(--primary-color, #005a9c) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 10px 22px rgba(46, 123, 255, 0.22) !important;
}
.manual-reading-modal .manual-reading-cancel:hover,
.manual-reading-modal .manual-reading-submit:hover {
  opacity: 0.96;
}
.manual-reading-modal .manual-reading-cancel:active,
.manual-reading-modal .manual-reading-submit:active {
  transform: scale(0.985);
}
.wizard-title {
  font-size: 22px;
  font-weight: 800;
  color: #16202a;
  margin-bottom: 8px;
  letter-spacing: -0.03em;
}
.wizard-copy {
  font-size: 14px;
  line-height: 1.5;
  color: #526174;
  margin-bottom: 16px;
}
.manual-reading-field {
  margin-bottom: 14px !important;
}
.manual-reading-field--compact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.manual-reading-field[data-manual-reading-panel="hours"] {
  align-items: stretch;
}
.manual-reading-date-wrap {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
.manual-reading-date-input {
  width: auto;
  min-width: 252px;
  max-width: 100%;
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(22, 32, 42, 0.1);
  background: #fff;
  padding: 10px 16px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text-main, #111827);
  box-shadow: inset 0 1px 1px rgba(22, 32, 42, 0.02);
}
.manual-reading-inline-input {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(22, 32, 42, 0.1);
  background: #fff;
  box-shadow: inset 0 1px 1px rgba(22, 32, 42, 0.02);
}
.manual-reading-inline-input input[type="number"] {
  width: 112px !important;
  min-height: auto !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: center;
  font-size: 24px !important;
  font-weight: 800;
  box-shadow: none !important;
}
.manual-reading-inline-unit {
  font-size: 14px;
  font-weight: 800;
  color: #667281;
}
.wizard-hint {
  font-size: 13px;
  color: #667281;
  margin-top: 6px;
}
.hours-stepper {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(96px, 1fr) 92px minmax(96px, 1fr);
  align-items: stretch;
  gap: 10px;
  margin-top: 4px;
}
.hours-stepper__btn {
  width: 100%;
  height: 44px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 14px;
  background: var(--surface-color, #ffffff);
  color: var(--primary-color, #005a9c);
  font-size: 28px;
  font-weight: 900;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    opacity 0.15s ease,
    background 0.15s ease;
}
.hours-stepper__btn[data-hours-step="-1"] {
  background: #fef2f2;
  color: var(--status-error, #dc2626);
  border-color: rgba(220, 38, 38, 0.18);
}
.hours-stepper__btn[data-hours-step="1"] {
  background: #ecfdf5;
  color: var(--status-success, #059669);
  border-color: rgba(5, 150, 105, 0.18);
}
.hours-stepper__btn:active {
  transform: scale(0.985);
  opacity: 0.9;
  background: #f3f4f6;
}
.hours-stepper__input {
  width: 92px;
  height: 44px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 14px;
  background: var(--surface-color, #ffffff);
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  font-family: inherit;
  color: var(--text-main, #111827);
}
.hours-stepper .hours-stepper__input {
  justify-self: center;
  align-self: center;
}
.hours-stepper .hours-stepper__btn:first-child {
  justify-self: stretch;
}
.hours-stepper .hours-stepper__btn:last-child {
  justify-self: stretch;
}
.hours-stepper__input::-webkit-outer-spin-button,
.hours-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.hours-stepper__input[type="number"] {
  -moz-appearance: textfield;
}
.confirm-reading-modal .content {
  padding: 18px 18px 20px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
}
.confirm-reading-summary {
  padding: 14px 14px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%);
  box-shadow: inset 0 0 0 1px rgba(46, 123, 255, 0.08);
}
.confirm-reading-copy {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.55;
  color: #16202a;
}
.confirm-reading-copy strong {
  color: #0f172a;
}
.confirm-reading-copy--muted {
  color: #526174;
}
.confirm-reading-note {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(22, 32, 42, 0.08);
  font-size: 13px;
  line-height: 1.5;
  color: #667281;
}
.confirm-reading-modal .actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 18px 16px 24px !important;
  background: rgba(247, 250, 252, 0.96) !important;
  border-top: 1px solid rgba(22, 32, 42, 0.06) !important;
}
.confirm-reading-modal .actions > .button {
  width: 100%;
  margin: 0 !important;
  min-height: 48px;
  border-radius: 16px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.confirm-reading-modal .deny.button {
  background: #f4f7fa !important;
  color: #16202a !important;
  border: 1px solid rgba(22, 32, 42, 0.08) !important;
}
.confirm-reading-modal .approve.button {
  background: var(--primary-color, #005a9c) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 10px 22px rgba(46, 123, 255, 0.22) !important;
}
.confirm-reading-modal .deny.button:active,
.confirm-reading-modal .approve.button:active {
  transform: scale(0.985);
}
.mode-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 6px;
  border-radius: 18px;
  background: #f3f6fa;
  border: 1px solid rgba(22, 32, 42, 0.06);
}
.mode-btn {
  width: 100%;
  position: relative;
  z-index: 1;
  border: 1px solid transparent;
  background: transparent;
  color: #5e6a77;
  border-radius: 14px;
  padding: 12px 10px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}
.mode-btn:active {
  transform: scale(0.985);
}
.mode-btn.active {
  border-color: rgba(46, 123, 255, 0.14);
  background: var(--surface-color, #ffffff);
  color: var(--primary-color, #005a9c);
  box-shadow: 0 8px 18px rgba(46, 123, 255, 0.12);
}
.mode-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.manual-reading-panel-enter {
  animation: manualReadingPanelEnter 240ms ease both;
}
.manual-reading-live {
  margin-top: 16px;
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(180deg, #16202a 0%, #0f1720 100%);
  color: #f4f7fb;
  box-shadow: 0 14px 28px rgba(10, 29, 50, 0.16);
}
.manual-reading-live__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 247, 251, 0.6);
}
.manual-reading-live__title {
  margin-top: 8px;
  font-size: 22px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #ffffff;
}
.manual-reading-live__copy {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(244, 247, 251, 0.78);
}
.manual-reading-live__grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.manual-reading-live__item {
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.manual-reading-live__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 247, 251, 0.58);
}
.manual-reading-live__value {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: #ffffff;
  word-break: break-word;
}
.manual-reading-safe-note {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(244, 247, 251, 0.74);
}
.manual-reading-safe-note::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2e7bff;
  box-shadow: 0 0 0 5px rgba(46, 123, 255, 0.12);
}
.manual-reading-modal.modal-animate .content,
.manual-reading-modal.modal-animate .actions {
  animation: manualReadingModalRise 220ms cubic-bezier(0.22, 0.8, 0.22, 1) both;
}
@keyframes herramientasEnter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes readingValueGlow {
  0% {
    opacity: 0;
    transform: translateY(8px);
    text-shadow: 0 0 0 rgba(46, 123, 255, 0);
  }
  55% {
    opacity: 1;
    transform: translateY(0);
    text-shadow: 0 0 18px rgba(46, 123, 255, 0.12);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    text-shadow: 0 0 0 rgba(46, 123, 255, 0);
  }
}
@keyframes manualReadingPanelEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes manualReadingModalRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 480px) {
  .manual-reading-live__grid {
    grid-template-columns: 1fr;
  }
  .counter-overview__header {
    align-items: stretch;
  }
  .counter-overview__badge {
    width: 46px;
    height: 46px;
    border-radius: 16px;
  }
  .counter-overview__name {
    font-size: 22px;
  }
  .counter-meta-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .ui.modal .actions {
    display: grid !important;
    gap: 10px;
  }
}
/* ── 6. informes-webview ───────────────────────────────── */
#informes-app {
  min-height: 100vh;
  --primary-color: #2e7bff;
  --primary-color-dark: #1e5fe2;
  overflow-x: clip;
}
#informes-app [data-placeholder="informes-list"],
#informes-app [data-placeholder="informes-view"] {
  display: none !important;
}
#informes-app[data-state="loading"] [data-placeholder="informes-list"],
#informes-app[data-state="loading"] [data-placeholder="informes-view"],
#informes-app[data-state="loading"] #informes-pagination {
  display: none !important;
}
#informes-app[data-state="loading"] #informes-loading {
  display: block;
}
#informes-app[data-state="ready"] #informes-loading {
  display: none;
}
#informes-app[data-mode="list"] [data-placeholder="informes-view"],
#informes-app[data-mode="view"] [data-placeholder="informes-list"] {
  display: none !important;
}
#informes-app[data-state="ready"][data-mode="list"][data-list-empty="true"]
  [data-placeholder="informes-list"],
#informes-app[data-state="ready"][data-mode="view"][data-view-empty="true"]
  [data-placeholder="informes-view"] {
  display: block !important;
}
.informes-loading-card {
  display: none;
  text-align: center;
  padding: 34px 22px;
}
.informes-loading-card__spinner {
  width: 26px;
  height: 26px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 2px solid rgba(46, 123, 255, 0.16);
  border-top-color: var(--primary-color, #2e7bff);
  animation: spin 0.8s linear infinite;
}
.informes-loading-card__title {
  font-size: 16px;
  font-weight: 800;
  color: #16202a;
}
.informes-loading-card__copy {
  margin-top: 6px;
  font-size: 13px;
  color: #667281;
}
.informes-enter {
  opacity: 0;
  transform: translateY(18px);
}
.informes-enter.informes-enter--active {
  animation: informesEnter 620ms cubic-bezier(0.2, 0.85, 0.2, 1) both;
}
.well-card {
  margin-bottom: 10px;
  border: 1px solid rgba(22, 32, 42, 0.06);
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(46, 123, 255, 0.16) 0%, rgba(46, 123, 255, 0) 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 10px 24px rgba(10, 29, 50, 0.06);
}
.well-item {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition:
    background 0.15s,
    transform 0.15s ease;
  padding: 14px 16px 14px 18px;
}
.well-item:active {
  background: rgba(46, 123, 255, 0.04);
  transform: scale(0.992);
}
.well-icon-wrap {
  margin-right: 0;
  margin-top: 0;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(46, 123, 255, 0.14) 0%, rgba(46, 123, 255, 0.08) 100%);
  color: var(--primary-color-dark, #1e5fe2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}
.well-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.well-name {
  font-size: 16px;
  font-weight: 800;
  color: #16202a;
  letter-spacing: -0.02em;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
.well-authority {
  font-size: 12px;
  color: #667281;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.well-metrics {
  margin-top: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.well-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-color, #2e7bff);
  background: rgba(46, 123, 255, 0.08);
}
.well-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary-color, #2e7bff);
  box-shadow: 0 0 0 4px rgba(46, 123, 255, 0.12);
}
.well-chevron {
  color: #c7c7cc;
  align-self: center;
  flex-shrink: 0;
  padding: 0;
  transform: scale(0.9);
}
.informes-detail-shell {
  padding: 4px 0 0;
}
.informes-detail-shell[data-detail-mode="list"] .filters-card,
.informes-detail-shell[data-detail-mode="list"] .chart-card {
  display: none !important;
}
.informes-detail-shell[data-detail-mode="list"] .records-card {
  margin-top: 2px;
}
.detail-back {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(194, 208, 232, 0.42);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  color: #1f2940;
  box-shadow: 0 10px 22px rgba(10, 29, 50, 0.06);
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}
.detail-back:active {
  transform: scale(0.98);
  box-shadow:
    0 5px 12px rgba(10, 29, 50, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}
.detail-back svg {
  flex-shrink: 0;
}
.detail-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 2px 0 0;
}
.detail-header__copy {
  min-width: 0;
}
.detail-well-name {
  font-size: 24px;
  font-weight: 700;
  color: #16202a;
  line-height: 1.1;
}
.detail-subtitle {
  font-size: 14px;
  color: #667281;
  margin-top: 5px;
}
.records-card {
  overflow: hidden;
}
.filters-card {
  padding: 10px 12px;
}
.filters-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.filters-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
  flex: 1;
}
.filters-label {
  font-size: 11px;
  font-weight: 600;
  color: #8e8e93;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.filters-select {
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(22, 32, 42, 0.08);
  padding: 0 10px;
  background: #fff;
  font-size: 14px;
}
.filters-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.action-btn {
  flex: 1;
  min-height: 44px;
  border-radius: 13px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    opacity 0.15s ease,
    background 0.15s ease;
}
.action-btn:active {
  transform: scale(0.985);
}
.action-btn.primary {
  background: var(--primary-color, #2e7bff);
  color: #fff;
  box-shadow: 0 8px 20px rgba(46, 123, 255, 0.22);
}
.action-btn.secondary {
  background: rgba(46, 123, 255, 0.1);
  color: var(--primary-color-dark, #1e5fe2);
  border-color: rgba(46, 123, 255, 0.16);
}
.chart-card {
  padding: 14px 16px 16px;
}
.chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.chart-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
  white-space: nowrap;
}
.chart-summary__label {
  font-size: 11px;
  font-weight: 700;
  color: #8e8e93;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.chart-summary__value {
  font-size: 20px;
  font-weight: 800;
  color: #16202a;
  letter-spacing: -0.03em;
}
.chart-summary__value span {
  font-size: 13px;
  font-weight: 700;
  color: #667281;
}
.chart-meta {
  font-size: 13px;
  color: #4e5b69;
  line-height: 1.4;
}
.chart-canvas-wrap {
  position: relative;
  height: 260px;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(46, 123, 255, 0.18) 0%, rgba(46, 123, 255, 0) 34%),
    radial-gradient(
      circle at bottom left,
      rgba(108, 167, 255, 0.12) 0%,
      rgba(108, 167, 255, 0) 40%
    ),
    linear-gradient(180deg, #fcfeff 0%, #f4f8fd 100%);
  border: 1px solid rgba(22, 32, 42, 0.06);
  padding: 12px 10px 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}
.chart-canvas-wrap::before {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: -28px;
  top: -38px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 123, 255, 0.18) 0%, rgba(46, 123, 255, 0) 70%);
  pointer-events: none;
}
.chart-canvas-wrap canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.chart-empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #8e8e93;
  font-size: 13px;
  padding: 0 18px;
}
.chart-detail-button {
  width: 100%;
  min-height: 42px;
  margin-top: 10px;
  border: 1px solid rgba(46, 123, 255, 0.14);
  border-radius: 14px;
  background: rgba(46, 123, 255, 0.08);
  color: var(--primary-color-dark, #1e5fe2);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}
.chart-detail-button:active {
  transform: scale(0.985);
}
.records-head {
  display: flex;
  padding: 9px 16px;
  background: #f7f9fc;
  border-bottom: 1px solid rgba(22, 32, 42, 0.06);
}
.records-sort-button {
  padding: 0;
  border: none;
  background: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #8e8e93;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  cursor: pointer;
}
.records-sort-button--date {
  flex: 1;
}
.records-sort-button--value {
  width: 72px;
  justify-content: center;
  text-align: center;
}
.records-sort-button--active {
  color: var(--primary-color, #2e7bff);
}
.records-sort-indicator {
  min-width: 10px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-align: right;
}
.record-row {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(22, 32, 42, 0.05);
}
.record-row:last-child {
  border-bottom: none;
}
.record-date {
  flex: 1;
  font-size: 15px;
  color: #1c1c1e;
}
.record-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--primary-color, #2e7bff);
  width: 72px;
  text-align: center;
}
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px 10px;
  border-top: 1px solid rgba(22, 32, 42, 0.06);
  background: linear-gradient(180deg, rgba(247, 249, 252, 0) 0%, rgba(247, 249, 252, 0.84) 100%);
}
.page-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--primary-color, #2e7bff);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 8px 16px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  transition:
    opacity 0.15s,
    transform 0.15s ease;
}
.page-btn:disabled {
  background: #e5e5ea;
  color: #c7c7cc;
  cursor: not-allowed;
}
.page-btn:not(:disabled):active {
  opacity: 0.82;
  transform: scale(0.985);
}
.page-info {
  font-size: 14px;
  font-weight: 500;
  color: #3c3c43;
}
#informes-app .mobile-webview__stack {
  gap: 8px;
}
.informes-detail-shell {
  display: grid;
  gap: 8px;
  padding: 2px 0 0;
  width: 100%;
  max-width: 100%;
}
.report-toolbar,
.report-toolbar > *,
.report-toolbar__right,
.report-kpis,
.chart-card,
.report-summary,
.records-card {
  min-width: 0;
}
.detail-hero {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 10px;
  padding: 2px 4px 6px;
}
.detail-hero__copy {
  min-width: 0;
  text-align: center;
}
.detail-hero__title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #1f2940;
}
.detail-hero__subtitle {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #77839a;
}
.detail-hero__right {
  width: 44px;
  height: 44px;
}
.report-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.report-action-btn {
  min-width: 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(46, 123, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  color: #2466e6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(10, 29, 50, 0.05);
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}
.report-action-btn:active {
  transform: scale(0.985);
  box-shadow: 0 6px 14px rgba(10, 29, 50, 0.05);
}
.report-action-btn:hover,
.report-action-btn:focus {
  background: rgba(46, 123, 255, 0.08);
  border-color: rgba(46, 123, 255, 0.16);
}
.report-action-btn--secondary {
  color: #2466e6;
}
.report-action-btn__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.report-action-btn__icon svg {
  display: block;
}
.report-action-btn--secondary .report-action-btn__icon {
  background: transparent;
  box-shadow: none;
}
.report-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) auto;
  gap: 12px;
}
.report-toolbar__right {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  max-width: 100%;
}
.report-pill {
  position: relative;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-radius: 18px;
  border: 1px solid rgba(188, 203, 228, 0.42);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 22px rgba(10, 29, 50, 0.05);
  color: var(--primary-color-dark, #1e5fe2);
}
.report-pill--period {
  cursor: pointer;
  width: 100%;
  min-width: 0;
}
.report-pill--year {
  min-width: 112px;
}
.report-pill__icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.report-pill__label {
  min-width: 0;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: #2466e6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.report-pill--select::after {
  content: "";
  position: absolute;
  right: 14px;
  width: 8px;
  height: 8px;
  border-right: 1.8px solid #7a8aab;
  border-bottom: 1.8px solid #7a8aab;
  transform: rotate(45deg) translateY(-2px);
  pointer-events: none;
}
.filters-select--pill {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 20px 0 0;
  border: none;
  background: transparent;
  color: #2466e6;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.02em;
  appearance: none;
  -webkit-appearance: none;
}
.filters-select--pill:focus {
  outline: none;
}
.filters-select--overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.report-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 10px 12px;
}
.report-kpi {
  padding: 12px 14px 10px;
  min-width: 0;
}
.report-kpi + .report-kpi {
  border-left: 1px solid rgba(22, 32, 42, 0.08);
}
.report-kpi__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  min-width: 0;
}
.report-kpi__icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(46, 123, 255, 0.1);
}
.report-kpi__label {
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #75839b;
  overflow-wrap: anywhere;
}
.report-kpi__value {
  min-width: 0;
  font-size: 18px;
  line-height: 1.08;
  font-weight: 760;
  letter-spacing: -0.05em;
  color: #16223a;
}
.report-kpi__copy {
  min-width: 0;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.35;
  color: #7d8aa1;
  overflow-wrap: anywhere;
}
.report-kpi--blue .report-kpi__icon,
.report-summary__row--blue .report-summary__bullet {
  color: #2e7bff;
  background: rgba(46, 123, 255, 0.1);
}
.report-kpi--green .report-kpi__icon,
.report-summary__row--green .report-summary__bullet {
  color: #26b576;
  background: rgba(38, 181, 118, 0.12);
}
.report-kpi--orange .report-kpi__icon,
.report-summary__row--orange .report-summary__bullet {
  color: #ff9a26;
  background: rgba(255, 154, 38, 0.14);
}
.report-kpi--violet .report-kpi__icon {
  color: #8c5cff;
  background: rgba(140, 92, 255, 0.12);
}
.chart-card {
  padding: 16px 16px 14px;
}
.chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.chart-head__copy {
  min-width: 0;
  padding-right: 8px;
}
.chart-title-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chart-title {
  font-size: 13px;
  font-weight: 650;
  color: #23325a;
  letter-spacing: -0.02em;
}
.chart-title__hint {
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(46, 123, 255, 0.08);
  color: #7a8aab;
  font-size: 9px;
  font-weight: 700;
}
.chart-unit-label {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1;
  font-weight: 650;
  color: #8a97ae;
  letter-spacing: -0.01em;
}
.chart-head__actions {
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-end;
  margin-left: auto;
  min-width: 0;
}
.chart-view-toggle {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.chart-view-toggle__btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(193, 207, 231, 0.42);
  background: rgba(255, 255, 255, 0.92);
  color: #8090ac;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(10, 29, 50, 0.04);
}
.chart-view-toggle__btn--active {
  border-color: rgba(46, 123, 255, 0.2);
  background: rgba(46, 123, 255, 0.08);
  color: var(--primary-color, #2e7bff);
}
.chart-canvas-wrap {
  height: 310px;
  padding: 18px 16px 10px;
}
.chart-canvas-wrap canvas {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
}
.chart-detail-button {
  margin-top: 14px;
}
.report-summary {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 16px;
}
.report-summary__ring-wrap {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding-right: 18px;
  border-right: 1px solid rgba(22, 32, 42, 0.08);
}
.report-summary__ring {
  width: 148px;
  height: 148px;
  padding: 11px;
  border-radius: 50%;
  background: linear-gradient(180deg, #2e7bff 0%, #1e5fe2 100%);
  box-shadow: inset 0 0 0 1px rgba(46, 123, 255, 0.08);
}
.report-summary__ring-center {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #ffffff;
  display: grid;
  place-content: center;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(22, 32, 42, 0.05);
}
.report-summary__ring-value {
  font-size: 18px;
  line-height: 1.05;
  font-weight: 760;
  color: #1b2540;
  letter-spacing: -0.04em;
}
.report-summary__ring-unit {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 650;
  color: #6c7890;
}
.report-summary__ring-copy {
  font-size: 15px;
  font-weight: 600;
  color: #6c7890;
}
.report-summary__content {
  min-width: 0;
  padding-left: 10px;
}
.report-summary__title {
  margin-bottom: 14px;
  font-size: 17px;
  font-weight: 700;
  color: #2e7bff;
  letter-spacing: -0.03em;
}
.report-summary__row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
.report-summary__bullet {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.report-summary__label {
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: #52617a;
  overflow-wrap: anywhere;
}
.report-summary__value {
  min-width: 0;
  font-size: 15px;
  font-weight: 760;
  color: #1a2340;
  white-space: nowrap;
}
.report-summary__date {
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: #7d8aa1;
  white-space: nowrap;
  overflow-wrap: anywhere;
}
.report-summary__row--green .report-summary__value {
  color: #22b06c;
}
.report-summary__row--orange .report-summary__value {
  color: #f98c33;
}
.report-tech {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 16px 16px 14px;
}
.report-tech__icon {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(46, 123, 255, 0.08);
  color: #2e7bff;
  box-shadow: inset 0 0 0 1px rgba(46, 123, 255, 0.08);
}
.report-tech__content {
  min-width: 0;
}
.report-tech__title {
  margin-bottom: 14px;
  font-size: 17px;
  font-weight: 700;
  color: #2e7bff;
  letter-spacing: -0.03em;
}
.report-tech__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.report-tech__item {
  min-width: 0;
  padding: 0 18px;
}
.report-tech__item + .report-tech__item {
  border-left: 1px solid rgba(22, 32, 42, 0.08);
}
.report-tech__item:first-child {
  padding-left: 0;
}
.report-tech__item:last-child {
  padding-right: 0;
}
.report-tech__label {
  font-size: 11px;
  font-weight: 700;
  color: #8d99af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.report-tech__value {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  color: #1d2642;
  letter-spacing: -0.03em;
  word-break: break-word;
}
.records-card {
  margin-top: -2px;
}
#informes-email-modal.ui.modal {
  border-radius: 24px !important;
  overflow: hidden;
  border: 1px solid rgba(22, 32, 42, 0.08);
  box-shadow: 0 18px 48px rgba(10, 29, 50, 0.18);
}
#informes-email-modal.ui.modal > .header {
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  color: #16202a;
  font-size: 20px;
  font-weight: 800;
  border-bottom: 1px solid rgba(22, 32, 42, 0.06);
  padding: 18px 18px 14px;
}
#informes-email-modal.ui.modal > .content {
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  padding: 12px 18px 16px;
  color: #667281;
  font-size: 14px;
  line-height: 1.5;
}
.informes-email-copy {
  margin: 0;
}
.informes-email-note {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(46, 123, 255, 0.08);
  color: var(--primary-color-dark, #1e5fe2);
  font-size: 13px;
  font-weight: 600;
}
#informes-email-modal.ui.modal > .actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 16px 16px !important;
  background: #fff !important;
  border-top: 1px solid rgba(22, 32, 42, 0.06) !important;
}
#informes-email-modal.ui.modal > .actions > .button {
  margin: 0 !important;
  border-radius: 14px !important;
  min-height: 46px;
  font-weight: 700 !important;
  box-shadow: none !important;
}
#informes-email-modal .button {
  width: 100%;
}
#informes-email-modal .button:first-child {
  background: #f4f7fa !important;
  color: #16202a !important;
  border: 1px solid rgba(22, 32, 42, 0.08) !important;
}
#informes-email-modal .primary.button {
  background: var(--primary-color, #2e7bff) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 10px 22px rgba(46, 123, 255, 0.22) !important;
}
@keyframes informesEnter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes informesValuePulse {
  0% {
    opacity: 0;
    transform: translateY(8px);
    text-shadow: 0 0 0 rgba(46, 123, 255, 0);
  }
  55% {
    opacity: 1;
    transform: translateY(0);
    text-shadow: 0 0 18px rgba(46, 123, 255, 0.12);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    text-shadow: 0 0 0 rgba(46, 123, 255, 0);
  }
}
@media (max-width: 480px) {
  .report-tech {
    grid-template-columns: 1fr;
  }
  .report-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }
  .report-toolbar__right {
    gap: 6px;
  }
  .report-pill--year {
    min-width: 104px;
  }
  .report-actions {
    gap: 6px;
  }
  .report-action-btn {
    min-width: 42px;
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }
  .report-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 8px 10px;
  }
  .report-kpi {
    padding: 10px 10px 9px;
    min-height: 0;
  }
  .report-kpi + .report-kpi {
    border-left: 1px solid rgba(22, 32, 42, 0.08);
  }
  .report-kpi__head {
    gap: 6px;
    margin-bottom: 8px;
  }
  .report-kpi__icon {
    width: 18px;
    height: 18px;
  }
  .report-kpi__label {
    font-size: 9px;
    letter-spacing: -0.01em;
    text-transform: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .report-kpi__value {
    font-size: 17px;
    letter-spacing: -0.04em;
    line-height: 1;
  }
  .report-kpi__copy {
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.15;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .filters-select--pill,
  .report-pill__label {
    font-size: 13px;
  }
  .report-tech__grid {
    grid-template-columns: 1fr;
  }
  .report-tech__item {
    padding: 14px 0 0;
  }
  .report-tech__item + .report-tech__item {
    border-left: none;
    border-top: 1px solid rgba(22, 32, 42, 0.08);
  }
  .report-tech__item:first-child {
    padding-top: 0;
    border-top: none;
  }
  .report-summary {
    grid-template-columns: 128px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 14px;
  }
  .report-summary__ring-wrap {
    padding-right: 12px;
    padding-bottom: 0;
    border-right: 1px solid rgba(22, 32, 42, 0.08);
    border-bottom: none;
    gap: 10px;
  }
  .report-summary__content {
    padding-left: 0;
  }
  .report-summary__ring {
    width: 104px;
    height: 104px;
    padding: 9px;
  }
  .report-summary__ring-value {
    font-size: 14px;
  }
  .report-summary__ring-unit {
    margin-top: 4px;
    font-size: 11px;
  }
  .report-summary__ring-copy {
    font-size: 13px;
  }
  .report-summary__title {
    margin-bottom: 8px;
    font-size: 15px;
  }
  .report-summary__row {
    grid-template-columns: 14px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 7px 0;
  }
  .report-summary__bullet {
    width: 14px;
    height: 14px;
  }
  .report-summary__label {
    font-size: 13px;
  }
  .report-summary__value {
    font-size: 13px;
  }
  .report-summary__date {
    grid-column: 2 / span 2;
    font-size: 12px;
  }
  .chart-head {
    align-items: flex-start;
  }
  .chart-head__actions {
    align-self: flex-end;
  }
  .chart-canvas-wrap {
    height: 280px;
    padding: 16px 12px 8px;
  }
  .report-tech {
    gap: 14px;
    justify-items: start;
  }
  .report-tech__icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
  }
  .action-btn {
    width: 100%;
  }
  .pagination-bar {
    gap: 10px;
    flex-wrap: wrap;
  }
  .page-btn {
    flex: 1;
    justify-content: center;
  }
  .records-head-val,
  .record-value {
    width: 92px;
  }
}
@media (max-width: 414px) {
  .report-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px 8px;
  }
  .report-kpi {
    padding: 10px 10px 9px;
  }
  .report-kpi + .report-kpi {
    border-left: none;
  }
  .report-kpi:nth-child(2n) {
    border-left: 1px solid rgba(22, 32, 42, 0.08);
  }
  .report-kpi:nth-child(n + 3) {
    border-top: 1px solid rgba(22, 32, 42, 0.08);
  }
  .report-summary {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 14px;
  }
  .report-summary__ring-wrap {
    width: 100%;
    padding-right: 0;
    padding-bottom: 14px;
    border-right: none;
    border-bottom: 1px solid rgba(22, 32, 42, 0.08);
  }
  .report-summary__content {
    width: 100%;
  }
}
@media (max-width: 375px) {
  .report-toolbar {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .report-toolbar__right {
    width: 100%;
    justify-content: center;
  }
  .report-pill--period {
    width: 100%;
  }
}
@media (max-width: 360px) {
  .report-toolbar__right {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-content: stretch;
    gap: 4px;
  }
  .report-pill--year {
    min-width: 0;
  }
  .report-pill--year {
    padding: 0 12px;
  }
  .report-actions {
    gap: 4px;
  }
  .report-action-btn {
    min-width: 40px;
    width: 40px;
    height: 40px;
  }
  .filters-select--pill,
  .report-pill__label {
    font-size: 12px;
  }
  .chart-head {
    flex-wrap: wrap;
    gap: 8px;
  }
  .chart-head__copy {
    width: 100%;
    padding-right: 0;
  }
  .chart-head__actions {
    width: 100%;
    justify-content: flex-end;
    margin-left: 0;
  }
  .chart-view-toggle__btn {
    width: 32px;
    height: 32px;
  }
  .chart-canvas-wrap {
    height: 264px;
    padding: 14px 10px 8px;
  }
  .report-summary__row {
    grid-template-columns: 14px minmax(0, 1fr);
  }
  .report-summary__value,
  .report-summary__date {
    grid-column: 2;
    white-space: normal;
  }
}
/* ── 7. user-webview ───────────────────────────────────── */
#user-app {
  min-height: 100vh;
}
#user-app .mobile-webview__stack {
  gap: 4px;
}
#user-app .mobile-webview__section {
  margin-top: 0;
}
#user {
  display: grid;
  row-gap: 12px;
}
.user-section-block {
  display: grid;
  row-gap: 0;
}
.user-hero-card {
  position: relative;
  overflow: hidden;
  padding: 16px 16px 14px;
  background:
    radial-gradient(circle at top right, rgba(10, 132, 255, 0.18) 0%, rgba(10, 132, 255, 0) 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid rgba(22, 32, 42, 0.06);
  box-shadow: 0 16px 32px rgba(10, 29, 50, 0.08);
}
.user-hero-card::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  top: -92px;
  right: -58px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 200, 250, 0.22) 0%, rgba(90, 200, 250, 0) 72%);
  pointer-events: none;
}
.user-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.08);
  color: #0a84ff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.user-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0a84ff;
  box-shadow: 0 0 0 5px rgba(10, 132, 255, 0.12);
}
.user-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.user-avatar {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, #007aff, #5ac8fa);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.25);
}
.user-avatar::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(10, 132, 255, 0.18);
  box-shadow: 0 0 0 10px rgba(10, 132, 255, 0.06);
}
.user-full-name {
  font-size: 18px;
  font-weight: 700;
  color: #1c1c1e;
  text-align: center;
}
.user-email-sub {
  font-size: 12px;
  color: #8e8e93;
  margin-top: 3px;
  text-align: center;
}
.user-enter {
  opacity: 0;
  transform: translateY(18px);
}
.user-enter.user-enter--active {
  animation: userEnter 620ms cubic-bezier(0.2, 0.85, 0.2, 1) both;
}
.info-card,
.action-card {
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(22, 32, 42, 0.06);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(10, 29, 50, 0.06);
}
.info-row,
.action-row {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(22, 32, 42, 0.06);
  min-height: 40px;
}
.info-row:last-child,
.action-row:last-child {
  border-bottom: none;
}
.info-label {
  font-size: 11px;
  font-weight: 700;
  color: #74808d;
  min-width: 100px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.info-value {
  font-size: 15px;
  color: #16202a;
  font-weight: 600;
  flex: 1;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.action-row {
  cursor: pointer;
  justify-content: space-between;
  transition:
    background 0.15s,
    transform 0.15s ease;
}
.action-row:active {
  background: rgba(10, 132, 255, 0.04);
  transform: scale(0.992);
}
.action-row-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #1c1c1e;
}
.account-edit-card {
  background:
    radial-gradient(circle at top right, rgba(10, 132, 255, 0.1) 0%, rgba(10, 132, 255, 0) 36%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-color: rgba(10, 132, 255, 0.1);
}
.account-edit-card .action-row {
  padding: 14px 16px;
}
.account-edit-card .action-row-label {
  font-size: 16px;
  font-weight: 700;
}
.action-row-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.action-row-icon.blue {
  background: linear-gradient(180deg, #0a84ff 0%, #007aff 100%);
  box-shadow: 0 10px 22px rgba(10, 132, 255, 0.22);
}
.action-row-icon.orange {
  background: #ff9500;
}
.row-chevron {
  color: #c7c7cc;
}
.account-edit-card .row-chevron {
  color: #9db8d9;
}
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(22, 32, 42, 0.06);
}
.toggle-label {
  font-size: 15px;
  color: #1c1c1e;
  font-weight: 600;
}
.toggle-copy {
  font-size: 12px;
  color: #74808d;
  margin-top: 3px;
  line-height: 1.35;
}
.ios-toggle {
  position: relative;
  display: inline-block;
  width: 51px;
  height: 31px;
  flex-shrink: 0;
}
.ios-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.ios-slider {
  position: absolute;
  inset: 0;
  background: #e5e5ea;
  border-radius: 34px;
  transition: background 0.2s;
  cursor: pointer;
}
.ios-slider:before {
  content: "";
  position: absolute;
  width: 27px;
  height: 27px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.ios-toggle input:checked + .ios-slider {
  background: #34c759;
}
.ios-toggle input:checked + .ios-slider:before {
  transform: translateX(20px);
}
.frequency-section {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
  transition:
    max-height 0.28s ease,
    opacity 0.22s ease,
    transform 0.22s ease;
  background: linear-gradient(180deg, rgba(10, 132, 255, 0.04) 0%, rgba(10, 132, 255, 0.02) 100%);
}
.frequency-section.visible {
  max-height: 260px;
  opacity: 1;
  transform: translateY(0);
}
.freq-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-top: 0.5px solid #e5e5ea;
  cursor: pointer;
}
.freq-option-label {
  font-size: 15px;
  color: #1c1c1e;
  font-weight: 600;
}
.freq-check {
  color: #007aff;
  display: none;
}
.freq-option input[type="radio"] {
  display: none;
}
.freq-option input[type="radio"]:checked ~ .freq-check {
  display: block;
}
.back-btn {
  cursor: pointer;
}
.form-section-title {
  font-size: 24px;
  font-weight: 700;
  color: #16202a;
  padding: 6px 0 0;
}
.form-section-copy {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.45;
  color: #74808d;
}
.user-edit-shell {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}
.edit-profile-hero {
  position: relative;
  overflow: hidden;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(22, 32, 42, 0.06);
  background:
    radial-gradient(circle at top right, rgba(10, 132, 255, 0.12) 0%, rgba(10, 132, 255, 0) 36%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 14px 30px rgba(10, 29, 50, 0.08);
}
.edit-profile-hero::before {
  content: "";
  position: absolute;
  inset: auto -28px -58px auto;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 200, 250, 0.18) 0%, rgba(90, 200, 250, 0) 72%);
  pointer-events: none;
}
.edit-profile-hero-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.edit-avatar {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #007aff 0%, #5ac8fa 100%);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(10, 132, 255, 0.24);
}
.edit-profile-label {
  font-size: 11px;
  font-weight: 700;
  color: #74808d;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.edit-profile-name {
  margin-top: 3px;
  font-size: 18px;
  font-weight: 700;
  color: #16202a;
}
.edit-profile-meta {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.edit-profile-pill {
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(22, 32, 42, 0.06);
}
.edit-profile-pill-label {
  font-size: 10px;
  font-weight: 700;
  color: #74808d;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.edit-profile-pill-value {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #16202a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.form-card {
  overflow: hidden;
  border: 1px solid rgba(22, 32, 42, 0.06);
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 14px 30px rgba(10, 29, 50, 0.08);
}
.form-row {
  display: flex;
  flex-direction: column;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(22, 32, 42, 0.06);
}
.form-row:last-child {
  border-bottom: none;
}
.form-row label {
  font-size: 11px;
  font-weight: 600;
  color: #8e8e93;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.form-row input {
  border: none;
  outline: none;
  font-size: 16px;
  font-weight: 600;
  color: #1c1c1e;
  font-family: inherit;
  background: transparent;
  padding: 2px 0 0;
  width: 100%;
}
.form-row input::placeholder {
  color: #c7c7cc;
}
.ui.error.message {
  display: none;
  background: #fff2f2;
  border: 1px solid #ffb3b3;
  border-radius: 10px;
  margin: 12px 0 0;
  padding: 10px 14px;
  font-size: 13px;
  color: #d00;
}
.ui.error.message:not(:empty) {
  display: block;
}
.submit-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 14px;
  background: linear-gradient(180deg, #0a84ff 0%, #007aff 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition:
    opacity 0.15s,
    transform 0.15s ease;
  box-shadow: 0 12px 24px rgba(10, 132, 255, 0.24);
}
.submit-btn:active {
  opacity: 0.88;
  transform: scale(0.992);
}
.cancel-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 14px;
  background: #fff;
  color: #007aff;
  border: 1px solid rgba(10, 132, 255, 0.12);
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.form-actions {
  display: grid;
  gap: 10px;
}
@media (min-width: 391px) {
  .form-actions {
    grid-template-columns: 1fr 1fr;
  }
}
@keyframes userEnter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}