/* ==========================================================
   simulador.css — Sala interactiva "Prueba tu casa OMNIA"
   Cada estado se controla con atributos data-* en el <svg>.
   ========================================================== */

   .simulador {
    display: grid;
    gap: var(--espacio-4);
  }
  
  .simulador__vista {
    overflow: hidden;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  }
  
  /* ----- Ilustración ----- */
  .sim {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .sim__pared { fill: #2a2a2e; }
  .sim__piso { fill: #222226; }
  .sim__marco { fill: none; stroke: #555a66; stroke-width: 4; }
  .sim__sofa { fill: #3a3f4d; }
  .sim__cojin { fill: #444a5a; }
  .sim__maceta { fill: #4a3a30; }
  .sim__hoja { fill: #3f6b4f; }
  .sim__perilla { fill: #b9a98f; }
  .sim__cable { stroke: #666; stroke-width: 2; }
  .sim__lampara { fill: #5a6070; }
  
  /* ----- Termostato, ahora junto a la TV ----- */
  .sim__termostato { fill: #111; }
  
  .sim__temp {
    fill: var(--color-acento);
    font-family: var(--fuente-base);
    font-size: 11px;
    font-weight: 700;
  }
  
  /* Cielo: día o noche según la hora del visitante */
  .sim__cielo { fill: #9ec5ff; transition: fill 600ms ease; }
  .sim__astro { fill: #ffe08a; transition: fill 600ms ease; }
  .sim[data-momento="noche"] .sim__cielo { fill: #16203a; }
  .sim[data-momento="noche"] .sim__astro { fill: #e8ecf5; }
  
  /* Persianas: bajan desde arriba */
  .sim__persiana {
    transform-box: fill-box;
    transform-origin: top;
    transform: scaleY(0.08);
    transition: transform 900ms ease;
  }
  .sim[data-persianas="cerradas"] .sim__persiana { transform: scaleY(1); }
  .sim__lamina { fill: #cfd6e2; }
  .sim__linea { stroke: #aab3c2; stroke-width: 1.5; }
  
  /* ----- Puerta que se abre "de canto" -----
     En vez de rotar el panel completo (se veía como una franja
     enorme cruzando la sala), la encogemos desde la bisagra:
     el mismo truco que usan los íconos planos de puertas. */
  .sim__hueco { fill: #15130f; }
  .sim__marco-puerta { fill: none; stroke: #3a342e; stroke-width: 2; }
  .sim__puerta { fill: #4a4238; }
  .sim__puerta-canto { fill: #332d26; }
  
  .sim__puerta-grupo {
    transform-box: fill-box;
    transform-origin: 0% 50%;
    transition: transform 450ms ease;
  }
  
  .sim[data-cerradura="abierta"] .sim__puerta-grupo {
    transform: scaleX(0.14) skewY(10deg);
  }
  
  /* Cerradura: indicador de seguridad, siempre visible */
  .sim__candado { fill: var(--color-texto-suave); transition: fill var(--transicion); }
  .sim[data-cerradura="cerrada"] .sim__candado { fill: var(--color-exito); }
  
  /* Iluminación: la sala se oscurece y la lámpara proyecta luz cálida */
  .sim__sombra { fill: #05060a; opacity: 0.55; transition: opacity 700ms ease; }
  .sim[data-luces="tenues"] .sim__sombra { opacity: 0.3; }
  .sim[data-luces="encendidas"] .sim__sombra { opacity: 0; }
  
  .sim__haz { fill: var(--color-luz); opacity: 0; transition: opacity 700ms ease; }
  .sim[data-luces="tenues"] .sim__haz { opacity: 0.06; }
  .sim[data-luces="encendidas"] .sim__haz { opacity: 0.12; }
  
  .sim__foco { fill: #555; transition: fill 400ms ease; }
  .sim:not([data-luces="apagadas"]) .sim__foco { fill: var(--color-luz); }
  
  /* ----- TV montada en la pared, arriba del sofá ----- */
  .sim__tv { fill: #0b0c10; stroke: #3a3f4d; stroke-width: 3; }
  .sim__soporte { fill: #2c303a; }
  .sim__consola { fill: #2c303a; }
  
  .sim__imagen,
  .sim__reflejo {
    opacity: 0;
    transition: opacity 500ms ease;
  }
  
  .sim__reflejo { fill: #628af6; }
  
  .sim[data-tv="encendida"] .sim__imagen {
    opacity: 1;
    animation: parpadeo 3s ease-in-out infinite;
  }
  
  .sim[data-tv="encendida"] .sim__reflejo { opacity: 0.08; }
  
  @keyframes parpadeo {
    50% { opacity: 0.8; }
  }
  
  /* ----- Bocina, ahora más grande ----- */
  .sim__bocina { fill: #2c303a; }
  .sim__cono { fill: #1a1c22; }
  
  .sim__onda {
    fill: none;
    stroke: var(--color-luz);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0;
  }
  
  .sim[data-musica="encendida"] .sim__onda {
    animation: onda 1.4s ease-out infinite;
  }
  
  .sim[data-musica="encendida"] .sim__onda--2 {
    animation-delay: 0.25s;
  }
  
  @keyframes onda {
    0% { opacity: 0; }
    30% { opacity: 0.9; }
    100% { opacity: 0; }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .sim[data-musica="encendida"] .sim__onda { opacity: 0.8; }
    .sim__puerta-grupo { transition: none; }
  }
  
  /* ----- Etiquetas de grupo (DISPOSITIVOS, CLIMA, ESCENAS) ----- */
  .simulador__etiqueta {
    margin: 0 0 var(--espacio-1);
    font-size: var(--texto-sm);
    font-weight: var(--peso-fuerte);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-texto-suave);
  }
  
  .simulador__etiqueta:not(:first-child) {
    margin-top: var(--espacio-3);
  }
  
  /* ----- Tarjetas de dispositivos ----- */
  .simulador__dispositivos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espacio-1);
  }
  
  .control {
    display: grid;
    gap: 0.375rem;
    min-height: 72px;
    padding: var(--espacio-2);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    font: inherit;
    color: var(--color-texto);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: border-color var(--transicion), background var(--transicion),
      box-shadow var(--transicion), transform var(--transicion);
  }
  
  .control:hover {
    border-color: var(--color-acento);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
    transform: translateY(-1px);
  }
  
  .control[aria-pressed="true"] {
    border-color: var(--color-acento);
    background: var(--color-acento-suave);
  }
  
  .control[data-dispositivo="luces"][aria-pressed="true"] {
    border-color: var(--color-luz);
    background: rgba(255, 201, 120, 0.1);
  }
  
  .control__icono {
    width: 22px;
    height: 22px;
    color: var(--color-texto-suave);
    transition: color var(--transicion);
  }
  
  .control[aria-pressed="true"] .control__icono {
    color: var(--color-acento);
  }
  
  .control[data-dispositivo="luces"][aria-pressed="true"] .control__icono {
    color: var(--color-luz);
  }
  
  .control__nombre {
    font-weight: var(--peso-fuerte);
  }
  
  .control__estado {
    font-size: var(--texto-sm);
    color: var(--color-texto-suave);
  }
  
  /* ----- Clima ----- */
  .clima {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2);
    padding: var(--espacio-1) var(--espacio-2);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  
  .clima__ajustes {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
  }
  
  .clima__boton {
    width: 44px;
    height: 44px;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: 50%;
    font: inherit;
    font-size: var(--texto-lg);
    color: var(--color-texto);
    cursor: pointer;
  }
  
  .clima__boton:hover {
    border-color: var(--color-acento);
  }
  
  .clima__valor {
    min-width: 5ch;
    text-align: center;
    font-weight: var(--peso-fuerte);
  }
  
  /* ----- Escenas ----- */
  .simulador__escenas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-1);
  }
  
  .escena {
    min-height: 44px;
    padding: var(--espacio-1) var(--espacio-3);
    background: transparent;
    border: 1px solid var(--color-borde);
    border-radius: 999px;
    font: inherit;
    color: var(--color-texto);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: background var(--transicion), border-color var(--transicion),
      box-shadow var(--transicion);
  }
  
  .escena:hover {
    border-color: var(--color-acento);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
  }
  
  .escena[aria-pressed="true"] {
    background: var(--color-acento-oscuro);
    border-color: var(--color-acento-oscuro);
    color: #ffffff;
  }
  
  .simulador__estado {
    min-height: 1.6em;
    margin: var(--espacio-3) 0 0;
    font-size: var(--texto-sm);
    color: var(--color-texto-suave);
  }
  
  /* ----- Escritorio ----- */
  @media (min-width: 900px) {
    .simulador {
      grid-template-columns: 1.4fr 1fr;
      align-items: start;
    }
  }