/* ==========================================================================
   URSA SOLAR CLOUD - ESTILO MONOCROMÁTICO: BLANCO Y GRAFITO
   Diseño Minimalista de Lujo (Inspiración Apple / Swiss Design)
   ========================================================================== */

:root {
  /* Fondo general blanco puro */
  --bg-body: #ffffff;
  --bg-surface: rgba(255, 255, 255, 0.96);
  --bg-surface-pure: #ffffff;
  --bg-subtle: #ffffff;
  --bg-hover: #f8fafc;

  /* Azul profundo corporativo & Tecnológico */
  --blue-corporate-deep: #0b2a4a;
  --blue-corporate-dark: #123a63;
  --blue-tech: #1687e8;
  --blue-tech-vibrant: #2196f3;
  --blue-light-chip: #ebf5fe;

  /* Colores Funcionales SCADA Solar */
  --solar-gold: #f6a800;
  --solar-amber-bright: #ffb000;
  --solar-bg-soft: #fef7e6;

  --battery-green: #13b77a;
  --battery-green-vibrant: #20c997;
  --battery-bg-soft: #edfaf3;

  --grid-blue: #1687e8;
  --grid-blue-dark: #0f2a4a;
  --grid-bg-soft: #ebf5fe;

  --load-purple: #7950f2;
  --load-purple-vibrant: #7c4dff;
  --load-bg-soft: #f3e8ff;

  --alert-red: #e5484d;
  --alert-bg-soft: #fff1f2;

  /* Escala de Grafitos y Carbón */
  --graphite-950: #0b2a4a;
  --graphite-900: #0f172a;
  --graphite-800: #1e293b;
  --graphite-700: #334155;
  --graphite-600: #475569;
  --graphite-500: #64748b;
  --graphite-400: #94a3b8;
  --graphite-300: #cbd5e1;
  --graphite-200: #dce7f1;
  --graphite-100: #f3f7fb;

  --border-card: #dce7f1;
  --border-subtle: #ebf1f7;

  /* Tipografía */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-script: 'Caveat', cursive;

  /* Sombras y Elevaciones */
  --shadow-sm: 0 1px 3px 0 rgba(15, 42, 68, 0.04);
  --shadow-card: 0 6px 22px rgba(15, 42, 68, 0.08);
  --shadow-card-hover: 0 10px 28px rgba(15, 42, 68, 0.12);
  --shadow-float: 0 4px 18px rgba(15, 42, 68, 0.05);
  --shadow-modal: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08);

  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   TEMA OSCURO DE LUJO MONOCROMÁTICO (APPLE / OBSIDIAN & GRAFITO)
   ========================================================================== */
[data-theme="dark"] {
  /* Fondo general negro carbón profundo */
  --bg-body: #0b0d11;
  --bg-surface: #12141a;
  --bg-surface-pure: #12141a;
  --bg-subtle: #181b24;
  --bg-hover: #222634;

  /* Azules tecnológicos sutiles */
  --blue-corporate-deep: #38bdf8;
  --blue-corporate-dark: #60a5fa;
  --blue-tech: #38bdf8;
  --blue-tech-vibrant: #60a5fa;
  --blue-light-chip: rgba(56, 189, 248, 0.12);

  /* Funcionales SCADA Solar para modo oscuro */
  --solar-bg-soft: rgba(245, 158, 11, 0.14);
  --battery-bg-soft: rgba(16, 185, 129, 0.14);
  --grid-bg-soft: rgba(2, 132, 199, 0.14);
  --load-bg-soft: rgba(139, 92, 246, 0.14);
  --alert-bg-soft: rgba(239, 68, 68, 0.18);

  /* Escala Monocromática de Blancos y Grafitos */
  --graphite-950: #ffffff;
  --graphite-900: #f8fafc;
  --graphite-800: #e2e8f0;
  --graphite-700: #cbd5e1;
  --graphite-600: #94a3b8;
  --graphite-500: #64748b;
  --graphite-400: #475569;
  --graphite-300: #334155;
  --graphite-200: #1e222d;
  --graphite-100: #12141a;

  --border-card: #1e222d;
  --border-subtle: #1e222d;

  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-card-hover: 0 12px 32px rgba(0, 0, 0, 0.65);
  --shadow-modal: 0 24px 38px -5px rgba(0, 0, 0, 0.7), 0 10px 15px -6px rgba(0, 0, 0, 0.5);
}

/* 1. Header, Barra de Estado y Píldoras */
[data-theme="dark"] .app-header {
  background: #0e1015 !important;
  border-bottom-color: #1e222d !important;
}

[data-theme="dark"] .status-pill,
[data-theme="dark"] .header-user-pill,
[data-theme="dark"] .intel-pill {
  background: #181b24 !important;
  border-color: #272d3d !important;
  color: #cbd5e1 !important;
}

[data-theme="dark"] .status-pill span,
[data-theme="dark"] .status-pill strong,
[data-theme="dark"] .header-user-name,
[data-theme="dark"] .intel-pill span {
  color: #ffffff !important;
}

[data-theme="dark"] .header-user-role {
  color: #94a3b8 !important;
}

/* 2. Tarjetas SCADA Hero (Paneles, Batería, Chilquinta, Consumo) */
[data-theme="dark"] .hero-card {
  background: #12141a !important;
  border-color: #1e222d !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .hero-card-title {
  color: #ffffff !important;
}

[data-theme="dark"] .hero-val-huge {
  color: #ffffff !important;
}

[data-theme="dark"] .hero-unit,
[data-theme="dark"] .hero-unit-battery,
[data-theme="dark"] .hero-unit-grid,
[data-theme="dark"] .hero-unit-load {
  color: #94a3b8 !important;
}

[data-theme="dark"] .hero-subdesc {
  color: #94a3b8 !important;
}

[data-theme="dark"] .hero-subdesc strong {
  color: #ffffff !important;
}

[data-theme="dark"] .stat-tile {
  background: #181b24 !important;
  border-color: #272d3d !important;
}

[data-theme="dark"] .stat-tile-val {
  color: #ffffff !important;
}

[data-theme="dark"] .stat-tile-lbl {
  color: #94a3b8 !important;
}

[data-theme="dark"] .card-footer-strip {
  border-top-color: #1e222d !important;
  color: #94a3b8 !important;
}

/* 3. DIAGRAMA LÓGICO DE FLUJO (Todo oscuro, limpio, sin recuadros blancos) */
[data-theme="dark"] .energy-distribution-section,
[data-theme="dark"] .logical-card {
  background: #12141a !important;
  border-color: #1e222d !important;
}

[data-theme="dark"] .logical-canvas-wrapper {
  background: radial-gradient(circle at center, #181b26 0%, #0d0f15 100%) !important;
  border: 1px solid #1e222d !important;
}

[data-theme="dark"] .logical-pipe-base {
  stroke: #1e2330 !important;
}

[data-theme="dark"] .logical-node-box {
  background: #181b24 !important;
  border-color: #272d3d !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .logical-node-box:hover {
  border-color: #3b4256 !important;
  box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.65) !important;
}

[data-theme="dark"] .node-value {
  color: #ffffff !important;
}

[data-theme="dark"] .node-label {
  color: #94a3b8 !important;
}

[data-theme="dark"] .node-subvalue {
  color: #34d399 !important;
}

[data-theme="dark"] .node-inverter {
  background: #1e222e !important;
  border-color: #2e3649 !important;
  color: #ffffff !important;
  box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.7) !important;
}

[data-theme="dark"] .inverter-chip-title {
  color: #ffffff !important;
}

[data-theme="dark"] .view-pill-btn {
  background: #181b24 !important;
  border-color: #272d3d !important;
  color: #94a3b8 !important;
}

[data-theme="dark"] .view-pill-btn.active {
  background: #2e3649 !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
}

/* 4. Gráficos Chart.js y Donut de Distribución */
[data-theme="dark"] .chart-card-mono,
[data-theme="dark"] .mono-analytics-card,
[data-theme="dark"] .table-card-mono {
  background: #12141a !important;
  border-color: #1e222d !important;
}

[data-theme="dark"] .chart-title-mono {
  color: #ffffff !important;
}

[data-theme="dark"] .card-desc-mono {
  color: #94a3b8 !important;
}

[data-theme="dark"] .legend-card {
  background: #181b24 !important;
  border: 1px solid #272d3d !important;
}

[data-theme="dark"] .legend-card-solar {
  border-left: 4.5px solid #f59e0b !important;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.12) 0%, #181b24 50%) !important;
}

[data-theme="dark"] .legend-card-solar .card-title-text {
  color: #fbbf24 !important;
}

[data-theme="dark"] .legend-card-grid {
  border-left: 4.5px solid #0284c7 !important;
  background: linear-gradient(90deg, rgba(2, 132, 199, 0.12) 0%, #181b24 50%) !important;
}

[data-theme="dark"] .legend-card-grid .card-title-text {
  color: #38bdf8 !important;
}

[data-theme="dark"] .legend-card-total {
  border-left: 4.5px solid #8b5cf6 !important;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.12) 0%, #181b24 50%) !important;
}

[data-theme="dark"] .legend-card-total .card-title-text {
  color: #a78bfa !important;
}

[data-theme="dark"] .legend-metric-val {
  color: #ffffff !important;
}

[data-theme="dark"] .donut-center-pct {
  color: #ffffff !important;
}

[data-theme="dark"] .donut-center-lbl {
  color: #94a3b8 !important;
}

/* 5. Badge En Vivo y Tablas Técnicas Modbus */
[data-theme="dark"] .pill-live-status {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] .pill-live-text {
  color: #34d399 !important;
}

[data-theme="dark"] .tech-table-mono {
  background: #12141a !important;
}

[data-theme="dark"] .tech-table-mono th {
  background: #181b24 !important;
  color: #94a3b8 !important;
  border-bottom-color: #272d3d !important;
}

[data-theme="dark"] .tech-table-mono td {
  border-bottom-color: #1e222d !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .tech-table-mono tr:hover td {
  background: #1a1e28 !important;
}

/* 6. Modales, Formularios y Sofía Center */
[data-theme="dark"] .modal-card,
[data-theme="dark"] .modal-sofia-card,
[data-theme="dark"] .sofia-section-card {
  background: #12141a !important;
  border-color: #1e222d !important;
  color: #f1f5f9 !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .sofia-modal-header,
[data-theme="dark"] .sofia-modal-footer {
  border-color: #1e222d !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] .sofia-input {
  background-color: #181b24 !important;
  border-color: #272d3d !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-secondary {
  background-color: #181b24 !important;
  border-color: #272d3d !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .btn-secondary:hover {
  background-color: #222634 !important;
}

[data-theme="dark"] .flyout-header,
[data-theme="dark"] .flyout-footer,
[data-theme="dark"] .notifications-flyout {
  background-color: #12141a !important;
  border-color: #1e222d !important;
  color: #ffffff !important;
}

/* Botón Dark Mode Toggle */
.btn-theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  color: var(--graphite-700);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  box-shadow: var(--shadow-sm);
}

.btn-theme-toggle:hover {
  background: var(--bg-hover);
  color: #f59e0b;
  transform: translateY(-1px);
}

[data-theme="dark"] .btn-theme-toggle {
  background: #181b24 !important;
  border-color: #272d3d !important;
  color: #fbbf24 !important;
}


/* Badge de Telemetría En Vivo (Refinado y Elegante) */
.pill-live-status {
  padding: 0.35rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 999px;
  transition: all 0.2s ease;
}

.pill-live-text {
  font-weight: 700;
  font-size: 0.8rem;
  color: #059669;
}

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

body {
  font-family: var(--font-sans);
  background-color: var(--bg-body);
  color: var(--graphite-900);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   LAYOUT PRINCIPAL CON MENÚ LATERAL OSCURO (COLAPSABLE / EXPANDIBLE)
   ========================================================================== */
.app-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
  background-color: var(--bg-body);
  position: relative;
}

/* ==========================================================================
   BACKDROP Y NAVEGACIÓN MÓVIL (OFF-CANVAS DRAWER)
   ========================================================================== */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 22, 38, 0.65);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 1150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* Barra Lateral Vertical (Tema Negro / Grafito de Lujo Estilo Apple) */
.app-sidebar {
  width: 250px;
  min-width: 250px;
  background: #111215;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  z-index: 100;
  transition: width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), min-width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
  box-shadow: 1px 0 0 0 rgba(255, 255, 255, 0.04);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Modo Colapsado / Compacto */
.app-sidebar.collapsed {
  width: 68px;
  min-width: 68px;
}

@media (max-width: 768px) {
  .app-sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    width: 275px !important;
    min-width: 275px !important;
    max-width: 82vw !important;
    z-index: 1200 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.5) !important;
  }

  .app-sidebar.mobile-open {
    transform: translateX(0) !important;
  }

  .app-sidebar.mobile-open .sidebar-item-label,
  .app-sidebar.mobile-open .sidebar-brand,
  .app-sidebar.mobile-open .sidebar-brand-text,
  .app-sidebar.mobile-open .sidebar-group-label,
  .app-sidebar.mobile-open .sidebar-user-info {
    display: flex !important;
  }

  .app-sidebar.mobile-open .sidebar-nav-item {
    justify-content: flex-start !important;
    padding: 0.55rem 0.85rem !important;
  }

  .app-sidebar.mobile-open .sidebar-header {
    justify-content: space-between !important;
    padding: 0.8rem 0.95rem !important;
  }

  .app-main-wrapper {
    padding: 0.45rem 0.65rem 2.5rem !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

/* Encabezado del Menú Lateral (Apple Minimalist) */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  min-height: 54px;
  box-sizing: border-box;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.sidebar-brand-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}

.sidebar-logo-img {
  height: 30px;
  width: auto;
  object-fit: contain;
}

.sidebar-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.sidebar-brand-title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.sidebar-brand-light {
  color: #ffffff;
  font-weight: 300;
  opacity: 0.95;
}

.sidebar-brand-sub {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.btn-sidebar-toggle {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.65);
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  padding: 0;
}

.btn-sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.app-sidebar.collapsed .btn-sidebar-toggle svg {
  transform: rotate(180deg);
}

.app-sidebar.collapsed .sidebar-brand-text {
  display: none;
}

.app-sidebar.collapsed .sidebar-header {
  justify-content: center;
  padding: 0.8rem 0.5rem;
}

.app-sidebar.collapsed .sidebar-brand {
  display: none;
}

/* Navegación Principal (Apple Style Floating Items) */
.sidebar-nav {
  flex: 1;
  padding: 0.75rem 0.55rem;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}

.sidebar-group-label {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.38);
  padding: 0.85rem 0.75rem 0.25rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.app-sidebar.collapsed .sidebar-group-label {
  display: none;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0.52rem 0.75rem;
  border-radius: 8px;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.83rem;
  font-weight: 500;
  background: transparent;
  border: none;
  width: 100%;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  box-sizing: border-box;
  position: relative;
  text-align: left;
  font-family: inherit;
}

