:root{--color-primary: #007acc;--color-primary-hover: #005a9e;--color-background: #eef3f7;--color-surface: #ffffff;--color-text-primary: #1f2933;--color-text-secondary: #6b7c93;--color-text-tertiary: #9aa5b1;--color-border: #e5e7eb;--color-border-light: #d9e2ec;--color-comfort-start: #0e6b57;--color-comfort-end: #2dcc9a;--color-cooling-start: #0b69a3;--color-cooling-end: #40c3f7;--color-heating-start: #cf1e11;--color-heating-end: #ef694e;--color-on: rgb(34, 197, 94);--color-on-hover-bg: rgba(34, 197, 94, .05);--color-on-hover-border: rgba(34, 197, 94, .2);--color-off: rgb(239, 68, 68);--color-off-hover-bg: rgba(239, 68, 68, .05);--color-off-hover-border: rgba(239, 68, 68, .2);--shadow-card: 0 4px 10px rgba(20, 32, 48, .12);--shadow-fab: 0 4px 12px rgba(0, 122, 204, .3);--shadow-fab-hover: 0 6px 16px rgba(0, 122, 204, .4);--shadow-elevated: 0 1px 3px rgba(0, 0, 0, .22), 0 1px 2px rgba(0, 0, 0, .34);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 30px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 12px;--radius-full: 9999px;--transition-fast: .12s ease;--transition-normal: .3s ease;--transition-slow: .5s ease-in-out;--font-family-base: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;--font-size-xs: 12px;--font-size-sm: 13px;--font-size-base: 14px;--font-size-lg: 15px;--font-size-xl: 22px;--chip-bg: #0b1220;--chip-fg: #cbd2d9}@custom-media --mobile (max-width: 639px);@custom-media --tablet (min-width: 640px) and (max-width: 1023px);@custom-media --desktop (min-width: 1024px);@custom-media --reduce-motion (prefers-reduced-motion: reduce);html,body,#root{height:100%;margin:0}body{background:var(--color-background);color:var(--color-text-primary);font-family:var(--font-family-base);line-height:1.5}.app-container{min-height:100vh;display:flex}.container{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:var(--spacing-xl)}.text{font-size:var(--font-size-base)}.header{justify-content:space-between;margin-bottom:var(--spacing-md)}@media (max-width: 640px){.container{padding:var(--spacing-md)}.header{flex-direction:column;gap:var(--spacing-md)}.header h2{text-align:center}}.modal-overlay{position:fixed;inset:0;background:#00000073;display:grid;place-items:center;z-index:50;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal{background:var(--color-surface);color:var(--color-text-primary);border-radius:var(--radius-lg);width:min(520px,92vw);transform:scale(.95);animation:modal-appear .2s ease forwards}@keyframes modal-appear{to{transform:scale(1)}}.modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md);border-bottom:1px solid var(--color-border)}.modal__close{all:unset;cursor:pointer;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);transition:var(--transition-fast)}.modal__close:hover{background:#0000000d}.modal__body{padding:var(--spacing-md);display:grid;gap:var(--spacing-md)}.modal__footer{display:flex;justify-content:flex-end;gap:var(--spacing-sm);margin-top:var(--spacing-sm)}.field{display:flex;flex-direction:column;gap:var(--spacing-sm)}.field span{font-weight:600;color:var(--color-text-primary)}.field input[type=text],.field input[type=number],.field select{background:#f8fafc;border:1px solid var(--color-border);color:#111827;border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);transition:var(--transition-fast);font-size:var(--font-size-base)}.field input:focus,.field select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #007acc1a}.field--row{flex-direction:row;gap:var(--spacing-md);align-items:center}.btn{all:unset;display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-weight:500;cursor:pointer;transition:var(--transition-fast);background:#111827;color:#e5e7eb}.btn:hover{background:#586c8b}.zones-grid{display:grid;gap:var(--spacing-md);grid-template-columns:repeat(2,minmax(0,1fr))}@media (min-width: 640px){.zones-grid{gap:var(--spacing-xl);grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 1024px){.zones-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}.not-found-content{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:60vh;max-width:500px;margin:0 auto}.not-found-content__title{font-size:2rem;font-weight:700;margin:0 0 1rem;color:var(--color-text-primary)}.not-found-content__description{font-size:1.1rem;color:var(--color-text-secondary);margin:0 0 2rem;line-height:1.5}@media (max-width: 640px){.not-found-content__title{font-size:1.5rem}.not-found-content__description{font-size:1rem}}.zone-card{cursor:pointer;position:relative;border-radius:var(--radius-lg);overflow:hidden;max-height:130px;background:var(--color-surface);box-shadow:var(--shadow-elevated);transition:transform var(--transition-fast),box-shadow .28s ease}.zone-card:hover{transform:translateY(-1px)}.zone-card:before,.zone-card:after,.zone-card .bg-comfort{content:"";position:absolute;inset:0;opacity:0;transition:opacity var(--transition-slow)}.zone-card:before{z-index:1;background:linear-gradient(to top left,var(--color-heating-start),var(--color-heating-end))}.zone-card:after{z-index:2;background:linear-gradient(to top left,var(--color-cooling-start),var(--color-cooling-end))}.zone-card .bg-comfort{z-index:3;background:linear-gradient(to top left,var(--color-comfort-start),var(--color-comfort-end))}.zone-card__active{position:relative;z-index:4;padding:var(--spacing-lg)}.state-heating:before,.state-cooling:after,.state-comfort .bg-comfort{opacity:1}.zone-card .decorative-icon{content:"";position:absolute;right:-48px;bottom:-58px;width:150px;height:150px;background:#ffffffa6;opacity:0;pointer-events:none;transform-origin:center;animation:zc-spin 24s linear infinite;transition:opacity var(--transition-slow);z-index:5}@keyframes zc-spin{to{transform:rotate(360deg)}}.state-heating .decorative-icon{opacity:.25;mask:url(/temperature-manager/assets/heat-DnN4lRtn.svg) center/contain no-repeat;-webkit-mask:url(/temperature-manager/assets/heat-DnN4lRtn.svg) center/contain no-repeat}.state-cooling .decorative-icon{opacity:.25;mask:url(/temperature-manager/assets/cool-CnOgVHn0.svg) center/contain no-repeat;-webkit-mask:url(/temperature-manager/assets/cool-CnOgVHn0.svg) center/contain no-repeat}.zc-head{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md)}.zc-temp__value{font-weight:700;font-size:var(--font-size-xl);line-height:1;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.15);transition:color var(--transition-normal)}.zc-icons{display:flex;align-items:center;gap:var(--spacing-sm)}.zc-power{all:unset;width:36px;height:36px;border-radius:var(--radius-full);cursor:pointer;display:grid;place-items:center;background:transparent;transition:transform var(--transition-fast)}.zc-power:active{transform:scale(.96)}.zc-power__icon{width:24px;height:24px;mask:url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='22px'%20height='24px'%20viewBox='0%200%2022%2024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3epower%3c/title%3e%3cg%20id='Guía-de-estilo'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%3e%3cg%20id='Iconos'%20transform='translate(-495.000000,%20-429.000000)'%20fill='%231F2933'%20fill-rule='nonzero'%3e%3cpath%20d='M505.8,439.893692%20C505.22808,439.893692%20504.702128,439.518338%20504.702128,438.947488%20L504.702128,429.946203%20C504.702128,429.375353%20505.22808,429%20505.8,429%20C506.37192,429%20506.897872,429.375353%20506.897872,429.946203%20L506.897872,438.947488%20C506.897872,439.518338%20506.37192,439.893692%20505.8,439.893692%20Z%20M505.8,453%20C499.844047,453%20495,448.256871%20495,442.425%20C495,438.223459%20497.543248,434.421216%20501.483459,432.734625%20C502.038758,432.501292%20502.683248,432.748547%20502.924642,433.290039%20C503.168603,433.834511%20502.914108,434.469488%20502.358655,434.705956%20C499.221842,436.048779%20497.195745,439.078224%20497.195745,442.425%20C497.195745,447.069729%20501.056447,450.85%20505.8,450.85%20C510.543553,450.85%20514.404255,447.069729%20514.404255,442.425%20C514.404255,439.078224%20512.378158,436.048779%20509.242483,434.706442%20C508.685892,434.469488%20508.431397,433.834511%20508.675718,433.289238%20C508.919124,432.748154%20509.563029,432.501123%20510.12034,432.736236%20C514.056752,434.421216%20516.6,438.223459%20516.6,442.425%20C516.6,448.256871%20511.755953,453%20505.8,453%20Z'%20id='power'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e") no-repeat center;-webkit-mask-size:contain;mask-size:contain;background-color:#fff;transition:background-color var(--transition-normal)}.zc-foot{margin-top:22px}.zc-name{color:#fff;font-weight:700;font-size:var(--font-size-lg);line-height:1.1;text-shadow:0 1px 0 rgba(0,0,0,.15);max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--transition-normal)}.zc-sub{margin-top:var(--spacing-xs);color:#fff;opacity:.8;font-weight:500;font-size:var(--font-size-sm);transition:color var(--transition-normal),opacity var(--transition-normal)}.state-off .zc-temp__value,.state-off .zc-name{color:var(--color-text-primary)}.state-off .zc-sub{color:var(--color-text-tertiary)}.state-off .zc-power__icon{background-color:var(--color-text-tertiary)}.state-heating .zc-power__icon,.state-cooling .zc-power__icon,.state-comfort .zc-power__icon{background-color:#fff}.state-comfort .decorative-icon,.state-off .decorative-icon{opacity:0;transition:none}.state-heating .decorative-icon,.state-cooling .decorative-icon{transition:opacity var(--transition-slow)}.group-header{display:flex;align-items:center;gap:var(--spacing-md);background:var(--color-surface);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);box-shadow:var(--shadow-card);margin:var(--spacing-md) 0}.group-header__toggle{all:unset;cursor:pointer;font-size:var(--font-size-base);color:var(--color-text-secondary);transition:var(--transition-fast)}.group-header__toggle:hover{color:var(--color-text-primary)}.group-header__title{font-weight:700;color:var(--color-text-primary)}.group-header__actions{margin-left:auto;display:flex;gap:var(--spacing-sm);align-items:center}.group-header .actions-buttons{display:flex;gap:var(--spacing-sm);align-items:center;flex-wrap:wrap;margin-left:auto}.chip{display:inline-flex;align-items:center;height:24px;padding:0 var(--spacing-md);border-radius:var(--radius-md);background:var(--chip-bg);color:var(--chip-fg);font-size:var(--font-size-xs);font-weight:600;transition:var(--transition-fast)}.chip--ghost{background:transparent;color:var(--color-text-secondary);border:1px solid var(--color-border-light)}.chip--ghost.is-active{background:var(--chip-bg);color:var(--chip-fg);border-color:transparent}.chip--ghost:hover:not(.is-active):last-child{background:var(--color-on-hover-bg);color:var(--color-on);border-color:var(--color-on-hover-border)}.chip--ghost:hover:not(.is-active):nth-last-child(2){background:var(--color-off-hover-bg);color:var(--color-off);border-color:var(--color-off-hover-border)}.group-header__actions--mobile{position:relative}.group-header__dropdown-toggle{all:unset;background:#111827;color:#e5e7eb;border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;display:none;transition:var(--transition-fast)}.group-header__dropdown-toggle:hover{background:#374151}.group-header__dropdown{position:absolute;top:100%;right:0;background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-dropdown);border:1px solid var(--color-border-light);padding:var(--spacing-xs);min-width:160px;z-index:10;display:none;overflow:hidden}.group-header__dropdown.is-open{display:block}.group-header__dropdown-item{all:unset;display:flex;align-items:center;width:calc(100% - var(--spacing-xs));padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;border-radius:var(--radius-sm);font-size:var(--font-size-base);color:var(--color-text-primary);margin:2px;box-sizing:border-box;transition:var(--transition-fast)}.group-header__dropdown-item:hover{background:#f7fafc}.group-header__dropdown-item--danger{color:#dc2626}.group-header__dropdown-item--danger:hover{background:#fef2f2}.group-header__dropdown-divider{height:1px;background:#e2e8f0;margin:var(--spacing-xs) var(--spacing-sm)}@media (max-width: 640px){.group-header__actions{display:none}.group-header__actions--mobile{margin-left:auto}.group-header__dropdown-toggle{display:block}.group-header .actions-buttons{margin-left:0;flex:1}}.action-buttons{display:flex;align-items:center;margin:var(--spacing-sm) 0 var(--spacing-md);gap:var(--spacing-sm)}.action-buttons__left{display:flex;gap:var(--spacing-sm);align-items:center;flex-wrap:wrap}@media (max-width: 640px){.action-buttons{flex-direction:column;align-items:stretch;gap:var(--spacing-md)}.action-buttons__left{justify-content:center}}.zone-detail__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--color-border)}.zone-detail__back-btn{background:none;border:none;font-size:1rem;cursor:pointer;padding:.5rem 1rem}.zone-detail__actions{display:flex;gap:.5rem;align-items:center}.zone-detail__actions .zc-power{border:1px solid var(--color-border);transition:all var(--transition-fast)}.zone-detail__actions .zc-power[aria-pressed=true]{background:var(--color-on-hover-bg);border-color:var(--color-on)}.zone-detail__actions .zc-power[aria-pressed=true] .zc-power__icon{background-color:var(--color-on)}.zone-detail__actions .zc-power[aria-pressed=false]{background:var(--color-off-hover-bg);border-color:var(--color-off)}.zone-detail__actions .zc-power[aria-pressed=false] .zc-power__icon{background-color:var(--color-off)}.zone-detail__content{text-align:center}.zone-detail__title{font-size:2.5rem;font-weight:700;margin:0 0 2rem;color:var(--color-text-primary)}.zone-detail__temperature{display:flex;flex-direction:column;align-items:center;gap:.5rem}.temperature__current{font-size:3rem;font-weight:700;color:var(--color-primary);line-height:1}.temperature__desired{font-size:1.2rem;color:var(--color-text-secondary)}@media (max-width: 640px){.zone-detail{padding:.5rem}.zone-detail__header{flex-direction:column;gap:1rem;align-items:stretch}.zone-detail__actions{justify-content:center}.zone-detail__title{font-size:2rem}.temperature__current{font-size:3rem}}.realtime-fab{position:fixed;bottom:var(--spacing-xl);right:var(--spacing-xl);z-index:1000;background-color:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-full);padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-base);font-weight:500;cursor:pointer;box-shadow:var(--shadow-fab);transition:all var(--transition-normal);min-width:100px;text-align:center;-webkit-user-select:none;user-select:none}.realtime-fab:hover{background-color:var(--color-primary-hover);box-shadow:var(--shadow-fab-hover);transform:translateY(-2px)}.realtime-fab:active{transform:translateY(0);box-shadow:0 2px 8px #007acc4d}.realtime-fab:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.realtime-fab--active{background-color:var(--color-on);box-shadow:0 4px 12px #28a7454d}.realtime-fab--active:hover{background-color:#218838;box-shadow:0 6px 16px #28a74566}@media (max-width: 640px){.realtime-fab{bottom:var(--spacing-lg);right:var(--spacing-lg);padding:var(--spacing-md);font-size:var(--font-size-sm);min-width:90px}}