:root {
  --app-sidebar: 16rem;
  --app-sidebar-rail: 4.75rem;
  --app-max: 90rem;
}

html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ts-color-text); background: var(--ts-color-canvas); }
a { color: inherit; }
button { font: inherit; }
:where(h1, h2, h3) {
  color: var(--ts-color-brand-petroleum);
  font-family: var(--ts-font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.035em;
}
.brand { display: inline-flex; align-items: center; }
.brand img { display: block; width: 10.5rem; height: auto; }
.eyebrow {
  margin: 0 0 var(--ts-space-2);
  color: var(--ts-color-brand-turquoise);
  font-size: var(--ts-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Landing */
.landing-body { background: var(--ts-color-canvas); }
.landing-container { width: min(100% - 2rem, 76rem); margin-inline: auto; }
.landing-header {
  position: sticky;
  z-index: 20;
  top: 0;
  background: var(--ts-color-surface);
  border-bottom: 1px solid var(--ts-color-border);
  backdrop-filter: blur(12px);
}
.landing-nav { display: flex; min-height: 5rem; align-items: center; justify-content: space-between; gap: 2rem; }
.landing-nav nav { display: flex; gap: 1.75rem; }
.landing-nav nav a { color: var(--ts-color-text-muted); font-size: var(--ts-text-sm); font-weight: 600; text-decoration: none; }
.landing-nav nav a:hover { color: var(--ts-color-brand-turquoise); }
.landing-access { display: flex; align-items: center; gap: 1rem; }
.client-access { color: var(--ts-color-brand-petroleum); font-size: var(--ts-text-sm); font-weight: 700; text-decoration: none; }
.client-access:hover { color: var(--ts-color-brand-turquoise); text-decoration: underline; }
.hero { overflow: hidden; padding: calc(var(--ts-space-16) + var(--ts-space-6)) 0 calc(var(--ts-space-16) + var(--ts-space-12)); background: var(--ts-color-brand-pastel-soft); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 5rem; }
.hero-lead { max-width: 38rem; margin: var(--ts-space-6) 0 0; color: var(--ts-color-text-muted); font-size: var(--ts-text-lg); }
.hero-actions { display: flex; gap: var(--ts-space-3); margin-top: var(--ts-space-8); }
.trust-row { display: flex; flex-wrap: wrap; gap: var(--ts-space-6); margin-top: var(--ts-space-8); color: var(--ts-color-text-muted); font-size: var(--ts-text-xs); }
.trust-row span { display: grid; gap: var(--ts-space-1); }
.trust-row strong { color: var(--ts-color-brand-petroleum); font-family: var(--ts-font-data); font-size: var(--ts-text-sm); }
.hero-visual { position: relative; }
.hero-photo-stack {
  position: relative;
  min-height: 31rem;
}
.hero-photo-stack img {
  display: block;
  object-fit: cover;
  border-radius: var(--ts-radius-editorial);
  box-shadow: var(--ts-shadow-elevated);
}
.hero-photo-main {
  width: 100%;
  min-height: 31rem;
  aspect-ratio: 1 / 1;
}
.floating-reading {
  position: absolute;
  left: -1.25rem;
  bottom: -1.25rem;
  display: grid;
  min-width: 14rem;
  gap: var(--ts-space-2);
}
.floating-reading .ts-status { width: max-content; }
.floating-reading small { color: var(--ts-color-text-muted); }
.landing-section { padding: calc(var(--ts-space-16) + var(--ts-space-8)) 0; }
.landing-section h2, .contact-section h2 {
  max-width: 44rem;
  margin: 0;
  font-size: clamp(var(--ts-title-lg), 4vw, var(--ts-display-md));
}
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ts-space-4); margin-top: var(--ts-space-12); }
.benefit-grid article { padding: var(--ts-space-8); }
.benefit-number { color: var(--ts-color-brand-coral); font-family: var(--ts-font-data); font-size: var(--ts-text-xs); font-weight: 700; }
.benefit-grid h3 { margin: var(--ts-space-8) 0 var(--ts-space-3); font-size: var(--ts-title-sm); }
.benefit-grid p { margin: 0; color: var(--ts-color-text-muted); }
.process-section { color: var(--ts-color-brand-pastel); background: var(--ts-color-brand-petroleum); }
.process-grid { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 5rem; }
.process-section h2 { color: var(--ts-color-surface); }
.process-section p:not(.eyebrow) { color: var(--ts-color-brand-pastel); font-size: var(--ts-text-lg); }
.process-section img { width: 100%; }
.process-visual-options {
  display: grid;
  gap: var(--ts-space-4);
}
.process-visual-options figure {
  margin: 0;
}
.process-visual-options img {
  display: block;
  width: 100%;
  background: var(--ts-color-surface);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--ts-radius-card);
  box-shadow: var(--ts-shadow-panel);
}
.contact-section { padding: calc(var(--ts-space-16) + var(--ts-space-8)) 0; background: var(--ts-color-brand-pastel-soft); }
.contact-card { display: grid; grid-template-columns: .8fr 1.2fr; gap: 5rem; padding: var(--ts-space-12); }
.contact-card > div > p:last-child { color: var(--ts-color-text-muted); font-size: var(--ts-text-lg); }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-form-wide { grid-column: 1 / -1; }
.contact-form small { color: var(--ts-color-text-muted); text-align: center; }
.landing-footer { padding: var(--ts-space-12) 0; color: var(--ts-color-brand-pastel-strong); background: var(--ts-color-brand-petroleum); }
.footer-grid { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 3rem; }
.footer-grid img { width: 10rem; }
.footer-grid p { margin: 0; }
.footer-grid div { display: flex; gap: 1.5rem; }
.footer-grid a { font-size: var(--ts-text-sm); text-decoration: none; }