.sidebar-nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.sidebar-nav-item.active {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* Sofía es una herramienta interna: nunca aparece en el portal de clientes. */
body.is-client #sideNavSofia,
html.not-authenticated #sideNavSofia {
  display: none !important;
}

#modalSofiaCenter .modal-dialog {
  background: #f8fafc;
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(15,23,42,.28);
  overflow: hidden;
}
#modalSofiaCenter .modal-header {
  background: linear-gradient(135deg,#0f172a,#1e293b);
  color: #fff;
  border-bottom: 0;
}
#modalSofiaCenter .modal-title,
#modalSofiaCenter .modal-header span { color: #fff; }
#modalSofiaCenter .modal-body { background: #f8fafc; }
#modalSofiaCenter .kpi-card,
#modalSofiaCenter section { background: #fff; box-shadow: 0 8px 24px rgba(15,23,42,.06); }

.sidebar-item-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
  opacity: 0.92;
}

.sidebar-nav-item.active .sidebar-item-icon {
  opacity: 1;
}

.sidebar-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.005em;
}

.app-sidebar.collapsed .sidebar-item-label {
  display: none;
}

.sidebar-item-dot.dot-live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
  margin-left: auto;
  flex-shrink: 0;
}

.app-sidebar.collapsed .sidebar-item-dot.dot-live {
  position: absolute;
  top: 7px;
  right: 7px;
}

.app-sidebar.collapsed .sidebar-nav-item {
  justify-content: center;
  padding: 0.65rem 0;
}

.app-sidebar.collapsed .sidebar-nav-item:hover {
  transform: none;
}

/* Pie del Menú Lateral (Apple Style User Card) */
.sidebar-footer {
  padding: 0.75rem 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: background-color 0.15s ease;
}

.sidebar-user-card:hover {
  background: rgba(255, 255, 255, 0.07);
}

.sidebar-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #1b1d22;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: #ffffff;
  flex-shrink: 0;
}

.sidebar-user-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}

.sidebar-user-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-role {
  font-size: 0.66rem;
  color: rgba(255, 255, 255, 0.42);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-sidebar-logout {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.btn-sidebar-logout:hover {
  background: rgba(255, 69, 58, 0.18);
  color: #ff453a;
}

.app-sidebar.collapsed .sidebar-user-info {
  display: none;
}

.app-sidebar.collapsed .btn-sidebar-logout {
  display: inline-flex;
  padding: 6px;
  color: rgba(255, 255, 255, 0.7);
}

.app-sidebar.collapsed .sidebar-user-card {
  justify-content: center;
  background: transparent;
  border-color: transparent;
  padding: 0;
  gap: 0.5rem;
}

/* Píldora de Usuario en el Encabezado Superior */
.header-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.22rem 0.65rem 0.22rem 0.35rem;
  background: #ffffff;
  border: 1px solid var(--graphite-200);
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  font-size: 0.78rem;
}

.header-user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--graphite-950), var(--graphite-800));
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}

.header-user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}

.header-user-name {
  font-weight: 700;
  color: var(--graphite-900);
  max-width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.76rem;
}

.header-user-role {
  font-size: 0.64rem;
  color: var(--graphite-500);
  font-weight: 500;
}

.btn-header-logout {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #dc2626;
  cursor: pointer;
  padding: 3px 7px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  transition: all 0.15s ease;
  margin-left: 2px;
}

.btn-header-logout:hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
}

/* Envoltorio del contenido principal */
.app-main-wrapper {
  flex: 1;
  min-width: 0;
  padding: 0.65rem 1.5rem 3rem;
  overflow-x: hidden;
}

.btn-mobile-sidebar-toggle {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 9px;
  width: 36px;
  height: 36px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.btn-mobile-sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.32);
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-1px);
}

@media (max-width: 1024px) {
  .btn-mobile-sidebar-toggle {
    display: inline-flex;
  }
}

/* ==========================================================================
   CABECERA / HERO SOLAR PANORÁMICO CORPORATIVO (FOTOGRAFÍA REAL CON PANELES)
   ========================================================================== */
.solar-hero-banner {
  position: relative;
  width: 100%;
  height: 86px;
  min-height: 82px;
  max-height: 92px;
  background: linear-gradient(105deg,
    rgba(8, 22, 40, 0.97) 0%,
    rgba(11, 31, 55, 0.90) 30%,
    rgba(14, 38, 68, 0.72) 58%,
    rgba(10, 28, 52, 0.40) 80%,
    rgba(8, 20, 40, 0.15) 100%),
    url('../img/solar_andes_banner.jpg') center 42% / cover no-repeat;
  border-radius: 16px;
  padding: 0 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
  box-shadow: 0 4px 24px rgba(8, 22, 40, 0.18), 0 1px 0 rgba(255,255,255,0.06) inset;
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: visible;
  z-index: 1000;
  gap: 0.5rem;
}

.solar-hero-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 8% 50%, rgba(245, 158, 11, 0.18) 0%, transparent 55%),
              radial-gradient(ellipse at 95% 50%, rgba(56, 189, 248, 0.06) 0%, transparent 45%);
  pointer-events: none;
}

/* Partículas decorativas */
.solar-hero-banner::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 35%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='86'%3E%3Ccircle cx='20' cy='20' r='1.2' fill='rgba(255,176,0,0.35)'/%3E%3Ccircle cx='80' cy='45' r='0.8' fill='rgba(255,255,255,0.25)'/%3E%3Ccircle cx='150' cy='15' r='1.5' fill='rgba(255,176,0,0.2)'/%3E%3Ccircle cx='220' cy='60' r='0.9' fill='rgba(255,255,255,0.18)'/%3E%3Ccircle cx='270' cy='30' r='1.1' fill='rgba(255,176,0,0.28)'/%3E%3Ccircle cx='120' cy='70' r='0.7' fill='rgba(255,255,255,0.15)'/%3E%3C/svg%3E") center / cover no-repeat;
  pointer-events: none;
  opacity: 0.8;
}

.hero-banner-left {
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1;
  flex-shrink: 0;
}

.hero-solar-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(245, 158, 11, 0.55));
  animation: solar-pulse 3s ease-in-out infinite;
}

@keyframes solar-pulse {
  0%, 100% { filter: drop-shadow(0 2px 8px rgba(245, 158, 11, 0.55)); }
  50% { filter: drop-shadow(0 2px 14px rgba(245, 158, 11, 0.85)); }
}

.hero-solar-icon svg {
  width: 34px;
  height: 34px;
}

.hero-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.hero-brand-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
}

.hero-brand-title .brand-ursa {
  color: #ffffff;
  font-weight: 800;
}

.hero-brand-title .brand-solar {
  color: #ffb000;
  font-weight: 800;
  text-shadow: 0 0 12px rgba(255, 176, 0, 0.5);
}

.hero-brand-title .brand-cloud {
  color: #e2e8f0;
  font-weight: 600;
}

.hero-brand-subtitle {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-top: 2px;
  text-transform: uppercase;
}

/* KPI chips en el banner derecho */
.hero-banner-right {
  z-index: 1;
  flex-shrink: 0;
}

.hero-kpi-chip {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-kpi-val {
  font-size: 0.96rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.hero-kpi-lbl {
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  margin-top: 1px;
}

@media (max-width: 900px) {
  .hero-kpi-chip { display: none; }
  .hero-banner-right > div[style*="height:28px"] { display: none; }
}

@media (max-width: 640px) {
  .solar-hero-banner {
    height: 72px;
    min-height: 68px;
    padding: 0 0.75rem;
    border-radius: 12px;
    margin-bottom: 0.5rem;
  }
  .hero-solar-icon { width: 30px; height: 30px; }
  .hero-solar-icon svg { width: 26px; height: 26px; }
  .hero-brand-title { font-size: 1.1rem; }
  .hero-brand-subtitle { font-size: 0.62rem; }
}

@media (max-width: 640px) {
  .solar-hero-banner {
    height: 72px;
    min-height: 68px;
    padding: 0.4rem 0.75rem;
    border-radius: 12px;
    margin-bottom: 0.5rem;
  }
  .hero-solar-icon {
    width: 30px;
    height: 30px;
  }
  .hero-solar-icon svg {
    width: 26px;
    height: 26px;
  }
  .hero-brand-title {
    font-size: 1.15rem;
  }
  .hero-brand-subtitle {
    font-size: 0.66rem;
  }
  .btn-mobile-sidebar-toggle {
    width: 32px;
    height: 32px;
  }
}

/* ==========================================================================
   BARRA DE ESTADO SUPERIOR FLOTANTE
   ========================================================================== */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  padding: 0.35rem 1rem;
  background: #ffffff;
  border: 1px solid #dce5ee;
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(26, 54, 93, 0.04);
  margin-bottom: 0.65rem;
  min-height: 44px;
}

@media (max-width: 768px) {
  .app-header {
    padding: 0.4rem 0.65rem;
    gap: 0.45rem;
    border-radius: 14px;
    margin-bottom: 0.5rem;
  }
  .header-status-group {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .header-status-group::-webkit-scrollbar {
    display: none;
  }
  .status-pill {
    flex-shrink: 0;
    height: 32px;
    font-size: 0.73rem;
    padding: 0 0.65rem;
  }
  .header-user-corner {
    width: 100%;
    justify-content: flex-end;
  }
}

/* Estado Pills */
.header-status-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 36px;
  padding: 0 0.85rem;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #dce5ee;
  font-size: 0.76rem;
  color: #102a43;
  font-weight: 500;
  box-shadow: none;
  transition: all 0.15s ease;
}

.status-pill:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.status-pill strong {
  color: #102a43;
  font-weight: 700;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot.pulse-emerald {
  background-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.status-dot.dot-offline {
  background-color: #e5484d;
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.2);
}

.status-dot.pulse-blue {
  background-color: var(--blue-tech);
}

/* Botones Monocromáticos */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}

.btn-primary {
  background: var(--graphite-900);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.1);
}

.btn-primary:hover {
  background: var(--graphite-800);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.15);
}

.btn-secondary {
  background: var(--bg-surface);
  color: var(--graphite-800);
  border: 1px solid var(--graphite-300);
}

.btn-secondary:hover {
  background: var(--bg-subtle);
  border-color: var(--graphite-400);
}

/* ==========================================================================
   BARRA SELECTORA DE PROYECTO E INVERSOR EN VIVO
   ========================================================================== */
.device-selector-bar {
  background: #ffffff;
  border: 1px solid #dde6ee;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(26, 54, 93, 0.06);
  padding: 0.4rem 1.1rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  gap: 0.75rem;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .device-selector-bar {
    height: auto !important;
    min-height: 50px !important;
    max-height: none !important;
    padding: 0.55rem 0.85rem !important;
  }
  .selector-left {
    gap: 0.6rem !important;
  }
  .select-wrapper {
    flex: 1;
    min-width: 190px;
  }
  .select-wrapper select {
    min-width: 0 !important;
    width: 100% !important;
  }
  .device-badge {
    margin-left: 0 !important;
    width: 100%;
    text-align: center;
  }
}

.selector-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  width: 100%;
}

.selector-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
}

.select-wrapper {
  position: relative;
  display: inline-flex;
}

.select-wrapper select {
  background: #f8fafc;
  border: 1px solid #dce5ee;
  color: #102a43;
  padding: 0.42rem 2.2rem 0.42rem 0.85rem;
  border-radius: 10px;
  font-size: 0.84rem;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  min-width: 270px;
  height: 38px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  transition: all 0.15s ease;
}

.select-wrapper select:hover {
  border-color: #cbd5e1;
  background-color: #ffffff;
}

.select-wrapper select:focus {
  border-color: #1687e8;
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(22, 135, 232, 0.12);
}

.device-badge {
  display: inline-block;
  background: #f0f6fc;
  color: #123a63;
  border: 1px solid #d8e5f2;
  padding: 0.38rem 0.95rem;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-left: auto;
}

.selector-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.logger-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #ffffff;
  border: 1px solid #dce5ee;
  padding: 0.28rem 0.75rem;
  border-radius: 8px;
  font-size: 0.76rem;
  font-family: var(--font-mono);
  color: #64748b;
}

.logger-pill strong {
  color: #102a43;
}

.last-seen-pill {
  font-size: 0.74rem;
  color: #64748b;
}

/* ==========================================================================
   ÁREA PRINCIPAL: 4 TARJETAS DE TELEMETRÍA HORIZONTALES
   ========================================================================== */
/* ==========================================================================
   ÁREA PRINCIPAL: 4 TARJETAS DE TELEMETRÍA HORIZONTALES (COMPACTO Y ALINEADO)
   ========================================================================== */
.hero-telemetry-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 1rem !important;
  width: 100% !important;
  max-width: 1380px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Pantallas de notebooks y laptops (1100px a 1366px): conservan 4 tarjetas en 1 fila */
@media (min-width: 1100px) and (max-width: 1366px) {
  .hero-telemetry-grid {
    gap: 10px !important;
  }
  .hero-card {
    padding: 10px 10px 8px !important;
  }
  .hero-val-huge {
    font-size: 2.2rem !important;
  }
  .stat-breakdown-grid {
    gap: 6px !important;
  }
  .stat-tile {
    padding: 3px 5px !important;
  }
}

/* Tablets grandes y notebooks compactas (681px a 1099px): 2 columnas x 2 filas */
@media (min-width: 681px) and (max-width: 1099px) {
  .hero-telemetry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* Teléfonos móviles (<= 680px): 1 columna */
@media (max-width: 680px) {
  .hero-telemetry-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

.hero-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #dde6ee;
  border-radius: 14px;
  padding: 12px 14px 10px;
  box-shadow: 0 4px 14px rgba(26, 54, 93, 0.05);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 260px !important;
  min-height: 260px !important;
  max-height: 260px !important;
  box-sizing: border-box !important;
  min-width: 0;
  overflow: hidden;
}

.hero-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26, 54, 93, 0.10);
  border-color: #c9dbe9;
}

/* Watermarks en el fondo de las tarjetas */
.card-bg-watermark {
  position: absolute;
  right: 6px;
  top: 42px;
  width: 85px;
  height: 85px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.07;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.watermark-solar {
  opacity: 0.07;
}

.watermark-battery {
  opacity: 0.06;
}

.watermark-grid {
  opacity: 0.065;
}

.watermark-load {
  opacity: 0.065;
}

.hero-card:hover .card-bg-watermark {
  opacity: 0.10;
  transform: scale(1.03);
}

/* Encabezado interno de tarjeta - Altura estricta para alineación perfecta */
.hero-card-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  margin-bottom: 6px !important;
  gap: 0.4rem;
  min-width: 0;
}

