/* ══════════════════════════════════════════════════════════════════════════════
   HVAC STAT — style.css
   Paleta HVAC: Hielo #00c6d7 · Calor #ff6b2b · Ventilación #4fc8a0 · Otros #8b5cf6
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── VARIABLES ── */
:root {
  --bg:        #0a0f14;
  --panel:     #0d1620;
  --border:    #1a2d40;
  --accent1:   #00c6d7;
  --accent2:   #ff6b2b;
  --accent3:   #4fc8a0;
  --accent4:   #8b5cf6;
  --text:      #c8dce8;
  --muted:     #4a6070;
  --selected:  #0e2030;
  --row-hover: #111c28;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── BODY ── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ══════════════════════════════════════════════════════════════════════════════
   LOADING OVERLAY
   ══════════════════════════════════════════════════════════════════════════════ */
.loading-overlay {
  position: fixed; inset: 0;
  background: rgba(10,15,20,.94);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 100; gap: 14px;
  transition: opacity .4s;
}
.loading-overlay.hidden { opacity: 0; pointer-events: none; }
.loading-spinner {
  width: 38px; height: 38px;
  border: 2px solid var(--border);
  border-top-color: var(--accent1);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.loading-text {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px; letter-spacing: 3px; color: var(--accent1);
}
.loading-sub { font-size: 10px; color: var(--muted); letter-spacing: 1px; }

/* ══════════════════════════════════════════════════════════════════════════════
   ERROR BANNER
   ══════════════════════════════════════════════════════════════════════════════ */
.error-banner {
  display: none; align-items: center; gap: 10px;
  padding: 7px 18px;
  background: rgba(255,107,43,.07);
  border-bottom: 1px solid rgba(255,107,43,.25);
  font-size: 10px; color: var(--accent2);
  letter-spacing: 1px; flex-shrink: 0;
}
.error-banner.visible { display: flex; }
.retry-btn {
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid var(--accent2);
  background: transparent; color: var(--accent2);
  font-family: inherit; font-size: 10px;
  cursor: pointer; border-radius: 3px;
  transition: all .2s;
}
.retry-btn:hover { background: rgba(255,107,43,.15); }

/* ══════════════════════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════════════════════ */
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 22px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, #0d1620, #0a131e);
  flex-shrink: 0;
}
.logo { display: flex; align-items: center; gap: 11px; }
.logo-icon {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center; font-size: 38px;
}
.logo-text {
  font-family: 'Rajdhani', sans-serif;
  font-size: 19px; font-weight: 700; letter-spacing: 4px; color: var(--accent1);
}
.logo-text span { color: var(--accent2); }
.logo-sub { color: var(--muted); font-size: 9px; letter-spacing: 2px; }
.header-right { display: flex; align-items: center; gap: 16px; }
.header-meta {
  color: var(--muted); font-size: 10px;
  letter-spacing: 1px; text-align: right; line-height: 1.6;
}
.api-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; letter-spacing: 1px; color: var(--muted);
  padding: 4px 10px;
  border: 1px solid var(--border); border-radius: 3px;
}
.api-dot {
  width: 7px; height: 7px;
  border-radius: 50%; background: var(--muted); flex-shrink: 0;
}
.api-dot.online  { background: var(--accent3); animation: pulse 2s infinite; }
.api-dot.loading { background: var(--accent1); animation: pulse .5s infinite; }
.api-dot.error   { background: var(--accent2); }

/* ══════════════════════════════════════════════════════════════════════════════
   MAIN GRID (3 COLUMNAS)
   ══════════════════════════════════════════════════════════════════════════════ */
