/* URSA Polar / dashboard presentation. IDs, charts and flow geometry are preserved. */
:root { --pd-bg:#fff; --pd-card:#fff; --pd-raised:#f7f7f8; --pd-line:#e8e8ec; --pd-text:#262626; --pd-muted:#737373; --pd-strong:#111114; }
[data-theme="dark"] { --pd-bg:#0c0c0e; --pd-card:#151518; --pd-raised:#1e1e23; --pd-line:#303036; --pd-text:#f1f1f5; --pd-muted:#a4a4b0; --pd-strong:#fff; --bg-body:#0c0c0e; --bg-surface:#151518; --bg-surface-pure:#151518; --bg-subtle:#1e1e23; --bg-hover:#25252b; --graphite-950:#f5f5f7; --graphite-900:#ececf1; --graphite-800:#dddde5; --graphite-700:#c6c6d0; --graphite-600:#b0b0bd; --graphite-500:#a4a4b0; --graphite-400:#90909d; --graphite-300:#42424b; --graphite-200:#303036; --graphite-100:#1e1e23; --border-card:#303036; --border-subtle:#26262c; }
body { background:var(--pd-bg)!important; }
#appMainWrapper { background:var(--pd-bg)!important; color:var(--pd-text); padding:24px 28px 36px!important; min-width:0; }
#appMainWrapper .workspace-toolbar { background:var(--pd-card); border:1px solid var(--pd-line); border-radius:18px; box-shadow:none; overflow:visible!important; }
#appMainWrapper .solar-hero-banner { background:var(--pd-card)!important; color:var(--pd-text); min-height:82px; height:auto; padding:18px 22px; border-radius:0; border-bottom:1px solid var(--pd-line); overflow:visible!important; position:relative!important; z-index:1200!important; }
#appMainWrapper .solar-hero-banner::before,#appMainWrapper .solar-hero-banner::after { display:none!important; }
#appMainWrapper .hero-brand-title { color:var(--pd-strong)!important; font-size:19px!important; letter-spacing:.03em; }
#appMainWrapper .hero-brand-title span { color:inherit!important; background:none!important; -webkit-text-fill-color:currentColor!important; }
#appMainWrapper .hero-brand-subtitle { color:var(--pd-muted)!important; font-size:10px; letter-spacing:.06em; }
#appMainWrapper .hero-solar-icon,#heroBannerVersionBadge,.hero-banner-left > div[style*="width: 1px"] { display:none!important; }
#appMainWrapper .hero-banner-right { display:flex; flex-direction:row!important; align-items:center; gap:24px!important; }
#appMainWrapper .hero-kpi-chip { gap:10px; }
#appMainWrapper .hero-kpi-chip svg { color:var(--pd-muted)!important; }
#appMainWrapper .hero-kpi-val { color:var(--pd-text)!important; font-size:14px!important; font-weight:650; }
#appMainWrapper .hero-kpi-lbl { color:var(--pd-muted)!important; font-size:10px; }
#appMainWrapper .app-header { background:var(--pd-card)!important; border-bottom:1px solid var(--pd-line); padding:12px 16px; }
#appMainWrapper .status-pill { color:var(--pd-muted); font-size:10px; }
#appMainWrapper .status-pill strong { color:var(--pd-text)!important; }
#appMainWrapper .header-user-corner,#appMainWrapper .header-user-pill { background:transparent!important; border-color:var(--pd-line)!important; box-shadow:none!important; }
#appMainWrapper .header-user-name { color:var(--pd-text)!important; }
#appMainWrapper .header-user-role { color:var(--pd-muted)!important; }
#appMainWrapper .device-selector-bar { background:var(--pd-card)!important; padding:14px 20px!important; }
#appMainWrapper #lblClientProjectBadge { background:var(--pd-raised)!important; color:var(--pd-text)!important; border:1px solid var(--pd-line); white-space:normal; }
#appMainWrapper :is(.selector-label,.card-desc-mono,.hero-subdesc,.stat-tile-lbl) { color:var(--pd-muted)!important; }
#appMainWrapper .select-wrapper select { background-color:var(--pd-raised)!important; color:var(--pd-text)!important; border:1px solid var(--pd-line)!important; border-radius:9px; min-height:40px; }
#appMainWrapper .workspace-heading { margin:32px auto 22px; max-width:none; }
#appMainWrapper .workspace-heading h2 { font-family:var(--font-sans); font-size:clamp(24px,2.2vw,34px); font-weight:650; letter-spacing:-.045em; color:var(--pd-strong); }
#appMainWrapper .workspace-heading p:last-child { color:var(--pd-muted); font-size:12px; }
.premium-eyebrow { display:block; color:var(--pd-muted)!important; font-size:9px!important; letter-spacing:.15em; font-weight:600; margin:0 0 10px!important; }
.premium-title-dot { color:#e0ae64; }
#appMainWrapper .hero-telemetry-grid { gap:16px!important; margin-bottom:30px!important; max-width:none; }
#appMainWrapper .hero-card { background:var(--pd-card)!important; border:1px solid var(--pd-line)!important; border-radius:18px!important; box-shadow:none!important; padding:22px!important; min-width:0; overflow:hidden; }
#appMainWrapper .hero-card:hover { transform:translateY(-2px); border-color:#666670!important; box-shadow:0 12px 28px #0000000d!important; }
#appMainWrapper .hero-card { height:auto!important; min-height:340px!important; max-height:none!important; }
#appMainWrapper .hero-card-header { height:auto!important; min-height:36px!important; max-height:none!important; flex-shrink:0; }
#appMainWrapper .hero-card-title-group { height:auto!important; min-height:42px!important; max-height:none!important; margin:12px 0!important; }
#appMainWrapper .hero-main-stat { height:auto!important; min-height:106px!important; max-height:none!important; gap:5px; margin-bottom:14px!important; overflow:visible; }
#appMainWrapper .hero-val-row { height:auto!important; min-height:52px!important; max-height:none!important; }
#appMainWrapper .hero-main-stat .hero-subdesc { height:auto!important; min-height:15px!important; max-height:none!important; white-space:normal; line-height:1.5!important; overflow:visible; }
#appMainWrapper .hero-main-stat .hero-subdesc strong { color:var(--pd-text)!important; }
#appMainWrapper .card-bg-watermark { display:none!important; }
#appMainWrapper .hero-card-title { font-family:var(--font-sans); font-size:14px!important; color:var(--pd-text)!important; font-weight:600; }
#appMainWrapper .hero-card-header { margin-bottom:18px; }
#appMainWrapper .hero-icon-box { width:36px; height:36px; border-radius:11px; box-shadow:none; }
#appMainWrapper .hero-val-huge { color:var(--pd-strong)!important; font-family:var(--font-sans); font-size:clamp(32px,3.1vw,48px)!important; font-weight:600; letter-spacing:-.055em; font-variant-numeric:tabular-nums; }
#appMainWrapper .hero-unit { font-size:13px!important; color:var(--pd-muted)!important; }
#appMainWrapper .hero-badge { font-size:9px; padding:4px 7px; border-radius:6px; box-shadow:none; }
#appMainWrapper .stat-tile { background:var(--pd-raised)!important; border:1px solid var(--pd-line)!important; border-radius:10px!important; padding:10px!important; }
#appMainWrapper .stat-tile-val { color:var(--pd-text)!important; font-size:17px!important; font-variant-numeric:tabular-nums; }
#appMainWrapper .stat-tile-lbl { font-size:9px!important; line-height:1.5; }
#appMainWrapper :is(.chart-card-mono,.table-card-mono,.logical-card,.flow-card-mono) { background:var(--pd-card)!important; border:1px solid var(--pd-line)!important; border-radius:18px!important; box-shadow:none!important; }
#appMainWrapper .distribution-header-bar { padding:8px 0 18px; gap:16px; }
#appMainWrapper .chart-title-mono { font-family:var(--font-sans); color:var(--pd-text)!important; font-weight:600; letter-spacing:-.025em; }
#appMainWrapper :is(.view-mode-pill-group,.chart-filters-mono,.stats-view-toggle) { background:var(--pd-raised)!important; border:1px solid var(--pd-line)!important; border-radius:9px; }
#appMainWrapper :is(.view-pill-btn,.btn-filter-mono,.btn-stats-toggle) { color:var(--pd-muted)!important; min-height:36px; border-radius:6px; }
#appMainWrapper :is(.view-pill-btn,.btn-filter-mono,.btn-stats-toggle).active { background:var(--pd-text)!important; color:var(--pd-bg)!important; box-shadow:none!important; }
#appMainWrapper .logical-card { background:radial-gradient(circle,var(--pd-line) .8px,transparent 1px) 0 0/24px 24px,var(--pd-card)!important; padding:0!important; overflow:hidden; }
#appMainWrapper .logical-canvas-wrapper { max-width:860px; margin:0 auto; background:transparent!important; position:relative; border-radius:12px; }
#appMainWrapper .logical-node-box { background:var(--pd-raised)!important; border-color:var(--pd-line)!important; box-shadow:0 8px 24px #00000018!important; }
#appMainWrapper .logical-node-box.node-inverter { background:#202024!important; border-color:#42424a!important; color:#fff; box-shadow:0 10px 28px #00000026!important; }
#appMainWrapper .node-inverter .inverter-chip-title { color:#fff!important; }
#appMainWrapper .node-inverter .inverter-screen-icon { background:#ffffff0f; color:#e7e7ef; }
#appMainWrapper .node-inverter .inverter-chip-status { color:#6ee7b7; background:#34d3991f; }
#appMainWrapper .logical-pipe-base { stroke:var(--pd-line); }
#appMainWrapper .solar-intelligence-strip { background:var(--pd-card)!important; border-color:var(--pd-line)!important; border-radius:14px!important; box-shadow:none!important; margin:20px 0!important; padding:14px!important; }
#appMainWrapper .intel-pill { background:var(--pd-raised)!important; color:var(--pd-text)!important; border-color:var(--pd-line)!important; }
#appMainWrapper .workspace-report-button { background:var(--pd-text)!important; color:var(--pd-bg)!important; border:0; box-shadow:none; }
#appMainWrapper .charts-grid-mono { gap:20px; margin:24px 0; }
#appMainWrapper .chart-header-mono { border-color:var(--pd-line)!important; padding:20px; }
#appMainWrapper .chart-header-mono > div { flex-wrap:wrap; gap:12px!important; }
#appMainWrapper .chart-container-mono { min-height:280px; }
#appMainWrapper .chart-card-mono { height:auto!important; max-height:none!important; min-height:440px!important; padding:16px!important; }
#appMainWrapper .chart-container-mono { flex:none; height:310px!important; max-height:310px!important; }
#appMainWrapper .legend-card-luxury { background:var(--pd-raised)!important; border-color:var(--pd-line)!important; box-shadow:none!important; }
#appMainWrapper :is(.card-title-text,.card-pct-text) { color:var(--pd-text)!important; }
#appMainWrapper .table-responsive-mono { overflow-x:auto; }
#appMainWrapper .table-responsive-mono th { background:var(--pd-raised)!important; color:var(--pd-muted)!important; border-color:var(--pd-line)!important; }
#appMainWrapper .table-responsive-mono td { color:var(--pd-text); border-color:var(--pd-line)!important; }
#appMainWrapper .table-responsive-mono tr:hover { background:var(--pd-raised)!important; }
.premium-mobile-header { display:none; }
/* Client workspace, including profile and access forms. */
:is(#modalGestionClientes,#modalEditarProyecto,#modalNuevoCliente,#modalClientAccess) .modal-card { background:var(--pd-card)!important; color:var(--pd-text); border:1px solid var(--pd-line); border-radius:22px; box-shadow:0 32px 100px #0007; }
#modalGestionClientes .modal-header { padding:26px!important; background:var(--pd-card); border-color:var(--pd-line); }
#modalGestionClientes .modal-title { color:var(--pd-text); font-size:24px; letter-spacing:-.04em; }
#modalGestionClientes .modal-close { background:var(--pd-raised); color:var(--pd-text); border:1px solid var(--pd-line); border-radius:50%; }
.premium-client-summary { display: flex !important; align-items: center !important; gap: 14px !important; margin: 0 0 10px !important; padding: 6px 12px !important; background: var(--pd-raised) !important; border: 1px solid var(--pd-line) !important; border-radius: 8px !important; }
.premium-client-summary > div { display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 6px !important; padding: 0 !important; background: transparent !important; border: none !important; }
.premium-client-summary strong { font: 700 14px/1 var(--font-sans) !important; color: var(--pd-text) !important; letter-spacing: -0.02em !important; margin: 0 !important; }
.premium-client-summary > div > span:last-child { font-size: 11px; color: var(--pd-muted); }
#modalGestionClientes :is(.form-control,.btn-secondary) { background: var(--pd-raised) !important; border-color: var(--pd-line) !important; color: var(--pd-text) !important; min-height: 36px; }
#modalGestionClientes .btn-primary { background: var(--pd-text) !important; color: var(--pd-bg) !important; min-height: 36px; }
#modalGestionClientes .clients-table-container { border-color: var(--pd-line) !important; overflow-x: hidden !important; overflow-y: auto !important; width: 100% !important; box-sizing: border-box !important; }
#modalGestionClientes table { width: 100% !important; table-layout: fixed !important; border-collapse: collapse !important; }
#modalGestionClientes th { background: var(--pd-raised) !important; color: var(--pd-muted) !important; border-color: var(--pd-line); padding: 8px 10px !important; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
#modalGestionClientes td { padding: 8px 10px !important; border-color: var(--pd-line) !important; vertical-align: middle !important; font-size: 0.82rem; }
#modalGestionClientes tbody tr:hover { background: var(--pd-raised) !important; }
#modalGestionClientes .client-device-badge { color: var(--pd-text); background: var(--pd-raised); padding: 2px 7px; border-radius: 6px; font-weight: 600; font-size: 0.74rem; }
#modalGestionClientes .modal-footer { border-color: var(--pd-line) !important; background: transparent; padding-top: 8px !important; }

/* ==========================================================================
   BUSCADOR TRADICIONAL GOOGLE / ELEGANTE INSTAGRAM (INLINE DIRECTO)
   ========================================================================== */
.hero-search-wrapper {
  position: relative;
  flex: 1 1 380px;
  max-width: 460px;
  min-width: 240px;
  margin: 0 16px;
  z-index: 2500 !important;
}
.hero-search-box {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  height: 38px;
  padding: 0 10px 0 34px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-search-box:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
}
.hero-search-box.is-focused {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15), 0 8px 24px rgba(0, 0, 0, 0.35);
}
.hero-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
  pointer-events: none;
}
.hero-search-input {
  width: 100%;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #ffffff !important;
  font-size: 0.84rem;
  font-family: inherit;
  font-weight: 500;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none !important;
}
.hero-search-input::-webkit-search-decoration,
.hero-search-input::-webkit-search-cancel-button,
.hero-search-input::-webkit-search-results-button,
.hero-search-input::-webkit-search-results-decoration {
  display: none !important;
  -webkit-appearance: none;
}
.hero-search-input:-webkit-autofill,
.hero-search-input:-webkit-autofill:hover,
.hero-search-input:-webkit-autofill:focus,
.hero-search-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #202a30 inset !important;
  box-shadow: 0 0 0 1000px #202a30 inset !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  transition: background-color 5000s ease-in-out 0s;
  background: transparent !important;
}
.hero-search-input::placeholder {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
}
.hero-search-clear {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  margin-right: 4px;
  border-radius: 50%;
  transition: all 0.15s;
}
.hero-search-clear:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
}
.hero-search-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 0.68rem;
  font-family: inherit;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
  pointer-events: none;
  flex-shrink: 0;
}

