/* ============================================================ SOLVEX — nav-bottom.css Menú inferior tipo app móvil Incluir en el de header.php: ============================================================ */ .bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: rgba(10,10,10,.97); border-top: 1px solid rgba(201,168,76,.18); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: flex; align-items: stretch; z-index: 500; /* Espacio seguro iPhone con notch */ padding-bottom: env(safe-area-inset-bottom, 0px); } /* ── Cada ítem ────────────────────────────────────────────── */ .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: .6rem .2rem .55rem; color: #555555; text-decoration: none; font-size: .6rem; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; background: none; border: none; cursor: pointer; font-family: 'Inter', sans-serif; transition: color .2s, background .2s; position: relative; -webkit-tap-highlight-color: transparent; user-select: none; } .nav-item i { font-size: 1.3rem; line-height: 1; display: block; transition: transform .2s, color .2s; } .nav-item:hover, .nav-item:focus { color: rgba(201,168,76,.6); outline: none; background: rgba(201,168,76,.04); } /* ── Ítem activo ──────────────────────────────────────────── */ .nav-item--active { color: #c9a84c !important; } .nav-item--active i { transform: translateY(-2px); color: #c9a84c; } /* Punto indicador debajo del ícono activo */ .nav-item--active::after { content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; background: #c9a84c; border-radius: 50%; } /* ── Ítem logout (admin) ──────────────────────────────────── */ .nav-item--logout { color: #555; } .nav-item--logout:hover { color: #e05555 !important; background: rgba(224,85,85,.05) !important; } /* ── Feedback táctil al presionar ────────────────────────── */ .nav-item:active { background: rgba(201,168,76,.08); transform: scale(.96); } /* ── Desktop: bordes laterales para mantener el look app ─── */ @media (min-width: 500px) { .bottom-nav { border-left: 1px solid rgba(201,168,76,.08); border-right: 1px solid rgba(201,168,76,.08); } } /* ── Espacio para que el contenido no quede tapado ────────── */ .app-body { padding-bottom: 80px !important; } .admin-content { padding-bottom: 80px !important; } .admin-shell { min-height: calc(100vh - 64px); } /* ── Card toggle (ojito tarjeta personal) ─────────────────── */ .card-toggle-wrap { display: flex; align-items: center; gap: .5rem; } .eye-btn { background: none; border: none; color: #888; cursor: pointer; padding: .2rem .3rem; border-radius: 4px; font-size: .9rem; transition: color .2s; line-height: 1; } .eye-btn:hover { color: #c9a84c; } /* ── Select banco en registro ─────────────────────────────── */ .select-group { position: relative; } .select-group .form-input-solvex { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer; } .select-arrow { position: absolute; right: 12px; color: #888; font-size: .8rem; pointer-events: none; z-index: 2; } /* ── Hint de seguridad en registro ───────────────────────── */ .register-hint { font-size: .72rem; color: #666; padding: 0 .2rem; } /* ── Formato tarjeta en input ────────────────────────────── */ .card-format { letter-spacing: 1px; }