/* NCCM v58 — App UX: menú izquierda + menos flash al navegar */

@media (max-width:760px){
  /* 1) Menú ☰ siempre a la IZQUIERDA (como Inicio app) */
  html body .header .nav,
  html body .wide.nav,
  html body .nav{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
  }
  html body .header .nav > .menu-toggle,
  html body .menu-toggle{
    order:-3!important;
    margin-left:0!important;
    margin-right:6px!important;
    flex:0 0 48px!important;
  }
  html body .header .nav > .brand,
  html body .brand{
    order:-2!important;
    flex:1 1 auto!important;
    max-width:calc(100vw - 130px)!important;
  }
  html body .header .nav > .nccm-lang-toggle,
  html body .nccm-lang-toggle,
  html body .nccm-app-lang-toggle,
  html body button[data-nccm-lang-toggle]{
    order:5!important;
    margin-left:auto!important;
  }
  html body .quote-btn,
  html body .install-app-btn{
    display:none!important;
  }

  /* 2) Fondo de app más estable (menos corte oscuro/crema vacío) */
  html body,
  html body:not(.home-page){
    background:#0f4c5c!important;
  }
  html body:not(.home-page) .section,
  html body:not(.home-page) .catalog-category-strip{
    background:#fff7ed!important;
  }

  /* Hero sin imagen Admin: tono oscuro (no crema #f4eadb) */
  html body:not(.home-page) .page-hero:not([data-setting-bg-loaded="true"]),
  html body:not(.home-page) .catalog-showroom-hero:not([data-setting-bg-loaded="true"]){
    background:#1a120d!important;
  }
  html body:not(.home-page) .page-hero[data-clean-hero="true"],
  html body:not(.home-page) .catalog-showroom-hero[data-clean-hero="true"]{
    background:#1a120d!important;
  }

  /* Loader anti-flash en tono app (no crema) */
  html.tdm-anti-flash:not(.tdm-content-ready) body.tdm-anti-flash-page{
    background:#0f4c5c!important;
  }
  html.tdm-anti-flash:not(.tdm-content-ready) body.tdm-anti-flash-page::before{
    background:
      radial-gradient(circle at 18% 12%,rgba(213,164,91,.18),transparent 34%),
      linear-gradient(180deg,#1b130f 0%,#0f0b09 100%)!important;
    color:#fffaf3!important;
    font-size:clamp(22px,6.2vw,34px)!important;
    padding:0 24px!important;
    text-align:center!important;
  }
  html.tdm-anti-flash:not(.tdm-content-ready) body.tdm-anti-flash-page::after{
    color:#e8c78f!important;
  }

  /* No atenuar toda la página mientras llega Supabase */
  html body.live-sync-loading{
    opacity:1!important;
  }

  /* Placeholders mientras llegan listas del Admin */
  html body [data-dyn-gallery-list]:empty,
  html body [data-dyn-projects-list]:empty,
  html body [data-dyn-catalog-list]:empty,
  html body [data-dyn-services-list]:empty,
  html body [data-home-services-list]:empty,
  html body [data-nccm-mobile-projects]:empty{
    min-height:180px!important;
    border-radius:22px!important;
    background:linear-gradient(90deg,rgba(75,44,27,.06),rgba(75,44,27,.12),rgba(75,44,27,.06))!important;
    background-size:200% 100%!important;
    animation:nccmAppShimmer 1.1s ease-in-out infinite!important;
  }

  /* Media boxes: color base + fade-in de imagen */
  html body .clean-catalog-media,
  html body .home-service-media,
  html body .feature-photo,
  html body .intro-photo{
    background:#2a1a12!important;
    min-height:180px!important;
  }
  html body .clean-catalog-media img,
  html body .home-service-media img,
  html body .masonry img,
  html body [data-dyn-gallery-list] img,
  html body [data-dyn-projects-list] img,
  html body [data-dyn-catalog-list] img{
    opacity:0;
    transition:opacity .28s ease;
  }
  html body .clean-catalog-media img.nccm-img-ready,
  html body .home-service-media img.nccm-img-ready,
  html body .masonry img.nccm-img-ready,
  html body [data-dyn-gallery-list] img.nccm-img-ready,
  html body [data-dyn-projects-list] img.nccm-img-ready,
  html body [data-dyn-catalog-list] img.nccm-img-ready{
    opacity:1;
  }
}

@keyframes nccmAppShimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}