/* ==========================================================================
   DESPLEGABLE AUTOCOMPLETE ESTILO APPLE SPOTLIGHT / INSTAGRAM (MONOCROMÁTICO)
   ========================================================================== */
.hero-search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 500px;
  max-width: min(540px, calc(100vw - 32px));
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 16px;
  box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.22), 0 1px 3px rgba(0, 0, 0, 0.06);
  z-index: 99999 !important;
  overflow: hidden;
  display: none;
  animation: heroSearchDropdownIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-search-dropdown.active {
  display: flex !important;
  flex-direction: column !important;
}

@keyframes heroSearchDropdownIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.hero-search-dd-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: #FAFAFC;
  border-bottom: 1px solid #ECEEF2;
  font-size: 0.72rem;
  font-weight: 600;
  color: #555E6D;
  letter-spacing: 0.01em;
}

.hero-search-dd-tip {
  font-size: 0.65rem;
  font-weight: 700;
  color: #6B7280;
  background: #ECEEF2;
  border-radius: 4px;
  padding: 2px 6px;
  letter-spacing: 0.04em;
}

.hero-search-dd-body {
  max-height: 400px;
  overflow-y: auto;
  padding: 6px 0;
}
.hero-search-dd-body::-webkit-scrollbar {
  width: 5px;
}
.hero-search-dd-body::-webkit-scrollbar-thumb {
  background: #D1D5DB;
  border-radius: 3px;
}

