:root { --bottom-nav-height: 72px; }
body { background: #f5f6f8; padding-bottom: var(--bottom-nav-height); }
.login-card { width: 100%; max-width: 420px; border: 0; border-radius: 18px; }
.card, .mobile-card { border-radius: 16px; }
.navbar { position: sticky; top: 0; z-index: 1000; }
.app-shell { max-width: 980px; margin: 0 auto; }
.app-page { max-width: 780px; margin: 0 auto; }
.app-tabs { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; }
.app-tab { border: 0; border-radius: 999px; padding: .65rem 1rem; background: #fff; color: #444; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.app-tab.active { background: #0d6efd; color: #fff; }
.mobile-list { display: grid; gap: .75rem; }
.mobile-card { background: #fff; padding: 1rem; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.empty-state { background: #fff; border-radius: 16px; text-align: center; padding: 2.5rem 1rem; color: #777; }
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; height: var(--bottom-nav-height); background: #fff; border-top: 1px solid #e5e5e5; display: flex; justify-content: space-around; align-items: center; z-index: 1100; }
.bottom-nav a { text-decoration: none; color: #555; font-size: .78rem; display: flex; flex-direction: column; align-items: center; gap: .2rem; min-width: 64px; }
.bottom-nav a.active { color: #0d6efd; font-weight: 700; }
.bottom-nav .icon { font-size: 1.25rem; line-height: 1; }
.sticky-actions { position: sticky; bottom: 0; background: #fff; z-index: 5; }
@media (min-width: 992px) { body { padding-bottom: 0; } .bottom-nav { max-width: 420px; left: 50%; transform: translateX(-50%); border-radius: 18px 18px 0 0; box-shadow: 0 -4px 16px rgba(0,0,0,.08); } }


.modal { z-index: 2000; }
.modal-backdrop { z-index: 1990; }
.modal-dialog { margin-bottom: 95px; }
.modal-content { max-height: calc(100vh - 120px); overflow: hidden; }
.modal-body { overflow-y: auto; max-height: calc(100vh - 230px); padding-bottom: 20px; }
.modal-footer { position: sticky; bottom: 0; background: #fff; z-index: 10; }
@media (max-width: 768px) {
    .modal-dialog { margin: 0; max-width: 100%; height: 100vh; }
    .modal-content { height: 100vh; max-height: 100vh; border-radius: 0; padding-bottom: 80px; }
    .modal-body { max-height: calc(100vh - 210px); overflow-y: auto; }
    .modal-footer { position: fixed; left: 0; right: 0; bottom: 75px; background: #fff; padding: 12px 20px; border-top: 1px solid #ddd; z-index: 2100; }
}

/* Fase 8 - ajustes PWA/mobile */
:root { --safe-bottom: env(safe-area-inset-bottom, 0px); }
body { padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom)); }
.bottom-nav { height: calc(var(--bottom-nav-height) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); }
@media (display-mode: standalone) {
    body { user-select: none; -webkit-user-select: none; }
    input, textarea { user-select: text; -webkit-user-select: text; }
}
@media (max-width: 768px) {
    .navbar .container-fluid { gap: .5rem; }
    .navbar-brand { font-size: 1rem; }
    #btnInstallPwa { padding-left: .55rem; padding-right: .55rem; }
}
@media (min-width: 992px) {
    body { padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom)); }
}