/* Private applications */
.app-body { background: var(--ts-color-canvas); }
.app-layout { min-height: 100vh; }
.app-sidebar {
  position: fixed;
  z-index: 30;
  inset: 0 auto 0 0;
  display: flex;
  width: var(--app-sidebar-rail);
  flex-direction: column;
  padding: 1.25rem .75rem;
  color: var(--ts-color-brand-pastel);
  background: var(--ts-color-brand-petroleum);
  box-shadow: var(--ts-shadow-elevated);
  overflow-x: hidden;
  overflow-y: hidden;
  transition: width 180ms ease, padding 180ms ease;
}
.app-sidebar:hover,
.app-sidebar:focus-within,
.app-sidebar.is-expanded {
  width: var(--app-sidebar);
  padding-inline: 1.25rem;
}
.sidebar-head { display: flex; min-height: 3.25rem; align-items: center; justify-content: center; gap: var(--ts-space-3); overflow: hidden; }
.brand--light { position: relative; display: grid; width: 100%; min-width: 0; height: 3rem; place-items: center; padding: 0; }
.brand--light img { display: block; height: auto; }
.brand--light .brand-symbol {
  width: 3.35rem;
  opacity: 1;
  transform: scale(1);
  transition: opacity 140ms ease, transform 160ms ease;
}
.brand--light .brand-wordmark {
  position: absolute;
  left: .5rem;
  width: 9.5rem;
  opacity: 0;
  transform: translateX(-.35rem);
  transition: opacity 160ms ease, transform 160ms ease;
}
.app-sidebar:hover .brand--light,
.app-sidebar:focus-within .brand--light,
.app-sidebar.is-expanded .brand--light {
  opacity: 1;
  transform: translateX(0);
}
.app-sidebar:hover .brand-symbol,
.app-sidebar:focus-within .brand-symbol,
.app-sidebar.is-expanded .brand-symbol {
  opacity: 0;
  transform: scale(.9);
}
.app-sidebar:hover .brand-wordmark,
.app-sidebar:focus-within .brand-wordmark,
.app-sidebar.is-expanded .brand-wordmark {
  opacity: 1;
  transform: translateX(0);
}
.sidebar-area { margin: var(--ts-space-4) var(--ts-space-2) var(--ts-space-6); color: var(--ts-color-brand-signal); font-size: var(--ts-text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity 140ms ease; }
.app-sidebar:hover .sidebar-area,
.app-sidebar:focus-within .sidebar-area,
.app-sidebar.is-expanded .sidebar-area { opacity: 1; }
.sidebar-nav {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
  gap: .25rem;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: .15rem;
}
.sidebar-nav-rail,
.sidebar-nav-expanded {
  display: grid;
  gap: .25rem;
}
.sidebar-nav-expanded { display: none; }
.sidebar-nav a,
.sidebar-group-toggle {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: var(--ts-space-3);
  padding: .72rem;
  color: var(--ts-color-brand-pastel);
  border-radius: var(--ts-radius-control);
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--ts-text-sm);
  font-weight: 600;
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
.app-sidebar:hover .sidebar-nav a,
.app-sidebar:hover .sidebar-group-toggle,
.app-sidebar:focus-within .sidebar-nav a,
.app-sidebar:focus-within .sidebar-group-toggle,
.app-sidebar.is-expanded .sidebar-nav a,
.app-sidebar.is-expanded .sidebar-group-toggle {
  justify-content: flex-start;
  padding-inline: var(--ts-space-3);
}
.app-sidebar:hover .sidebar-nav-rail,
.app-sidebar:focus-within .sidebar-nav-rail,
.app-sidebar.is-expanded .sidebar-nav-rail { display: none; }
.app-sidebar:hover .sidebar-nav-expanded,
.app-sidebar:focus-within .sidebar-nav-expanded,
.app-sidebar.is-expanded .sidebar-nav-expanded { display: grid; }
.sidebar-section {
  display: grid;
  gap: .25rem;
  margin: .35rem 0;
}
.sidebar-section-title {
  margin: .2rem 0 .15rem;
  padding: 0 var(--ts-space-3);
  color: var(--ts-color-brand-signal);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sidebar-label {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-.25rem);
  transition: max-width 160ms ease, opacity 140ms ease, transform 160ms ease, visibility 0s linear 160ms;
}
.app-sidebar:hover .sidebar-label,
.app-sidebar:focus-within .sidebar-label,
.app-sidebar.is-expanded .sidebar-label {
  max-width: 11rem;
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition-delay: 40ms;
}
.sidebar-nav a:hover,
.sidebar-nav a.is-active,
.sidebar-group-toggle:hover,
.sidebar-group-toggle.is-active {
  color: var(--ts-color-surface);
  background: var(--ts-color-brand-turquoise);
}
.sidebar-nav a.is-active,
.sidebar-group-toggle.is-active { box-shadow: inset 3px 0 0 var(--ts-color-brand-signal); }
.nav-icon { width: 1.35rem; height: 1.35rem; flex: 0 0 1.35rem; fill: none; stroke: var(--ts-color-brand-signal); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav-icon--alarm { stroke: var(--ts-color-brand-coral); }
.sidebar-footer { display: grid; gap: var(--ts-space-2); margin-top: auto; padding: var(--ts-space-4) var(--ts-space-2) 0; border-top: 1px solid var(--ts-color-brand-turquoise); flex: 0 0 auto; overflow: hidden; opacity: 0; transition: opacity 140ms ease; }
.app-sidebar:hover .sidebar-footer,
.app-sidebar:focus-within .sidebar-footer,
.app-sidebar.is-expanded .sidebar-footer { opacity: 1; }
.sidebar-user { color: var(--ts-color-surface); font-size: var(--ts-text-sm); font-weight: 700; white-space: nowrap; }
.sidebar-footer a { color: var(--ts-color-brand-signal); font-size: var(--ts-text-xs); text-decoration: none; white-space: nowrap; }
.app-main { min-height: 100vh; margin-left: var(--app-sidebar-rail); }
.app-topbar {
  position: sticky;
  z-index: 15;
  top: 0;
  display: flex;
  min-height: 4.75rem;
  align-items: center;
  gap: 1rem;
  padding: 0 2rem;
  background: var(--ts-color-surface);
  border-bottom: 1px solid var(--ts-color-border);
  backdrop-filter: blur(12px);
}
.app-topbar > div { display: grid; gap: .1rem; }
.app-topbar strong { color: var(--ts-color-brand-petroleum); font-size: var(--ts-text-sm); }
.topbar-context { color: var(--ts-color-text-muted); font-size: var(--ts-text-xs); }
.system-health { margin-left: auto; }
.app-content { width: min(100%, var(--app-max)); margin-inline: auto; padding: 2rem; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; }
.page-heading h1 { margin: 0; font-size: clamp(var(--ts-title-md), 4vw, var(--ts-title-lg)); }
.page-heading p:last-child { margin: .55rem 0 0; color: var(--ts-color-text-muted); }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.metric-grid .ts-card { display: grid; gap: .25rem; min-height: 9.25rem; align-content: start; }
.metric-grid small { margin-top: auto; color: var(--ts-color-text-muted); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, .75fr); gap: 1rem; margin: 1rem 0; }
.dashboard-grid--single { grid-template-columns: minmax(0, 1fr); }
.alarm-dashboard-grid { grid-template-columns: minmax(0, 1fr); }
.panel { overflow: hidden; margin-top: var(--ts-space-4); padding: 0; }
.dashboard-grid > *, .admin-form-grid > *, .client-inline-detail > *, .client-detail-summary > * { min-width: 0; }
.dashboard-grid .panel { margin-top: 0; }
.ts-modal-backdrop {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2rem;
}
.ts-modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(18, 63, 74, .42);
  backdrop-filter: blur(3px);
}
.ts-modal {
  position: relative;
  z-index: 1;
  width: min(100%, 58rem);
  max-height: min(86vh, 52rem);
  overflow: auto;
  padding: 0;
  border-radius: var(--ts-radius-card);
  box-shadow: var(--ts-shadow-elevated);
}
.ts-modal .panel-header {
  position: sticky;
  z-index: 2;
  top: 0;
  background: linear-gradient(90deg, var(--ts-color-brand-pastel-soft), var(--ts-color-surface) 48%);
}
.ts-modal .panel-header h2 {
  font-family: var(--ts-font-display);
  font-size: var(--ts-title-sm);
  letter-spacing: 0;
}
.ts-modal-close {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  color: var(--ts-color-brand-petroleum);
  border: 1px solid var(--ts-color-border);
  border-radius: var(--ts-radius-control);
  background: var(--ts-color-surface);
  font-size: 1.65rem;
  line-height: 1;
  text-decoration: none;
}
.ts-modal-close:hover { color: var(--ts-color-brand-turquoise); border-color: var(--ts-color-brand-turquoise); }
.ts-modal-form-card {
  display: grid;
  gap: var(--ts-space-6);
  padding: 26px;
}
.ts-modal .form-flash {
  margin: 0;
}
.ts-modal-form-card .form-section-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.ts-modal-actions {
  align-items: center;
  justify-content: flex-end;
  gap: var(--ts-space-3);
  padding: var(--ts-space-8) 0 0;
}
.ts-modal-actions .ts-button {
  min-width: 12rem;
}
.panel-header { display: flex; min-height: 4.75rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--ts-color-border); }
.panel-header h2 { margin: 0; font-family: var(--ts-font-ui); font-size: var(--ts-text-md); letter-spacing: 0; }
.panel-header p { margin: var(--ts-space-1) 0 0; color: var(--ts-color-text-muted); font-size: var(--ts-text-xs); }
.panel-header > a { color: var(--ts-color-brand-turquoise); font-size: var(--ts-text-xs); font-weight: 700; text-decoration: none; }
.alarm-list { padding: .25rem 1.25rem; }
.alarm-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ts-space-3); padding: var(--ts-space-4) 0; border-bottom: 1px solid var(--ts-color-surface-secondary); }
.alarm-row:last-child { border: 0; }
.alarm-row strong { font-size: var(--ts-text-sm); }
.alarm-row p { margin: var(--ts-space-1) 0 0; color: var(--ts-color-text-muted); font-size: var(--ts-text-xs); }
.alarm-row time { color: var(--ts-color-text-muted); font-size: var(--ts-text-xs); }
.alarm-marker { display: grid; width: var(--ts-space-8); height: var(--ts-space-8); place-items: center; color: var(--ts-color-warning); background: var(--ts-color-warning-bg); border-radius: var(--ts-radius-control); }
.alarm-marker--critical { color: var(--ts-color-alarm); background: var(--ts-color-alarm-bg); }
.quick-panel { align-content: start; }
.quick-panel > button { display: flex; width: 100%; justify-content: space-between; padding: var(--ts-space-4); color: var(--ts-color-text); background: var(--ts-color-surface); border: 0; border-bottom: 1px solid var(--ts-color-surface-secondary); font-size: var(--ts-text-sm); font-weight: 600; text-align: left; cursor: pointer; }
.quick-panel > button:hover { color: var(--ts-color-brand-turquoise); background: var(--ts-color-canvas); }
.panel-filters { display: flex; gap: .3rem; }
.panel-filters .ts-button { min-height: auto; padding: var(--ts-space-2) var(--ts-space-3); font-size: var(--ts-text-xs); }
.ts-table td strong { display: block; font-size: var(--ts-text-sm); }
.ts-table td small { display: block; margin-top: var(--ts-space-1); color: var(--ts-color-text-muted); font-size: var(--ts-text-xs); }
.ts-table .ts-status {
  gap: var(--ts-space-2);
  padding: 0;
  color: var(--ts-color-text-muted);
  background: transparent;
  border-radius: 0;
  font-size: var(--ts-text-xs);
  font-weight: 750;
}
.ts-table .ts-status::before {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  background: var(--ts-color-text-muted);
  box-shadow: 0 0 0 4px var(--ts-color-surface-secondary);
}
.ts-table .ts-status--normal::before {
  background: var(--ts-color-normal);
  box-shadow: 0 0 0 4px var(--ts-color-normal-bg);
}
.ts-table .ts-status--warning::before {
  background: var(--ts-color-warning);
  box-shadow: 0 0 0 4px var(--ts-color-warning-bg);
}
.ts-table .ts-status--high::before {
  background: var(--ts-color-brand-coral);
  box-shadow: 0 0 0 4px var(--ts-color-brand-coral-soft);
}
.ts-table .ts-status--alarm::before {
  background: var(--ts-color-alarm);
  box-shadow: 0 0 0 4px var(--ts-color-alarm-bg);
}
.ts-table .ts-status--info::before {
  background: var(--ts-color-info);
  box-shadow: 0 0 0 4px var(--ts-color-info-bg);
}
.ts-table .ts-status--confirmed::before {
  background: #776A8A;
  box-shadow: 0 0 0 4px #E9E3F0;
}
.ts-table .ts-status--paused::before {
  background: var(--ts-color-paused);
  box-shadow: 0 0 0 4px var(--ts-color-paused-bg);
}
.ts-table .ts-status--inactive::before {
  background: var(--ts-color-inactive);
  box-shadow: 0 0 0 4px var(--ts-color-inactive-bg);
}
.service-summary { display: grid; gap: .35rem; justify-items: start; }
.service-summary small { color: var(--ts-color-text-muted); font-size: var(--ts-text-xs); }
.admin-form-grid { display: grid; gap: var(--ts-space-4); align-items: start; }
.form-card { padding: 24px; }
.entity-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  padding: 0;
}
.entity-form-sections { grid-template-columns: 1fr; }
.client-create-panel > summary {
  list-style: none;
  cursor: pointer;
}
.client-create-panel > summary::-webkit-details-marker { display: none; }
.client-create-panel .details-chevron { transition: transform var(--ts-transition-fast); }
.client-create-panel[open] .details-chevron { transform: rotate(90deg); }
.client-create-form { display: grid; }
.entity-form > .panel-header {
  min-height: 58px;
  padding: 15px 18px;
  background: linear-gradient(90deg, var(--ts-color-brand-pastel-soft), var(--ts-color-surface) 48%);
}
.entity-form > .panel-header h2 {
  font-family: var(--ts-font-display);
  font-size: var(--ts-title-sm);
}
.form-section {
  min-width: 0;
  margin: 0;
  padding: 18px;
  background: #fbfcfb;
  border: 1px solid var(--ts-color-border);
  border-radius: var(--ts-radius-card);
}
.form-section legend {
  padding: 0 8px;
  color: var(--ts-color-brand-petroleum);
  font-family: var(--ts-font-display);
  font-size: var(--ts-title-sm);
  font-weight: 700;
}
.form-section-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.form-section-grid > .ts-field,
.filter-bar > .ts-field { min-width: 0; }
.form-section .ts-field { gap: 7px; }
.form-section .ts-label { color: var(--ts-color-text); font-size: var(--ts-text-sm); font-weight: 650; }
.form-section .ts-control { min-height: var(--ts-control-height); padding-inline: 12px; font-size: var(--ts-text-md); }
.searchable-select {
  position: relative;
  min-width: 0;
}
.searchable-select.is-disabled {
  opacity: .68;
}
.searchable-select.is-disabled .searchable-select-list {
  display: none;
}
.searchable-select-list {
  position: fixed;
  z-index: 120;
  min-width: 0;
  max-height: min(20rem, calc(100vh - 1.5rem));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 4px;
  background: var(--ts-color-surface);
  border: 1px solid var(--ts-color-border);
  border-radius: var(--ts-radius-card);
  box-shadow: var(--ts-shadow-panel);
}
.searchable-select-option {
  display: block;
  width: 100%;
  padding: 9px 10px;
  color: var(--ts-color-text);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.searchable-select-option:hover,
.searchable-select-option:focus {
  background: var(--ts-color-brand-pastel-soft);
  outline: none;
}
.searchable-select-empty {
  padding: 9px 10px;
  color: var(--ts-color-text-muted);
  font-size: var(--ts-text-sm);
}
.searchable-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.form-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 4px 20px 20px; }
.form-actions .ts-button { min-height: var(--ts-control-height); padding-inline: var(--ts-space-6); font-size: var(--ts-text-md); }
.ts-field--full { grid-column: 1 / -1; }
.form-flash { margin-bottom: var(--ts-space-4); }
.form-flash--success { border-color: var(--ts-color-normal); background: var(--ts-color-normal-bg); }
.form-flash--error { border-color: var(--ts-color-alarm); background: var(--ts-color-alarm-bg); }
.empty-panel { display: grid; min-height: 16rem; place-items: center; gap: var(--ts-space-3); padding: var(--ts-space-6); color: var(--ts-color-text-muted); text-align: center; }
.filter-bar { display: grid; grid-template-columns: minmax(14rem, 1.2fr) minmax(12rem, .8fr) minmax(12rem, .8fr) auto; gap: var(--ts-space-4); align-items: end; padding: 20px; border-bottom: 1px solid var(--ts-color-surface-secondary); }
.filter-bar--compact { grid-template-columns: minmax(16rem, 1fr) minmax(14rem, .5fr) auto; }
.filter-bar--commercial {
  grid-template-columns:
    minmax(15rem, 1.35fr)
    minmax(11rem, .8fr)
    minmax(10rem, .7fr)
    minmax(12rem, .9fr)
    auto;
}
.filter-bar--graph {
  grid-template-columns: 1fr;
  align-items: stretch;
}
.graph-filter-main {
  display: grid;
  grid-template-columns: minmax(11rem, 1fr) minmax(11rem, 1fr) minmax(15rem, 1.35fr) minmax(11rem, 1fr);
  gap: var(--ts-space-4);
  align-items: end;
  width: 100%;
}
.graph-filter-main > .ts-field,
.graph-custom-fields > .ts-field {
  min-width: 0;
}
.graph-custom-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(11rem, 1fr));
  gap: var(--ts-space-4);
}
.graph-custom-fields[hidden] {
  display: none;
}
.graph-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ts-space-3);
}
.filter-actions--graph {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ts-space-3);
}
.graph-panel > .panel-header {
  min-height: 64px;
  padding: 16px 20px;
  background: linear-gradient(90deg, var(--ts-color-brand-pastel-soft), var(--ts-color-surface) 50%);
}
.graph-panel > .panel-header h2 {
  font-family: var(--ts-font-display);
  font-size: var(--ts-title-sm);
  font-weight: 700;
}
.graph-panel > .panel-header p {
  color: var(--ts-color-text-muted);
  font-size: var(--ts-text-xs);
}
.graph-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 1rem 0;
}
.graph-layout {
  grid-template-columns: minmax(0, 1.65fr) minmax(18rem, .85fr);
  align-items: stretch;
}
.graph-layout > .graph-panel {
  display: flex;
  height: 100%;
  flex-direction: column;
}
.graph-canvas-panel,
.graph-summary-panel {
  min-height: 100%;
}
.graph-canvas-wrap {
  flex: 1;
  padding: 20px;
}
.graph-header-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ts-space-2);
}
.temp-graph-svg {
  display: block;
  width: 100%;
  height: auto;
}
.temp-graph-bg {
  fill: #f8fcfb;
  stroke: var(--ts-color-border);
  stroke-width: 1;
}
.temp-graph-grid {
  stroke: #d8e6e4;
  stroke-width: 1;
}
.temp-graph-line {
  fill: none;
  stroke: var(--ts-color-brand-turquoise);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.temp-graph-area {
  fill: url(#temp-graph-fill);
}
.temp-graph-dot {
  fill: var(--ts-color-brand-petroleum);
  stroke: #fff;
  stroke-width: 1.5;
}
.temp-graph-dot--alert {
  fill: var(--ts-color-alarm);
}
.temp-graph-axis,
.temp-graph-threshold-label {
  fill: #6c8380;
  font-family: var(--ts-font-data);
  font-size: 12px;
}
.graph-threshold {
  stroke-width: 1.5;
  stroke-dasharray: 7 7;
}
.graph-threshold--min {
  stroke: #f29f5c;
}
.graph-threshold--max {
  stroke: #d96b6b;
}
.graph-summary-grid {
  flex: 1;
  grid-template-columns: 1fr;
  align-content: start;
}
.graph-summary-grid strong {
  display: block;
  margin-top: var(--ts-space-1);
  color: var(--ts-color-brand-petroleum);
  font-size: var(--ts-text-sm);
}
.graph-readings-table td {
  padding-top: 14px;
  padding-bottom: 14px;
  vertical-align: top;
}
.graph-mode-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ts-space-3);
}
.graph-mode-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 var(--ts-space-5);
  color: var(--ts-color-brand-petroleum);
  background: #edf5f4;
  border: 1px solid var(--ts-color-border);
  border-radius: 999px;
  cursor: pointer;
  font-size: var(--ts-text-sm);
  font-weight: 700;
}
.graph-mode-pill input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.graph-mode-pill.is-active {
  color: #fff;
  background: var(--ts-color-brand-petroleum);
  border-color: var(--ts-color-brand-petroleum);
}
.graph-realtime-layout {
  grid-template-columns: minmax(0, 1.15fr) minmax(19rem, .85fr);
  align-items: stretch;
}
.graph-realtime-dial-card {
  display: grid;
  gap: var(--ts-space-4);
  padding: var(--ts-space-5);
}
.graph-realtime-dial-wrap {
  display: grid;
  place-items: center;
}
.graph-gauge {
  display: block;
  width: min(100%, 29rem);
  height: auto;
}
.graph-gauge-track,
.graph-gauge-arc,
.graph-gauge-needle,
.graph-gauge-tick,
.graph-gauge-tick-mark,
.graph-gauge-center-ring {
  fill: none;
}
.graph-gauge-track {
  stroke: #d9e5e3;
  stroke-width: 16;
  stroke-linecap: round;
}
.graph-gauge-arc {
  stroke-linecap: round;
  stroke-width: 16;
}
.graph-gauge-arc--low { stroke: #72aee6; }
.graph-gauge-arc--normal { stroke: #46c3bb; }
.graph-gauge-arc--high { stroke: #d96b6b; }
.graph-gauge-tick { stroke: #b7c8c5; stroke-width: 2; }
.graph-gauge-tick-mark { stroke: #6c8380; stroke-width: 3; }
.graph-gauge-tick-label {
  fill: #6c8380;
  font-family: var(--ts-font-data);
  font-size: 12px;
  font-weight: 700;
}
.graph-gauge-needle {
  stroke: var(--ts-color-brand-petroleum);
  stroke-width: 4;
  stroke-linecap: round;
  transform-origin: 210px 220px;
  transition: transform 260ms ease, stroke 260ms ease, opacity 220ms ease;
}
.graph-gauge-needle.is-muted {
  opacity: .18;
}
.graph-gauge-center-ring {
  stroke: rgba(31, 70, 80, .14);
  stroke-width: 10;
}
.graph-gauge-center {
  fill: var(--ts-color-brand-petroleum);
}
.graph-gauge-value {
  fill: var(--ts-color-brand-petroleum);
  font-family: var(--ts-font-display);
  font-size: 42px;
  font-weight: 700;
}
.graph-gauge-unit {
  fill: #6c8380;
  font-family: var(--ts-font-data);
  font-size: 16px;
  font-weight: 700;
}
.graph-gauge-state {
  fill: #6c8380;
  font-family: var(--ts-font-data);
  font-size: 15px;
  font-weight: 700;
}
.graph-gauge-value--low { fill: #2f73c6; }
.graph-gauge-value--normal { fill: #1f8d86; }
.graph-gauge-value--high { fill: #c14d4d; }
.graph-gauge-value--warning { fill: #c1843f; }
.graph-gauge-value--muted { fill: #849794; }
.graph-realtime-summary {
  align-content: start;
}
.graph-realtime-hint {
  max-width: 26rem;
  margin-inline: auto;
  text-align: center;
}
.graph-realtime-panel [data-realtime-temperature] {
  font-size: var(--ts-title-sm);
}
.commercial-panel-header {
  min-height: 58px;
  padding: 15px 18px;
  background: linear-gradient(90deg, var(--ts-color-brand-pastel-soft), var(--ts-color-surface) 48%);
}
.commercial-panel-header h2 {
  font-family: var(--ts-font-display);
  font-size: var(--ts-title-sm);
  font-weight: 700;
}
.commercial-panel-header p {
  color: var(--ts-color-text-muted);
  font-size: var(--ts-text-xs);
}
.admin-home-metrics {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.admin-home-grid--split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-home-panel > .panel-header {
  min-height: 64px;
  padding: 16px 20px;
  background: linear-gradient(90deg, var(--ts-color-brand-pastel-soft), var(--ts-color-surface) 50%);
}
.admin-home-panel > .panel-header h2 {
  font-family: var(--ts-font-display);
  font-size: var(--ts-title-sm);
  font-weight: 700;
}
.admin-home-panel > .panel-header p {
  color: var(--ts-color-text-muted);
  font-size: var(--ts-text-xs);
}
.admin-home-row {
  align-items: start;
}
.admin-home-row small {
  display: block;
  margin-top: var(--ts-space-2);
  color: var(--ts-color-text-muted);
  font-size: var(--ts-text-xs);
}
.filter-actions { display: flex; flex-wrap: wrap; gap: var(--ts-space-3); align-items: end; }
.filter-actions .ts-button { min-height: var(--ts-control-height); padding-inline: var(--ts-space-4); }
.commercial-detail-card { gap: var(--ts-space-5); }
.commercial-row-link {
  display: grid;
  gap: 3px;
  padding: 4px 0;
}
.commercial-origin-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  color: var(--ts-color-brand-petroleum);
  background: var(--ts-color-brand-pastel-soft);
  border: 1px solid var(--ts-color-border);
  border-radius: var(--ts-radius-control);
  font-size: var(--ts-text-xs);
  font-weight: 700;
}
.commercial-next-step {
  display: grid;
  gap: 3px;
}
.commercial-next-step strong {
  display: block;
  font-size: var(--ts-text-sm);
  line-height: 1.45;
}
.commercial-next-step small {
  color: var(--ts-color-text-muted);
  font-size: var(--ts-text-xs);
}
.commercial-table td {
  padding-top: 14px;
  padding-bottom: 14px;
  vertical-align: top;
}
.commercial-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ts-space-4);
}
.commercial-detail-head strong {
  display: block;
  color: var(--ts-color-brand-petroleum);
  font-size: var(--ts-title-sm);
}
.commercial-detail-head p {
  margin: var(--ts-space-2) 0 0;
  color: var(--ts-color-text-muted);
  font-size: var(--ts-text-sm);
}
.commercial-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ts-space-4);
}
.commercial-detail-grid strong {
  display: block;
  margin-top: var(--ts-space-1);
  color: var(--ts-color-brand-petroleum);
  font-size: var(--ts-text-sm);
}
.commercial-detail-label {
  color: var(--ts-color-text-muted);
  font-size: var(--ts-text-xs);
  font-weight: 700;
  text-transform: uppercase;
}
.commercial-detail-text {
  margin: var(--ts-space-2) 0 0;
  color: var(--ts-color-text);
  font-size: var(--ts-text-sm);
  line-height: 1.55;
}
.alarm-filter-bar {
  grid-template-columns:
    minmax(12rem, 1fr)
    minmax(12rem, 1fr)
    minmax(11rem, .8fr)
    minmax(10rem, .7fr)
    minmax(10rem, .7fr)
    minmax(10rem, .7fr)
    auto;
  align-items: end;
  border-bottom: 0;
}
.alarm-filter-bar .ts-field { min-width: 0; }
.alarm-filter-bar .filter-actions { align-self: end; }
.alarm-filter-bar .filter-actions .ts-button { width: 100%; }
.alarm-filter-panel > .panel-header,
.alarm-panel > .panel-header {
  min-height: 58px;
  padding: 15px 18px;
  background: linear-gradient(90deg, var(--ts-color-brand-pastel-soft), var(--ts-color-surface) 48%);
}
.alarm-filter-panel > .panel-header h2,
.alarm-panel > .panel-header h2 {
  font-family: var(--ts-font-display);
  font-size: var(--ts-title-sm);
  font-weight: 700;
}
.audit-filter-bar {
  grid-template-columns: repeat(4, minmax(13rem, 1fr));
  align-items: end;
  border-bottom: 0;
}
.audit-filter-bar > .ts-field:last-of-type {
  grid-column: span 2;
}
.audit-filter-bar .filter-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.audit-filter-bar .filter-actions .ts-button {
  width: auto;
  min-width: 10rem;
}
.audit-panel > .panel-header {
  min-height: 64px;
  padding: 16px 20px;
  background: linear-gradient(90deg, var(--ts-color-brand-pastel-soft), var(--ts-color-surface) 50%);
}
.audit-panel > .panel-header h2 {
  font-family: var(--ts-font-display);
  font-size: var(--ts-title-md);
  font-weight: 750;
}
.audit-panel > .panel-header p {
  font-size: var(--ts-text-sm);
}
.audit-table {
  table-layout: fixed;
}
.audit-table th:nth-child(1) { width: 9rem; }
.audit-table th:nth-child(2) { width: 10rem; }
.audit-table th:nth-child(3) { width: 14rem; }
.audit-table th:nth-child(4) { width: 7rem; }
.audit-table th:nth-child(5) { width: 14rem; }
.audit-date .ts-data,
.audit-action .ts-data {
  white-space: normal;
  word-break: break-word;
}
.audit-action strong {
  display: block;
  color: var(--ts-color-text);
  font-size: var(--ts-text-sm);
}
.audit-action small {
  display: block;
  margin-top: var(--ts-space-1);
}
.audit-message {
  min-width: 0;
  white-space: normal;
}
.audit-message strong,
.audit-message small {
  display: block;
}
.audit-message strong {
  color: var(--ts-color-text);
  font-size: var(--ts-text-sm);
  line-height: 1.45;
}
.audit-message small {
  margin-top: var(--ts-space-1);
}
.audit-detail {
  margin-top: var(--ts-space-2);
}
.audit-detail summary {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0 var(--ts-space-3);
  color: var(--ts-color-brand-petroleum);
  background: var(--ts-color-canvas);
  border: 1px solid var(--ts-color-border);
  border-radius: var(--ts-radius-control);
  font-size: var(--ts-text-xs);
  font-weight: 750;
  cursor: pointer;
}
.audit-detail-card {
  margin-top: var(--ts-space-2);
  padding: var(--ts-space-3);
  background: var(--ts-color-canvas);
  border: 1px solid var(--ts-color-border);
  border-radius: var(--ts-radius-card);
}
.audit-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ts-space-3) var(--ts-space-4);
  margin: 0;
}
.audit-detail-grid div {
  min-width: 0;
}
.audit-detail-grid dt {
  margin: 0 0 var(--ts-space-1);
  color: var(--ts-color-text-muted);
  font-size: var(--ts-text-2xs);
  font-weight: 700;
  text-transform: uppercase;
}
.audit-detail-grid dd {
  margin: 0;
  color: var(--ts-color-text);
  font-size: var(--ts-text-xs);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.audit-detail pre {
  max-width: 100%;
  max-height: 12rem;
  margin: var(--ts-space-2) 0 0;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: var(--ts-space-3);
  color: var(--ts-color-text);
  background: var(--ts-color-canvas);
  border: 1px solid var(--ts-color-border);
  border-radius: var(--ts-radius-card);
  font-size: var(--ts-text-xs);
  line-height: 1.5;
}
.alarm-detail-panel .detail-empty { padding: 20px; }
.alarm-detail-body {
  display: grid;
  gap: var(--ts-space-4);
  padding: 20px;
}
.alarm-detail-body .login-demo-note { margin-top: 0; }
.alarm-notification-section {
  display: grid;
  gap: var(--ts-space-3);
  padding-top: var(--ts-space-2);
}
.alarm-notification-section h3 {
  margin: 0;
  color: var(--ts-color-brand-petroleum);
  font-family: var(--ts-font-display);
  font-size: var(--ts-title-sm);
}
.alarm-audit-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--ts-space-3);
}
.alarm-audit-metric {
  display: grid;
  gap: var(--ts-space-1);
  padding: var(--ts-space-3);
  background: var(--ts-color-surface);
  border: 1px solid var(--ts-color-border);
  border-radius: var(--ts-radius-card);
}
.alarm-audit-metric span {
  color: var(--ts-color-text-muted);
  font-size: var(--ts-text-2xs);
  font-weight: 700;
  text-transform: uppercase;
}
.alarm-audit-metric strong {
  color: var(--ts-color-text);
  font-size: var(--ts-title-sm);
}
.notification-timeline {
  display: grid;
  gap: var(--ts-space-2);
}
.notification-event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ts-space-3);
  align-items: start;
  padding: var(--ts-space-3);
  background: var(--ts-color-surface);
  border: 1px solid var(--ts-color-border);
  border-radius: var(--ts-radius-card);
}
.notification-event--muted {
  background: var(--ts-color-canvas);
}
.notification-event strong {
  display: block;
  color: var(--ts-color-text);
  font-size: var(--ts-text-sm);
}
.notification-event p,
.notification-event small {
  display: block;
  margin: var(--ts-space-1) 0 0;
  color: var(--ts-color-text-muted);
  font-size: var(--ts-text-xs);
}
.client-list-panel,
.client-detail-panel { margin-top: var(--ts-space-4); }
.client-detail-panel { display: none; }
.ts-table-wrap { position: relative; overflow-x: auto; overflow-y: visible; }
.client-table tr.is-selected td { background: var(--ts-color-brand-pastel-soft); }
.client-row-link { display: block; color: inherit; text-decoration: none; }
.client-row-link:hover strong { color: var(--ts-color-brand-turquoise); }
.client-table > thead > tr > th:last-child,
.client-table > tbody > tr:not(.client-inline-detail-row) > td:last-child {
  text-align: center;
}
.table-actions {
  position: relative;
  display: flex;
  width: 100%;
  justify-content: center;
  padding: 2px 4px;
}
.table-actions .ts-button { min-height: auto; padding: var(--ts-space-2) var(--ts-space-3); font-size: var(--ts-text-xs); }
.table-actions-trigger {
  min-width: 2.6rem;
  padding-inline: 0;
  font-size: 1.35rem;
  line-height: 1;
}
.table-actions-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 6px);
  left: 50%;
  display: grid;
  min-width: 12rem;
  padding: 6px;
  background: var(--ts-color-surface);
  border: 1px solid var(--ts-color-border);
  border-radius: 8px;
  box-shadow: var(--ts-shadow-panel);
  transform: translateX(-50%);
}
.table-actions-menu[hidden] {
  display: none;
}
.table-actions-form {
  margin: 0;
}
.table-actions-item {
  display: flex;
  width: 100%;
  min-height: 2.35rem;
  align-items: center;
  padding: .55rem .7rem;
  color: var(--ts-color-text);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: var(--ts-text-xs);
  font-weight: 650;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.table-actions-item:hover {
  color: var(--ts-color-brand-petroleum);
  background: var(--ts-color-brand-pastel-soft);
}
.status-cell { display: inline-flex; align-items: center; gap: var(--ts-space-2); color: var(--ts-color-text-muted); font-size: var(--ts-text-xs); font-weight: 750; }
.status-square {
  display: inline-block;
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  background: var(--ts-color-text-muted);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--ts-color-surface-secondary);
}
.status-square.status-ok { background: var(--ts-color-normal); box-shadow: 0 0 0 4px var(--ts-color-normal-bg); }
.status-square.status-locales,
.status-square.status-warning { background: var(--ts-color-warning); box-shadow: 0 0 0 4px var(--ts-color-warning-bg); }
.status-square.status-heladeras { background: var(--ts-color-equipment-paused); box-shadow: 0 0 0 4px var(--ts-color-equipment-paused-bg); }
.status-square.status-paused { background: var(--ts-color-paused); box-shadow: 0 0 0 4px var(--ts-color-paused-bg); }
.status-square.status-suspended,
.status-square.status-alarm { background: var(--ts-color-alarm); box-shadow: 0 0 0 4px var(--ts-color-alarm-bg); }
.status-square.status-no-data { background: var(--ts-color-text-muted); box-shadow: 0 0 0 4px var(--ts-color-inactive-bg); }
.status-square.status-heladeras + .status-text { color: var(--ts-color-equipment-paused); }
.client-inline-detail-row > td { padding: 0; background: var(--ts-color-canvas); }
.client-inline-detail { display: grid; gap: var(--ts-space-5); padding: 24px; }
.client-detail-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ts-space-5); }
.locations-tree { display: grid; gap: var(--ts-space-4); }
.location-tree-card { display: grid; gap: var(--ts-space-4); padding: var(--ts-space-4); background: var(--ts-color-surface); border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-card); }
.location-tree-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ts-space-4); }
.location-tree-card h3 { margin: var(--ts-space-2) 0 var(--ts-space-1); font-size: var(--ts-title-sm); }
.location-tree-card p { margin: 0; color: var(--ts-color-text-muted); font-size: var(--ts-text-sm); }
.location-manager-note { display: grid; gap: var(--ts-space-1); min-width: 12rem; color: var(--ts-color-text-muted); font-size: var(--ts-text-xs); text-align: right; }
.location-manager-note strong { color: var(--ts-color-text); font-size: var(--ts-text-sm); }
.fridge-tree { display: grid; border-top: 1px solid var(--ts-color-surface-secondary); }
.fridge-tree-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, auto); gap: var(--ts-space-4); align-items: center; padding: var(--ts-space-3) 0; border-bottom: 1px solid var(--ts-color-surface-secondary); }
.fridge-tree-row strong { display: block; color: var(--ts-color-brand-petroleum); font-size: var(--ts-text-sm); }
.fridge-tree-row span { color: var(--ts-color-text-muted); font-size: var(--ts-text-xs); }
.fridge-tree-status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ts-space-3); align-items: center; }
.device-chip { display: inline-flex; align-items: center; gap: var(--ts-space-2); padding: var(--ts-space-2) var(--ts-space-3); color: var(--ts-color-brand-petroleum); background: var(--ts-color-brand-pastel-soft); border-radius: var(--ts-radius-control); font-size: var(--ts-text-xs); font-weight: 700; }
.client-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ts-space-4); padding: 20px; }
.detail-list { display: grid; gap: var(--ts-space-3); margin: 0; }
.detail-list div { display: grid; gap: var(--ts-space-1); padding-bottom: var(--ts-space-3); border-bottom: 1px solid var(--ts-color-surface-secondary); }
.detail-list div:last-child { padding-bottom: 0; border-bottom: 0; }
.detail-list dt { color: var(--ts-color-text-muted); font-size: var(--ts-text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.detail-list dd { margin: 0; color: var(--ts-color-text); font-size: var(--ts-text-sm); }
.detail-empty { margin: 0; color: var(--ts-color-text-muted); font-size: var(--ts-text-sm); }
.manual-layout { display: grid; gap: var(--ts-space-6); }
.manual-section { display: grid; gap: var(--ts-space-4); padding: var(--ts-space-5); }
.manual-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ts-space-4); }
.manual-block { display: grid; gap: var(--ts-space-3); }
.manual-block h3 { margin: 0; font-size: var(--ts-title-sm); }
.manual-block > p { margin: 0; color: var(--ts-color-text-muted); font-size: var(--ts-text-sm); }
.manual-list { display: grid; gap: var(--ts-space-2); margin: 0; }
.manual-item { display: grid; grid-template-columns: minmax(8rem, auto) minmax(0, 1fr); gap: var(--ts-space-3); align-items: start; padding: var(--ts-space-3); background: var(--ts-color-surface); border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-card); }
.manual-item dd { margin: 0; color: var(--ts-color-text-muted); font-size: var(--ts-text-sm); }
.manual-status-cell { display: inline-flex; width: max-content; align-items: center; gap: .5rem; color: var(--ts-color-brand-petroleum); font-size: var(--ts-text-xs); font-weight: 800; }

