body { background-color: #f4f7fb; color: #172033; }
.sidebar { background-color: #16324f !important; min-height: 100vh; position: fixed; inset: 0 auto 0 0; }
.nav-link:hover { background-color: #1a252f; border-radius: 5px; }
.table th { background-color: #e9ecef; }
.btn-sm { margin: 2px; }
.card-header { background-color: #f1f3f5; font-weight: bold; }
.card { border: 0; box-shadow: 0 3px 18px rgba(25, 48, 74, .08); }
.btn, .form-control, .form-select { min-height: 42px; }
.form-control-sm, .form-select-sm, .btn-sm { min-height: 38px; }
.mobile-header, .mobile-nav { display: none; }

@media (max-width: 767.98px) {
    body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
    .app-shell { padding: 0; }
    .app-main { padding: 0 12px; }
    #contenido-dinamico { margin-top: 12px !important; }
    .mobile-header { position: sticky; top: 0; z-index: 1040; height: calc(60px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0; display: flex; align-items: center; justify-content: space-between; background: #16324f; color: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.16); }
    .mobile-brand { display: flex; align-items: center; gap: 10px; font-size: 1.08rem; font-weight: 700; }
    .brand-icon { display: grid; place-items: center; width: 34px; height: 34px; background: #fff; color: #16324f; border-radius: 10px; }
    .mobile-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 1050; bottom: 0; left: 0; right: 0; min-height: 68px; padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid #dce3eb; box-shadow: 0 -3px 14px rgba(25,48,74,.10); }
    .mobile-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #687386; text-decoration: none; font-size: .69rem; min-width: 0; }
    .mobile-nav a i { font-size: 1.18rem; }
    .mobile-nav a.active { color: #0d6efd; font-weight: 700; }
    .periodo-card > .card-header, .periodo-card > .card-body { padding: 12px; }
    .periodo-title { font-size: 1.05rem; }
    #btnMesPrev, #btnMesNext { width: 40px; padding-inline: 0; }
    #btnWizard { width: 100%; margin-top: 4px; }
    .nav-tabs .nav-link { min-height: 46px; padding: 11px 20px; }
    .responsive-table { overflow: visible; }
    .mobile-card-table, .mobile-card-table tbody, .mobile-card-table tr, .mobile-card-table td { display: block; width: 100%; }
    .mobile-card-table thead { display: none; }
    .mobile-card-table tbody tr { background: #fff; border: 1px solid #dce3eb; border-radius: 12px; margin-bottom: 12px; padding: 10px 12px; overflow: hidden; }
    .mobile-card-table tbody td { border: 0; border-bottom: 1px solid #edf0f4; padding: 9px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: right !important; }
    .mobile-card-table tbody td::before { content: attr(data-label); color: #687386; font-size: .82rem; text-align: left; }
    .mobile-card-table tbody td:last-child { border-bottom: 0; }
    .mobile-card-table .mobile-row-title { font-weight: 700; font-size: 1rem; text-align: left !important; }
    .mobile-card-table .mobile-row-title::before { display: none; }
    .mobile-card-table .reading-input-cell { width: 100% !important; }
    .mobile-card-table .reading-input-cell input { width: min(180px, 58%); min-height: 46px; font-size: 1rem; text-align: right; }
    .mobile-card-table .mobile-total { font-size: 1.05rem; font-weight: 700; color: #16324f; }
    .mobile-card-table tfoot { display: block; border: 1px solid #dce3eb; border-radius: 12px; overflow: hidden; }
    .mobile-card-table tfoot tr { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 8px; }
    .mobile-card-table tfoot td { display: block; width: auto !important; border: 0; }
    .period-actions { display: grid; grid-template-columns: 1fr; width: 100%; gap: 8px; }
    .period-actions .btn { width: 100%; min-height: 46px; }
    .modal-footer { display: grid; grid-template-columns: 1fr 1fr; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
    .modal-footer .btn:only-child { grid-column: 1 / -1; }
    #wizPasos .border-top { min-width: 10px; }
    #wizPasos .small { font-size: .68rem; }
    .wizard-readings tbody td:nth-child(1)::before { display: none; }
    .wizard-readings tbody td:nth-child(1) { font-weight: 700; text-align: left !important; }
    .wizard-readings tbody td:nth-child(2)::before { content: 'Anterior'; }
    .wizard-readings tbody td:nth-child(3)::before { content: 'Actual'; }
    .wizard-readings tbody td:nth-child(4)::before { content: 'Consumo'; }
    .wizard-readings tbody td:nth-child(5)::before { content: 'Total'; }
    .card-header.d-flex { gap: 8px; align-items: center; }
    .card-body { padding: 14px; }
    .swal2-popup { width: calc(100% - 24px) !important; }
}