/* EL CONTENEDOR PRINCIPAL */
#app-shell {
    display: flex; flex-direction: column;
    height: 100%; width: 100%;
    position: relative;
    z-index: 1; /* ensure app content stays above global watermark */
    opacity: 0; /* Se hace visible con JS */
    transition: opacity 0.8s ease;
}


/* HEADER SUPERIOR FIJO */
#top-bar {
    position: fixed; top: 0; left: 0; width: 100%;
    height: var(--header-height);
    background: rgba(8,8,8, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-dim);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px;
    z-index: 500;
}
#header-title { font-weight: 800; font-size: 1rem; letter-spacing: 1px; }

/* ÁREA DE SCROLL (DONDE VA EL CONTENIDO) */
#viewport {
    flex: 1;
    max-width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 20px;
    /* Dejamos espacio para que las barras no tapen el contenido */
    padding-top: calc(var(--header-height) + 20px);
    padding-bottom: calc(var(--nav-height) + var(--safe-area-bottom) + 20px);

    /* Anchor absolute brand marks inside the viewport (below the fixed top-bar). */
    position: relative;
}

/* Bottom nav styles are defined in components.css
   (single liquid-glass pill that clips its scrolling content). */

/* SPLASH (replaces legacy PIN lock)
   Requirement: ONLY the brand image, covering 100% of the screen.
   Exit animation: espresso-drip (C).
*/
#security-layer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: #f5f2ea;
    background-image: url('../img/brand/splash.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* Espresso-drip exit: a dark drip curtain falls down as the splash lifts away */
#security-layer::before{
    content: '';
    position: absolute;
    left: 0;
    top: -120%;
    width: 100%;
    height: 140%;
    pointer-events: none;
    opacity: 0;
    /* a subtle espresso tone with drops */
    background:
      radial-gradient(circle at 12% 12%, rgba(46,28,16,0.95) 0 10px, transparent 11px),
      radial-gradient(circle at 28% 8%, rgba(46,28,16,0.92) 0 14px, transparent 15px),
      radial-gradient(circle at 44% 10%, rgba(46,28,16,0.94) 0 9px, transparent 10px),
      radial-gradient(circle at 60% 7%, rgba(46,28,16,0.92) 0 15px, transparent 16px),
      radial-gradient(circle at 78% 11%, rgba(46,28,16,0.95) 0 10px, transparent 11px),
      linear-gradient(to bottom, rgba(46,28,16,0.0) 0%, rgba(46,28,16,0.92) 38%, rgba(18,18,18,0.98) 100%);
    filter: drop-shadow(0 18px 40px rgba(0,0,0,0.35));
}

.hidden-layer{
    pointer-events: none;
    animation: splashExit 900ms cubic-bezier(0.22, 0.9, 0.18, 1) forwards;
}
.hidden-layer::before{
    opacity: 1;
    animation: dripDown 780ms cubic-bezier(0.22, 0.9, 0.18, 1) forwards;
}

@keyframes dripDown{
    0%   { transform: translateY(0); }
    100% { transform: translateY(220%); }
}

@keyframes splashExit{
    0%   { transform: translateY(0); opacity: 1; }
    70%  { transform: translateY(-10%); opacity: 1; }
    100% { transform: translateY(-110%); opacity: 0; }
}

/* BRAND MARKS (subtle, premium) */
.brand-mini{
    width: 34px;
    height: auto;
    opacity: 0.9;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,0.25));
}

/* Visible section branding (clean, aligned)
   Use the header logo (transparent PNG). */
.brand-section-row{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 8px 0 8px;
    padding-right: 14px;
}

.brand-section{
    width: clamp(96px, 18vw, 132px);
    height: auto;
    display: block;
    opacity: 0.78;
    filter: none;
}


/* Brew header brand overlay (does NOT push content) */
.brew-hero{
    position: relative;
}
.brew-hero .brand-section-row{
    position: absolute;
    right: 12px;
    bottom: -4px;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
    z-index: 0;
}
.brew-hero .brand-section{
    width: clamp(92px, 18vw, 128px);
    opacity: 0.16;
}
.brew-hero > *:not(.brand-section-row){
    position: relative;
    z-index: 1;
}

/* Dashboard brand handled as subtle background in dash hero */

.dash-brand img{
    width: clamp(170px, 50vw, 250px);
    height: auto;
    display: block;
    opacity: 0.92;
}
/* Bottom nav label display is handled in components.css (active only) */
#bottom-nav .nav-item span{ display:none; }
#bottom-nav .nav-item.active span{ display:block; }

/* Brew: remove extra 20px gap under fixed top-bar so the sticky method bar sits flush.
   Applied dynamically by BrewController when viewing a method or recipe detail. */
#viewport.brew-tight-top{
    padding-top: var(--header-height);
}

/* Home: reduce top padding so the hero photo extends closer to the top bar.
   Applied by Router when entering Home route. */
#viewport.home-tight-top{
    padding-top: var(--header-height);
}