.hero-icon-box {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero-icon-box svg {
  width: 17px;
  height: 17px;
}

.icon-box-solar {
  background: #fef7e6;
  color: #f59e0b;
}

.icon-box-battery {
  background: #edfaf3;
  color: #10b981;
}

.icon-box-grid {
  background: #ebf5fe;
  color: #1687e8;
}

.icon-box-load {
  background: #f3e8ff;
  color: #7c4dff;
}

.card-badges-row {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow: hidden;
}

.btn-icon-tiny {
  background: transparent;
  border: 1px solid var(--graphite-200);
  border-radius: 6px;
  width: 22px;
  height: 22px;
  min-width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--graphite-500);
  padding: 0;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.btn-icon-tiny:hover {
  background: var(--bg-subtle);
  color: var(--graphite-900);
  border-color: var(--graphite-400);
}

.hero-badge {
  font-size: 0.67rem !important;
  font-weight: 600 !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.badge-solar-pr {
  background: #fff1f2;
  color: #e11d48;
  border: 1px solid #fecdd3;
  font-weight: 700;
  cursor: pointer;
}

.badge-solar-pr:hover {
  background: #ffe4e6;
}

.badge-solar-active {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  cursor: pointer;
}

.badge-solar-active:hover {
  background: #dbeafe;
}

.badge-batt-soh {
  background: #edfaf3;
  color: #0e8554;
  border: 1px solid #b4eacd;
  font-weight: 600;
}

.badge-batt-state {
  background: #edfaf3;
  color: #0e8554;
  border: 1px solid #b4eacd;
  font-weight: 600;
}

.badge-grid-status {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #dce5ee;
}

.badge-load-pct {
  background: #f3e8ff;
  color: #7c4dff;
  border: 1px solid #e9d5ff;
}

/* Título de la tarjeta - Altura estricta para alineación perfecta */
.hero-card-title-group {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin-bottom: 6px !important;
  overflow: hidden;
}

.hero-card-title {
  font-family: 'Inter', var(--font-heading), sans-serif;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #102a43;
  line-height: 1.15;
  margin: 0;
}

.hero-card-title-group .hero-subdesc {
  font-size: 11.5px !important;
  color: #64748b;
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Valor principal - Altura estricta (66px) y alineación baseline */
.hero-main-stat {
  position: relative;
  z-index: 1;
  height: 66px !important;
  min-height: 66px !important;
  max-height: 66px !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: 6px !important;
  overflow: hidden;
}

.hero-val-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 3px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
}

.hero-val-huge {
  font-family: 'Inter', var(--font-heading), sans-serif !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #102a43;
  letter-spacing: -0.02em;
}

.hero-unit {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #102a43;
  margin-left: 2px;
  line-height: 1;
}

.hero-unit-battery {
  color: #102a43;
}

.hero-unit-grid {
  color: #102a43;
}

.hero-unit-load {
  color: #102a43;
}

.hero-main-stat .hero-subdesc {
  display: block;
  height: 15px !important;
  min-height: 15px !important;
  max-height: 15px !important;
  line-height: 15px !important;
  font-size: 11px !important;
  color: #64748b;
  font-weight: 500;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-main-stat .hero-subdesc strong {
  color: #102a43;
  font-weight: 700;
}

/* Barra de nivel - Exactamente a Y = 164px */
.level-track {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 4px !important;
  min-height: 4px !important;
  max-height: 4px !important;
  background: #e8eef5;
  border-radius: 999px;
  overflow: hidden;
  margin: 0 0 6px 0 !important;
}

.level-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.level-fill-solar {
  background: #f59e0b;
}

.level-fill-battery {
  background: #10b981;
}

.level-fill-grid {
  background: #1687e8;
}

.level-fill-load {
  background: #7c4dff;
}

/* Desglose de subtarjetas internas */
.stat-breakdown-grid {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  margin-bottom: 4px !important;
}

.stat-tile {
  background: #f4f7fa;
  border: 1px solid #e5edf4;
  border-radius: 7px;
  padding: 4px 7px !important;
  min-width: 0;
  transition: background-color 0.15s ease;
}

.stat-tile:hover {
  background: #eaf1f8;
}

.stat-tile-label,
.stat-tile-lbl {
  display: block;
  font-size: 10.5px !important;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-tile-sub {
  display: block;
  font-size: 10px !important;
  color: #64748b;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-tile-val {
  font-family: 'Inter', var(--font-heading), sans-serif;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #102a43;
  margin: 0;
  white-space: nowrap;
}

/* Pie de tarjeta estándar (Card 1, Card 4) */
.card-footer-strip {
  position: relative;
  z-index: 1;
  margin-top: auto !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 11px !important;
  color: #64748b !important;
  padding: 0 2px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-footer-strip > * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.card-footer-strip strong {
  font-weight: 700 !important;
}

/* Pie de tarjeta batería */
.batt-footer-row {
  position: relative;
  z-index: 1;
  margin-top: auto !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 11px !important;
  color: #64748b !important;
  padding: 0 2px !important;
}

.batt-footer-row strong {
  color: #102a43;
  font-weight: 700;
}

/* Panel económico de Red Chilquinta */
.grid-econ-box {
  position: relative;
  z-index: 1;
  margin-top: auto !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 11px !important;
  padding: 0 2px !important;
  background: transparent !important;
  border: none !important;
}

.grid-econ-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.grid-econ-tag {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.econ-title-text {
  font-weight: 700;
  color: #1687e8;
  font-size: 11.5px !important;
}

.econ-amount-text {
  font-size: 12.5px !important;
  font-weight: 750;
  color: #102a43;
  font-family: 'Inter', var(--font-heading), sans-serif;
}

.grid-econ-bottom {
  display: none !important;
}

/* ==========================================================================
   DIAGRAMA DE FLUJO ENERGÉTICO MONOCROMÁTICO
   ========================================================================== */
.flow-card-mono {
  background: var(--bg-surface);
  border: 1px solid var(--graphite-200);
  border-radius: 18px;
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
  margin-bottom: 1.75rem;
}

.card-header-mono {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.card-title-mono {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--graphite-950);
}

.card-desc-mono {
  font-size: 0.8rem;
  color: var(--graphite-500);
}

.power-flow-mono {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
}

.flow-box-mono {
  background: var(--bg-subtle);
  border: 1px solid var(--graphite-200);
  border-radius: 14px;
  padding: 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: var(--transition);
}

.flow-box-mono:hover {
  background: #ffffff;
  border-color: var(--graphite-400);
  box-shadow: var(--shadow-sm);
}

.flow-box-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--graphite-200);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--graphite-900);
  margin-bottom: 0.5rem;
}

.flow-box-icon svg {
  width: 22px;
  height: 22px;
}

.flow-box-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--graphite-500);
}

.flow-box-val {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--graphite-950);
  margin: 0.35rem 0;
}

.flow-box-sub {
  font-size: 0.75rem;
  color: var(--graphite-500);
  font-family: var(--font-mono);
}



/* ==========================================================================
   GRÁFICOS EN TIEMPO REAL (BLANCO Y GRAFITO)
   ========================================================================== */
.charts-grid-mono {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.02fr);
  gap: 1.25rem;
  margin-bottom: 1.75rem;
  align-items: stretch;
}

.charts-grid-mono>* {
  min-width: 0;
  /* Previene deformación o desborde horizontal en CSS Grid */
}

@media (max-width: 1080px) {
  .charts-grid-mono {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .chart-card-mono {
    height: auto !important;
    max-height: none !important;
    min-height: 380px !important;
    padding: 0.95rem 1rem !important;
  }
  .chart-filters-mono {
    overflow-x: auto !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 2px !important;
  }
  .chart-filters-mono::-webkit-scrollbar {
    display: none !important;
  }
  .btn-filter-mono {
    flex-shrink: 0 !important;
    padding: 4px 8px !important;
    font-size: 0.72rem !important;
  }
}

.chart-card-mono {
  background: var(--bg-surface);
  border: 1px solid var(--graphite-200);
  border-radius: 18px;
  padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow-card);
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 420px;
  /* Tamaño de cuadro estrictamente fijo para evitar que se deforme */
  max-height: 420px;
  box-sizing: border-box;
  overflow: hidden;
}

.chart-header-mono {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.15rem;
  flex-shrink: 0;
}

.chart-title-mono {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--graphite-950);
}

.chart-filters-mono {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.btn-filter-mono {
  background: var(--bg-subtle);
  border: 1px solid var(--graphite-200);
  color: var(--graphite-700);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition);
}

.btn-filter-mono.active,
.btn-filter-mono:hover {
  background: var(--graphite-900);
  color: #ffffff;
  border-color: var(--graphite-900);
}

.chart-container-mono {
  position: relative;
  width: 100% !important;
  flex: 1 1 0;
  min-height: 0;
  height: 330px !important;
  max-height: 330px !important;
  overflow: hidden;
}

.chart-container-mono canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ==========================================================================
   MINI STRIP KPI EJECUTIVO RESUMEN (EVOLUCIÓN ENERGÉTICA)
   ========================================================================== */
.chart-kpi-summary-strip {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
  padding: 0.35rem 0.55rem;
  background: rgba(248, 250, 252, 0.85);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 9px;
  backdrop-filter: blur(4px);
}

.kpi-chip-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  color: #475569;
  background: #ffffff;
  padding: 0.22rem 0.55rem;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: all 0.2s ease;
}

.kpi-chip-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.06);
}

.kpi-chip-item .chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.kpi-chip-item.chip-solar .chip-dot { background: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, 0.4); }
.kpi-chip-item.chip-load .chip-dot { background: #a855f7; box-shadow: 0 0 6px rgba(168, 85, 247, 0.4); }
.kpi-chip-item.chip-grid .chip-dot { background: #0284c7; box-shadow: 0 0 6px rgba(2, 132, 199, 0.4); }
.kpi-chip-item.chip-savings .chip-dot { background: #10b981; box-shadow: 0 0 6px rgba(16, 185, 129, 0.4); }

.kpi-chip-item .chip-label {
  font-weight: 500;
  color: #64748b;
  font-size: 0.72rem;
}

.kpi-chip-item .chip-value {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.kpi-chip-item.chip-savings .chip-value {
  color: #059669;
}

[data-theme="dark"] .chart-kpi-summary-strip {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(51, 65, 85, 0.8);
}

[data-theme="dark"] .kpi-chip-item {
  background: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}

[data-theme="dark"] .kpi-chip-item .chip-value {
  color: #f1f5f9;
}

[data-theme="dark"] .kpi-chip-item.chip-savings .chip-value {
  color: #34d399;
}

/* ==========================================================================
   TABLA TÉCNICA DE REGISTROS
   ========================================================================== */
.table-card-mono {
  background: var(--bg-surface);
  border: 1px solid var(--graphite-200);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: 2rem;
}

.table-responsive-mono {
  width: 100%;
  overflow-x: auto;
}

.clients-table-container {
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.15) transparent;
}

.clients-table-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.clients-table-container::-webkit-scrollbar-track {
  background: transparent;
}

.clients-table-container::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.15);
  border-radius: 4px;
}

.clients-table-container::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.3);
}

.client-device-badge {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--graphite-800);
  white-space: nowrap;
  display: inline-block;
}

.tech-table-mono {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.85rem;
}

.tech-table-mono th {
  background: var(--bg-subtle);
  padding: 1rem 1.25rem;
  color: var(--graphite-600);
  font-weight: 600;
  border-bottom: 1px solid var(--graphite-200);
}

.tech-table-mono td {
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--graphite-100);
  color: var(--graphite-800);
}

.tech-table-mono tr:hover td {
  background: var(--bg-subtle);
}

.reg-badge-mono {
  font-family: var(--font-mono);
  background: var(--graphite-100);
  border: 1px solid var(--graphite-200);
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  font-size: 0.78rem;
  color: var(--graphite-800);
}

@keyframes liveCellFlash {
  0% {
    background-color: rgba(16, 185, 129, 0.22);
    color: #047857;
  }

  100% {
    background-color: transparent;
  }
}

.cell-live-update {
  animation: liveCellFlash 1.4s ease-out;
}

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

.spin-icon {
  animation: spinIcon 1s linear infinite;
}

/* ==========================================================================
   MODALES (ESTILO BLANCO Y GRAFITO)
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 1.25rem 1rem;
  overflow-y: auto;
  box-sizing: border-box;
}

.modal-backdrop.active {
  display: flex;
}

.modal-card {
  background: #ffffff;
  border: 1px solid var(--graphite-200);
  border-radius: 16px;
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 2.5rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  position: relative;
  margin: auto;
}

.modal-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.35rem;
  border-bottom: 1px solid var(--graphite-200);
  background: #ffffff;
  position: relative;
  z-index: 5;
}

.modal-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--graphite-950);
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--graphite-400);
  font-size: 1.6rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.modal-close:hover {
  color: var(--graphite-900);
  background: var(--graphite-100);
}

.modal-card form,
.modal-body {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

/* Layout específico para modales con header fijo, body scrollable y footer fijo */
.modal-form-fixed {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.modal-form-fixed .modal-body {
  padding: 1rem 1.35rem !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

.modal-form-fixed .modal-footer {
  flex-shrink: 0 !important;
  margin-top: 0 !important;
  border-top: 1px solid var(--graphite-200) !important;
  background: #ffffff !important;
  padding: 0.75rem 1.35rem !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* Modales: Ajuste estricto de Selects para evitar desbordes horizontales */
.modal-card .select-wrapper {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
}

.modal-card .select-wrapper select {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Modal de Reporte Ejecutivo Agrandado y Elegante */
.modal-report-card {
  max-width: 1040px !important;
  width: min(1040px, 95vw) !important;
  border-radius: 18px !important;
  box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.45), 0 0 0 1px rgba(15, 23, 42, 0.08) !important;
}

.report-benefits-card {
  background: #ffffff;
  padding: 0.95rem 1.15rem;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 108px;
}

.report-benefits-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -3px rgba(15, 23, 42, 0.08);
}

.form-group {
  margin-bottom: 1.15rem;
}

.form-label {
  display: block;
  font-size: 0.8rem;
  color: var(--graphite-700);
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.form-control {
  width: 100%;
  background: var(--bg-subtle);
  border: 1px solid var(--graphite-300);
  color: var(--graphite-900);
  padding: 0.65rem 0.9rem;
  border-radius: 8px;
  font-size: 0.9rem;
  outline: none;
  transition: var(--transition);
}

.form-control:focus {
  background: #ffffff;
  border-color: var(--graphite-900);
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}

.form-hint {
  display: block;
  font-size: 0.74rem;
  color: var(--graphite-500);
  margin-top: 0.35rem;
}

.modal-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--graphite-200);
  background: #ffffff;
  margin-top: 0;
}

/* Callouts de estado para Onboarding y Formularios */
.status-callout {
  padding: 0.85rem 1rem;
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.45;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.status-callout.loading {
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid var(--graphite-300);
  color: var(--graphite-800);
}

.status-callout.success {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #065f46;
}

.status-callout.error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #991b1b;
}

.spinner-inline {
  width: 16px;
  height: 16px;
  border: 2px solid var(--graphite-300);
  border-top-color: var(--graphite-900);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Optgroups en el selector de equipos */
select optgroup {
  font-weight: 700;
  color: var(--graphite-800);
  background: var(--bg-subtle);
}

select option {
  font-weight: 400;
  color: var(--graphite-950);
  padding: 4px 8px;
}

/* Responsividad */
@media (max-width: 768px) {
  .app-layout {
    padding: 1rem;
  }

  .app-header {
    flex-direction: column;
    align-items: stretch;
  }

  .header-actions {
    flex-direction: column;
  }

  .header-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-val-huge {
    font-size: 2.2rem;
  }
}

/* Bloqueo estricto de autenticación para cloud.ursa.cl (Cero parpadeo ni exposición del DOM) */
html.not-authenticated #appLayout {
  display: none !important;
}

html.not-authenticated #loginOverlay,
.login-overlay.active {
  display: flex !important;
}

/* Pantalla de Login Restringido (Fondo Fotográfico Solar & Tarjeta de Lujo de Vidrio Templado) */
.login-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.62) 0%, rgba(30, 41, 59, 0.76) 100%),
    url('../img/solar_andes_banner.jpg') center center / cover no-repeat;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 1.5rem;
  overflow-y: auto;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.login-card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 20px;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  max-width: 410px;
  width: 100%;
  padding: 2.5rem 2.25rem;
  text-align: center;
  animation: modalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.login-card .form-control {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  border-radius: 9px !important;
  transition: all 0.2s ease !important;
}

