*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/*
  Estilos principales — mobile-first.
  Paleta: navy (#1e3a5f), teal (#0d7c6e), cream (#f8f5f0), rojo, verde, gris.
*/

/* --- Reset y base --- */

:root {
    --navy:    #1e3a5f;
    --teal:    #0d7c6e;
    --cream:   #f8f5f0;
    --green:   #2e7d32;
    --red:     #c62828;
    --orange:  #e65100;
    --blue:    #1565c0;
    --gray:    #607d8b;
    --light:   #eceff1;
    --border:  #cfd8dc;
    --text:    #263238;
    --muted:   #546e7a;
    --white:   #ffffff;
    --radius:  12px;
    --shadow:  0 2px 8px rgba(0,0,0,.10);
    --bottom-nav-h: 64px;
}

html { font-size: 16px; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--cream);
    color: var(--text);
    padding-bottom: calc(var(--bottom-nav-h) + 16px);
}

/* --- Typografía --- */
h1 { font-size: 1.5rem; font-weight: 700; color: var(--navy); }
h2 { font-size: 1.25rem; font-weight: 600; color: var(--navy); }
h3 { font-size: 1.05rem; font-weight: 600; color: var(--navy); }
p  { line-height: 1.6; }

/* --- Auth pages --- */
.auth-page  { background: var(--navy); min-height: 100vh;
              display: flex; align-items: center; justify-content: center; padding: 16px; }
.auth-container { width: 100%; max-width: 400px; }
.auth-card  { background: var(--white); border-radius: var(--radius);
              padding: 32px 24px; box-shadow: var(--shadow); }
.auth-logo  { text-align: center; margin-bottom: 28px; }
.auth-logo .logo-icon { font-size: 2.5rem; display: block; margin-bottom: 8px; }
.auth-logo h1 { font-size: 1.3rem; margin-bottom: 4px; }
.auth-subtitle { color: var(--muted); font-size: .9rem; }

/* --- Inputs --- */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: .85rem;
                    font-weight: 600; color: var(--muted); margin-bottom: 6px; }
input[type="email"],
input[type="text"],
input[type="date"],
input[type="password"],
select,
.input-codigo {
    width: 100%; padding: 12px 14px;
    border: 1.5px solid var(--border); border-radius: 8px;
    font-size: 1rem; color: var(--text); background: var(--white);
    transition: border-color .2s;
}
input:focus, select:focus { outline: none; border-color: var(--teal); }
.input-codigo { font-size: 2rem; letter-spacing: 12px;
                text-align: center; font-weight: 700; }
.input-sm { padding: 8px 10px; font-size: .9rem; }
.form-inline { display: flex; align-items: center; gap: 8px; }
.form-inline label { margin: 0; white-space: nowrap; }
.form-inline input, .form-inline select { width: auto; flex: 1; }