.hero-search-dd-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: #FAFAFC;
  border-top: 1px solid #ECEEF2;
  font-size: 0.70rem;
  color: #8E95A2;
}

.hero-search-category {
  padding: 8px 16px 4px;
  font-size: 0.67rem;
  font-weight: 700;
  color: #8A92A0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Items individuales estilo Apple Spotlight */
.hero-search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin: 2px 8px;
  border-radius: 10px;
  cursor: pointer;
  background: transparent;
  transition: background 0.12s ease;
  user-select: none;
}
.hero-search-item:hover,
.hero-search-item.is-active,
.hero-search-item.is-selected {
  background: #F3F4F6 !important;
}

.hero-search-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

/* Iconos SVG vectoriales monocromáticos */
.hero-search-avatar {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F1F3F5;
  color: #1F2429;
  border: 1px solid #E5E7EB;
  flex-shrink: 0;
  transition: all 0.12s ease;
}
.hero-search-item:hover .hero-search-avatar,
.hero-search-item.is-active .hero-search-avatar,
.hero-search-item.is-selected .hero-search-avatar {
  background: #E5E7EB;
  color: #000000;
  border-color: #D1D5DB;
}

.hero-search-info {
  min-width: 0;
  flex: 1;
}

.hero-search-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-search-sub {
  font-size: 0.75rem;
  color: #6B7280;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-search-badge {
  font-size: 0.67rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: #F1F3F5;
  color: #374151;
  border: 1px solid #E5E7EB;
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
}