.login-card .form-control:focus {
  border-color: #0070f3 !important;
  box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.15) !important;
  background: #ffffff !important;
}

.login-card #btnLoginSubmit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.32);
}

/* Campo de Contraseña con Toggle de Ojo */
.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.password-input-wrapper input.form-control {
  padding-right: 2.75rem !important;
}

.btn-toggle-eye {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--graphite-400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
  z-index: 2;
}

.btn-toggle-eye:hover {
  color: var(--graphite-900);
  background: rgba(0, 0, 0, 0.04);
}

.btn-toggle-eye:focus {
  outline: none;
  color: var(--graphite-900);
}

/* Ocultar iconos nativos de contraseña de Edge/Windows para evitar colisiones */
input::-ms-reveal,
input::-ms-clear {
  display: none !important;
}

/* ==========================================================================
   BARRA SELECTORA DE MODOS DE VISTA (3 MODOS: ESCENA 3D, LÓGICO, TARJETAS)
   ========================================================================== */
.energy-distribution-section {
  margin-bottom: 1.75rem;
}

.distribution-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
  background: var(--bg-surface);
  border: 1px solid var(--graphite-200);
  border-radius: 14px;
  padding: 0.85rem 1.25rem;
  box-shadow: var(--shadow-sm);
}

.distribution-header-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.view-mode-selector-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
  background: var(--bg-surface);
  border: 1px solid var(--graphite-200);
  border-radius: 14px;
  padding: 0.85rem 1.25rem;
  box-shadow: var(--shadow-sm);
}

.view-mode-header-group {
  display: flex;
  flex-direction: column;
}

.view-mode-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--graphite-900);
}

.view-mode-subtitle {
  font-size: 0.78rem;
  color: var(--graphite-500);
}

.view-mode-pill-group {
  display: inline-flex;
  align-items: center;
  background: var(--bg-subtle);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--graphite-200);
  gap: 4px;
}

.view-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--graphite-600);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  white-space: nowrap;
}

.view-pill-btn:hover {
  color: var(--graphite-900);
  background: rgba(255, 255, 255, 0.6);
}

.view-pill-btn.active {
  color: #ffffff;
  background: var(--graphite-900);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
}

.pill-live-badge {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: #10b981;
  color: #ffffff;
  padding: 2px 6px;
  border-radius: 6px;
  animation: pulseEmerald 1.8s infinite;
}

.telemetry-view-container {
  display: none;
  width: 100%;
  animation: fadeInView 0.25s ease-out;
}

.telemetry-view-container.active {
  display: block;
}

@keyframes fadeInView {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   CONDUCTOS Y ANIMACIONES DE FLUJO DE ENERGÍA
   ========================================================================== */
.wire-solar {
  stroke: #f59e0b;
}

.wire-grid {
  stroke: #0284c7;
}

.wire-grid.selling {
  stroke: #10b981;
  filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.7));
}

.wire-batt {
  stroke: #10b981;
}

.wire-load {
  stroke: #8b5cf6;
}

@keyframes dashFlow {
  from {
    stroke-dashoffset: 44;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes dashFlowReverse {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: 44;
  }
}

/* Micro-destello en vivo al actualizar valores numéricos */
@keyframes liveValuePulse {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }

  40% {
    transform: scale(1.06);
    filter: brightness(1.25) drop-shadow(0 0 5px rgba(16, 185, 129, 0.45));
    color: #059669;
  }

  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

.live-value-pulse {
  animation: liveValuePulse 0.65s ease-out;
}

/* ==========================================================================
   MODO 2: DIAGRAMA LÓGICO DE FLUJO
   ========================================================================== */
.logical-card {
  background: var(--bg-surface);
  border: 1px solid var(--graphite-200);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  margin-bottom: 1.75rem;
  position: relative;
  overflow: hidden;
}

.logical-canvas-wrapper {
  position: relative;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  max-height: 520px;
  background: radial-gradient(circle at center, #ffffff 0%, #f8fafc 100%);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logical-flow-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.logical-pipe-base {
  fill: none;
  stroke: #e2e8f0;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.logical-pipe-flow {
  fill: none;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 8 14;
  animation: dashFlow 1.1s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.logical-pipe-flow.reverse-flow {
  animation: dashFlowReverse 1.1s linear infinite !important;
}

/* Nodos del Diagrama Lógico */
.logical-node-box {
  position: absolute;
  background: #ffffff;
  border: 1px solid var(--graphite-200);
  border-radius: 16px;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 165px;
  z-index: 10;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.logical-node-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px -5px rgba(15, 23, 42, 0.12);
}

.node-icon-circle {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.node-icon-circle svg {
  width: 22px;
  height: 22px;
}

.icon-grid-bg {
  background: rgba(2, 132, 199, 0.12);
  color: #0284c7;
}

.icon-solar-bg {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

.icon-batt-bg {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.icon-load-bg {
  background: rgba(139, 92, 246, 0.12);
  color: #8b5cf6;
}

.node-grid {
  top: 8%;
  left: 12%;
}

.node-solar {
  top: 8%;
  right: 12%;
}

.logical-node-box.node-solar {
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}

.logical-node-box.node-solar:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: #f59e0b;
  box-shadow: 0 16px 32px -4px rgba(245, 158, 11, 0.28), 0 4px 10px -2px rgba(245, 158, 11, 0.15);
}

.node-click-pill {
  font-size: 0.62rem;
  font-weight: 700;
  color: #b45309;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 999px;
  padding: 1px 7px;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  letter-spacing: 0.3px;
  transition: background 0.2s ease, color 0.2s ease;
}

.logical-node-box.node-solar:hover .node-click-pill {
  background: #f59e0b;
  color: #ffffff;
  border-color: #f59e0b;
}

.node-batt {
  bottom: 8%;
  left: 12%;
}

.node-load {
  bottom: 8%;
  right: 12%;
}

.node-inverter {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  padding: 1.1rem;
  background: var(--graphite-900);
  border-color: var(--graphite-800);
  color: #ffffff;
  box-shadow: 0 15px 35px -5px rgba(15, 23, 42, 0.35);
}

.node-inverter:hover {
  transform: translate(-50%, -52%);
}

.inverter-screen-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  margin-bottom: 0.35rem;
}

.inverter-chip-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffffff;
}

.inverter-chip-status {
  display: inline-block;
  font-size: 0.68rem;
  line-height: 1.25;
  color: #34d399;
  background: rgba(52, 211, 153, 0.15);
  padding: 3px 8px;
  border-radius: 5px;
  margin-top: 4px;
  text-align: center;
}

.node-value {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--graphite-950);
  line-height: 1.15;
}

.node-subvalue {
  font-size: 0.85rem;
  font-weight: 700;
  color: #059669;
  margin-top: 2px;
}

.node-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--graphite-500);
  margin-top: 2px;
}

@media (max-width: 900px) {

  .scene-canvas-wrapper,
  .logical-canvas-wrapper {
    aspect-ratio: auto;
    height: 480px;
  }

  .scene-card-callout,
  .logical-node-box {
    padding: 0.5rem 0.75rem;
    min-width: 120px;
    width: auto;
  }

  .callout-value,
  .node-value {
    font-size: 1rem;
  }

  .callout-icon-wrapper,
  .node-icon-circle {
    width: 32px;
    height: 32px;
  }

  .callout-icon-wrapper svg,
  .node-icon-circle svg {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 640px) {
  .logical-canvas-wrapper {
    aspect-ratio: auto !important;
    height: 380px !important;
    min-height: 360px !important;
  }

  .logical-node-box {
    padding: 0.4rem 0.5rem !important;
    width: 104px !important;
    min-width: 96px !important;
    border-radius: 12px !important;
  }

  .node-grid {
    top: 6% !important;
    left: 4% !important;
  }

  .node-solar {
    top: 6% !important;
    right: 4% !important;
  }

  .node-batt {
    bottom: 6% !important;
    left: 4% !important;
  }

  .node-load {
    bottom: 6% !important;
    right: 4% !important;
  }

  .node-inverter {
    width: 100px !important;
    padding: 0.55rem 0.45rem !important;
    border-radius: 12px !important;
  }

  .inverter-screen-icon {
    width: 30px !important;
    height: 30px !important;
    margin-bottom: 0.2rem !important;
  }

  .inverter-screen-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .inverter-chip-title {
    font-size: 0.68rem !important;
  }

  .inverter-chip-status {
    font-size: 0.58rem !important;
    padding: 2px 4px !important;
  }

  .node-icon-circle {
    width: 28px !important;
    height: 28px !important;
    margin-bottom: 0.25rem !important;
    border-radius: 8px !important;
  }

  .node-icon-circle svg {
    width: 15px !important;
    height: 15px !important;
  }

  .node-value {
    font-size: 0.88rem !important;
  }

  .node-subvalue {
    font-size: 0.68rem !important;
  }

  .node-label {
    font-size: 0.65rem !important;
  }

  .node-click-pill {
    display: none !important;
  }
}

/* ==========================================================================
   PIE DE PÁGINA (MONOCROMÁTICO GRAFITO)
   ========================================================================== */
.app-footer-mono {
  margin-top: 3rem;
  padding: 1.5rem 2rem;
  background: var(--bg-surface);
  border: 1px solid var(--graphite-200);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.footer-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--graphite-600);
  display: inline-block;
}

.footer-text {
  font-size: 0.88rem;
  color: var(--graphite-600);
  margin: 0;
  letter-spacing: 0.01em;
}

.footer-highlight {
  color: var(--graphite-900);
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: 0.03em;
}

.footer-meta {
  font-size: 0.8rem;
  color: var(--graphite-400);
  font-family: var(--font-mono);
}

@media (max-width: 640px) {
  .app-footer-mono {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 1.25rem 1.5rem;
  }
}

/* ==========================================================================
   PLANTILLA DE REPORTE PDF OFICIAL (URSA SOLAR A4 - MONOCROMÁTICO EXECUTIVE)
   Diseño de lujo exclusivo en grafito, blanco y negro (Únicamente logo a color)
   ========================================================================== */
/* ==========================================================================
   INFORME EJECUTIVO DE RENDIMIENTO & AHORRO (URSA SOLAR INGENIERÍA)
   ESTÁNDAR A4 VERTICAL ESTRICTO (794px x 1122px a 96 DPI)
   ========================================================================== */
/* ==========================================================================
       PALETA EXACTA ESPECIFICADA (URSA SOLAR INGENIERÍA)
       ========================================================================== */
:root {
  --azul-corporativo: #07386A;
  --azul-marino: #002D5B;
  --azul-secundario: #087FF5;
  --azul-claro: #DFF1FF;
  --amarillo-solar: #FDB515;
  --amarillo-suave: #FFF4CB;
  --verde: #08955F;
  --verde-claro: #DCF6EB;
  --morado: #5B35D5;
  --morado-claro: #EEE8FF;
  --gris-oscuro: #344054;
  --gris-medio: #667085;
  --gris-borde: #D8E2EC;
  --gris-fondo: #F7F9FC;
  --blanco: #FFFFFF;
}

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







/* ==========================================================================
       CONTENEDOR A4 VERTICAL EXACTO (794px x 1122px a 96 DPI)
       ========================================================================== */
#reportPdfWrapper {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-sizing: border-box !important;
}

.pdf-document {
  --azul-corporativo: #07386A;
  --azul-marino: #002D5B;
  --azul-secundario: #087FF5;
  --azul-claro: #DFF1FF;
  --amarillo-solar: #FDB515;
  --amarillo-suave: #FFF4CB;
  --verde: #08955F;
  --verde-claro: #DCF6EB;
  --morado: #5B35D5;
  --morado-claro: #EEE8FF;
  --gris-oscuro: #344054;
  --gris-medio: #667085;
  --gris-borde: #D8E2EC;
  --gris-fondo: #F7F9FC;
  --blanco: #FFFFFF;
  box-sizing: border-box !important;
  width: 794px !important;
  min-width: 794px !important;
  max-width: 794px !important;
  height: 1120px !important;
  min-height: 1120px !important;
  max-height: 1120px !important;
  padding: 14px 20px 12px !important;
  background: var(--blanco) !important;
  color: var(--gris-oscuro) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  position: relative !important;
  box-shadow: none !important;
  border: none !important;
  page-break-after: avoid !important;
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

/* ==========================================================================
       1. HEADER / CABECERA PROTAGONISTA (40% / 35% / 25%)
       ========================================================================== */
.header-three-col {
  display: grid;
  grid-template-columns: 290px 1fr 225px;
  gap: 10px;
  align-items: stretch;
  height: 108px;
  margin-bottom: 7px;
}

/* Bloque Izquierdo: Logo URSA Solar Grande y Profesional */
.header-col-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 2px;
}

.header-logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-logo-img {
  height: 64px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.06));
}

.header-brand-text {
  display: flex;
  flex-direction: column;
}

.header-brand-name {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 900;
  color: var(--azul-corporativo);
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.header-brand-sub {
  font-size: 10px;
  font-weight: 700;
  color: #d97706;
  margin-top: 2px;
}

.header-brand-tagline {
  font-size: 8.5px;
  color: var(--gris-medio);
  font-weight: 600;
  margin-top: 2px;
}

/* Bloque Central: Fotografía Panorámica Paneles Solares Cordillera */
.header-col-center {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #0284c7;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.header-center-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.96) contrast(1.05);
}

.header-center-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.2) 55%, rgba(0, 0, 0, 0.18) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 8px;
  text-align: center;
}

.header-center-script {
  font-family: 'Caveat', cursive;
  font-size: 19px;
  font-weight: 700;
  color: var(--azul-corporativo);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95);
  line-height: 1.1;
}