/* Client portal */
.client-heading { padding: var(--ts-space-6); background: var(--ts-color-brand-pastel-soft); border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-panel); }
.priority-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--ts-space-4);
  padding: var(--ts-space-6);
}
.priority-icon { display: grid; width: var(--ts-control-height); height: var(--ts-control-height); place-items: center; color: var(--ts-color-alarm); background: var(--ts-color-alarm-bg); border-radius: var(--ts-radius-control); }
.priority-alert h2 { margin: var(--ts-space-3) 0 var(--ts-space-2); }
.priority-alert p { margin: 0; color: var(--ts-color-text-muted); }
.suggested-action { display: grid; gap: var(--ts-space-1); margin-top: var(--ts-space-4); padding: var(--ts-space-3); background: var(--ts-color-canvas); border-radius: var(--ts-radius-control); font-size: var(--ts-text-xs); }
.suggested-action span { color: var(--ts-color-text-muted); }
.telegram-link-code {
  width: max-content;
  margin: 0 0 var(--ts-space-3);
  padding: var(--ts-space-3) var(--ts-space-4);
  color: var(--ts-color-brand-petroleum);
  background: var(--ts-color-brand-pastel-soft);
  border: 1px solid var(--ts-color-border);
  border-radius: var(--ts-radius-control);
  font-size: var(--ts-title-sm);
  font-weight: 800;
  letter-spacing: .06em;
}
.telegram-qr-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ts-space-4);
  align-items: center;
}
.telegram-qr {
  display: block;
  width: 260px;
  max-width: 100%;
  height: auto;
  padding: var(--ts-space-3);
  background: var(--ts-color-surface);
  border: 1px solid var(--ts-color-border);
  border-radius: var(--ts-radius-card);
}
.telegram-link-actions {
  flex-wrap: wrap;
  align-items: center;
  padding-top: var(--ts-space-4);
}
.telegram-instructions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ts-space-3);
  align-items: start;
}
.telegram-paper-icon {
  width: 2rem;
  height: 2rem;
  fill: none;
  stroke: var(--ts-color-brand-turquoise);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.telegram-instructions p { margin: 0; color: var(--ts-color-text-muted); font-size: var(--ts-text-sm); }
.profile-telegram-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ts-space-4);
  padding: 0 20px 20px;
}
.profile-telegram-grid .form-card { margin: 0; }
.profile-telegram-grid .form-actions { padding: var(--ts-space-4) 0 0; }
.client-home-heading h1 { text-transform: none; }
.client-home-panel { margin-top: var(--ts-space-7); }
.client-home-panel > .panel-header {
  min-height: 58px;
  padding: 15px 18px;
  background: linear-gradient(90deg, var(--ts-color-brand-pastel-soft), var(--ts-color-surface) 48%);
}
.client-home-panel > .panel-header h2 {
  font-family: var(--ts-font-display);
  font-size: var(--ts-title-sm);
  font-weight: 700;
}
.client-location-sections { display: grid; gap: var(--ts-space-5); padding: var(--ts-space-4); }
.client-location-section {
  display: grid;
  gap: var(--ts-space-4);
  padding-bottom: var(--ts-space-5);
  border-bottom: 1px solid var(--ts-color-surface-secondary);
}
.client-location-section:last-child { padding-bottom: 0; border-bottom: 0; }
.client-location-section > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ts-space-4);
}
.client-location-section h3 { margin: 0; font-size: var(--ts-title-sm); }
.client-location-section p { margin: var(--ts-space-1) 0 0; color: var(--ts-color-text-muted); font-size: var(--ts-text-xs); }
.equipment-card .ts-button { width: max-content; min-height: auto; padding: 0; font-size: var(--ts-text-xs); }
.equipment-card-note { color: var(--ts-color-text-muted); font-size: var(--ts-text-xs); }
.alarm-history-list { display: grid; padding: var(--ts-space-4); }
.alarm-history-item {
  display: grid;
  grid-template-columns: minmax(7rem, auto) minmax(0, 1fr) auto;
  gap: var(--ts-space-4);
  align-items: start;
  padding: var(--ts-space-4) 0;
  border-bottom: 1px solid var(--ts-color-surface-secondary);
}
.alarm-history-item:first-child { padding-top: 0; }
.alarm-history-item:last-child { padding-bottom: 0; border-bottom: 0; }
.alarm-history-item strong { display: block; color: var(--ts-color-brand-petroleum); font-size: var(--ts-text-sm); }
.alarm-history-item p { margin: var(--ts-space-1) 0 0; color: var(--ts-color-text-muted); font-size: var(--ts-text-xs); }
.alarm-history-item time { white-space: nowrap; }
.client-metrics { grid-template-columns: 1.25fr 1fr 1fr; margin: 1.25rem 0 1.75rem; }
.summary-word { margin: var(--ts-space-3) 0; color: var(--ts-color-warning); font: 700 var(--ts-title-sm)/1.2 var(--ts-font-data); }
.location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem; }
.location-card { padding: var(--ts-space-6); }
.location-top { display: flex; justify-content: space-between; gap: 1rem; }
.location-card h3 { margin: var(--ts-space-3) 0 var(--ts-space-1); font-size: var(--ts-title-sm); }
.location-card p { margin: 0; color: var(--ts-color-text-muted); font-size: var(--ts-text-xs); }
.location-top > strong { color: var(--ts-color-text-muted); font-size: var(--ts-text-xs); white-space: nowrap; }
.equipment-summary { display: flex; align-items: center; gap: var(--ts-space-4); margin: var(--ts-space-4) 0; padding: var(--ts-space-3) 0; border-block: 1px solid var(--ts-color-surface-secondary); color: var(--ts-color-text-muted); font-size: var(--ts-text-xs); }
.location-card > a { width: max-content; padding: 0; font-size: var(--ts-text-xs); }
.equipment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 1rem; }
.equipment-card { display: grid; gap: var(--ts-space-4); padding: var(--ts-space-6); }
.equipment-card h3 { margin: var(--ts-space-3) 0 var(--ts-space-1); font-size: var(--ts-title-sm); }
.equipment-card p, .equipment-card small { margin: 0; color: var(--ts-color-text-muted); font-size: var(--ts-text-xs); }
.section-placeholder { display: grid; min-height: 31rem; place-items: center; padding: var(--ts-space-8); text-align: center; }
.section-placeholder__content { max-width: 35rem; }
.section-placeholder__symbol { display: grid; width: var(--ts-space-16); height: var(--ts-space-16); margin: 0 auto var(--ts-space-6); place-items: center; color: var(--ts-color-brand-turquoise); background: var(--ts-color-brand-pastel-soft); border-radius: var(--ts-radius-panel); }
.placeholder-icon { width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.section-placeholder h1 { margin: 0; font-size: var(--ts-title-lg); }
.section-placeholder p { margin: .75rem 0 1.5rem; color: var(--ts-color-text-muted); }
.ts-control-with-action { display: grid; grid-template-columns: minmax(0, 1fr) 3.25rem; gap: .55rem; align-items: stretch; }
.ts-control-with-action .ts-control { min-width: 0; }
.ts-button--icon { display: inline-grid; min-width: 3.25rem; padding-inline: 0; place-items: center; font-size: 1.25rem; line-height: 1; }

/* Login */
.login-body { min-height: 100vh; background: var(--ts-color-surface); }
.login-layout { display: grid; min-height: 100vh; grid-template-columns: minmax(22rem, .9fr) minmax(30rem, 1.1fr); }
.login-brand-panel { display: flex; min-height: 100vh; flex-direction: column; padding: var(--ts-space-12); color: var(--ts-color-brand-pastel); background: var(--ts-color-brand-petroleum); }
.login-body--clientes .login-brand-panel { background: var(--ts-color-brand-turquoise); }
.login-brand-copy { max-width: 32rem; margin: auto 0; }
.login-brand-copy .eyebrow { color: var(--ts-color-brand-signal); }
.login-brand-copy h1 { margin: 0; color: var(--ts-color-surface); font-size: clamp(var(--ts-title-lg), 5vw, var(--ts-display-lg)); }
.login-brand-copy > p:last-child { max-width: 30rem; margin: var(--ts-space-6) 0 0; color: var(--ts-color-brand-pastel); font-size: var(--ts-text-lg); }
.login-brand-detail { display: flex; align-items: center; gap: var(--ts-space-3); color: var(--ts-color-brand-pastel); font-size: var(--ts-text-xs); font-weight: 700; }
.login-detail-icon { width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--ts-color-brand-signal); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.login-form-panel { display: grid; min-height: 100vh; place-items: center; padding: var(--ts-space-12); background: var(--ts-color-canvas); }
.login-form-wrap { width: min(100%, 29rem); }
.login-body--recovery .login-form-panel,
.login-body--password-create .login-form-panel { place-items: center start; }
.login-body--recovery .login-form-wrap,
.login-body--password-create .login-form-wrap { width: min(100%, 34rem); margin-left: clamp(0rem, 3vw, 2.75rem); }
.login-back { display: inline-block; margin-bottom: var(--ts-space-12); color: var(--ts-color-text-muted); font-size: var(--ts-text-xs); font-weight: 600; text-decoration: none; }
.login-back:hover { color: var(--ts-color-brand-turquoise); }
.login-heading-icon { display: grid; width: var(--ts-display-lg); height: var(--ts-display-lg); margin-bottom: var(--ts-space-6); place-items: center; color: var(--ts-color-brand-turquoise); background: var(--ts-color-brand-pastel-soft); border-radius: var(--ts-radius-panel); }
.login-user-icon { width: 1.7rem; height: 1.7rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.login-heading h2 { margin: 0; font-size: var(--ts-title-lg); }
.login-heading > p:last-child { margin: .65rem 0 0; color: var(--ts-color-text-muted); }
.login-form { display: grid; gap: 1.15rem; margin-top: 2rem; }
.login-options { display: flex; align-items: center; justify-content: space-between; gap: var(--ts-space-4); color: var(--ts-color-text-muted); font-size: var(--ts-text-xs); }
.login-options a { color: var(--ts-color-brand-turquoise); font-weight: 700; text-decoration: none; }
.login-check { display: inline-flex; align-items: center; gap: .45rem; }
.login-check input { accent-color: var(--ts-color-brand-turquoise); }
.login-submit { width: 100%; }
.login-demo-note { margin-top: 0; }
.login-help { display: flex; margin-top: var(--ts-space-8); }
.login-help div { display: grid; gap: .25rem; }
.login-help strong { font-size: var(--ts-text-sm); }
.login-help span { color: var(--ts-color-text-muted); font-size: var(--ts-text-xs); }
.auth-help-card { margin-top: var(--ts-space-8); }
.auth-inline-actions { display: flex; flex-wrap: wrap; gap: var(--ts-space-3); margin-top: var(--ts-space-8); }

@media (max-width: 70rem) {
  .hero-grid { gap: 2.5rem; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-home-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .graph-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .equipment-grid { grid-template-columns: 1fr 1fr; }
  .alarm-filter-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .alarm-filter-bar .filter-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .alarm-filter-bar .filter-actions .ts-button { width: auto; }
}

@media (max-width: 62rem) {
  .graph-filter-main,
  .graph-custom-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 54rem) {
  .landing-nav nav { display: none; }
  .hero { padding-top: 3.5rem; }
  .hero-grid, .process-grid, .contact-card { grid-template-columns: 1fr; }
  .hero-visual { max-width: 38rem; }
  .hero-photo-stack { min-height: auto; }
  .hero-photo-main { min-height: 23rem; }
  .benefit-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid div { flex-wrap: wrap; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .admin-home-grid--split { grid-template-columns: 1fr; }
  .admin-form-grid { grid-template-columns: 1fr; }
  .manual-grid { grid-template-columns: 1fr; }
  .location-grid { grid-template-columns: 1fr; }
  .filter-bar--graph { grid-template-columns: 1fr; }
  .graph-filter-main,
  .graph-custom-fields { grid-template-columns: 1fr; }
  .graph-layout { grid-template-columns: 1fr; }
  .graph-realtime-layout { grid-template-columns: 1fr; }
  .filter-bar--commercial { grid-template-columns: 1fr; }
  .commercial-detail-grid { grid-template-columns: 1fr; }
  .alarm-audit-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .alarm-history-item { grid-template-columns: 1fr; }
  .alarm-history-item time { white-space: normal; }
  .login-layout { grid-template-columns: 1fr; }
  .login-brand-panel { min-height: auto; padding: var(--ts-space-8); }
  .login-brand-copy { margin: var(--ts-space-8) 0 0; }
  .login-brand-copy h1 { font-size: var(--ts-title-lg); }
  .login-brand-copy > p:last-child,
  .login-brand-detail { display: none; }
  .login-form-panel { min-height: auto; padding: var(--ts-space-8) var(--ts-space-6); }
  .login-body--recovery .login-form-wrap,
  .login-body--password-create .login-form-wrap { margin-left: 0; }
  .login-back { margin-bottom: var(--ts-space-8); }
  .ts-modal-form-card .form-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 38rem) {
  .landing-nav { min-height: 4.5rem; }
  .landing-access .ts-button { display: none; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-visual > img { min-height: 23rem; }
  .floating-reading { left: .75rem; bottom: -.75rem; }
  .contact-card { gap: 2rem; padding: 1.25rem; }
  .contact-form { grid-template-columns: 1fr; }
  .contact-form-wide { grid-column: auto; }
  .app-topbar { padding: 0 1rem; }
  .system-health { display: none; }
  .app-content { padding: 1rem; }
  .page-heading { align-items: stretch; flex-direction: column; }
  .metric-grid, .client-metrics, .equipment-grid { grid-template-columns: 1fr; }
  .admin-home-metrics { grid-template-columns: 1fr; }
  .graph-metrics { grid-template-columns: 1fr; }
  .alarm-audit-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-detail-summary,
  .client-detail-grid,
  .profile-telegram-grid { grid-template-columns: 1fr; }
  .telegram-qr-wrap { grid-template-columns: 1fr; }
  .filter-bar { grid-template-columns: 1fr; }
  .filter-actions { align-items: stretch; flex-direction: column; }
  .filter-actions .ts-button,
  .form-actions .ts-button { width: 100%; min-width: 0; }
  .location-tree-card > header,
  .fridge-tree-row { grid-template-columns: 1fr; flex-direction: column; }
  .location-manager-note { text-align: left; }
  .priority-alert { grid-template-columns: auto 1fr; }
  .priority-alert > button { grid-column: 1 / -1; }
  .alarm-row { grid-template-columns: auto 1fr; }
  .alarm-row time { grid-column: 2; }
  .panel-header { align-items: flex-start; flex-direction: column; }
  .ts-modal-backdrop { padding: .75rem; }
  .ts-modal { max-height: 92vh; }
  .ts-modal .panel-header { align-items: center; flex-direction: row; }
  .ts-modal-form-card { padding: 18px; }
  .ts-modal-form-card .form-section-grid { grid-template-columns: 1fr; gap: 16px; }
  .ts-modal-actions { align-items: stretch; flex-direction: column; }
  .ts-modal-actions .ts-button { width: 100%; min-width: 0; }
  .panel-filters { flex-wrap: wrap; }
  .form-section { grid-template-columns: 1fr; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .auth-inline-actions { align-items: stretch; flex-direction: column; }
  .auth-inline-actions .ts-button { width: 100%; }
}