/* Responsive entry and shared workspace. Media queries also handle rotation,
   split-screen tablets and browser zoom without user-agent assumptions. */
@media screen and (max-width:1024px) {
  #loginOverlay { padding:24px; padding-block:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-bottom)); }
  #loginOverlay .login-card { width:min(820px,100%); grid-template-columns:.85fr 1.15fr; border-radius:24px; }
  #loginOverlay .login-story { display:flex; padding:30px; }
  #loginOverlay .login-story-copy { margin-top:44px; }
  #loginOverlay .login-story h2 { font-size:36px; }
  #loginOverlay .login-access { padding:32px; }
  #loginOverlay .login-welcome { margin:32px 0 24px; }
  #loginOverlay :is(input,.form-control) { font-size:16px; min-height:50px; }
  #loginOverlay #btnToggleLoginPass { min-width:44px; min-height:44px; }
  #loginOverlay #btnLoginSubmit { min-height:50px; margin-top:20px; }
  #loginOverlay .login-access-footer { margin-top:24px; }

  #appMainWrapper { padding:16px 20px 32px !important; }
  #appMainWrapper .premium-mobile-header { display:none !important; }
  #appMainWrapper .solar-hero-banner { display:flex !important; border-radius:16px !important; min-height:64px !important; }
  #appMainWrapper .hero-brand-title { font-size:17px !important; }
  #appMainWrapper .solar-hero-banner .hero-brand-text { display:flex !important; }
  #appMainWrapper :is(.dashboard-kpi-grid,.instant-kpi-grid) { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
  #appMainWrapper .dashboard-kpi-card { min-width:0; }
  #appMainWrapper .workspace-heading { flex-wrap:wrap; gap:16px !important; margin:22px 0 16px !important; }
  #appMainWrapper .dashboard-actions { display:flex !important; flex-wrap:wrap; gap:8px !important; max-width:100%; }
  #appMainWrapper .dashboard-actions .btn { min-height:44px; font-size:12px !important; }
  #appMainWrapper .selector-row-inner { flex-wrap:wrap !important; gap:12px !important; }
  #appMainWrapper .form-group-inline { min-width:0 !important; flex:1 1 250px; }
  #appMainWrapper .select-wrapper { min-width:0 !important; flex:1; }
  #appMainWrapper :is(#clientSelect,#deviceSelect) { width:100% !important; min-width:0 !important; min-height:44px; font-size:16px !important; }
  #appMainWrapper :is(.btn-selector-gear,.btn-selector-add,.btn-quick-edit-pencil,.btn-notification-bell) { min-width:44px; min-height:44px; }
  #appMainWrapper .instant-details-grid { grid-template-columns:1fr !important; }
  #appMainWrapper .instant-row { min-width:0; gap:12px; }
  #appMainWrapper .instant-row-value { overflow-wrap:anywhere; }
  #appMainWrapper .solar-intelligence-strip { flex-wrap:wrap !important; overflow:visible !important; }
  #appMainWrapper .solar-intelligence-strip .intel-group-left { flex-wrap:wrap !important; white-space:normal !important; min-width:0; max-width:100%; }
  #appMainWrapper .solar-intelligence-strip .intel-pill { min-width:0; max-width:100%; white-space:normal !important; }
  #appMainWrapper .dashboard-panels-container { grid-template-columns:minmax(0,1fr) !important; }
  #appMainWrapper .dashboard-panel-card { min-width:0; max-width:100%; }
}