.header-center-underline {
  width: 54px;
  height: 2.5px;
  background: var(--amarillo-solar);
  border-radius: 2px;
  margin-top: 3px;
}

/* Bloque Derecho: Bloque Azul Marino Fuerte */
.header-col-right {
  background: var(--azul-corporativo);
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--blanco);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 3px 10px rgba(7, 56, 106, 0.3);
}

.header-badge-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 5px;
}

.header-doc-icon {
  width: 20px;
  height: 20px;
  color: var(--amarillo-solar);
  flex-shrink: 0;
}

.header-doc-title {
  font-family: 'Outfit', sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.header-meta-items {
  display: flex;
  flex-direction: column;
  gap: 2.5px;
  margin: 4px 0;
}

.header-meta-line {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: #cbd5e1;
}

.header-meta-line strong {
  color: var(--blanco);
  font-weight: 700;
}

.header-badge-foot {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 7.5px;
  color: #93c5fd;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 4px;
}

/* ==============================================================
       2. FRANJA AZUL DE MARCA (#002D5B)
       ============================================================== */
.brand-strip {
  background: var(--azul-marino);
  border-radius: 6px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  color: var(--blanco);
  margin-bottom: 8px;
}

.brand-strip-left {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brand-strip-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.brand-strip-divider {
  color: rgba(255, 255, 255, 0.35);
  font-weight: 300;
}

.brand-strip-right {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--amarillo-solar);
  text-transform: uppercase;
}

/* ==============================================================
       3. BLOQUE INFORMACIÓN DEL PROYECTO (3 TARJETAS)
       ============================================================== */
.project-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 8px;
}

.info-card {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: 9px;
  padding: 8px 11px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.info-icon-box {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--azul-claro);
  color: var(--azul-secundario);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.info-icon-box.green {
  background: var(--verde-claro);
  color: var(--verde);
}

.info-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.info-label {
  font-size: 7.2px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gris-medio);
  margin-bottom: 2px;
}

.info-title {
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--azul-corporativo);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info-meta-sub {
  font-size: 8px;
  color: var(--gris-medio);
  margin-top: 2px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==============================================================
       4. INDICADORES CLAVE (4 TARJETAS CON FONDO SUAVE Y KPIS GRANDES)
       ============================================================== */
.section-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.section-title {
  font-family: 'Outfit', sans-serif;
  font-size: 9.8px;
  font-weight: 800;
  color: var(--azul-corporativo);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.section-title-icon {
  width: 13px;
  height: 13px;
  color: var(--verde);
  flex-shrink: 0;
}

.section-subtext {
  font-size: 8px;
  color: var(--gris-medio);
  font-style: italic;
}

.kpi-main-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 8px;
}

.kpi-main-card {
  border-radius: 10px;
  padding: 8px 10px;
  border: 1px solid var(--gris-borde);
  display: flex;
  align-items: center;
  gap: 8px;
  height: 72px;
  overflow: hidden;
}

.kpi-main-card.green-bg {
  background: var(--verde-claro);
  border-color: #bbf7d0;
}

.kpi-main-card.yellow-bg {
  background: var(--amarillo-suave);
  border-color: #fde68a;
}

.kpi-main-card.blue-bg {
  background: var(--azul-claro);
  border-color: #bae6fd;
}

.kpi-main-card.purple-bg {
  background: var(--morado-claro);
  border-color: #ddd6fe;
}

.kpi-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--blanco);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
}

.kpi-avatar svg {
  width: 15px;
  height: 15px;
}

.kpi-avatar.green {
  color: var(--verde);
}

.kpi-avatar.yellow {
  color: #d97706;
}

.kpi-avatar.blue {
  color: var(--azul-secundario);
}

.kpi-avatar.purple {
  color: var(--morado);
}

.kpi-data-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.kpi-big-num {
  font-family: 'Outfit', sans-serif;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  color: var(--azul-corporativo);
}

.kpi-big-num .unit {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--gris-medio);
  margin-left: 2px;
}

.kpi-topic {
  font-size: 8.5px;
  font-weight: 800;
  color: var(--gris-oscuro);
  margin-top: 2px;
  line-height: 1.15;
  white-space: normal;
}

.kpi-topic.green {
  color: var(--verde);
}

.kpi-caption {
  font-size: 6.8px;
  color: var(--gris-medio);
  line-height: 1.15;
  margin-top: 1px;
  white-space: normal;
  overflow: hidden;
}

/* ==============================================================
       5. BLOQUE CONSUMO + IMPACTO (70% / 30%)
       ============================================================== */
.balance-planet-row {
  display: grid;
  grid-template-columns: 1fr 230px;
  gap: 10px;
  margin-bottom: 8px;
}

.balance-box {
  background: var(--gris-fondo);
  border: 1px solid var(--gris-borde);
  border-radius: 9px;
  padding: 8px 11px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.balance-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.balance-legend {
  display: flex;
  gap: 9px;
  font-size: 7.5px;
  font-weight: 600;
  color: var(--gris-medio);
}

.balance-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dot-solar {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amarillo-solar);
  display: inline-block;
}

.dot-blue {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--azul-secundario);
  display: inline-block;
}

.dot-gray {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #94a3b8;
  display: inline-block;
}

.balance-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.bal-subcard {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: 7px;
  padding: 6px 8px;
  text-align: center;
}

.bal-subcard.highlight {
  background: var(--verde-claro);
  border-color: #86efac;
  border-top: 3px solid var(--verde);
}

.bal-val-num {
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--azul-corporativo);
  line-height: 1.1;
}

.bal-val-num.solar {
  color: #d97706;
}

.bal-val-num.blue {
  color: var(--azul-secundario);
}

.bal-val-num.green {
  color: var(--verde);
}

.bal-subtext {
  font-size: 7.2px;
  color: var(--gris-medio);
  margin-top: 2px;
}

/* Derecha: Estás Cuidando el Planeta */
.planet-card {
  background: var(--verde-claro);
  border: 1px solid #a7f3d0;
  border-radius: 9px;
  padding: 8px 11px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.planet-header {
  display: flex;
  align-items: center;
  gap: 5px;
}

.planet-icon {
  width: 14px;
  height: 14px;
  color: var(--verde);
}

.planet-title {
  font-family: 'Outfit', sans-serif;
  font-size: 8.8px;
  font-weight: 800;
  color: #065f46;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.planet-sub {
  font-size: 7.5px;
  color: #047857;
  margin-top: 1px;
}

.planet-stats-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 6px;
  margin-top: 4px;
}

.planet-metric {
  display: flex;
  align-items: center;
  gap: 5px;
}

.badge-co2 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--azul-corporativo);
  color: var(--blanco);
  font-size: 7.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tree-icon {
  width: 22px;
  height: 22px;
  color: var(--verde);
}

.planet-metric-text {
  display: flex;
  flex-direction: column;
}

.planet-num {
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  color: #065f46;
  line-height: 1;
}

.planet-lbl {
  font-size: 6.8px;
  color: #047857;
}

/* ==============================================================
       6. BANNER RESULTADO (FRANJA AZUL CLARA CLARAMENTE VISIBLE)
       ============================================================== */
.result-banner {
  background: var(--azul-claro);
  border: 1px solid #b9e0fe;
  border-radius: 8px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.result-banner-left {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
}

.result-target-icon {
  width: 22px;
  height: 22px;
  color: var(--azul-secundario);
  flex-shrink: 0;
}

.result-text-block {
  font-size: 8px;
  color: var(--azul-corporativo);
  line-height: 1.3;
}

.result-title-bold {
  font-weight: 800;
  font-size: 9.5px;
  color: var(--azul-corporativo);
  margin-right: 5px;
}

.result-banner-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  border-left: 1px solid rgba(8, 127, 245, 0.25);
  padding-left: 10px;
}

.result-trend-icon {
  width: 18px;
  height: 18px;
  color: var(--azul-secundario);
}

.result-tagline-right {
  font-size: 7.5px;
  font-weight: 800;
  color: var(--azul-corporativo);
  line-height: 1.15;
}

/* ==============================================================
       7. DETALLE DEL SISTEMA Y RENDIMIENTO (4 COLUMNAS)
       ============================================================== */
.batt-four-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 8px;
}

.batt-card {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.batt-icon {
  width: 20px;
  height: 20px;
  color: var(--azul-corporativo);
  flex-shrink: 0;
}

.batt-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.batt-lbl {
  font-size: 7.2px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gris-medio);
  letter-spacing: 0.03em;
}

.batt-val {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: var(--azul-corporativo);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.batt-desc {
  font-size: 6.8px;
  color: var(--gris-medio);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* ==============================================================
       8. GRÁFICO PRINCIPAL GRANDE (75%) + TU IMPACTO POSITIVO (25%)
       ============================================================== */
.chart-impact-row {
  display: grid;
  grid-template-columns: 1fr 195px;
  gap: 10px;
  margin-bottom: 8px;
  height: 180px;
}

.chart-panel {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: 9px;
  padding: 7px 11px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.chart-canvas-container {
  flex: 1;
  position: relative;
  width: 100%;
  min-height: 0;
}

.chart-legend-bottom {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 7.5px;
  font-weight: 700;
  color: var(--gris-oscuro);
  padding-top: 4px;
  border-top: 1px solid #f1f5f9;
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Panel Derecho: Tu Impacto Positivo */
.impact-panel {
  background: var(--verde-claro);
  border: 1px solid #bbf7d0;
  border-radius: 9px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.impact-panel-title {
  font-family: 'Outfit', sans-serif;
  font-size: 9px;
  font-weight: 800;
  color: var(--verde);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid rgba(8, 149, 95, 0.25);
  padding-bottom: 4px;
}

.impact-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

.impact-item-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.impact-item-icon.yellow {
  color: #d97706;
}

.impact-item-icon.green {
  color: var(--verde);
}

.impact-item-data {
  display: flex;
  flex-direction: column;
}

.impact-val {
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--azul-corporativo);
  line-height: 1.15;
}

.impact-sub {
  font-size: 6.8px;
  color: var(--gris-medio);
}

/* ==============================================================
       9. TABLA TÉCNICA CON CABECERA AZUL OSCURO
       ============================================================== */
.tech-table-container {
  margin-bottom: 7px;
}

.tech-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 7.8px;
  border: 1px solid var(--gris-borde);
  border-radius: 7px;
  overflow: hidden;
}

.tech-table thead th {
  background: var(--azul-corporativo);
  color: var(--blanco);
  padding: 5px 8px;
  font-weight: 800;
  text-align: left;
  font-size: 7.5px;
  letter-spacing: 0.03em;
}

.tech-table tbody td {
  padding: 4.5px 8px;
  border-bottom: 1px solid #f1f5f9;
  color: var(--gris-oscuro);
  font-weight: 500;
}

.tech-table tbody tr:last-child td {
  border-bottom: none;
}

.badge-op-green {
  display: inline-block;
  padding: 2px 8px;
  background: var(--verde-claro);
  color: var(--verde);
  border-radius: 20px;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* ==============================================================
       10. CONCLUSIONES AMPLIAS (75%) + FIRMA VISUAL (25%)
       ============================================================== */
.conclusions-footer-row {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 10px;
  align-items: center;
  margin-bottom: 7px;
}

.conclusions-box {
  background: var(--gris-fondo);
  border: 1px solid var(--gris-borde);
  border-left: 4px solid var(--azul-corporativo);
  border-radius: 0 8px 8px 0;
  padding: 7px 11px;
}

.conclusions-title {
  font-family: 'Outfit', sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  color: var(--azul-corporativo);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
}

.conclusions-p {
  font-size: 7.6px;
  color: #334155;
  line-height: 1.4;
  margin: 0;
}

/* Firma Visual: Pincelada Amarilla + Caveat Script */
.footer-right-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-brush-badge {
  background: var(--amarillo-suave);
  border: 1px dashed var(--amarillo-solar);
  border-radius: 999px;
  padding: 3px 14px;
  font-family: 'Caveat', cursive;
  font-size: 14.5px;
  font-weight: 700;
  color: #854d0e;
  margin-bottom: 2px;
}

.footer-brand-title {
  font-family: 'Outfit', sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  color: var(--azul-corporativo);
  letter-spacing: 0.04em;
}

.footer-brand-tagline {
  font-size: 7.2px;
  color: var(--gris-medio);
  font-style: italic;
}

/* ==============================================================
       11. FOOTER AZUL MARINO COMPLETO (#002D5B)
       ============================================================== */
.official-footer-bar {
  background: var(--azul-marino);
  border-radius: 7px;
  padding: 7px 16px;
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.official-footer-left {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 7.8px;
  color: #e2e8f0;
  flex-wrap: nowrap;
}

.official-footer-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.official-footer-divider {
  color: rgba(255, 255, 255, 0.3);
}

.official-footer-right {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.official-leaf-icon {
  width: 16px;
  height: 16px;
  color: var(--amarillo-solar);
}

.official-tagline-text {
  display: flex;
  flex-direction: column;
  text-align: right;
  line-height: 1.1;
}

.official-tagline-text strong {
  font-size: 8px;
  font-weight: 800;
  color: var(--amarillo-solar);
  letter-spacing: 0.05em;
}

.official-tagline-text span {
  font-size: 6.8px;
  color: #cbd5e1;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   VENTANA EMERGENTE / MODAL OFICIAL: GENERAR INFORME DE TELEMETRÍA & AHORRO
   Fidelidad 1:1 a Maqueta Figma (URSA SOLAR INGENIERÍA)
   ========================================================================== */

/* 1. Backdrop Overlay */
#modalGenerarReporte.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 28, 45, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 1250 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

#modalGenerarReporte.modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* 2. Modal Dialog Container (16:9 Desktop Horizontal Amplio y Ejecutivo) */
.report-modal-dialog {
  width: 94vw;
  max-width: 1380px;
  min-width: 1020px;
  max-height: 96vh;
  background: #FFFFFF;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 20, 50, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  animation: reportModalZoom 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes reportModalZoom {
  from {
    opacity: 0;
    transform: scale(0.97);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 3. Header: Ejecutivo y Claro (94px) */
.report-modal-header {
  height: 94px;
  position: relative;
  background: #FFFFFF;
  border-bottom: 1px solid #E5EBF2;
  display: flex;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0;
}

.report-header-bg-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 48%;
  background-image: url('../img/solar_andes_banner.jpg');
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.6) 20%, rgba(0, 0, 0, 1) 45%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.6) 20%, rgba(0, 0, 0, 1) 45%);
}

.report-header-script-box {
  position: absolute;
  top: 16px;
  right: 80px;
  z-index: 3;
  text-align: center;
  pointer-events: none;
}

.report-header-script-text {
  font-family: 'Caveat', cursive;
  font-size: 20px;
  font-weight: 700;
  color: #073568;
  line-height: 1.1;
  display: block;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95);
}

.report-header-script-line {
  width: 42px;
  height: 2px;
  background: #FFB614;
  border-radius: 2px;
  margin: 3px auto 0;
}

.report-header-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 28px;
}

/* Marca Izquierda (Logo Oficial URSA) */
.report-header-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  width: auto;
  min-width: 185px;
  flex-shrink: 0;
}

.report-header-brand-logo {
  height: 52px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.report-header-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.report-header-brand-name {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 900;
  color: #073568;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.report-header-brand-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: #062F60;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 1px;
  line-height: 1.1;
}

.report-header-brand-tagline {
  font-size: 10px;
  color: #53657A;
  font-weight: 500;
  margin-top: 2px;
  line-height: 1.1;
  white-space: nowrap;
}

.report-header-divider-v {
  width: 1px;
  height: 50px;
  background: #E2E8F0;
  margin: 0 22px;
  flex-shrink: 0;
}

/* Centro: Título y descripción */
.report-header-titles {
  display: flex;
  flex-direction: column;
  max-width: 480px;
}

.report-header-main-title {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #062F60;
  line-height: 1.15;
  margin: 0;
}

.report-header-sub-title {
  font-family: 'Outfit', sans-serif;
  font-size: 14.5px;
  font-weight: 650;
  color: #073568;
  margin-top: 2px;
  line-height: 1.2;
}

.report-header-desc {
  font-size: 11.5px;
  color: #53657A;
  line-height: 1.3;
  margin-top: 2px;
}

/* Botón cerrar circular */
.report-header-close-btn {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(216, 227, 238, 0.9);
  color: #7890A7;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.report-header-close-btn:hover {
  background: #F1F5F9;
  color: #0F172A;
  transform: scale(1.05);
}

/* 4. Cuerpo Interno (Sin scroll innecesario) */
.report-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 28px 8px;
  background: #FFFFFF;
}

/* 5. Selectores Principales (Fila de 3 - Alineados, legibles y proporcionales) */
.report-selectors-row {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 10px;
  flex-wrap: nowrap;
}

.report-select-card {
  display: block;
  min-width: 0;
}

#reportProjectGroup,
#reportClientFixedProject {
  width: 350px;
  flex-shrink: 0;
}

#reportDeviceGroup {
  width: 320px;
  flex-shrink: 0;
}