/* --- Botones --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 20px; border-radius: 8px; font-size: 1rem;
    font-weight: 600; cursor: pointer; border: none; transition: all .2s;
    text-decoration: none;
}
.btn-primary  { background: var(--navy); color: var(--white); }
.btn-primary:hover  { background: #16304f; }
.btn-outline  { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.btn-outline:hover  { background: var(--navy); color: var(--white); }
.btn-ghost    { background: transparent; color: var(--muted); }
.btn-ghost:hover    { color: var(--navy); }
.btn-block    { width: 100%; }
.btn-sm       { padding: 7px 14px; font-size: .85rem; border-radius: 6px; }

/* --- Alertas --- */
.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: .95rem; }
.alert-info   { background: #e3f2fd; color: #0d47a1; border-left: 4px solid #1565c0; }
.alert-danger { background: #ffebee; color: #b71c1c; border-left: 4px solid var(--red); }
.alert-success{ background: #e8f5e9; color: #1b5e20; border-left: 4px solid var(--green); }
.alert-warning{ background: #fff3e0; color: #bf360c; border-left: 4px solid var(--orange); }

/* --- Top nav --- */
.top-nav {
    position: sticky; top: 0; z-index: 100;
    background: var(--navy); color: var(--white);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px; height: 54px; box-shadow: var(--shadow);
}
.nav-brand { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 700; }
.nav-brand-text { color: var(--white); }
.nav-user  { display: flex; align-items: center; gap: 10px; }
.nav-nombre { font-size: .85rem; color: rgba(255,255,255,.75); }

/* --- Bottom nav --- */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    height: var(--bottom-nav-h);
    background: var(--white); border-top: 1px solid var(--border);
    display: flex;
}
.nav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px; text-decoration: none;
    color: var(--muted); font-size: .7rem; padding: 4px 0;
    transition: color .15s;
}
.nav-item.active { color: var(--teal); font-weight: 700; }
.nav-icon { font-size: 1.4rem; line-height: 1; }
.nav-label { font-size: .65rem; }

/* --- Main content --- */
.main-content { padding: 16px; max-width: 600px; margin: 0 auto; }
.page-header  { display: flex; align-items: center; justify-content: space-between;
                margin-bottom: 16px; }
.page-title   { font-size: 1.2rem; font-weight: 700; color: var(--navy); }
.section-title { font-size: 1rem; font-weight: 700; color: var(--navy);
                 margin: 20px 0 10px; border-left: 4px solid var(--teal); padding-left: 10px; }

/* --- Cards --- */
.card {
    background: var(--white); border-radius: var(--radius);
    padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow);
}
.card-title  { font-size: .8rem; font-weight: 700; color: var(--muted);
               text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.card-value  { font-size: 1.6rem; font-weight: 700; color: var(--navy); }
.card-sub    { font-size: .8rem; color: var(--muted); margin-top: 2px; }

/* --- Estado general (tarjeta grande) --- */
.status-card {
    border-radius: var(--radius); padding: 20px;
    margin-bottom: 12px; display: flex; align-items: center; gap: 16px;
    box-shadow: var(--shadow); color: var(--white);
}
.status-card.green  { background: var(--green); }
.status-card.red    { background: var(--red); }
.status-card.orange { background: var(--orange); }
.status-card.blue   { background: var(--blue); }
.status-card.gray   { background: var(--gray); }
.status-icon { font-size: 2.5rem; }
.status-label{ font-size: 1.3rem; font-weight: 700; }
.status-detail{ font-size: .85rem; opacity: .9; }

/* --- Grids KPIs --- */
.grid-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
.grid-2    { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.kpi-card  { background: var(--white); border-radius: 10px; padding: 14px;
             box-shadow: var(--shadow); }
.kpi-label { font-size: .7rem; font-weight: 700; color: var(--muted);
             text-transform: uppercase; letter-spacing: .5px; }
.kpi-value { font-size: 1.3rem; font-weight: 700; color: var(--navy); margin: 4px 0 2px; }
.kpi-sub   { font-size: .7rem; color: var(--muted); }

/* --- Badges --- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px;
         font-size: .75rem; font-weight: 700; }
.badge-green   { background: #e8f5e9; color: #1b5e20; }
.badge-red     { background: #ffebee; color: #b71c1c; }
.badge-orange  { background: #fff3e0; color: #bf360c; }
.badge-gray    { background: var(--light); color: var(--muted); }
.badge-blue    { background: #e3f2fd; color: #0d47a1; }
.badge-info    { background: #e3f2fd; color: #0d47a1; }

/* --- Dot de estado --- */
.dot { display: inline-block; width: 10px; height: 10px;
       border-radius: 50%; margin-right: 6px; }
.dot-green  { background: var(--green); }
.dot-red    { background: var(--red); }
.dot-orange { background: var(--orange); }
.dot-gray   { background: var(--gray); }

/* --- Eventos lista --- */
.evento-item {
    background: var(--white); border-radius: 10px; padding: 14px;
    margin-bottom: 8px; box-shadow: var(--shadow);
    border-left: 4px solid var(--gray);
}
.evento-item.CRITICA  { border-left-color: var(--red); }
.evento-item.ALTA     { border-left-color: var(--orange); }
.evento-item.INFO     { border-left-color: var(--blue); }
.evento-tipo  { font-size: .78rem; font-weight: 700; color: var(--muted);
                text-transform: uppercase; letter-spacing: .3px; }
.evento-fecha { font-size: .75rem; color: var(--muted); margin-bottom: 4px; }
.evento-detalle { font-size: .9rem; color: var(--text); margin: 4px 0; }
.evento-accion  { font-size: .8rem; color: var(--orange);
                  background: #fff3e0; padding: 6px 10px; border-radius: 6px; margin-top: 6px; }
.evento-admin   { font-size: .75rem; color: var(--muted); margin-top: 4px; }

/* --- Ciclos lista --- */
.ciclo-card { background: var(--white); border-radius: var(--radius);
              padding: 16px; margin-bottom: 10px; box-shadow: var(--shadow); }
.ciclo-header { display: flex; justify-content: space-between; align-items: flex-start;
                margin-bottom: 10px; }
.ciclo-fecha  { font-size: .85rem; color: var(--muted); }
.ciclo-datos  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.ciclo-dato   { text-align: center; }
.ciclo-dato-label { font-size: .68rem; color: var(--muted); text-transform: uppercase; }
.ciclo-dato-val   { font-size: 1rem; font-weight: 700; color: var(--navy); }
.ciclo-nota       { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.btn-detalle { margin-top: 10px; width: 100%; }

/* --- Detalle ciclo modal --- */
.detalle-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 200;
    display: flex; align-items: flex-end;
}
.detalle-sheet {
    background: var(--white); border-radius: var(--radius) var(--radius) 0 0;
    width: 100%; max-height: 85vh; overflow-y: auto; padding: 20px 16px;
}
.detalle-close { position: absolute; top: 12px; right: 16px;
                 background: none; border: none; font-size: 1.5rem; cursor: pointer; }

/* --- Bombas tab bar --- */
.tab-bar { display: flex; gap: 0; margin-bottom: 16px;
           border-radius: 8px; overflow: hidden; border: 1.5px solid var(--navy); }
.tab-btn { flex: 1; padding: 10px; font-size: 1rem; font-weight: 600;
           border: none; cursor: pointer; background: var(--white); color: var(--navy); }
.tab-btn.active { background: var(--navy); color: var(--white); }

/* --- Comunicación --- */
.com-card { background: var(--white); border-radius: var(--radius);
            padding: 20px; box-shadow: var(--shadow); text-align: center; margin-bottom: 12px; }
.com-icon  { font-size: 3rem; margin-bottom: 8px; }
.com-label { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
.com-tiempo{ font-size: .9rem; color: var(--muted); }

/* --- Parámetros --- */
.param-row { display: flex; justify-content: space-between; align-items: flex-start;
             padding: 12px 0; border-bottom: 1px solid var(--light); gap: 12px; }
.param-row:last-child { border-bottom: none; }
.param-clave { font-size: .85rem; color: var(--muted); flex: 1; }
.param-etiqueta { font-size: .9rem; font-weight: 600; color: var(--navy); }
.param-valor { font-size: 1rem; font-weight: 700; color: var(--teal);
               text-align: right; white-space: nowrap; }
.param-desc  { font-size: .75rem; color: var(--muted); margin-top: 2px; }

/* --- Filtros --- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px;
              background: var(--white); padding: 12px;
              border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 14px; }
.filter-bar-wrap { flex-wrap: wrap; }

/* --- Paginación --- */
.paginacion { display: flex; justify-content: center; gap: 8px; margin: 16px 0; }
.paginacion button { padding: 8px 14px; border-radius: 6px; border: 1px solid var(--border);
                     background: var(--white); cursor: pointer; font-size: .9rem; }
.paginacion button.active { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* --- Loading --- */
.loading { min-height: 80px; display: flex; align-items: center; justify-content: center; }
.spinner { width: 32px; height: 32px; border: 3px solid var(--border);
           border-top-color: var(--teal); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Utilidades --- */
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.text-center { text-align: center; }
.text-muted  { color: var(--muted); }
.link-secondary { color: var(--muted); font-size: .9rem; text-decoration: none; }
.link-secondary:hover { color: var(--navy); }
.text-green  { color: var(--green); }
.text-red    { color: var(--red); }
.text-orange { color: var(--orange); }

/* --- Separador bomba info --- */
.bomba-estado-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0; }
.bomba-estado-item { background: var(--light); border-radius: 8px;
                     padding: 10px 12px; display: flex; align-items: center; gap: 8px; }
.bomba-estado-label { font-size: .85rem; color: var(--muted); }

/* --- Responsive tablet --- */
@media (min-width: 600px) {
    .grid-kpis { grid-template-columns: repeat(4, 1fr); }
    .main-content { padding: 20px; }
}

/* ============================================================
   OVERRIDES FINALES — MOBILE / TABLET / ANTI-DESBORDE
   Fecha: 2026-06-17
   Objetivo:
   - Evitar scroll horizontal en Bombas, Eventos y Ciclos.
   - Alinear pantallas que usan .main-content y pantallas que usan .app-container.
   - Compatibilizar .top-nav/.bottom-nav antiguos con .topbar/bottom-nav nuevos.
   - Mantener navegación inferior fija y usable en celular.
   ============================================================ */

/* ----- Base anti-desborde ----- */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

body {
    min-height: 100vh;
    padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 18px);
}

img,
svg,
canvas,
video,
iframe {
    max-width: 100%;
}

/* ----- Contenedores principales: soporta main-content y app-container ----- */
.main-content,
.app-container {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 16px 16px calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 20px);
    overflow-x: hidden !important;
}

/* ----- Header superior: soporta top-nav y topbar ----- */
.top-nav,
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    min-height: 54px;
    background: var(--navy);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px;
    box-shadow: var(--shadow);
}

.topbar-title,
.nav-brand,
.nav-brand-text {
    color: var(--white);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.1;
}

.topbar-subtitle {
    color: rgba(255,255,255,.76);
    font-size: .75rem;
    line-height: 1.1;
    margin-top: 2px;
}

.topbar-user,
.nav-user {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
    color: rgba(255,255,255,.8);
}

.topbar-user a,
.nav-user a,
.logout-link,
.top-nav .btn-ghost {
    color: rgba(255,255,255,.82);
    text-decoration: none;
    font-weight: 700;
}

.topbar-user a:hover,
.nav-user a:hover,
.logout-link:hover,
.top-nav .btn-ghost:hover {
    color: var(--white);
}

/* ----- Bottom nav: soporta links con .nav-item y links directos ----- */
.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    width: 100%;
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--white);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    box-shadow: 0 -2px 8px rgba(0,0,0,.06);
}

.bottom-nav a,
.nav-item {
    flex: 1 1 0;
    min-width: 0;
    height: var(--bottom-nav-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    text-decoration: none;
    color: var(--muted);
    font-size: .68rem;
    line-height: 1.05;
    font-weight: 600;
    white-space: nowrap;
}

.bottom-nav a.active,
.nav-item.active {
    color: var(--teal);
    font-weight: 800;
}

.bottom-nav a span,
.nav-icon {
    display: block;
    font-size: 1.35rem;
    line-height: 1;
}

.bottom-nav a small,
.nav-label {
    display: block;
    font-size: .64rem;
    line-height: 1.05;
}

/* ----- Cards y bloques generales ----- */
.card,
.status-card,
.kpi-card,
.ciclo-card,
.evento-item,
.com-card,
.filter-bar,
.detalle-sheet {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.card,
.kpi-card,
.ciclo-card,
.evento-item,
.bomba-estado-item,
.param-row,
.detalle-sheet {
    overflow-wrap: break-word;
    word-break: normal;
}

/* ----- Dashboard ----- */
.dashboard-section,
.dashboard-grid,
#card-estado-general,
#card-comunicacion,
#card-tanque,
#card-bomba1,
#card-bomba2,
#grid-kpis,
#card-ultimo-ciclo,
#lista-eventos {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

/* ----- KPIs ----- */
.grid-kpis {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow-x: hidden !important;
}

.kpi-card {
    min-width: 0 !important;
    overflow: hidden;
}

.kpi-label {
    line-height: 1.15;
}

.kpi-value {
    line-height: 1.12;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ----- Estado de bombas / tanque ----- */
.bomba-estado-grid {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.bomba-estado-item {
    min-width: 0;
    align-items: flex-start;
    overflow: hidden;
}

/* ----- Eventos ----- */
#lista-eventos,
#lista-eventos-page,
.eventos-lista {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

#lista-eventos-page > *,
#lista-eventos > *,
.eventos-lista > * {
    max-width: 100%;
}

.evento-item {
    display: block !important;
    margin: 0 0 10px 0;
}

.evento-tipo,
.evento-fecha,
.evento-detalle,
.evento-accion,
.evento-admin {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
}

/* ----- Ciclos ----- */
#lista-ciclos,
.ciclos-lista,
.grid-ciclos,
.ciclos-grid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.ciclo-card {
    display: block !important;
    margin-bottom: 12px;
}

.ciclo-header {
    gap: 10px;
}

.ciclo-datos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ciclo-dato {
    min-width: 0;
}

.ciclo-dato-val {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ----- Bombas ----- */
#panel-bomba {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

#panel-bomba > * {
    width: 100% !important;
    max-width: 100% !important;
}

#panel-bomba .grid-kpis {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

#panel-bomba .evento-item {
    width: 100% !important;
    max-width: 100% !important;
}

.tab-bar {
    width: 100%;
    max-width: 100%;
}

.tab-btn {
    min-width: 0;
}

/* ----- Comunicación ----- */
#panel-comunicacion,
#historial-comunicacion {
    display: block !important;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

/* ----- Parámetros ----- */
.param-row {
    min-width: 0;
}

.param-valor {
    min-width: 0;
    white-space: normal;
}

/* ----- Filtros ----- */
.filter-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.form-inline {
    width: 100%;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.form-inline label {
    min-width: 0;
    white-space: nowrap;
}

.form-inline input,
.form-inline select {
    width: 100%;
    min-width: 0;
}

.filter-bar .btn {
    width: 100%;
}

/* ----- Paginación ----- */
.paginacion {
    flex-wrap: wrap;
}

/* ----- Modal detalle ciclo ----- */
.detalle-overlay {
    align-items: flex-end;
}

.detalle-sheet {
    max-height: 86vh;
    overflow-y: auto;
    padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 32px);
}

/* ----- Loading ----- */
.loading {
    width: 100%;
}

/* ----- Mobile chico ----- */
@media (max-width: 420px) {
    .main-content,
    .app-container {
        padding-left: 12px;
        padding-right: 12px;
    }

    h1 { font-size: 1.35rem; }
    h2 { font-size: 1.14rem; }

    .page-title {
        font-size: 1.15rem;
    }

    .page-header {
        gap: 10px;
    }

    .page-header .btn {
        padding-left: 14px;
        padding-right: 14px;
        flex-shrink: 0;
    }

    .grid-kpis,
    #panel-bomba .grid-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .kpi-card {
        padding: 12px;
    }

    .kpi-label {
        font-size: .64rem;
    }

    .kpi-value {
        font-size: 1.12rem;
    }

    .bomba-estado-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .bomba-estado-item {
        padding: 9px 10px;
        font-size: .88rem;
    }

    .ciclo-datos {
        gap: 6px;
    }

    .ciclo-dato-label {
        font-size: .62rem;
    }

    .ciclo-dato-val {
        font-size: .86rem;
    }

    .form-inline {
        grid-template-columns: 70px minmax(0, 1fr);
    }
}

/* ----- Tablet y desktop ----- */
@media (min-width: 760px) {
    .main-content,
    .app-container {
        max-width: 720px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .grid-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-bar {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    .filter-bar .form-inline {
        width: auto;
        grid-template-columns: auto minmax(160px, 1fr);
    }

    .filter-bar .btn {
        width: auto;
    }
}

@media (min-width: 1024px) {
    .main-content,
    .app-container {
        max-width: 860px;
    }

    .grid-kpis {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ============================================================
   AJUSTE FINAL MOBILE — NAV, FILTROS Y SAFE AREA
   ============================================================ */

/* Evitar cualquier scroll horizontal */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

/* Contenedor principal con espacio para menú inferior y navegador mobile */
.main-content,
.app-container {
    width: 100%;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: calc(var(--bottom-nav-h) + 90px + env(safe-area-inset-bottom));
    overflow-x: hidden !important;
}

/* ============================================================
   MENÚ INFERIOR
   ============================================================ */

.bottom-nav {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(66px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: #ffffff;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    z-index: 9999;
    box-shadow: 0 -2px 8px rgba(0,0,0,.08);
}

/* Soporta tanto .nav-item como links directos dentro de .bottom-nav */
.bottom-nav a,
.bottom-nav .nav-item {
    flex: 1 1 0;
    min-width: 0;
    max-width: 20%;
    height: 66px;
    padding: 6px 2px 4px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    text-decoration: none;
    color: var(--muted);
    font-size: 11px !important;
    line-height: 1.1;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
}

.bottom-nav a.active,
.bottom-nav .nav-item.active {
    color: var(--teal);
    font-weight: 800;
}

/* Íconos */
.bottom-nav .nav-icon,
.bottom-nav a span:first-child {
    display: block;
    font-size: 22px !important;
    line-height: 1;
    margin-bottom: 1px;
}

/* Texto */
.bottom-nav .nav-label,
.bottom-nav a small,
.bottom-nav a span:last-child {
    display: block;
    font-size: 10.5px !important;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Si alguna página tiene links pelados sin span/small */
.bottom-nav a {
    font-size: 11px !important;
}

/* ============================================================
   FILTROS — EVENTOS / CICLOS
   ============================================================ */

.filter-bar {
    width: 100%;
    max-width: 100%;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 12px;
    overflow: hidden;
}

.filter-bar .form-inline {
    width: 100%;
    max-width: 100%;
    display: grid !important;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.filter-bar .form-inline label {
    min-width: 0;
    width: auto;
    font-weight: 700;
    color: var(--muted);
}

.filter-bar input,
.filter-bar select {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
}

.filter-bar .btn {
    width: 100%;
}

/* En celulares chicos, hacer todo en una sola columna más limpia */
@media (max-width: 430px) {
    .filter-bar .form-inline {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .filter-bar .form-inline label {
        margin-bottom: 0;
    }
}

/* ============================================================
   TARJETAS Y LISTADOS
   ============================================================ */

.card,
.status-card,
.kpi-card,
.ciclo-card,
.evento-item,
.com-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.evento-item,
.ciclo-card {
    overflow-wrap: break-word;
    word-break: normal;
}

.evento-detalle,
.evento-admin,
.evento-accion,
.evento-tipo {
    max-width: 100%;
    overflow-wrap: break-word;
}

/* Eventos: siempre en columna */
#lista-eventos,
#lista-eventos-page {
    display: block !important;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

#lista-eventos .evento-item,
#lista-eventos-page .evento-item {
    display: block;
    width: 100%;
    margin-bottom: 12px;
}

/* Ciclos: siempre en columna */
#lista-ciclos {
    display: block !important;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

#lista-ciclos .ciclo-card {
    display: block;
    width: 100%;
    margin-bottom: 14px;
}

/* ============================================================
   BOMBAS
   ============================================================ */

#panel-bomba {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

#panel-bomba > * {
    max-width: 100%;
}

#panel-bomba .grid-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#panel-bomba .evento-item {
    width: 100%;
}

/* Tab Bomba 1 / Bomba 2 */
.tab-bar {
    width: 100%;
    max-width: 100%;
}

.tab-btn {
    min-width: 0;
    white-space: nowrap;
}

/* ============================================================
   DASHBOARD
   ============================================================ */

.bomba-estado-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bomba-estado-item {
    min-width: 0;
    overflow-wrap: break-word;
}

/* ============================================================
   MODAL DETALLE CICLO
   ============================================================ */

.detalle-overlay {
    z-index: 10000;
}

.detalle-sheet {
    max-height: 86vh;
    overflow-y: auto;
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
}

/* ============================================================
   CELULARES MUY CHICOS
   ============================================================ */

@media (max-width: 390px) {
    .main-content,
    .app-container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .grid-kpis {
        gap: 8px;
    }

    .kpi-card {
        padding: 12px 10px;
    }

    .kpi-label {
        font-size: 0.64rem;
    }

    .kpi-value {
        font-size: 1.12rem;
    }

    .bottom-nav a,
    .bottom-nav .nav-item {
        font-size: 10px !important;
    }

    .bottom-nav .nav-icon,
    .bottom-nav a span:first-child {
        font-size: 20px !important;
    }

    .bottom-nav .nav-label,
    .bottom-nav a small,
    .bottom-nav a span:last-child {
        font-size: 9.5px !important;
    }
}