.main-grid {
  display: grid;
  grid-template-columns: 255px 1fr 255px;
  flex: 1; min-height: 0;
}
.panel {
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.panel:last-child { border-right: none; }
.panel-header {
  padding: 11px 15px 9px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,198,215,.04);
  flex-shrink: 0;
}
.panel-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase; color: var(--accent1);
}
.panel-sub { color: var(--muted); font-size: 9px; letter-spacing: 1px; margin-top: 2px; }
.panel-body {
  flex: 1; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.panel-body::-webkit-scrollbar { width: 4px; }
.panel-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ══════════════════════════════════════════════════════════════════════════════
   COL 1 — CLIENTES
   ══════════════════════════════════════════════════════════════════════════════ */
.search-box {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.search-box input {
  width: 100%; background: transparent;
  border: 1px solid var(--border);
  padding: 5px 9px; color: var(--text);
  font-family: inherit; font-size: 11px;
  border-radius: 3px; outline: none;
  transition: border-color .2s;
}
.search-box input:focus        { border-color: var(--accent1); }
.search-box input::placeholder { color: var(--muted); }

.all-clients-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 15px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  background: rgba(0,198,215,.06);
  transition: background .15s; flex-shrink: 0;
}
.all-clients-btn:hover  { background: rgba(0,198,215,.1); }
.all-clients-btn.active {
  background: rgba(0,198,215,.14);
  border-left: 3px solid var(--accent1);
}
.all-clients-btn span {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600; font-size: 12px;
  color: var(--accent1); letter-spacing: 1px;
}
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%; background: var(--accent1);
  animation: pulse 2s infinite; flex-shrink: 0;
}
.client-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 15px; cursor: pointer;
  border-bottom: 1px solid rgba(26,45,64,.5);
  transition: background .15s; position: relative;
}
.client-item:hover  { background: var(--row-hover); }
.client-item.active {
  background: var(--selected);
  border-left: 3px solid var(--accent1);
}
.client-avatar {
  width: 27px; height: 27px; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700; font-size: 10px; flex-shrink: 0;
}
.client-info { min-width: 0; flex: 1; }
.client-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600; font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #d8eaf4;
}
.client-count { color: var(--muted); font-size: 9px; margin-top: 1px; }
.client-badge {
  margin-left: auto; font-size: 9px;
  padding: 2px 5px; border-radius: 10px;
  font-weight: 500; flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   COL 2 — GRÁFICA
   ══════════════════════════════════════════════════════════════════════════════ */
.chart-controls {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 15px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap; flex-shrink: 0;
}
.ctrl-label { color: var(--muted); font-size: 9px; letter-spacing: 1px; }
.pill {
  padding: 3px 9px; border-radius: 20px; font-size: 10px;
  cursor: pointer; border: 1px solid var(--border);
  color: var(--muted); transition: all .2s;
  font-family: inherit; background: transparent;
}
.pill[data-f="all"].active   { background: var(--accent1); border-color: var(--accent1); color: var(--bg); }
.pill[data-f="prev"].active  { background: var(--accent3); border-color: var(--accent3); color: var(--bg); }
.pill[data-f="corr"].active  { background: var(--accent2); border-color: var(--accent2); color: var(--bg); }
.pill[data-f="otros"].active { background: var(--accent4); border-color: var(--accent4); color: var(--bg); }
.filter-info { margin-left: auto; font-size: 10px; color: var(--accent1); letter-spacing: 1px; }
.chart-wrap { padding: 14px 15px 8px; flex: 1; position: relative; min-height: 0; }
.chart-summary {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border);
  border-top: 1px solid var(--border); flex-shrink: 0;
}
.sum-card { padding: 9px 13px; background: var(--panel); text-align: center; }
.sum-val {
  font-family: 'Rajdhani', sans-serif;
  font-size: 22px; font-weight: 700;
}
.sum-lbl { color: var(--muted); font-size: 9px; letter-spacing: 1px; margin-top: 1px; }

/* ══════════════════════════════════════════════════════════════════════════════
   COL 3 — TIPO DE SERVICIO
   ══════════════════════════════════════════════════════════════════════════════ */
.service-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 15px; cursor: pointer;
  border-bottom: 1px solid rgba(26,45,64,.5);
  transition: background .15s;
}
.service-item:hover  { background: var(--row-hover); }
.service-item.active { background: var(--selected); }
.svc-dot {
  width: 9px; height: 9px; border-radius: 2px;
  flex-shrink: 0; transition: transform .2s;
}
.service-item.active .svc-dot { transform: rotate(45deg); }
.svc-info { flex: 1; min-width: 0; }
.svc-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px; font-weight: 600; color: #d0e8f2;
}
.svc-desc { color: var(--muted); font-size: 9px; margin-top: 1px; }
.svc-count {
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px; font-weight: 700;
}
.svc-bar-wrap { padding: 3px 15px 9px; }
.svc-bar-bg {
  background: var(--border); border-radius: 2px;
  height: 3px; margin-top: 3px;
}
.svc-bar-fill { height: 3px; border-radius: 2px; transition: width .6s ease; }
.svc-pct { color: var(--muted); font-size: 9px; }

/* ══════════════════════════════════════════════════════════════════════════════
   RECORDS SECTION
   ══════════════════════════════════════════════════════════════════════════════ */