#reportPeriodGroup {
  width: 290px;
  flex-shrink: 0;
}

.report-select-label {
  font-size: 11.5px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
  margin-bottom: 4px;
  display: block;
}

.report-select-input-combo {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.report-select-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #F7FAFD;
  border: 1.5px solid #D1DFEC;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #073568;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(7, 53, 104, 0.05);
}

.report-select-icon-box svg {
  width: 19px;
  height: 19px;
}

.report-select-input-wrapper {
  position: relative;
  flex: 1;
  min-width: 0;
}

.report-select-control {
  width: 100%;
  height: 40px;
  background: #F8FAFC;
  border: 1.5px solid #CBDCEB;
  border-radius: 8px;
  padding: 0 30px 0 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: #0F172A;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  transition: all 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.report-select-control:hover {
  border-color: #087FF5;
  background: #FFFFFF;
}

.report-select-control:focus {
  border-color: #087FF5;
  box-shadow: 0 0 0 3px rgba(8, 127, 245, 0.15);
  background: #FFFFFF;
}

.report-select-chevron {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: #475569;
  pointer-events: none;
}

/* 6. Barra Resumen Técnico (5 Indicadores) */
.report-system-summary-bar {
  background: #FBFCFE;
  border: 1.5px solid #D8E3EE;
  border-radius: 9px;
  padding: 8px 16px;
  margin-bottom: 9px;
  display: grid;
  grid-template-columns: 1.15fr 1.35fr 1.35fr 1.2fr 1fr;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0, 20, 50, 0.02);
}

.report-summary-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border-right: 1px solid #E2E8F0;
  min-width: 0;
}

.report-summary-item:first-child {
  padding-left: 2px;
}

.report-summary-item:last-child {
  border-right: none;
  padding-right: 2px;
}

.report-summary-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.report-summary-icon svg {
  width: 18px;
  height: 18px;
}

.report-summary-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.report-summary-label {
  font-size: 11px;
  color: #475569;
  font-weight: 600;
  line-height: 1.15;
}

.report-summary-val {
  font-size: 13.5px;
  font-weight: 750;
  color: #062F60;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.report-summary-val.large-bold {
  font-size: 14.5px;
  font-weight: 800;
}

.report-summary-val.green-highlight {
  color: #0A985B;
}

/* 7. Bloque Resumen Ejecutivo de Beneficios */
.report-benefits-panel {
  background: #EEF8FF;
  border: 1px solid #BFDDF6;
  border-radius: 12px;
  padding: 10px 18px 12px;
  margin-bottom: 8px;
}

.report-benefits-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.report-benefits-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.report-benefits-header-icon {
  color: #073568;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.report-benefits-title {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #062F60;
  line-height: 1.15;
}

.report-benefits-sub {
  font-size: 11.5px;
  color: #53657A;
  margin-top: 1px;
}

.report-live-data-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid #D6E4F0;
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 10.5px;
  font-weight: 750;
  color: #062F60;
  letter-spacing: 0.03em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.report-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0A985B;
  box-shadow: 0 0 0 2px rgba(10, 152, 91, 0.2);
}

/* 4 Tarjetas KPI Horizontales Espaciosas */
.report-kpi-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.report-kpi-figma-card {
  background: #FFFFFF;
  border: 1.5px solid #D8E3EE;
  border-radius: 10px;
  height: 82px;
  padding: 10px 12px 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(20, 40, 80, 0.04);
  transition: transform 0.15s, box-shadow 0.15s;
}

.report-kpi-figma-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20, 40, 80, 0.08);
}

.report-kpi-accent-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
}

.report-kpi-accent-bar.green {
  background: #0A985B;
}

.report-kpi-accent-bar.blue {
  background: #087FF5;
}

.report-kpi-accent-bar.orange {
  background: #FFB614;
}

.report-kpi-circle-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.report-kpi-circle-icon svg {
  width: 22px;
  height: 22px;
}

.report-kpi-circle-icon.green {
  background: #EAFBF2;
  color: #0A985B;
}

.report-kpi-circle-icon.blue {
  background: #EAF5FF;
  color: #0876C9;
}

.report-kpi-circle-icon.orange {
  background: #FFF8E7;
  color: #D96A00;
}

.report-kpi-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.report-kpi-label {
  font-size: 10.5px;
  font-weight: 800;
  color: #475569;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
}

.report-kpi-value {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  margin: 2px 0;
  white-space: nowrap;
}

.report-kpi-value.green {
  color: #065F46;
}

.report-kpi-value.blue {
  color: #0876C9;
}

.report-kpi-value.orange {
  color: #D96A00;
}

.report-kpi-subtext {
  font-size: 11px;
  color: #64748B;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}

/* 8. Parámetros de Administrador */
.report-admin-accordion-box {
  background: #FAFBFD;
  border: 1px solid #CDD9E5;
  border-radius: 8px;
  padding: 8px 16px;
  margin-bottom: 4px;
}

.report-admin-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.report-admin-header-left {
  display: flex;
  align-items: center;
  gap: 9px;
}

.report-admin-icon {
  color: #062F60;
}

.report-admin-title {
  font-weight: 750;
  font-size: 12.5px;
  color: #062F60;
}

.report-admin-subtitle {
  font-size: 11.5px;
  color: #64748B;
  font-weight: 500;
}

.report-admin-toggle-btn {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #062F60;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 0.15s;
}

.report-admin-toggle-btn:hover {
  background: #F1F5F9;
}

.report-admin-content-panel {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #E2E8F0;
}

/* 9. Barra de Acciones Fija */
.report-modal-actions-bar {
  border-top: 1px solid #E1E8EF;
  background: #FFFFFF;
  padding: 10px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.report-btn-cancel {
  height: 40px;
  padding: 0 18px;
  background: #FFFFFF;
  border: 1.5px solid #CDD9E5;
  border-radius: 8px;
  color: #15253A;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.report-btn-cancel:hover {
  background: #F8FAFC;
  border-color: #94A3B8;
}

.report-actions-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.report-btn-action {
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
}

.report-btn-telegram {
  background: #EFF6FF;
  border: 1px solid #C6DDF5;
  color: #073568;
}

.report-btn-telegram:hover {
  background: #DBEAFE;
  border-color: #93C5FD;
}

.report-btn-whatsapp {
  background: #F0FFF7;
  border: 1px solid #B7E8CD;
  color: #008A4B;
}

.report-btn-whatsapp:hover {
  background: #DCFCE7;
  border-color: #86EFAC;
}

.report-btn-print {
  background: #FFFFFF;
  border: 1.5px solid #CBD7E3;
  color: #26364B;
}

.report-btn-print:hover {
  background: #F8FAFC;
  border-color: #94A3B8;
}

.report-btn-download-pdf {
  background: #073568;
  border: none;
  color: #FFFFFF;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(7, 53, 104, 0.2);
}

.report-btn-download-pdf:hover {
  background: #052D59;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(7, 53, 104, 0.28);
}

.report-btn-download-pdf:active {
  transform: translateY(0);
}

/* 10. Footer del Modal */
.report-modal-footer {
  height: 36px;
  border-top: 1px solid #E5EBF2;
  background: #FFFFFF;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.report-footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: #64748B;
}

.report-footer-brand-tag {
  font-weight: 800;
  color: #073568;
  letter-spacing: 0.02em;
}

.report-footer-divider {
  color: #CBD5E1;
}

.report-footer-right a,
.report-footer-right span {
  font-size: 11.5px;
  font-weight: 600;
  color: #7A899A;
  text-decoration: none;
}

/* Responsive Modal Behavior */
@media (max-width: 1199px) {
  .report-modal-dialog {
    width: 95vw;
    min-width: 0;
  }

  .report-selectors-row {
    grid-template-columns: 1fr 1fr;
  }

  .report-system-summary-bar {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .report-kpi-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .report-modal-dialog {
    width: 98vw;
    max-height: 96vh;
    border-radius: 16px;
  }

  .report-modal-header {
    height: auto;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
  }

  .report-header-bg-photo {
    display: none;
  }

  .report-header-script-box {
    display: none;
  }

  .report-header-content {
    padding: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .report-header-divider-v {
    display: none;
  }

  .report-selectors-row {
    grid-template-columns: 1fr;
  }

  .report-system-summary-bar {
    grid-template-columns: 1fr;
  }

  .report-summary-item {
    border-right: none;
    border-bottom: 1px solid #E2E8F0;
    padding: 8px 0;
  }

  .report-kpi-cards-grid {
    grid-template-columns: 1fr;
  }

  .report-modal-actions-bar {
    flex-direction: column;
    gap: 10px;
    padding: 16px;
  }

  .report-actions-right {
    flex-direction: column;
    width: 100%;
  }

  .report-actions-right button {
    width: 100%;
    justify-content: center;
  }

  .report-btn-cancel {
    width: 100%;
  }
}

/* ==========================================================================
   REGLAS ESTRICTAS DE IMPRESIÓN Y GENERACIÓN DE PDF (A4 EXACTO 1 PÁGINA)
   ========================================================================== */
@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  @page {
    size: A4 portrait;
    margin: 0mm !important;
  }

  html,
  body {
    width: 210mm !important;
    height: 297mm !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }

  /* Ocultar absolutamente toda la interfaz web */
  body > *:not(#reportPdfWrapper) {
    display: none !important;
  }

  .modal-backdrop,
  .app-header,
  .app-layout,
  .app-sidebar,
  .app-main,
  .device-selector-bar,
  .hero-telemetry-grid,
  .charts-grid-mono,
  .table-card-mono,
  .app-footer-mono,
  .login-overlay,
  .solar-intelligence-strip {
    display: none !important;
  }

  #reportPdfWrapper {
    display: block !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 210mm !important;
    max-width: 210mm !important;
    height: 297mm !important;
    max-height: 297mm !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    z-index: 999999 !important;
    overflow: hidden !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
  }

  .pdf-document {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 210mm !important;
    min-width: 210mm !important;
    max-width: 210mm !important;
    height: 296mm !important;
    min-height: 296mm !important;
    max-height: 296mm !important;
    box-sizing: border-box !important;
    padding: 7mm 11mm 5mm !important;
    margin: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
    page-break-inside: avoid !important;
    page-break-after: avoid !important;
    break-inside: avoid !important;
    break-after: avoid !important;
    overflow: hidden !important;
  }

  .pdf-header,
  .pdf-project-card,
  .pdf-kpi-grid,
  .pdf-section-title,
  .pdf-chart-box,
  .pdf-tech-table,
  .pdf-notes-box,
  .pdf-footer {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .pdf-chart-box {
    max-height: 125px !important;
    overflow: hidden !important;
  }

  .pdf-chart-img {
    max-height: 125px !important;
    width: 100% !important;
    object-fit: contain !important;
  }
}

/* ==========================================================================
   CAMPANITA DE NOTIFICACIONES Y POPOVER FLOTANTE (ESTILO EXECUTIVE LUXURY)
   ========================================================================== */
.header-user-corner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  position: relative;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.notification-bell-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.btn-notification-bell {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--graphite-200);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  color: var(--graphite-700);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  padding: 0;
}

.btn-notification-bell:hover {
  background: var(--bg-subtle);
  color: var(--graphite-950);
  border-color: var(--graphite-400);
  transform: scale(1.05);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.btn-notification-bell:active {
  transform: scale(0.96);
}

.btn-notification-bell.has-alerts {
  color: #b91c1c;
}

.bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #dc2626;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 800;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 5px rgba(220, 38, 38, 0.4);
  animation: bell-pulse 2.2s infinite;
  z-index: 10;
}

@keyframes bell-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
  }

  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 5px rgba(220, 38, 38, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
  }
}

.notifications-flyout {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 390px;
  max-width: calc(100vw - 16px);
  background: #ffffff;
  border: 1px solid var(--graphite-200);
  border-radius: 16px;
  box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(15, 23, 42, 0.06);
  z-index: 2500 !important;
  overflow: visible;
  transform-origin: top right;
  animation: flyout-scale-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.notifications-flyout::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 12px;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-left: 1px solid var(--graphite-200);
  border-top: 1px solid var(--graphite-200);
  transform: rotate(45deg);
  z-index: 2501;
}

@keyframes flyout-scale-in {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(-6px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.flyout-header {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--graphite-100);
  background: #ffffff;
  border-radius: 16px 16px 0 0;
  position: relative;
  z-index: 2502;
}

.flyout-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.flyout-header-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flyout-header-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--graphite-950);
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
}

.flyout-count-pill {
  background: #fee2e2;
  color: #dc2626;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.flyout-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-flyout-mark-read {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f8fafc;
  border: 1px solid var(--graphite-200);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--graphite-700);
  padding: 4px 9px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-flyout-mark-read:hover {
  background: #f1f5f9;
  color: var(--graphite-950);
  border-color: var(--graphite-300);
}