.hero-search-right-stat {
  text-align: right;
  flex-shrink: 0;
  margin-left: 14px;
}

.hero-search-right-stat-val {
  font-weight: 700;
  font-size: 0.90rem;
  line-height: 1.2;
  color: #111827;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.hero-search-right-stat-lbl {
  font-size: 0.65rem;
  font-weight: 600;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 1px;
}

.hero-search-highlight {
  background: rgba(0, 0, 0, 0.08);
  color: #000000;
  font-weight: 750;
  padding: 0 3px;
  border-radius: 3px;
}

/* Modo oscuro (data-theme="dark") */
[data-theme="dark"] .hero-search-dropdown {
  background: #18191C;
  border-color: #27282D;
  box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .hero-search-dd-header,
[data-theme="dark"] .hero-search-dd-footer {
  background: #141416;
  border-color: #222327;
  color: #888E9A;
}
[data-theme="dark"] .hero-search-dd-tip {
  background: #222327;
  color: #A4AAB7;
}
[data-theme="dark"] .hero-search-category {
  color: #717682;
}
[data-theme="dark"] .hero-search-item:hover,
[data-theme="dark"] .hero-search-item.is-active,
[data-theme="dark"] .hero-search-item.is-selected {
  background: #25262B !important;
}
[data-theme="dark"] .hero-search-avatar {
  background: #222328;
  color: #E2E4E9;
  border-color: #2F3138;
}
[data-theme="dark"] .hero-search-item:hover .hero-search-avatar,
[data-theme="dark"] .hero-search-item.is-active .hero-search-avatar,
[data-theme="dark"] .hero-search-item.is-selected .hero-search-avatar {
  background: #2D2E36;
  color: #FFFFFF;
  border-color: #3E414A;
}
[data-theme="dark"] .hero-search-title {
  color: #F3F4F6;
}
[data-theme="dark"] .hero-search-sub {
  color: #9CA3AF;
}
[data-theme="dark"] .hero-search-badge {
  background: #222328;
  color: #D1D5DB;
  border-color: #32343C;
}
[data-theme="dark"] .hero-search-right-stat-val {
  color: #F3F4F6;
}
[data-theme="dark"] .hero-search-right-stat-lbl {
  color: #6B7280;
}
[data-theme="dark"] .hero-search-highlight {
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
}
@media(min-width:1440px) { #appMainWrapper .hero-telemetry-grid { grid-template-columns:repeat(4,minmax(0,1fr))!important; } }
@media(max-width:1439px) { #appMainWrapper .hero-telemetry-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; } }
@media(max-width:1100px) { #appMainWrapper { padding:18px!important; } #appMainWrapper .solar-hero-banner { flex-wrap:wrap; gap:16px; } #appMainWrapper .charts-grid-mono { grid-template-columns:1fr!important; } }
@media(max-width:768px) {
 #appMainWrapper { padding:0 12px 24px!important; }
 #appMainWrapper .solar-hero-banner { display:none!important; }
 .premium-mobile-header { display:flex; align-items:center; gap:10px; min-height:72px; padding:8px 0; color:var(--pd-text); }
 .premium-menu { display:flex!important; width:48px; height:48px; padding:0!important; background:#080809!important; border:1px solid #303036!important; border-radius:12px; align-items:center; justify-content:center; }
 .premium-bear { display:block; position:relative; width:42px; height:28px; overflow:hidden; }
 .premium-bear img { position:absolute; width:66px; max-width:none; left:-12px; top:-7px; filter:grayscale(1) invert(1) contrast(1.8); mix-blend-mode:screen; }
 .premium-mobile-brand { font-size:16px; font-weight:750; letter-spacing:.14em; }
 .premium-mobile-brand span { display:block; font-size:8px; letter-spacing:.17em; margin-top:4px; color:var(--pd-muted); }
 .premium-mobile-caption { margin-left:auto; font-size:11px; color:var(--pd-muted); }
 #appMainWrapper .app-header { padding:10px!important; }
 #appMainWrapper .header-status-group { gap:6px!important; }
 #appMainWrapper #pillDeviceModel { grid-column:1/-1; }
 #appMainWrapper .device-selector-bar { padding:12px!important; }
 #appMainWrapper .workspace-heading { margin:24px 0 16px; }
 #appMainWrapper .workspace-heading h2 { font-size:26px; }
 #appMainWrapper .hero-telemetry-grid { gap:10px!important; }
 #appMainWrapper .hero-card { padding:14px!important; border-radius:14px!important; }
 #appMainWrapper .hero-card { min-height:0!important; }
 #appMainWrapper .hero-val-row { min-height:36px!important; }
 #appMainWrapper .hero-card-title-group .hero-subdesc { white-space:normal; }
 #appMainWrapper .hero-card-header > div:last-child { flex-wrap:wrap; }
 #appMainWrapper .hero-card-header { flex-wrap:wrap; gap:8px; margin-bottom:12px; }
 #appMainWrapper .hero-card-title { font-size:13px!important; }
 #appMainWrapper .hero-val-huge { font-size:32px!important; }
 #appMainWrapper .hero-unit { font-size:10px!important; }
 #appMainWrapper .hero-subdesc { font-size:10px!important; overflow-wrap:anywhere; }
 #appMainWrapper .hero-badge { font-size:8px; }
 #appMainWrapper .stat-tile { padding:8px!important; }
 #appMainWrapper .stat-tile-val { font-size:14px!important; }
 #appMainWrapper .distribution-header-bar { flex-direction:column; align-items:stretch; }
 #appMainWrapper .view-pill-btn { min-height:42px; }
 #appMainWrapper .chart-header-mono { padding:16px; }
 #appMainWrapper .chart-header-mono .chart-title-mono { white-space:normal!important; font-size:15px!important; }
 #appMainWrapper .chart-header-mono .card-desc-mono { white-space:normal!important; font-size:11px!important; }
 #appMainWrapper .chart-filters-mono { width:100%; display:flex; }
 #appMainWrapper .btn-filter-mono { flex:1; min-height:42px; font-size:10px; padding:6px; }
 #appMainWrapper .solar-intelligence-strip { flex-wrap:wrap!important; gap:10px; }
 #appMainWrapper .solar-intelligence-strip .intel-group-left { display:flex!important; flex-wrap:wrap!important; white-space:normal!important; }
 #modalGestionClientes { padding:8px!important; }
 #modalGestionClientes .modal-card { width:100%!important; max-height:calc(100dvh - 16px)!important; border-radius:18px; }
 #modalGestionClientes .modal-header { padding:18px!important; }
 #modalGestionClientes .modal-title { font-size:22px; }
 #modalGestionClientes .modal-card > div:nth-child(2) { padding:14px!important; overflow-y:auto!important; }
 .premium-client-summary { gap:6px; margin-bottom:16px; }
 .premium-client-summary > div { padding:12px 8px; border-radius:10px; }
 .premium-client-summary .premium-eyebrow { font-size:7px!important; letter-spacing:.06em; }
 .premium-client-summary strong { font-size:26px; }
 .premium-client-summary > div > span:last-child { font-size:9px; }
 #modalGestionClientes div:has(> #clientSearchInput) { min-width:0!important; width:100%; flex-basis:100%!important; }
 #modalGestionClientes #clientSearchInput { font-size:16px!important; }
 #modalGestionClientes .clients-table-container { overflow:visible!important; max-height:none!important; border:0!important; flex:none!important; }
 #modalGestionClientes table,#modalGestionClientes tbody { display:block; width:100%; }
 #modalGestionClientes thead { display:none; }
 #modalGestionClientes tbody tr { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:16px; margin-bottom:12px; border:1px solid var(--pd-line); border-radius:14px; background:var(--pd-card); }
 #modalGestionClientes td { display:block!important; padding:0!important; border:0!important; white-space:normal!important; min-width:0; }
 #modalGestionClientes td[data-label]::before { min-width:0; }
 #modalGestionClientes td:first-child::before,#modalGestionClientes td:last-child::before { display:none!important; }
 #modalGestionClientes td:first-child,#modalGestionClientes td:last-child { grid-column:1/-1; }
 #modalGestionClientes td:first-child > div { flex-wrap:wrap; }
 #modalGestionClientes td:first-child button { overflow-wrap:anywhere; }
 #modalGestionClientes td:nth-child(2)::before { content:'Plataforma'; }
 #modalGestionClientes td:nth-child(3)::before { content:'Inversores'; }
 #modalGestionClientes td:nth-child(4)::before { content:'Capacidad'; }
 #modalGestionClientes td:nth-child(n+2):nth-child(-n+4)::before { display:block; font-size:9px; margin:0 0 8px; color:var(--pd-muted); }
 #modalGestionClientes td[colspan]::before { content:none!important; }
 #modalGestionClientes td:last-child > div { display:flex!important; flex-wrap:wrap; justify-content:flex-start!important; padding-top:8px; }
 #modalGestionClientes td .btn { min-height:40px; }
}
@media(max-width:600px) {
 #appMainWrapper .hero-telemetry-grid { grid-template-columns:1fr!important; gap:14px!important; }
 #appMainWrapper .hero-card { padding:20px!important; }
 #appMainWrapper .hero-main-stat { min-height:90px!important; }
 #appMainWrapper .hero-card-title { font-size:15px!important; }
 #appMainWrapper .hero-val-huge { font-size:42px!important; }
 #appMainWrapper .hero-val-row { min-height:46px!important; }
 #appMainWrapper .hero-subdesc,#appMainWrapper .stat-tile-lbl { font-size:11px!important; }
 #appMainWrapper .hero-badge { font-size:9px; }
 #appMainWrapper .stat-tile-val { font-size:18px!important; }
}
@media(prefers-reduced-motion:reduce) { #appMainWrapper * { animation:none!important; transition:none!important; } }

/* ============================================================== */
/* ESTILOS DE EDICIÓN RÁPIDA DE PLANTA, INVERSOR Y ALERTAS       */
/* ============================================================== */
.clickable-edit-target {
  cursor: pointer;
  transition: color 0.18s ease, opacity 0.18s ease;
}
.clickable-edit-target:hover {
  color: #0284c7 !important;
  opacity: 0.9;
}

.btn-selector-gear {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--graphite-600, #475569);
  cursor: pointer;
  padding: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.btn-selector-gear:hover {
  background: #f0f9ff;
  color: #0284c7;
  border-color: #38bdf8;
  transform: rotate(20deg) scale(1.05);
  box-shadow: 0 2px 5px rgba(2, 132, 199, 0.15);
}

.btn-selector-add {
  background: #ffffff;
  border: 1px solid rgba(0, 168, 132, 0.28);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #00A884;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.btn-selector-add:hover {
  background: #E5FAF3;
  color: #008769;
  border-color: #00A884;
  transform: scale(1.08);
  box-shadow: 0 2px 6px rgba(0, 168, 132, 0.22);
}
.btn-selector-add:active {
  transform: scale(0.96);
}

.btn-quick-edit-title,
.btn-quick-edit-pencil {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--graphite-400, #94a3b8);
  cursor: pointer;
  transition: all 0.18s ease;
  vertical-align: middle;
}
.btn-quick-edit-title:hover,
.btn-quick-edit-pencil:hover {
  background: rgba(2, 132, 199, 0.1);
  color: #0284c7;
  transform: scale(1.15);
}

.btn-secondary-edit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 8px;
  padding: 0.46rem 0.88rem;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--graphite-800, #1e293b);
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.btn-secondary-edit:hover {
  background: #f8fafc;
  border-color: #0284c7;
  color: #0284c7;
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.12);
  transform: translateY(-1px);
}

/* ==========================================================================
   SISTEMA DE NOTAS TÉCNICAS ESTILO WHATSAPP (CHAT TIMELINE EN VIVO)
   ========================================================================== */
.notes-chat-card {
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
  background: #EFEAE2;
  background-image: radial-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px);
  background-size: 16px 16px;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.notes-chat-feed {
  max-height: 220px;
  min-height: 140px;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-behavior: smooth;
}

.notes-chat-bubble {
  max-width: 82%;
  padding: 7px 11px 5px 11px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  position: relative;
  word-break: break-word;
  animation: noteBubbleIn 0.18s ease-out;
}

@keyframes noteBubbleIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.notes-chat-bubble.is-outgoing {
  align-self: flex-end;
  background: #D9FDD3;
  border-top-right-radius: 2px;
}

.notes-chat-bubble.is-incoming {
  align-self: flex-start;
  background: #FFFFFF;
  border-top-left-radius: 2px;
}

.notes-bubble-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.notes-bubble-author {
  font-size: 0.72rem;
  font-weight: 700;
  color: #128C7E;
}

.notes-role-badge {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #64748B;
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 5px;
  border-radius: 4px;
}

.notes-bubble-text {
  font-size: 0.82rem;
  color: #111827;
  line-height: 1.4;
  white-space: pre-wrap;
}

.notes-bubble-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 0.65rem;
  color: #64748B;
}

.notes-bubble-time {
  font-variant-numeric: tabular-nums;
}

.notes-bubble-ticks {
  color: #53BDEB;
  font-weight: 700;
  letter-spacing: -1px;
}

.notes-chat-input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #F0F2F5;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.notes-chat-input-bar input {
  flex: 1;
  font-size: 0.82rem;
  border-radius: 20px;
  padding: 7px 14px;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
}

.notes-chat-input-bar input:focus {
  border-color: #25D366;
  box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.2);
  outline: none;
}

#btnSendNoteChat {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #25D366;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(37, 211, 102, 0.35);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

#btnSendNoteChat:hover {
  background: #20BA5A;
  transform: scale(1.06);
}

#btnSendNoteChat:active {
  transform: scale(0.95);
}

/* Modo Oscuro */
[data-theme="dark"] .notes-chat-card {
  background: #0B141A;
  background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  border-color: #222E35;
}

[data-theme="dark"] .notes-chat-bubble.is-outgoing {
  background: #005C4B;
  color: #E9EDEF;
}

[data-theme="dark"] .notes-chat-bubble.is-outgoing .notes-bubble-author {
  color: #25D366;
}

[data-theme="dark"] .notes-chat-bubble.is-outgoing .notes-bubble-text {
  color: #E9EDEF;
}

[data-theme="dark"] .notes-chat-bubble.is-outgoing .notes-bubble-footer {
  color: rgba(233, 237, 239, 0.7);
}

[data-theme="dark"] .notes-chat-bubble.is-incoming {
  background: #202C33;
  color: #E9EDEF;
}

[data-theme="dark"] .notes-chat-bubble.is-incoming .notes-bubble-author {
  color: #53BDEB;
}

[data-theme="dark"] .notes-chat-bubble.is-incoming .notes-bubble-text {
  color: #E9EDEF;
}

[data-theme="dark"] .notes-chat-bubble.is-incoming .notes-bubble-footer {
  color: rgba(233, 237, 239, 0.6);
}

[data-theme="dark"] .notes-chat-input-bar {
  background: #202C33 !important;
  border-top-color: #2A3942 !important;
}

[data-theme="dark"] #noteChatInput {
  background: #2A3942 !important;
  border-color: #2A3942 !important;
  color: #FFFFFF !important;
}