` propio superpuesto). */
.app-nav-search input::placeholder { color: var(--muted); font-weight: 500; opacity: 1; transition: opacity 0.2s ease; }
.app-nav-search:focus-within input::placeholder { opacity: 0; }
/* `caret-color:transparent` de este input -- antes fijado acá mismo, scoped
solo a #aj-search-input -- ahora lo cubre la regla global por atributo
`input[placeholder*="uscar" i]` (css/ui.css), que alcanza a TODO buscador
de la app, no solo a este. Ver MANIFEST.md "Cambios recientes". */
/* ── Acciones derecha ────────────────────────── */
.app-nav-actions {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
/* ── Botón icono (nav home) ──────────────────── */
.app-nav-icon-btn {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--brand-light);
border: none;
cursor: pointer;
color: var(--brand);
transition: background 0.15s;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
}
/* `@media (hover: hover)` (ver "Cambios recientes" -- causa real del
"borde/card visible junto al ícono hoy", confirmada con Playwright
simulando un tap táctil real: en touch, `:hover` queda PEGADO tras tocar
-- `btn.matches(':hover')` da `true` después del tap, sin que el dedo
siga encima -- mismo quirk clásico de Safari/WebKit en iOS, reproducible
también en Chromium con touch emulado. El ícono recién tocado (ej. "hoy")
queda con el fondo de `:hover` (`--brand-lightest`, MÁS tenue que el
fondo normal `--brand-light`) pegado hasta el próximo toque en otro
lugar -- se ve más desteñido/apagado que sus vecinos, la inconsistencia
visual reportada. Sin este media query, el `:hover` aplica en CUALQUIER
dispositivo, incluidos los que nunca pueden "hoverear" de verdad
(touch-only) -- con él, la regla solo corre en dispositivos con
puntero real (mouse/trackpad), donde el hover se limpia solo al mover el
puntero afuera, sin quedar pegado. */
@media (hover: hover) {
.app-nav-icon-btn:hover { background: var(--brand-lightest); }
.app-nav-icon-btn-brand:hover { background: var(--brand-dk); }
}
.app-nav-icon-btn .material-symbols-outlined { font-size: 18px; }
/* ── Variante naranja de marca (ej. ícono "Asistencia anticipada" de
Eventos) -- mismo componente (.app-nav-icon-btn), no una clase de nav
paralela: solo cambia color. Forma cuadrada con esquinas redondeadas,
heredada de `.app-nav-icon-btn` (border-radius:12px) sin override propio
-- antes esta variante SÍ lo pisaba a `50%` (circular), inconsistente con
los otros 2 botones de la misma fila (búsqueda/hoy, sin esta clase, que
ya usaban el radius cuadrado de base). */
.app-nav-icon-btn-brand { background: var(--brand); color: var(--white); }
/* ── Variante roja destructiva (ej. ícono "Cancelar evento" del detalle de
Eventos) -- mismo componente/criterio que `.app-nav-icon-btn-brand`
arriba: solo cambia el color, `.app-nav-icon-btn` sigue aportando
tamaño/radio/layout. */
.app-nav-icon-btn-danger { background: var(--danger-bg); color: var(--danger); }
@media (hover: hover) {
.app-nav-icon-btn-danger:hover { background: var(--danger-bg); filter: brightness(0.95); }
}
/* ── Botón "Cambiar mi equipamiento" (nav home) ──────────────────
Variante de ancho variable de `.app-nav-icon-btn` (mismo alto/radio/tinte
-- fondo `--brand-light`, ícono `--brand`) en vez de un cuadrado fijo de
44px: muestra inline qué necesita la cuenta (patín+talla y/o
protección+"Sí"), no solo un ícono genérico -- contenido poblado por
_renderHomeEquipBtn() (js/home.js) según los 4 estados posibles
(ambos/solo patines/solo protecciones/ninguno). */
.home-equip-btn {
display: flex;
align-items: center;
gap: 6px;
height: 44px;
padding: 0 12px;
border-radius: 12px;
background: var(--brand-light);
border: none;
cursor: pointer;
color: var(--brand);
transition: background 0.15s;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
font-family: inherit;
}
@media (hover: hover) {
.home-equip-btn:hover { background: var(--brand-lightest); }
}
.home-equip-btn .material-symbols-outlined { font-size: 18px; }
.home-equip-btn-txt { font-size: 0.78rem; font-weight: 700; }
/* Divisor vertical fino entre el par patín y el par protección -- solo
presente cuando los 2 pares conviven (estado "ambos"), `currentColor`
para heredar el mismo `--brand` sin variable propia. */
.home-equip-btn-divider { width: 1.5px; height: 18px; background: currentColor; opacity: 0.4; }
/* ── Botón CTA nav (Nueva reserva) ──────────── */
.app-nav-cta {
display: flex;
align-items: center;
gap: 6px;
padding: 14px 14px;
background: var(--brand);
color: var(--white);
border: none;
border-radius: 12px;
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
font-family: inherit;
box-shadow: none;
transition: all 0.2s ease;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}
.app-nav-cta:hover { background: var(--brand-dk); transform: translateY(-1px); }
.app-nav-cta:active { transform: scale(0.97); }
.app-nav-cta .material-symbols-outlined { font-size: 1rem; }
.app-nav-cta-label { display: inline; }
/* ── Sección label (compacto al scrollear) ───── */
.app-nav-section {
font-size: 0.72rem;
font-weight: 800;
color: var(--brand);
text-transform: uppercase;
letter-spacing: 1.5px;
opacity: 0;
max-width: 0;
overflow: hidden;
transition: all 0.3s ease;
white-space: nowrap;
}
/* ── Compacto (home al scrollear) ───────────── */
.app-nav-fixed.compacto .app-nav-cta-label { display: none; }
.app-nav-fixed.compacto .app-nav-cta { padding: 14px 12px; }
.app-nav-fixed.compacto .app-nav-section { opacity: 1; max-width: 200px; }
@media (max-width: 360px) {
.app-nav-cta-label { display: none; }
.app-nav-cta { padding: 14px 12px; }
}
#eventos-nav .app-nav-section,
#s4-nav .app-nav-section {
opacity: 1 !important;
max-width: none !important;
overflow: visible !important;
flex: 1;
font-size: 0.86rem;
font-weight: 800;
text-align: left;
letter-spacing: 1.2px;
color: var(--brand);
text-transform: uppercase;
white-space: nowrap;
}
/* ── CTA de "Nueva reserva" en #home-nav: ocupa el slot izquierdo que dejó
libre "MIS RESERVAS" (ver MANIFEST.md "Cambios recientes") -- ancho
automático (solo lo que ocupan ícono+texto), alineado a la izquierda por
el `justify-content:space-between` de `.app-nav` (ya no `flex:1`, que lo
ensanchaba a todo el espacio disponible y lo centraba). El texto queda
SIEMPRE visible (nunca ícono-solo, ni en `.compacto` al scrollear ni en
pantallas angostas) para que quede claro que ahí se toca para reservar.
Doble selector por ID a propósito: gana por especificidad sobre
`.app-nav-fixed.compacto .app-nav-cta-label` y el `@media (max-width:360px)`
de arriba, ambos genéricos para cualquier nav con CTA. */
#home-nav #home-nav-cta-label { display: inline; }
/* ── Nav inferior (bottom tab bar) ─────────────
Persistente en toda pantalla raíz de la app autenticada (hoy 's-home' y
's-datos' -- ver APP_BOTTOM_NAV_ITEMS en js/ui.js, base extensible para
secciones futuras como Tareas/Asistencias/Equipo: sumar un ítem al array
alcanza, sin tocar este CSS). Mismo criterio visual que .app-nav-fixed --
fondo sólido var(--bg), sin blur/transparencia. display:none por default
en el de index.html (mismo patrón que #home-nav); _actualizarBottomNav()
(js/ui.js) togglea 'flex'/'none' y reconstruye los tabs visibles en cada
ir(). */
.app-bottom-nav {
display: flex;
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 523px;
/* Bug real corregido (ver "Cambios recientes"): en `900`, `.aj-sub`
(css/perfil.css, z-index:950, el overlay de las sub-pantallas de
Ajustes -- Salud/Perfil/Contacto/etc.) queda por ENCIMA de esta nav en
el stacking -- ambas comparten el mismo `background:var(--bg)` y
`.aj-sub` termina justo en el borde superior real de la nav
(`bottom:calc(var(--bottom-nav-h) + safe-area)`, sin overlap de
posición) pero el `box-shadow` de más abajo se pinta HACIA ARRIBA desde
ese borde -- dentro del área que le pertenece a `.aj-sub`, con mayor
z-index, así que su fondo opaco lo tapa por completo (confirmado con
Playwright: gap real de 0px entre ambos rects, mismo color de fondo en
los 2). `960` -- mismo valor ya usado por `#cta-footer-salud`
(index.html) para superar este mismo `.aj-sub`, no un número nuevo --
supera cualquier aj-sub-* por igual, no solo Salud, así que corrige el
mismo problema en el resto de las sub-pantallas de Ajustes de una. */
z-index: 960;
background: var(--bg);
/* box-shadow en vez de border-top: mismo hairline visual (0.5px, var(--border-light))
pero sin sumar al alto real de la caja -- un border sí lo hace (incluso con
box-sizing:border-box, porque acá no hay un `height` explícito del que descontar,
el alto lo define el contenido), y ese medio píxel de más rompía por poco el calc()
de #cta-footer-s-home/los spacers de scroll (css/estilos.css, index.html), todos
calculados contra var(--bottom-nav-h) a secas. */
box-shadow: 0 -0.5px 0 var(--border-light);
box-sizing: border-box;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.app-bottom-nav-item {
flex: 1;
height: var(--bottom-nav-h);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
background: none;
border: none;
cursor: pointer;
color: var(--muted);
font-family: inherit;
font-size: 0.68rem;
font-weight: 700;
-webkit-tap-highlight-color: transparent;
transition: color 0.2s ease;
}
.app-bottom-nav-item .material-symbols-outlined { font-size: 1.4rem; }
/* Tab de la pantalla activa, resaltado con el color de énfasis -- el resto
queda en var(--muted) por la regla base de arriba, sin clase extra. */
.app-bottom-nav-item.activo { color: var(--brand); }