.btn-flyout-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--graphite-500);
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.btn-flyout-close:hover {
  background: #f1f5f9;
  color: var(--graphite-900);
}

.flyout-filter-bar {
  margin-top: 8px;
}

.flyout-select-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.flyout-select-icon {
  position: absolute;
  left: 10px;
  pointer-events: none;
  color: var(--graphite-400);
}

.flyout-project-select {
  width: 100%;
  font-size: 0.77rem;
  font-weight: 600;
  padding: 6px 28px 6px 30px;
  border-radius: 8px;
  border: 1px solid var(--graphite-200);
  background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 9px center;
  color: var(--graphite-800);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.15s ease;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.flyout-project-select:hover,
.flyout-project-select:focus {
  border-color: var(--graphite-400);
  background-color: #ffffff;
}

/* Cuerpo de Notificaciones - Sin Barra de Navegación Tosca (Estilo App Móvil / IG / FB) */
.flyout-body {
  max-height: 330px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE / Edge */
  padding: 6px 4px;
  background: #ffffff;
}

.flyout-body::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Ítem de Notificación Estilo Facebook / Instagram Feed */
.flyout-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 10px;
  margin: 3px 4px;
  border-radius: 12px;
  transition: background 0.15s ease, transform 0.1s ease;
  text-align: left;
  position: relative;
  cursor: pointer;
  background: #ffffff;
}

.flyout-item:hover {
  background: #f8fafc;
}

.flyout-item:active {
  transform: scale(0.99);
}

.flyout-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
}

.flyout-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.flyout-avatar-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flyout-item-content {
  flex: 1;
  min-width: 0;
}

.flyout-item-tags-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.flyout-item-client-badge {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--graphite-900);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.flyout-item-dev-badge {
  font-size: 0.67rem;
  font-weight: 600;
  color: var(--graphite-500);
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
  flex-shrink: 0;
}

.flyout-item-time {
  font-size: 0.68rem;
  color: var(--graphite-400);
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.flyout-item-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--graphite-950);
  line-height: 1.25;
  margin-bottom: 2px;
}

.flyout-item-text {
  font-size: 0.74rem;
  color: var(--graphite-600);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flyout-item-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  align-self: stretch;
  padding-top: 2px;
  flex-shrink: 0;
}

.flyout-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 0 3px #dbeafe;
  flex-shrink: 0;
}

.btn-dismiss-alert {
  background: transparent;
  border: none;
  color: var(--graphite-400);
  font-size: 1rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  border-radius: 4px;
  transition: all 0.15s ease;
  opacity: 0.7;
}

.flyout-item:hover .btn-dismiss-alert {
  opacity: 1;
}

.btn-dismiss-alert:hover {
  color: var(--graphite-900);
  background: #e2e8f0;
}

/* Pie del Popover */
.flyout-footer {
  padding: 8px 12px;
  background: #ffffff;
  border-top: 1px solid var(--graphite-100);
  text-align: center;
  border-radius: 0 0 16px 16px;
}

.btn-flyout-footer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: transparent;
  border: none;
  color: #2563eb;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-flyout-footer:hover {
  background: #eff6ff;
  color: #1d4ed8;
}

/* Estado Vacío Estilo Instagram / Facebook "Todo al día" */
.flyout-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.2rem 1.4rem;
}

.flyout-empty-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ecfdf5;
  color: #059669;
  margin-bottom: 0.75rem;
}

.flyout-empty-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--graphite-950);
}

.flyout-empty-subtitle {
  font-size: 0.76rem;
  color: var(--graphite-500);
  margin-top: 0.35rem;
  line-height: 1.4;
}

/* Soporte Tema Oscuro para Flyout */
[data-theme="dark"] .notifications-flyout {
  background: #13161f !important;
  border-color: #232838 !important;
  box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .notifications-flyout::before {
  background: #13161f !important;
  border-color: #232838 !important;
}

[data-theme="dark"] .flyout-header,
[data-theme="dark"] .flyout-body,
[data-theme="dark"] .flyout-footer {
  background: #13161f !important;
  border-color: #232838 !important;
}

[data-theme="dark"] .flyout-header-title {
  color: #f8fafc !important;
}

[data-theme="dark"] .flyout-project-select {
  background-color: #1a1e2b !important;
  border-color: #2e3448 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .btn-flyout-mark-read {
  background: #1a1e2b !important;
  border-color: #2e3448 !important;
  color: #cbd5e1 !important;
}

[data-theme="dark"] .btn-flyout-mark-read:hover {
  background: #262c3e !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-flyout-close:hover {
  background: #1e2434 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .flyout-item {
  background: transparent !important;
}

[data-theme="dark"] .flyout-item:hover {
  background: #1a1e2b !important;
}

[data-theme="dark"] .flyout-item-client-badge {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .flyout-item-title {
  color: #f8fafc !important;
}

[data-theme="dark"] .flyout-item-text {
  color: #94a3b8 !important;
}

[data-theme="dark"] .flyout-item-dev-badge {
  background: #1e2434 !important;
  border-color: #2e3448 !important;
  color: #94a3b8 !important;
}

[data-theme="dark"] .btn-flyout-footer {
  color: #60a5fa !important;
}

[data-theme="dark"] .btn-flyout-footer:hover {
  background: rgba(37, 99, 235, 0.15) !important;
}

[data-theme="dark"] .flyout-unread-dot {
  background: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

[data-theme="dark"] .btn-dismiss-alert:hover {
  background: #242938 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   PERFIL DE USUARIO EN LA ESQUINA SUPERIOR (ESTILO FACEBOOK)
   ========================================================================== */
.user-profile-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 4px 6px 4px 10px;
  background: #ffffff;
  border: 1px solid var(--graphite-300);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.user-profile-pill:hover {
  border-color: var(--graphite-400);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.user-avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--graphite-950), var(--graphite-800));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.user-meta-block {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.15;
}

.user-name-text {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--graphite-950);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-role-badge {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--graphite-500);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.btn-profile-logout {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f8fafc;
  border: 1px solid var(--graphite-200);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--graphite-500);
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: 2px;
}

.btn-profile-logout:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
  transform: scale(1.05);
}

/* ==========================================================================
   URSA SOLAR INTELLIGENCE STRIP & MODULES (v14.8)
   ========================================================================== */
/* ==========================================================================
   URSA SOLAR INTELLIGENCE STRIP (4 CHIPS RESUMEN EN UNA SOLA LÍNEA)
   ========================================================================== */
.solar-intelligence-strip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  padding: 0.1rem 0;
  background: transparent;
  border: none;
  box-shadow: none;
  margin-bottom: 0.85rem;
  width: 100%;
  max-width: 1380px;
  margin-left: auto;
  margin-right: auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.solar-intelligence-strip::-webkit-scrollbar {
  display: none;
}

.intel-group-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  width: 100%;
}

.intel-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #ffffff;
  border: 1px solid #dce6f0;
  color: #0b2a4a;
  box-shadow: 0 1px 4px rgba(15, 42, 68, 0.04);
  transition: all 0.15s ease;
  white-space: nowrap !important;
  flex-shrink: 0;
}

.intel-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(15, 42, 68, 0.07);
}

.intel-pill-tariff {
  background: #edfaf3 !important;
  border-color: #b8ead1 !important;
  color: #0e8554 !important;
  font-weight: 700;
}

.intel-pill-tariff svg {
  color: #0e8554;
}

.intel-pill-tariff.peak-hour {
  background: #fff8e6 !important;
  border-color: #fed7aa !important;
  color: #c2410c !important;
}

.intel-pill-savings {
  background: #ffffff;
  border-color: #dce6f0;
  color: #0b2a4a;
}

.intel-pill-clickable {
  cursor: pointer;
}

.intel-pill-solar-pr {
  background: #ffffff;
  border-color: #dce6f0;
  color: #b45309;
}

.intel-pill-solar-pr:hover {
  border-color: #f6a800;
}

.intel-pill-batt-soh {
  background: #ffffff;
  border-color: #dce6f0;
  color: #123a63;
}

.intel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.intel-dot.dot-emerald {
  background-color: #13b77a;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.intel-dot.dot-amber {
  background-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

/* Modal de Pronóstico Solar y Curva Predictiva */
.forecast-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

.forecast-tile {
  background: #f8fafc;
  border: 1px solid var(--graphite-200);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  text-align: center;
}

.forecast-tile-val {
  font-size: 1.35rem;
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--graphite-950);
  margin-top: 3px;
}

.forecast-tile-lbl {
  font-size: 0.71rem;
  color: var(--graphite-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================================== */
/* WIDGET BATERÍA VERTICAL DE LÍNEAS (SOLO RAYITAS, SIN RAYO)     */
/* ============================================================== */
.phone-battery-vertical {
  --phone-batt-color: #10b981;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 20px;
  height: 34px;
  user-select: none;
  transition: color 0.3s ease;
  color: var(--phone-batt-color);
}

.phone-batt-cap {
  width: 8px;
  height: 3px;
  background: currentColor;
  border-radius: 2px 2px 0 0;
  margin-bottom: 1px;
  opacity: 0.9;
  transition: background 0.3s ease;
}

.phone-batt-body {
  width: 20px;
  height: 30px;
  border: 1.8px solid currentColor;
  border-radius: 4px;
  padding: 2px 1.5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Líneas / Rayitas individuales */
.phone-batt-segment {
  flex: 1;
  width: 100%;
  border-radius: 1px;
  background: transparent;
  opacity: 0;
  transition: opacity 0.25s ease, background 0.25s ease;
}

/* Rayitas vacías: invisibles para mostrar menos líneas a menor carga */
.phone-batt-segment.empty {
  background: transparent !important;
  opacity: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}

/* Rayitas activas en modo estático / reposo */
.phone-battery-vertical:not(.is-charging):not(.is-discharging) .phone-batt-segment.active {
  background: var(--phone-batt-color);
  box-shadow: 0 0 2px var(--phone-batt-color);
  opacity: 1;
}

/* Nivel Crítico (Rojo, <= 20%) */
.phone-battery-vertical.level-red {
  --phone-batt-color: #ef4444;
}

.phone-battery-vertical.level-red:not(.is-charging) {
  animation: phoneBattCriticalPulse 1.2s ease-in-out infinite alternate;
}

/* Nivel Medio / Por acabarse (Amarillo, 21% - 40%) */
.phone-battery-vertical.level-yellow {
  --phone-batt-color: #f59e0b;
}

/* Nivel Óptimo (Verde, > 40%) */
.phone-battery-vertical.level-green {
  --phone-batt-color: #10b981;
}

/* 1. ANIMACIÓN DE CARGA (CASCADA ASCENDENTE: 1 -> activeBars) */
@keyframes phoneBattLineCharge {

  0%,
  100% {
    opacity: 0.25;
    transform: scaleX(0.92);
  }

  50% {
    opacity: 1;
    transform: scaleX(1);
    filter: brightness(1.3);
    box-shadow: 0 0 4px var(--phone-batt-color);
  }
}

.phone-battery-vertical.is-charging .phone-batt-body {
  box-shadow: 0 0 5px var(--phone-batt-color);
}

/* 2. ANIMACIÓN DE DESCARGA / CONSUMO (CASCADA DESCENDENTE: activeBars -> 1) */
@keyframes phoneBattLineDischarge {

  0%,
  100% {
    opacity: 1;
    transform: scaleX(1);
    filter: brightness(1.25);
    box-shadow: 0 0 4px var(--phone-batt-color);
  }

  50% {
    opacity: 0.25;
    transform: scaleX(0.92);
  }
}

.phone-battery-vertical.is-discharging .phone-batt-body {
  box-shadow: 0 0 4px var(--phone-batt-color);
}

@keyframes phoneBattCriticalPulse {
  0% {
    opacity: 0.75;
    transform: scale(0.97);
  }

  100% {
    opacity: 1;
    transform: scale(1.03);
    filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.6));
  }
}

/* Modo Totalmente Descargada (0%): Borde rojo parpadeante y 0 líneas */
.phone-battery-vertical.is-empty .phone-batt-body {
  border-color: #ef4444;
  animation: phoneBattCriticalPulse 1s ease-in-out infinite alternate;
}

/* Modo Bypass / Sin Batería */
.phone-battery-vertical.is-bypass {
  --phone-batt-color: #94a3b8;
  opacity: 0.5;
}

.phone-battery-vertical.is-bypass .phone-batt-body {
  border-style: dashed;
  border-width: 1.5px;
}

.phone-battery-vertical.is-bypass .phone-batt-segment {
  background: transparent !important;
  opacity: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}

/* ============================================================== */
/* MODAL: TELEMETRÍA DETALLADA DE STRINGS & GENERACIÓN SOLAR       */
/* ============================================================== */
.modal-solar-detail-card {
  max-width: 860px;
  width: min(860px, 95vw);
}

.modal-solar-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.14);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.live-pulse-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.live-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: liveDotPulse 1.8s infinite;
}

@keyframes liveDotPulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* Hero Strip Superior del Modal */
.modal-solar-hero-strip {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.25rem;
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
  border: 1px solid #fde68a;
  border-radius: 16px;
  padding: 1.25rem 1.45rem;
  margin-bottom: 1.35rem;
  box-shadow: 0 4px 15px -2px rgba(245, 158, 11, 0.08);
}

.modal-solar-main-metric {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid #fef3c7;
  padding-right: 1.25rem;
}

.modal-metric-sub {
  font-size: 0.74rem;
  color: #92400e;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modal-metric-val-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 4px 0 6px 0;
}

.modal-solar-huge-val {
  font-size: 2.35rem;
  font-weight: 900;
  font-family: var(--font-heading);
  color: #b45309;
  line-height: 1;
}

.modal-solar-huge-unit {
  font-size: 1.15rem;
  font-weight: 700;
  color: #d97706;
}

.modal-solar-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #fde68a;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--graphite-800);
  width: fit-content;
}

.modal-solar-kpis-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem 1.15rem;
  align-content: center;
}

.modal-solar-kpi-item {
  display: flex;
  flex-direction: column;
}

.modal-kpi-lbl {
  font-size: 0.71rem;
  color: var(--graphite-500);
  font-weight: 600;
}

.modal-kpi-val {
  font-size: 1.15rem;
  font-weight: 800;
  font-family: var(--font-heading);
  color: var(--graphite-950);
  margin: 1px 0;
}

.modal-kpi-sub {
  font-size: 0.68rem;
  color: var(--graphite-400);
}

/* Título de sección dentro del modal */
.modal-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.modal-section-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--graphite-900);
  display: flex;
  align-items: center;
  gap: 6px;
}

.modal-section-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--graphite-600);
  background: var(--graphite-100);
  padding: 2px 8px;
  border-radius: 6px;
}

/* Grid de Strings Dual MPPT */
.strings-dual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.string-card {
  background: #ffffff;
  border: 1px solid var(--graphite-200);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.string-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -3px rgba(15, 23, 42, 0.08);
}

.string-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.string-header-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.string-badge-num {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--graphite-900);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.string-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--graphite-950);
}