.records-section {
  border-top: 1px solid var(--border);
  background: var(--panel);
  display: flex; flex-direction: column;
  flex-shrink: 0; max-height: 235px;
}
.records-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,198,215,.04); flex-shrink: 0;
}
.records-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase; color: var(--accent1);
  display: flex; align-items: center; gap: 8px;
}
.records-count { font-size: 9px; color: var(--muted); letter-spacing: 1px; }
.records-wrap {
  overflow: auto; flex: 1;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.records-wrap::-webkit-scrollbar        { height: 4px; width: 4px; }
.records-wrap::-webkit-scrollbar-thumb  { background: var(--border); border-radius: 2px; }

/* ── TABLA ── */
table { width: 100%; border-collapse: collapse; font-size: 11px; min-width: 1200px; }
thead th {
  position: sticky; top: 0; z-index: 2;
  padding: 6px 11px; text-align: left;
  font-family: 'Rajdhani', sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); background: #090e14;
  border-bottom: 1px solid var(--border);
  white-space: nowrap; cursor: pointer;
  user-select: none; transition: color .2s;
}
thead th:hover           { color: var(--accent1); }
thead th.sort-asc::after  { content: ' ↑'; color: var(--accent1); }
thead th.sort-desc::after { content: ' ↓'; color: var(--accent1); }
tbody tr {
  border-bottom: 1px solid rgba(26,45,64,.3);
  transition: background .1s;
}
tbody tr:hover { background: var(--row-hover); }
tbody td { padding: 5px 11px; color: var(--text); white-space: nowrap; }
.td-mono     { font-variant-numeric: tabular-nums; }
.td-bold     { font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 12px; }
.td-badge    { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 600; letter-spacing: 1px; }
.td-ellipsis { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.no-records  { padding: 20px; text-align: center; color: var(--muted); letter-spacing: 2px; font-size: 10px; }

/* ── ACCIONES / OBSERVACIONES / REFACCIÓN ── */
.accion-tag {
  display: inline-block; padding: 1px 5px; border-radius: 2px;
  font-size: 8px; font-weight: 600; letter-spacing: 1px;
  background: rgba(0,198,215,.1); color: var(--accent1);
  margin: 1px 1px 1px 0; white-space: nowrap;
}
.acciones-wrap { display: flex; flex-wrap: wrap; gap: 2px; max-width: 180px; }
.obs-text {
  max-width: 160px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--muted); font-size: 10px;
  cursor: help;
}
.refaccion-si { color: var(--accent2); font-weight: 600; }
.refaccion-no { color: var(--muted); }

/* ── IMÁGENES EVIDENCIA ── */
.thumb-wrap { display: inline-flex; gap: 3px; align-items: center; }
.thumb {
  width: 45px; height: 45px; object-fit: cover;
  border-radius: 3px; border: 1px solid var(--border);
  cursor: pointer;
  transition: transform .15s, border-color .15s;
  background: var(--selected); flex-shrink: 0;
}
.thumb:hover { transform: scale(1.08); border-color: var(--accent1); }
.thumb-empty {
  width: 45px; height: 45px; border-radius: 3px;
  border: 1px dashed var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 14px; flex-shrink: 0;
}

/* ── BOTÓN REPORTE KPI (header) ── */
.btn-kpi-report {
  display      : inline-flex;
  align-items  : center;
  padding      : 5px 14px;
  border       : 1px solid var(--accent4);
  border-radius: 3px;
  color        : var(--accent4);
  text-decoration: none;
  font-family  : 'IBM Plex Mono', monospace;
  font-size    : 9px;
  font-weight  : 500;
  letter-spacing: 1px;
  transition   : background .2s, color .2s;
}
.btn-kpi-report:hover { background: rgba(139,92,246,.15); }

/* ── BOTÓN PDF ── */
.btn-pdf {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  background: transparent;
  border: 1px solid var(--accent2);
  color: var(--accent2);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px; font-weight: 500;
  letter-spacing: 1px;
  border-radius: 3px; cursor: pointer;
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.btn-pdf:hover   { background: rgba(255,107,43,.15); }
.btn-pdf:disabled {
  opacity: .5; cursor: not-allowed;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════════════ */
footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 20px;
  border-top: 1px solid var(--border);
  background: linear-gradient(90deg, #060b0f, #080d12);
  flex-shrink: 0;
}
.footer-brand {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 3px; color: var(--text);
}
.footer-brand span { color: var(--muted); }
.footer-tagline { font-size: 9px; color: var(--muted); letter-spacing: 3px; text-transform: uppercase; }
.footer-center  { font-size: 9px; color: var(--muted); letter-spacing: 1px; }
.footer-right   { font-size: 9px; color: var(--muted); letter-spacing: 1px; }