/* CERCA — BASE
   Variables, tema, layout general, topbar y navegación. */

:root {
            --bg-main: #090d16;
            --bg-card: rgba(30, 41, 59, 0.6);
            --bg-nav: #0f172a;
            --text-primary: #f8fafc;
            --text-secondary: #94a3b8;
            --border-color: rgba(255, 255, 255, 0.08);
            --card-body-color: #cbd5e1;
        }

        body.light-theme {
            --bg-main: #f1f5f9;
            --bg-card: #ffffff;
            --bg-nav: #ffffff;
            --text-primary: #0f172a;
            --text-secondary: #475569;
            --border-color: rgba(0, 0, 0, 0.1);
            --card-body-color: #334155;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            background-color: var(--bg-main); color: var(--text-primary);
            font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
            display: flex; flex-direction: column; height: 100vh; overflow: hidden;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        /* TOPBAR */
        .topbar {
            height: 60px; background: var(--bg-nav); backdrop-filter: blur(8px);
            border-bottom: 1px solid var(--border-color);
            display: flex; justify-content: space-between; align-items: center; padding: 0 16px; z-index: 20;
        }
        .topbar-brand { display: flex; align-items: center; gap: 8px; }
        .topbar-brand .material-icons-round { color: #f59e0b; font-size: 26px; }
        .topbar h1 {
            font-size: 1.25rem; letter-spacing: 0.3px; font-weight: 800;
            background: linear-gradient(135deg, #3b82f6, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        }
        .top-actions { display: flex; align-items: center; gap: 10px; }
        .status-badge {
            font-size: 0.72rem; color: var(--text-secondary); background: rgba(255, 255, 255, 0.05);
            padding: 5px 12px; border-radius: 20px; border: 1px solid var(--border-color); font-weight: 600;
        }

        /* CONTENEDOR DE VISTAS */
        .view-container { flex: 1; display: flex; position: relative; overflow: hidden; }
        .view { display: none; width: 100%; height: 100%; flex-direction: column; opacity: 0; transition: opacity 0.2s ease-in-out; }
        .view.active { display: flex; opacity: 1; }

        .content-scroll { flex: 1; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }

        /* NAVBAR INFERIOR */
        .bottom-nav {
            height: 65px; background-color: var(--bg-nav); border-top: 1px solid var(--border-color);
            display: flex; justify-content: space-around; align-items: center; z-index: 20; padding: 0 4px;
        }
        .nav-item {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            color: var(--text-secondary); font-size: 0.65rem; gap: 3px; cursor: pointer; background: none; border: none;
            flex: 1; max-width: 72px; height: 100%; font-weight: 600; transition: color 0.2s ease, transform 0.1s ease;
        }
        .nav-item .material-icons-round { font-size: 22px; transition: transform 0.2s ease; }
        .nav-item:active { transform: scale(0.92); }
        .nav-item.active { color: #f59e0b; }
        .nav-item.active .material-icons-round { transform: translateY(-2px); }
    

/* ============================================================
   CERCA — UI V2 / MEJORAS VISUALES Y UX
   ============================================================ */
:root {
    --aj-primary:#f59e0b;
    --aj-primary-2:#fb923c;
    --aj-danger:#ef4444;
    --aj-success:#10b981;
    --aj-info:#38bdf8;
    --aj-purple:#8b5cf6;
    --aj-shadow:0 18px 55px rgba(0,0,0,.28);
}
body{background:
    radial-gradient(circle at 10% -10%,rgba(245,158,11,.10),transparent 30%),
    radial-gradient(circle at 100% 0%,rgba(59,130,246,.10),transparent 28%),
    var(--bg-main);}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(135deg,transparent 35%,rgba(255,255,255,.012) 50%,transparent 65%);}
.topbar{height:68px!important;background:rgba(8,12,22,.82)!important;backdrop-filter:blur(22px);border-bottom:1px solid rgba(255,255,255,.08)!important;box-shadow:0 8px 35px rgba(0,0,0,.16);}
.light-theme .topbar{background:rgba(255,255,255,.86)!important;box-shadow:0 8px 35px rgba(15,23,42,.08);}
.topbar-brand h1{font-size:1rem!important;letter-spacing:-.02em;}
.topbar-brand .material-icons-round{color:var(--aj-primary);filter:drop-shadow(0 0 10px rgba(245,158,11,.35));}
.status-badge{border-radius:999px!important;padding:6px 10px!important;font-size:.68rem!important;background:rgba(16,185,129,.10)!important;border:1px solid rgba(16,185,129,.25)!important;color:#34d399!important;}
.view-container{padding-bottom:88px!important;}
.content-scroll{padding-top:12px!important;}
.light-theme .bottom-nav{background:rgba(255,255,255,.90)!important;}
.nav-item{border-radius:14px!important;position:relative;}
.nav-item.active{background:rgba(245,158,11,.09);}
.nav-item.active::after{content:"";position:absolute;bottom:3px;width:20px;height:3px;border-radius:99px;background:#f59e0b;}



/* ==========================================================
   V6.1 — FIX MOBILE VIEWPORT / FRANJA NEGRA SOBRE NAV
   La barra inferior participa en el layout normal, por lo que
   NO debemos reservar otra barra completa dentro de view-container.
   ========================================================== */
.view-container{
  padding-bottom:0!important;
  min-height:0!important;
}
.view{
  min-height:0!important;
}
.content-scroll{
  padding-bottom:28px!important;
  overscroll-behavior-y:contain;
}
.bottom-nav{
  flex:0 0 auto!important;
  position:relative!important;
  bottom:auto!important;
  left:auto!important;
  right:auto!important;
  width:100%!important;
  z-index:2000!important;
}


/* ==========================================================
   CERCA V7 — MOBILE POLISH + RUTA CERCA
   ========================================================== */
:root{
  --aj-mobile-pad:10px;
  --aj-touch:46px;
}
.view-container,.view,.content-scroll,.mas-container,.centered-view{min-width:0!important;max-width:100%!important;}
.content-scroll{scrollbar-gutter:stable both-edges;}


/* ============================================================
   CERCA V1.1 — APP SHELL MOBILE-FIRST
   ============================================================ */
body{
    height:100dvh!important;
    min-height:100dvh!important;
    overflow:hidden!important;
}

/* CERCA se queda arriba como identidad de la app */
.topbar{
    position:relative!important;
    flex:0 0 58px!important;
    height:58px!important;
    min-height:58px!important;
    width:100%!important;
    z-index:7000!important;
    padding:0 11px!important;
    background:rgba(7,12,22,.97)!important;
    backdrop-filter:blur(22px)!important;
    -webkit-backdrop-filter:blur(22px)!important;
    border-bottom:1px solid rgba(255,255,255,.075)!important;
    box-shadow:0 7px 24px rgba(0,0,0,.16)!important;
}
body.light-theme .topbar{
    background:rgba(255,255,255,.98)!important;
    border-bottom-color:rgba(15,23,42,.08)!important;
}
.topbar-brand{gap:8px!important;min-width:0!important}
.top-actions{gap:5px!important}
.status-badge{max-width:82px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* El contenido ocupa exactamente el centro de la app */
.view-container{
    flex:1 1 auto!important;
    min-height:0!important;
    padding-bottom:0!important;
    overflow:hidden!important
}
.view{min-height:0!important}
.content-scroll{
    min-height:0!important;height:100%!important;
    padding:10px 10px 20px!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch
}


/* V1.6.1 — Reportar como acción central del nav */
.bottom-nav .cerca-report-main16{
    position:relative;
}
.bottom-nav .cerca-report-main16 .material-icons-round{
    width:38px;height:38px;margin-top:-13px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:#ef4444;color:#fff;
    box-shadow:0 6px 18px rgba(239,68,68,.35);
}


/* ============================================================
   CERCA V1.7.1 — RESPONSIVE MOBILE UI PASS
   ============================================================ */

/* Escala tipográfica global más legible */
:root{
  --cerca-fs-xs: clamp(11px, 2.75vw, 12px);
  --cerca-fs-sm: clamp(12px, 3vw, 13px);
  --cerca-fs-md: clamp(13px, 3.3vw, 14px);
  --cerca-fs-lg: clamp(15px, 3.8vw, 17px);
  --cerca-fs-xl: clamp(18px, 4.5vw, 22px);
  --cerca-touch: 44px;
}
.bottom-nav .nav-item{
  min-height: 54px!important;
  font-size: var(--cerca-fs-xs)!important;
}
.bottom-nav .nav-item span:last-child{
  font-size: var(--cerca-fs-xs)!important;
}
.bottom-nav .nav-item .material-icons-round{
  font-size: 23px!important;
}
.bottom-nav{
    z-index:13050!important;
}