.string-sub {
  font-size: 0.70rem;
  color: var(--graphite-500);
  display: block;
}

.string-state-badge {
  font-size: 0.70rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
}

.string-state-badge.active {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.string-power-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.string-watts-huge {
  font-size: 1.75rem;
  font-weight: 800;
  font-family: var(--font-heading);
  color: var(--graphite-950);
}

.string-share-pill {
  font-size: 0.72rem;
  font-weight: 700;
  color: #b45309;
  background: #fef3c7;
  padding: 2px 7px;
  border-radius: 6px;
}

.string-bar-track {
  height: 6px;
  background: var(--graphite-100);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.95rem;
}

.string-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.string-electrical-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  background: #f8fafc;
  border: 1px solid var(--graphite-150, #f1f5f9);
  border-radius: 10px;
  padding: 0.65rem 0.5rem;
  text-align: center;
}

.string-elec-tile {
  display: flex;
  flex-direction: column;
}

.string-elec-lbl {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--graphite-500);
  font-weight: 700;
}

.string-elec-val {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--graphite-900);
  font-family: var(--font-heading);
  margin: 2px 0;
}

.string-elec-sub {
  font-size: 0.63rem;
  color: var(--graphite-400);
}

/* Tarjeta de Balance entre Strings */
.string-balance-card {
  background: #f8fafc;
  border: 1px solid var(--graphite-200);
  border-radius: 14px;
  padding: 0.95rem 1.25rem;
  margin-bottom: 1.15rem;
}

.string-balance-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.string-balance-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--graphite-900);
}

.string-balance-sub {
  font-size: 0.70rem;
  color: var(--graphite-500);
}

.string-balance-status-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #bbf7d0;
}

.string-dual-balance-bar {
  display: flex;
  height: 22px;
  border-radius: 8px;
  overflow: hidden;
  background: #e2e8f0;
  font-size: 0.68rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.5rem;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.string-balance-seg-1 {
  background: linear-gradient(90deg, #d97706, #f59e0b);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.4s ease;
  white-space: nowrap;
  padding: 0 4px;
}

.string-balance-seg-2 {
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.4s ease;
  white-space: nowrap;
  padding: 0 4px;
}

.string-balance-hint {
  margin: 0;
  font-size: 0.74rem;
  color: var(--graphite-600);
  line-height: 1.4;
}

/* Diagnóstico Fotovoltaico */
.string-intelligence-box {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  padding: 0.85rem 1.15rem;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.string-intel-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.string-intel-content {
  flex: 1;
}

.string-intel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: #166534;
}

.string-intel-ghi {
  font-size: 0.74rem;
  color: #059669;
  font-weight: 700;
}

@media (max-width: 680px) {
  .modal-solar-hero-strip {
    grid-template-columns: 1fr;
  }

  .modal-solar-main-metric {
    border-right: none;
    border-bottom: 1px solid #fef3c7;
    padding-right: 0;
    padding-bottom: 1rem;
  }

  .strings-dual-grid {
    grid-template-columns: 1fr;
  }
}


/* ===== ANIMACIONES GLOBALES (spin, fade, etc.) ===== */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.spinner-inline {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
}

/* ===== WIDGET CIRCULAR DONUT DE AHORRO & ESTADÍSTICAS ===== */
.btn-stats-toggle {
  background: transparent;
  border: none;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--graphite-600);
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-stats-toggle:hover {
  color: var(--graphite-950);
}

.btn-stats-toggle.active {
  background: #ffffff;
  color: var(--graphite-950);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-weight: 700;
}

.stats-donut-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.25rem 0;
  flex: 1;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
}

.donut-chart-box {
  position: relative;
  width: 155px;
  height: 155px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.donut-chart-box canvas {
  filter: drop-shadow(0 4px 12px rgba(15, 23, 42, 0.06));
}

.donut-center-overlay {
  position: absolute;
  text-align: center;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.donut-center-pct {
  font-size: 2.1rem;
  font-weight: 800;
  color: #0f172a;
  font-family: var(--font-heading);
  line-height: 1;
  letter-spacing: -0.04em;
}

.donut-center-lbl {
  font-size: 0.65rem;
  font-weight: 800;
  color: #0284c7;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

.donut-legend-cards {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.52rem;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.legend-card-luxury {
  border-radius: 12px;
  padding: 0.56rem 0.95rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 0;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.18s ease;
  position: relative;
  overflow: hidden;
}

.legend-card-luxury:hover {
  transform: translateX(3px);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07) !important;
  border-color: #cbd5e1;
}

.legend-card-luxury .card-info {
  min-width: 0;
  flex: 1;
  padding-right: 0.5rem;
  overflow: hidden;
}

.legend-card-luxury .card-title-text {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legend-card-luxury .card-sub-text {
  font-size: 0.72rem;
  color: #64748b;
  margin-top: 2px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legend-card-luxury .card-pct-text {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  font-family: var(--font-heading);
  flex-shrink: 0;
  min-width: 50px;
  text-align: right;
  letter-spacing: -0.02em;
}

.legend-card-solar {
  border-left: 4.5px solid #f59e0b;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.06) 0%, #ffffff 45%);
}

.legend-card-solar .card-title-text {
  color: #d97706;
}

.legend-card-grid {
  border-left: 4.5px solid #0284c7;
  background: linear-gradient(90deg, rgba(2, 132, 199, 0.06) 0%, #ffffff 45%);
}

.legend-card-grid .card-title-text {
  color: #0284c7;
}

.legend-card-total {
  border-left: 4.5px solid #8b5cf6;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.06) 0%, #ffffff 45%);
}

.legend-card-total .card-title-text {
  color: #7c3aed;
}

@media (max-width: 640px) {
  .stats-donut-container {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .donut-legend-cards {
    width: 100% !important;
    min-width: 100% !important;
  }
}

/* ============================================================== */
/* BOTÓN RUEDITA CONFIGURACIÓN DE INVERSOR & CONTROL REMOTO ADMIN   */
/* ============================================================== */
.btn-config-inv-admin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #e2e8f0;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}

.btn-config-inv-admin:hover {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.5);
  color: #34d399;
  transform: translateY(-1px) rotate(30deg);
}

.btn-config-inv-admin:active {
  transform: scale(0.95);
}

body:not(.is-client) .node-inverter {
  cursor: pointer;
}

body:not(.is-client) .node-inverter:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.35);
  border-color: rgba(16, 185, 129, 0.5);
}

body.is-client .admin-only {
  display: none !important;
}

.cfg-inv-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.65rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--graphite-600);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cfg-inv-tab-btn:hover {
  color: var(--graphite-900);
}

.cfg-inv-tab-btn.active {
  color: #10b981;
  border-bottom-color: #10b981;
}

/* ==========================================================================
   CENTRO ADMINISTRATIVO SOFÍA & WHATSAPP URSA (SCADA DE LUJO)
   ========================================================================== */
.modal-sofia-card {
  max-width: 1040px !important;
  width: min(1040px, 95vw) !important;
  max-height: calc(100vh - 2.5rem) !important;
  background: #0b1120 !important;
  color: #f8fafc !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

.sofia-modal-header {
  background: linear-gradient(135deg, #070b14 0%, #0f172a 100%) !important;
  padding: 1rem 1.4rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
}

.sofia-header-brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.sofia-brand-avatar {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.35);
  flex-shrink: 0;
}

.sofia-avatar-pulse {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  background: #22c55e;
  border: 2px solid #070b14;
  border-radius: 50%;
  animation: pulse-sofia 2s infinite;
}

@keyframes pulse-sofia {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.sofia-close-btn {
  color: #94a3b8 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  width: 36px !important;
  height: 36px !important;
  font-size: 1.5rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sofia-close-btn:hover {
  color: #ffffff !important;
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  transform: scale(1.05);
}

.sofia-modal-body {
  background: #0b1120 !important;
  padding: 1.25rem 1.4rem !important;
  overflow-y: auto !important;
  flex: 1 !important;
}

.sofia-status-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pill-online {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

.pill-warning {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

.pill-paused {
  background: rgba(148, 163, 184, 0.15) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
}

.sofia-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.sofia-kpi-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 0.85rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sofia-kpi-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
}

.sofia-kpi-val {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  font-family: var(--font-heading);
}

.sofia-kpi-sub {
  font-size: 0.7rem;
  color: #64748b;
}

.sofia-grid-two-col {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1.1rem;
}

@media (max-width: 860px) {
  .sofia-grid-two-col {
    grid-template-columns: 1fr;
  }
}

.sofia-section-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
}

.sofia-input {
  background: rgba(2, 6, 23, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-size: 0.84rem !important;
  padding: 0.55rem 0.85rem !important;
}

.sofia-input:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2) !important;
}

.sofia-logs-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}

.sofia-log-item {
  background: rgba(2, 6, 23, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 9px;
  padding: 0.65rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: all 0.15s ease;
}

.sofia-log-item:hover {
  background: rgba(2, 6, 23, 0.8);
  border-color: rgba(56, 189, 248, 0.3);
}

.sofia-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.sofia-log-date {
  font-size: 0.72rem;
  color: #64748b;
  font-family: var(--font-mono);
}

.sofia-log-recipient {
  font-size: 0.75rem;
  font-weight: 600;
  color: #38bdf8;
}

.sofia-log-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: #f1f5f9;
}

.sofia-log-body {
  font-size: 0.74rem;
  color: #94a3b8;
  line-height: 1.35;
}

.sofia-modal-footer {
  background: #070b14 !important;
  padding: 0.85rem 1.4rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* ============================================================== */
/* PROTECCIÓN ANTI-DEFORMACIÓN CON SIDEBAR EXPANDIDO (250px)      */
/* ============================================================== */
.hero-card {
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.stat-tile {
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Cuando el sidebar está expandido, ajustar proporcionalmente */
.app-sidebar:not(.collapsed) ~ .app-main-wrapper .hero-telemetry-grid,
body:has(.app-sidebar:not(.collapsed)) .hero-telemetry-grid {
  gap: 10px !important;
}

.app-sidebar:not(.collapsed) ~ .app-main-wrapper .hero-card,
body:has(.app-sidebar:not(.collapsed)) .hero-card {
  padding: 10px 10px 8px !important;
}

.app-sidebar:not(.collapsed) ~ .app-main-wrapper .hero-val-huge,
body:has(.app-sidebar:not(.collapsed)) .hero-val-huge {
  font-size: 28px !important;
}

.app-sidebar:not(.collapsed) ~ .app-main-wrapper .stat-tile-label,
.app-sidebar:not(.collapsed) ~ .app-main-wrapper .stat-tile-lbl,
body:has(.app-sidebar:not(.collapsed)) .stat-tile-label,
body:has(.app-sidebar:not(.collapsed)) .stat-tile-lbl {
  font-size: 9.8px !important;
}

.app-sidebar:not(.collapsed) ~ .app-main-wrapper .stat-tile-sub,
body:has(.app-sidebar:not(.collapsed)) .stat-tile-sub {
  font-size: 9.5px !important;
}

/* ============================================================== */
/* WIDGET CLIMA Y PRONÓSTICO SOLAR EN ESTADO ACTUAL              */
/* ============================================================== */
.solar-weather-card {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 11px 14px 10px !important;
  margin: 10px 0 16px 0 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
}
.solar-weather-card:hover {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.05) !important;
  transform: translateY(-1px);
}
.swc-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
}
.swc-location-group {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
.swc-loc-icon {
  color: #0284C7 !important;
  display: flex !important;
  align-items: center !important;
}
.swc-action-badge {
  font-size: 11px !important;
  color: #0284C7 !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  transition: transform 0.15s ease !important;
}
.solar-weather-card:hover .swc-action-badge {
  transform: translateX(2px) !important;
}
.swc-body {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
.swc-col-weather {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
}
.swc-weather-icon-wrap {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  background: #FEF3C7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #D97706 !important;
  flex-shrink: 0 !important;
}
.swc-weather-info {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}
.swc-temp {
  font-size: 15.5px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
}
.swc-condition {
  font-size: 10.5px !important;
  color: #64748B !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-top: 2px !important;
}
.swc-divider {
  width: 1px !important;
  height: 28px !important;
  background: #E2E8F0 !important;
  flex-shrink: 0 !important;
}
.swc-col-metric {
  display: flex !important;
  flex-direction: column !important;
  text-align: right !important;
  flex-shrink: 0 !important;
}
.swc-metric-lbl {
  font-size: 9.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  color: #64748B !important;
  font-weight: 600 !important;
}
.swc-metric-val {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  line-height: 1.2 !important;
}
.swc-val-optimal {
  color: #00A884 !important;
}
.swc-metric-sub {
  font-size: 10px !important;
  color: #64748B !important;
  font-weight: 500 !important;
}
.swc-footer {
  margin-top: 8px !important;
  padding-top: 6px !important;
  border-top: 1px dashed #E2E8F0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  color: #334155 !important;
  line-height: 1.3 !important;
}
.swc-spark-icon {
  font-size: 12px !important;
  flex-shrink: 0 !important;
}
.swc-advisory-text {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Modal Forecast Tabs & Modern Cards */
.forecast-tabs-bar {
  display: flex !important;
  gap: 8px !important;
  padding: 0 1.35rem !important;
  border-bottom: 1px solid var(--graphite-200) !important;
  background: #F8FAFC !important;
}
.forecast-tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 14px !important;
  background: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: #64748B !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.forecast-tab-btn:hover {
  color: #0F172A !important;
}
.forecast-tab-btn.active {
  color: #0284C7 !important;
  border-bottom-color: #0284C7 !important;
}
.tab-badge-tomorrow {
  padding: 2px 7px !important;
  border-radius: 12px !important;
  background: #ECFDF5 !important;
  color: #059669 !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
}
.forecast-location-pill {
  padding: 2px 8px !important;
  border-radius: 12px !important;
  background: #EFF6FC !important;
  border: 1px solid #BAE6FD !important;
  color: #0284C7 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
.modal-header-icon-amber {
  background: rgba(245, 158, 11, 0.12) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #D97706 !important;
  flex-shrink: 0 !important;
}
.forecast-advisory-box {
  background: #F0FDF4 !important;
  border: 1px solid #BBF7D0 !important;
  border-radius: 10px !important;
  padding: 0.85rem 1rem !important;
  font-size: 0.82rem !important;
  color: #166534 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-top: 0.75rem !important;
}
.forecast-advisory-box.advisory-tomorrow {
  background: #EFF6FC !important;
  border-color: #BAE6FD !important;
  color: #1E3A8A !important;
}

@media (max-width: 600px) {
  .forecast-tabs-bar {
    padding: 0 0.75rem !important;
    gap: 4px !important;
  }
  .forecast-tab-btn {
    padding: 9px 8px !important;
    font-size: 11.5px !important;
    white-space: nowrap !important;
  }
  .tab-badge-tomorrow {
    padding: 2px 5px !important;
    font-size: 9.5px !important;
    white-space: nowrap !important;
  }
}