@media screen and (max-width:600px) {
  #loginOverlay {
    background:#eef3f4;
    background-image:radial-gradient(ellipse at 0 0,#dcece7 0,transparent 65%);
    padding:16px;
    padding-block:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-bottom));
    align-items:safe center;
  }
  #loginOverlay .login-card { grid-template-columns:1fr; max-width:420px; border:1px solid #dce6e7; border-radius:24px; box-shadow:0 18px 50px #1b3f4014; }
  #loginOverlay .login-story { padding:22px 26px; background:#202a30; gap:12px; }
  #loginOverlay .login-product { font-size:17px; gap:12px; }
  #loginOverlay .login-product span { font-size:9px; color:#c5d6d8; }
  #loginOverlay .login-story-copy { margin:0; }
  #loginOverlay .login-story .login-eyebrow { display:none; }
  #loginOverlay .login-story h2 { font-size:23px; margin:0; line-height:1.25; letter-spacing:-.035em; }
  #loginOverlay .login-story h2 br { display:block; }
  #loginOverlay .login-story-copy p { display:none; }
  #loginOverlay .login-orbit { display:none; }
  #loginOverlay .login-story-footer { margin:0; padding-top:12px; font-size:7px; letter-spacing:.12em; }
  #loginOverlay .login-access { padding:25px 26px 22px; background:#fff; }
  #loginOverlay .login-identity { gap:10px; }
  #loginOverlay .login-bear { width:49px; flex-basis:49px; height:34px; }
  #loginOverlay .login-bear img { width:78px; top:-9px; left:-14px; }
  #loginOverlay .login-identity strong { font-size:9px; letter-spacing:.035em; }
  #loginOverlay .login-identity :is(strong,span) { font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; }
  #loginOverlay .login-identity > div > span { font-size:9px; margin-top:3px; }
  #loginOverlay .login-welcome { margin:23px 0 22px; }
  #loginOverlay .login-welcome .login-eyebrow { font-size:8px; letter-spacing:.12em; color:#6a8384; }
  #loginOverlay h1 { font-size:26px; margin:8px 0; color:#173a3d; }
  #loginOverlay .login-welcome p { font-size:12px; margin:0; line-height:1.5; color:#6b7f84; }
  #loginOverlay .form-group { margin-bottom:16px; }
  #loginOverlay .form-label { font-size:12px; color:#36565c; margin-bottom:7px; }
  #loginOverlay :is(input,.form-control) { border-color:#d6e2e4; border-radius:11px; background:#fbfcfc; }
  #loginOverlay :is(input,.form-control):focus { outline:2px solid #00866b; outline-offset:2px; }
  #loginOverlay #btnLoginSubmit { background:#00866b !important; border-color:#00866b; margin-top:8px; font-size:14px; border-radius:11px; }
  #loginOverlay #btnLoginSubmit:hover { background:#006e58 !important; }
  #loginOverlay .login-access-footer { margin-top:20px; font-size:10px; }

  #appMainWrapper { padding:12px 12px 28px !important; }
  #appMainWrapper .solar-hero-banner { padding:10px 12px !important; margin-bottom:12px !important; flex-wrap:nowrap !important; gap:8px !important; position:sticky; top:max(8px,env(safe-area-inset-top)); z-index:50; }
  #appMainWrapper .hero-banner-left { min-width:0; gap:8px !important; }
  #appMainWrapper .hero-brand-title { font-size:clamp(11px,3.4vw,14px) !important; white-space:nowrap; }
  #appMainWrapper .hero-brand-subtitle { font-size:5px !important; letter-spacing:0 !important; }
  #appMainWrapper .hero-banner-right { gap:0 !important; }
  #appMainWrapper .solar-hero-banner .btn-mobile-sidebar-toggle { display:inline-flex !important; flex-shrink:0; min-width:40px; min-height:44px; }
  #appMainWrapper .workspace-toolbar { border-radius:14px !important; margin-bottom:16px !important; }
  #appMainWrapper .app-header { padding:12px !important; }
  #appMainWrapper .header-status-group { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px !important; }
  #appMainWrapper .header-status-group .status-divider { display:none !important; }
  #appMainWrapper .status-pill { min-width:0; padding:0 !important; font-size:10px !important; white-space:normal !important; line-height:1.45; overflow-wrap:anywhere; }
  #appMainWrapper #lblLastSeen { grid-column:1 / -1; order:5; }
  #appMainWrapper .device-selector-bar { padding:12px !important; }
  #appMainWrapper .selector-row-inner { display:flex !important; flex-direction:column; align-items:stretch; gap:12px !important; }
  #appMainWrapper .selector-row-inner > .status-divider { display:none !important; }
  #appMainWrapper .form-group-inline { flex:0 0 auto; width:100%; gap:8px !important; flex-direction:row !important; align-items:center !important; }
  #appMainWrapper .form-group-inline > :is(label,.label-text) { width:56px; flex:0 0 56px; font-size:11px !important; }
  #appMainWrapper .client-project-pill { min-width:0; overflow-wrap:anywhere; white-space:normal; }
  #appMainWrapper .workspace-heading { margin:20px 0 14px !important; gap:12px !important; }
  #appMainWrapper .workspace-heading h2 { font-size:24px !important; line-height:1.2; overflow-wrap:anywhere; }
  #appMainWrapper .workspace-heading p { font-size:12px !important; }
  #appMainWrapper .dashboard-actions { width:100%; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); }
  #appMainWrapper .dashboard-actions .btn { width:100%; padding:10px 8px; min-width:0; white-space:normal; }
  #appMainWrapper .dashboard-actions #btnEditPlantModal { grid-column:1 / -1; }
  #appMainWrapper :is(.dashboard-kpi-grid,.instant-kpi-grid) { gap:10px !important; }
  #appMainWrapper .dashboard-kpi-card { flex-direction:column; gap:10px !important; padding:15px !important; border-radius:15px !important; }
  #appMainWrapper .dashboard-kpi-card .kpi-icon-wrap { width:34px !important; height:34px !important; }
  #appMainWrapper .dashboard-kpi-card .kpi-value { font-size:26px !important; }
  #appMainWrapper .dashboard-kpi-card .kpi-label { font-size:11px !important; }
  #appMainWrapper .instant-kpi-card { display:flex !important; flex-direction:column; align-items:flex-start !important; gap:10px !important; padding:14px !important; border-radius:15px !important; min-width:0; }
  #appMainWrapper .instant-kpi-icon { width:34px !important; height:34px !important; flex:0 0 34px; }
  #appMainWrapper .instant-kpi-content { min-width:0; width:100%; }
  #appMainWrapper .instant-kpi-label { font-size:11px !important; }
  #appMainWrapper .instant-kpi-val { font-size:26px !important; line-height:1.3; white-space:nowrap; font-variant-numeric:tabular-nums; }
  #appMainWrapper .instant-kpi-sub { font-size:10px !important; white-space:normal !important; min-height:28px; line-height:1.4; }
  #appMainWrapper .instant-detail-panel { padding:16px !important; border-radius:15px !important; min-width:0; }
  #appMainWrapper .instant-detail-panel.is-collapsed { padding:11px 16px !important; }
  #appMainWrapper .dashboard-panel-card { padding:16px !important; }
  #appMainWrapper .panel-card-header { flex-wrap:wrap; gap:8px; }
  #appMainWrapper .solar-weather-card { min-width:0; width:100%; box-sizing:border-box; }
  #appMainWrapper .swc-body { flex-wrap:wrap; gap:12px; }
  #appMainWrapper .swc-col-metric { min-width:0; flex:1 1 100px; }
  #appMainWrapper .swc-header { flex-wrap:wrap; gap:8px; }
  #appMainWrapper .swc-action-badge { white-space:normal; }
  #appMainWrapper .chart-filters-mono { display:flex; flex-wrap:wrap; gap:3px; }
  #appMainWrapper .chart-filters-mono .filter-btn { min-height:40px; flex:1 1 auto; }
  #appMainWrapper .view-mode-pill-group { display:flex; width:100%; box-sizing:border-box; }
  #appMainWrapper .view-pill-btn { flex:1 1 0; min-width:0; min-height:44px; padding:8px; white-space:normal; font-size:11px; gap:5px; }
  #appMainWrapper .table-card-mono > div:has(#btnSyncNow) { padding:16px !important; }
  #appMainWrapper .table-card-mono div:has(> #btnSyncNow) { flex-wrap:wrap; max-width:100%; }
  #appMainWrapper .tech-table-mono { table-layout:fixed; width:100%; }
  #appMainWrapper .tech-table-mono thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  #appMainWrapper .tech-table-mono tbody { display:block; padding:0 16px 16px; }
  #appMainWrapper .tech-table-mono tbody tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:14px 0; border-bottom:1px solid #e3e8ef; }
  #appMainWrapper .tech-table-mono td { display:block; padding:0 !important; border:0; min-width:0; white-space:normal; overflow-wrap:anywhere; }
  #appMainWrapper .tech-table-mono td:first-child { grid-column:1 / -1; font-weight:600; }
  #appMainWrapper .tech-table-mono td::before { display:block; font:500 10px/1.4 Inter,system-ui,sans-serif; color:#667085; margin-bottom:3px; }
  #appMainWrapper .tech-table-mono td:nth-child(2)::before { content:'Lectura'; }
  #appMainWrapper .tech-table-mono td:nth-child(3)::before { content:'Registro Modbus'; }
  #appMainWrapper .tech-table-mono td:nth-child(4)::before { content:'Unidad'; }
  #appMainWrapper .tech-table-mono td:nth-child(5)::before { content:'Estado'; }
}
@media screen and (max-height:600px) and (max-width:1024px) {
  #loginOverlay { align-items:flex-start; }
  #loginOverlay .login-card { margin-block:auto; }
}