/* layout.css — cabecera superior + área principal (galería / configurador / precios / info) */
.top{display:flex;align-items:center;gap:18px;padding:10px 24px;background:var(--color-fondo);border-bottom:1px solid rgba(214,167,122,0.4);flex-shrink:0;z-index:40}
.top .logo{padding:0;border:none;background:none;display:flex;align-items:center}
.top .logo img{width:150px;height:auto;display:block}
.top .tabs{display:flex;gap:0;margin-left:14px}
.topig{margin-left:auto}

.app{display:flex;flex:1;min-height:0}
.main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}

/* Galería (grilla de murales) y configurador ocupan el alto disponible.
   Usamos :not(.hidden) para que .hidden (display:none) siga ganando al ocultar. */
.mgal{flex:1;overflow-y:auto;min-height:0}
.mcfg{flex:1;min-height:0}
/* Configurador en escritorio: preview a la izquierda (fijo) + panel a la derecha (scrollea) */
.mcfg:not(.hidden){display:flex;flex-direction:row;min-height:0}
.cfgpreview{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;padding-bottom:58px}
.cfgpreview .room{flex:1;min-height:0}
.cfgpanel{flex:0 0 384px;overflow-y:auto;min-height:0;background:var(--color-fondo);border-left:1px solid rgba(214,167,122,0.4);padding-bottom:70px}

.room{flex:1;position:relative;overflow:hidden;min-height:320px}
/* Fondo del configurador: pared NEUTRA cálida (sin escena), para que el mural y las medidas se
   lean limpios y la foto que el cliente sube de SU pared sea la protagonista. Puro CSS, peso 0.
   La subida de "mi pared" la sobrescribe con estilo inline; "Quitar" vuelve a esta pared neutra. */
.wall{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;
  background-color:var(--color-pared);
  background-image:
    radial-gradient(95% 72% at 50% 20%,rgba(255,253,248,0.95) 0%,rgba(255,253,248,0) 60%),
    linear-gradient(180deg,#f2eee5 0%,#e8e2d6 60%,#ded6c7 100%);
  background-size:cover;background-position:center;background-repeat:no-repeat}
/* Cartel sutil que invita a subir la foto de la pared del cliente. Va en una barra sobre la pared
   (nunca tapa el mural) y desaparece en cuanto hay foto de pared (se oculta la barra en applyWall). */
.wallhintbar{flex-shrink:0;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;padding:12px 16px 4px}
.wallhint{display:inline-flex;align-items:center;gap:7px;max-width:100%;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--color-azul);
  background:#fff;border:1px solid rgba(13,28,81,0.16);
  padding:9px 18px;border-radius:22px;cursor:pointer;line-height:1.2;text-align:center;
  box-shadow:0 3px 12px rgba(13,28,81,0.10)}
.wallhint:hover{border-color:var(--color-dorado);box-shadow:0 4px 14px rgba(214,167,122,0.28)}
/* Botón "Quitar mi pared": secundario, aparece junto a "Cambiar" cuando hay foto de pared */
.wallhintclr{color:#8a3a2a;font-weight:600;border-color:rgba(138,58,42,0.22)}
.wallhintclr:hover{border-color:#c67}
/* .wallhint fija display:inline-flex, que ganaría a .hidden (base.css) por orden de carga:
   esta regla asegura que .hidden oculte el botón "Quitar" cuando no hay foto de pared. */
.wallhint.hidden{display:none}
/* El botón "← Todos los murales" ya fluye bajo el título (no es overlay), así que la barra
   del cartel "sube tu pared" no necesita reservar espacio arriba en móvil. */
@media (max-width:720px){.wallhintbar{padding-top:8px}}

.bar{border-bottom:2px solid var(--color-azul);padding:12px 22px;display:flex;align-items:center;gap:16px;background:#fff;flex-shrink:0}