/* Componentes compartidos por todas las pantallas de la web. */

/* ---------- contenedor de la app (mobile-first) ---------- */
.app {
    max-width: var(--app-max-width);
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: var(--bg-low);
}

/* ---------- header con logo y acciones ---------- */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 62px;
    padding: 12px 20px;
    background: var(--bg-lowest);
    box-shadow: var(--shadow-card);
}
.app-header__actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 10px;
    border: 0; border-radius: var(--radius-lg);
    background: var(--bg-medium);
}

/* ---------- área táctil ampliada (regla 5 de accesibilidad) ----------
   Botones-icono pequeños (24-38px) que conservan el tamaño exacto del Figma pero amplían su zona de
   toque a ~44px con un pseudo-elemento invisible centrado. Úsala en el elemento clicable (no en el
   <img> de adentro). Reemplaza los bloques que antes se repetían en static/webapp/premios/styles.css
   (.premios-titlebar__back, .winner-dialog__close) y static/webapp/ticket-detalle/styles.css
   (.ticket-sheet__close). Se agrega aquí también a .icon-btn (header de Inicio/Tickets), que medía
   38x38, bajo el mínimo de 44px. */
.icon-btn, .tap-target-44 { position: relative; }
.icon-btn::before, .tap-target-44::before { content: ''; position: absolute; inset: -10px; }
.icon-btn:focus-visible, .tap-target-44:focus-visible { outline: 2px solid var(--text-title); outline-offset: 2px; }

/* ---------- banner de premios ---------- */
.promo-banner {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 10px 10px 8px;
    background: var(--gradient-accent);
    color: var(--bg-lowest);
    font-size: 24px; line-height: 0.9; letter-spacing: -0.48px;
    font-weight: var(--fw-medium);
}
.promo-banner__label { font-weight: var(--fw-light); }
.promo-banner__value { font-weight: var(--fw-semibold); }
.promo-banner__arrow { transform: rotate(-90deg); flex: none; }

/* ---------- botones ---------- */
.btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; max-height: 44px; padding: 12px 16px;
    border: 0; border-radius: var(--radius-sm);
    font-size: 16px; font-weight: var(--fw-bold); line-height: normal; text-align: center;
}
.btn--whatsapp { background: var(--success); color: var(--bg-lowest); }
.btn--primary  { background: var(--text-title); color: var(--bg-lowest); }
.btn--primary:disabled { opacity: 0.6; cursor: progress; }
.btn--primary:focus-visible { outline: 2px solid var(--text-paragraph); outline-offset: 3px; }
.btn--outline  { background: transparent; border: 1.5px solid var(--text-muted); color: var(--text-muted); }
.btn--outline-primary { background: transparent; border: 1.5px solid var(--text-title); color: var(--text-title); }

/* Input nativo oculto pero accesible (casillas y selector de archivo con diseño propio). */
.input-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* ---------- barra de título: atrás + título centrado + espaciador simétrico
   (los colores/tamaños del botón y del título son de cada grupo: Mis tickets
   usa la paleta "Neutro oscuro", Premios usa bg/text; solo la estructura se
   comparte) ---------- */
.title-bar { display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; width: 100%; }
.title-bar__spacer { width: 24px; height: 24px; }

/* ---------- cuerpo de pantalla: fondo bg-lowest opaco + columna con gap
   (mismo dibujo compartido por los grupos "premios" y "legal") ---------- */
.premios-body, .legal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-lowest);
    padding: 20px clamp(16px, 7vw, 30px) 40px;
}
.premios-content, .legal-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    flex: 1;
}

/* ---------- tab bar inferior ---------- */
.tab-bar {
    position: sticky; bottom: 0; margin-top: auto;
    display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; justify-items: center;
    padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
    background: var(--bg-lowest);
    border-top: 0.75px solid var(--outline-low);
    /* border-radius: 0 0 var(--radius-lg) var(--radius-lg); */
}
.tab-bar__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-width: 44px; min-height: 44px;
    color: var(--text-paragraph);
    font-size: var(--fs-12); line-height: 1; font-weight: var(--fw-regular); text-align: center; white-space: nowrap;
}
.tab-bar__pill {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 28px; 
    border-radius: var(--radius-pill);
}
.tab-bar__pill svg { width: 24px; height: 24px; }
.tab-bar__item--active { color: var(--text-title); }
.tab-bar__item--active .tab-bar__pill { background: var(--text-title); color: var(--bg-lowest); }
.tab-bar__item:focus-visible { outline: 2px solid var(--text-title); outline-offset: 2px; border-radius: var(--radius-sm); }
/* Premios: el Figma no dibuja el borde de 0.75px de la barra, sino una sombra azulada hacia arriba. */
.tab-bar--shadow { border-top: none; box-shadow: var(--shadow-tab-bar); }