/* ============================================================
   THE KING OF KINGS ARMY — Responsive System
   Mobile-first breakpoints:
     xs:  < 400px   (phones pequeños)
     sm:  < 640px   (phones estándar)
     md:  < 768px   (tablets / landscape phone)
     lg:  < 1024px  (tablets grandes)
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   SHELL — Navbar + Segmented Control + Left Panel
   ════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .navbar-links a { font-size: .72rem; padding: 5px 10px; }
}

@media (max-width: 768px) {
  .navbar { padding: 0 14px; }
  .navbar-links a { font-size: .68rem; padding: 5px 8px; }
  .nav-seg-ctrl  { padding: 3px; }
  .nav-seg-btn   { font-size: .4rem; padding: 5px 12px; letter-spacing: .07em; }
}

@media (max-width: 640px) {
  .navbar { padding: 0 10px; height: 52px; }
  .navbar-inner { height: 52px; gap: 0; }

  /* Links de navbar superiores: ocultos — se muestran en bottom nav */
  .navbar-links { display: none !important; }

  /* Segmentado compacto */
  .nav-seg-ctrl { padding: 2px; gap: 0; flex-shrink: 0; margin-left: auto; }
  .nav-seg-btn  { font-size: .36rem; padding: 4px 10px; letter-spacing: .05em; }

  /* Cruz más compacta */
  .navbar-cross-btn { padding: 0 8px 0 0; font-size: 1rem; flex-shrink: 0; }

  /* Iframe: espacio para top navbar (52px) + bottom nav (58px) */
  .world-iframe { top: 52px; height: calc(100% - 52px - 58px); }

  /* Panel lateral full-friendly */
  .left-panel { top: 52px; height: calc(100vh - 52px); width: 220px; left: -220px; }
  .panel-overlay { inset: 52px 0 0 0; }
}

@media (max-width: 400px) {
  .nav-seg-btn  { font-size: .34rem; padding: 4px 7px; }
  .left-panel   { width: 200px; left: -200px; }
}


/* ════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV — Reemplaza navbar-links en mobile
   ════════════════════════════════════════════════════════════ */

.mobile-bottom-nav {
  display: none; /* oculto en desktop */
}

@media (max-width: 640px) {
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 58px;
    background: rgba(7,7,15,.97);
    border-top: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: 150;
    align-items: stretch;
    padding: 0 4px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .mbn-page-row {
    display: contents;
  }

  .mbn-camera-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mbn-camera-btn {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    border: 3px solid rgba(7,7,15,1);
    box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 4px 16px rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    margin-top: -18px;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s;
  }
  .mbn-camera-btn:active { transform: scale(.93); }

  .mbn-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,.28);
    padding: 6px 2px 4px;
    border-radius: 10px;
    transition: color .15s, background .15s;
    -webkit-tap-highlight-color: transparent;
    min-width: 0;
  }
  .mbn-tab:hover  { color: rgba(255,255,255,.6); }
  .mbn-tab.active {
    color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.06);
  }

  .mbn-ico {
    width: 20px; height: 20px;
    flex-shrink: 0;
    stroke-width: 1.6;
    transition: opacity .15s;
  }
  .mbn-tab.active .mbn-ico { opacity: 1; }

  .mbn-label {
    font-family: 'Cinzel', serif;
    font-size: .38rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .world-iframe { top: 52px; height: calc(100% - 52px - 58px); }
  .toast { bottom: 70px !important; }
}

@media (max-width: 400px) {
  .mbn-ico   { width: 18px; height: 18px; }
  .mbn-label { font-size: .32rem; }
}


/* ════════════════════════════════════════════════════════════
   GLOBAL — Cards, modals, inputs, toast
   ════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .card        { padding: 16px 14px; border-radius: 16px; }
  .stat-box    { padding: 12px 10px; border-radius: 14px; }
  .modal       { padding: 22px 16px; border-radius: 20px; }
  .modal-bg    { padding: 12px; }
  .form-input  { font-size: .82rem; padding: 9px 12px; }
  .btn         { min-height: 40px; font-size: .68rem; }
  .btn-sm      { min-height: 34px; }
  .container   { padding: 0 14px; }
  .container-sm { padding: 0 14px; }
  .page-main   { padding: 16px 0 80px; }
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.15rem; }
  h3 { font-size: .95rem; }
}



/* ════════════════════════════════════════════════════════════
   AUTH
   ════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .auth-card   { padding: 28px 20px; border-radius: 20px; }
  .auth-logo   { margin-bottom: 24px; }
  .auth-logo h1 { font-size: 1.05rem; }
}


/* ════════════════════════════════════════════════════════════
   DASHBOARD
   ════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .dash-two-col { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  .dash-hero { padding: 18px 16px !important; border-radius: 18px !important; }
  .dash-hero-inner { flex-direction: column !important; align-items: center !important; gap: 16px !important; }
  .dash-hero-campaign { min-width: 0 !important; width: 100% !important; }

  .dash-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .dash-stat-box { padding: 12px 8px !important; border-radius: 14px !important; }
  .dash-stat-val { font-size: 1.3rem !important; }
  .dash-stat-lbl { font-size: .55rem !important; }

  .dash-name { font-size: 1.1rem !important; }
  .dash-xp-wrap { height: 2px !important; }

  .profile-hero { flex-direction: column !important; text-align: center; gap: 12px !important; }
  .rank-icon  { width: 52px !important; height: 52px !important; font-size: 1.3rem !important; }
  .profile-name { font-size: 1.1rem !important; }
  .two-col { grid-template-columns: 1fr !important; }
}

@media (max-width: 400px) {
  .dash-stats { grid-template-columns: repeat(2, 1fr) !important; }
}


/* ════════════════════════════════════════════════════════════
   CAMPAIGN — Tabs, Stats, Cards, Pomodoro, Arena
   ════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .camp-wrap { padding: 14px 12px 80px; }
  .campaign-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
}

@media (max-width: 640px) {
  /* Tabs */
  .camp-tabs { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border-radius: 0; }
  .camp-tab  { white-space: nowrap; min-width: 72px; font-size: .68rem; padding: 10px 8px; }

  /* Stats */
  .camp-stats-panel { gap: 5px; }
  .cstat { padding: 7px 4px !important; border-radius: 10px !important; }
  .cstat-label { display: none; }
  .cstat-val   { font-size: .78rem !important; }
  .cstat-ico   { font-size: .85rem !important; }

  /* Cards */
  .campaign-grid { grid-template-columns: 1fr !important; gap: 8px; }
  .ccard { padding: 14px 12px !important; border-radius: 12px !important; }
  .ccard-icon  { font-size: 1.8rem !important; }
  .ccard-name  { font-size: .76rem !important; }
  .ccard-desc  { font-size: .64rem !important; }

  /* Pomodoro */
  .pomo-time   { font-size: 3rem !important; }
  .pomo-box    { padding: 18px 14px !important; }
  .pomo-box-label { font-size: .78rem !important; }
  .pomo-bar-wrap  { max-width: 100% !important; }
  .pomo-anim-row  { flex-direction: column; align-items: center; gap: 8px !important; }
  .pomo-anim-btns { flex-direction: row; width: 100%; justify-content: center; }
  .pomo-sq-btn    { width: 72px; height: 52px; }
  .exp-top-row .pomo-score {
    position: static !important;
    width: 100%; box-sizing: border-box; margin-bottom: 10px;
  }

  /* Modal horario */
  .sched-box   { padding: 24px 16px 20px; width: 100%; border-radius: 20px; }
  .sched-head  { margin-bottom: 16px; }
  .sched-days  { gap: 3px; flex-wrap: wrap; }
  .sched-day   { font-size: .46rem; padding: 7px 3px; min-width: 34px; }
  .sched-times { flex-direction: column; gap: 10px; }
  .sched-select { font-size: .78rem; padding: 9px 12px; }

  /* Arena */
  #arena-grid { grid-template-columns: 1fr !important; }
  .arena-card { padding: 12px 10px !important; }
  .arena-monster-icon { font-size: 1.8rem !important; }
  .arena-monster-name { font-size: .74rem !important; }

  /* Config panel de pomo */
  .pomo-cat-btns { gap: 4px; }
  .pomo-cat-btn  { font-size: .6rem; padding: 4px 6px; }

  /* Battle canvas */
  #battle-canvas-container canvas { max-width: 100% !important; }
  #battle-canvas-container { overflow: hidden; }
  .battle-actions { gap: 5px !important; flex-wrap: wrap; }
  .battle-btn { font-size: .68rem !important; padding: 8px 10px !important; }

  /* Info sub-panel */
  .pomo-sub-panel, .map-info-panel {
    width: calc(100vw - 24px) !important;
    left: 12px !important; right: 12px !important;
    top: unset !important; bottom: 80px !important;
  }
}


/* ════════════════════════════════════════════════════════════
   SOLDIER — Paper doll + Inventario lateral
   ════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .sol-root { grid-template-columns: 1fr 240px !important; }
}

@media (max-width: 768px) {
  .sol-root { grid-template-columns: 1fr !important; }
  .inv-panel { position: static !important; max-height: 320px !important; top: unset !important; }
  .soldier-page { padding: 0 12px 80px; }
}

@media (max-width: 640px) {
  /* Paper doll: slots izq | sprite | slots der */
  .soldier-layout {
    grid-template-columns: 62px 1fr 62px !important;
    gap: 4px !important;
    align-items: center !important;
  }

  .equip-slot {
    min-height: 50px !important; padding: 3px !important;
    flex-direction: column !important; align-items: center !important;
    justify-content: center !important; text-align: center !important;
    gap: 2px !important; border-radius: 8px !important;
  }
  .slot-icon        { font-size: 1.3rem !important; }
  .slot-empty-label { font-size: .44rem !important; }
  .slot-item-info   { display: none !important; }
  .slot-filled      { flex-direction: column !important; align-items: center !important; width: 100% !important; }
  .slot-item-icon   { font-size: 1.25rem !important; }
  .slot-filled .inv-eq-btn { display: none !important; }

  /* Sprite */
  #soldier-sprite   { width: 110px !important; height: 110px !important; }
  .soldier-img-wrap { min-height: 120px !important; }
  .soldier-stats-wrap { padding: 10px !important; }

  /* Panel central */
  .soldier-panel { border-radius: 12px !important; }
  .s-name       { font-size: .88rem !important; }
  .s-class-pill { font-size: .44rem !important; }

  /* Inventario lateral */
  .inv-panel     { max-height: 260px !important; }
  .inv-panel-hint { display: none; }

  /* Modal personaje */
  .char-modal  { padding: 20px 16px; border-radius: 16px; }
  .char-modal h3 { font-size: .95rem; }
  .char-gender-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .char-class-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 6px; }
  .char-class-icon { font-size: 1.4rem !important; }
  .char-class-name { font-size: .54rem !important; }
}


/* ════════════════════════════════════════════════════════════
   INVENTORY
   ════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .inv-page { padding: 0 14px 80px; }
  .inv-header h1 { font-size: 1.3rem; }
}

@media (max-width: 640px) {
  .inv-page { padding: 0 10px 80px; }
  .inv-header { padding: 20px 0 0; }
  .inv-header h1 { font-size: 1.1rem; }
  .inv-header-rule { margin: 8px auto 12px; }

  /* Wallet */
  .inv-wallet { border-radius: 12px; flex-wrap: wrap; justify-content: center; }
  .inv-wallet-badge { padding: 5px 10px; font-size: .66rem; }

  /* Barra de control */
  .inv-control-bar { padding: 6px 8px; gap: 4px; border-radius: 10px; }
  .inv-bar-sep     { display: none; }

  /* Pills de set */
  .inv-set-pills { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .inv-set-pill  { white-space: nowrap; flex-shrink: 0; font-size: .64rem; padding: 3px 10px; }

  /* Grid de items */
  .inv-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .inv-card { padding: 12px 10px !important; border-radius: 12px !important; }
}

@media (max-width: 400px) {
  .inv-grid { grid-template-columns: repeat(2, 1fr) !important; }
}


/* ════════════════════════════════════════════════════════════
   STORE
   ════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .store-page  { padding: 0 14px 80px; }
  .store-header h1 { font-size: 1.3rem; }
}

@media (max-width: 640px) {
  .store-page  { padding: 0 10px 80px; }
  .store-header { padding: 20px 0 0; }
  .store-header h1 { font-size: 1.1rem; }
  .store-header-rule { margin: 8px auto 12px; }

  /* Wallet */
  .store-wallet { border-radius: 12px; flex-wrap: wrap; justify-content: center; }
  .wallet-badge { padding: 5px 10px; font-size: .66rem; }

  /* Tabs de categoría */
  .store-tab-nav  { flex-wrap: wrap; border-radius: 12px; width: 100%; }
  .store-tab      { padding: 5px 12px; font-size: .64rem; border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }
  .store-tab:last-child { border-bottom: none; }

  /* Control bar */
  .store-control-bar { padding: 6px 8px; gap: 4px; border-radius: 10px; }
  .store-bar-sep     { display: none; }
  .store-set-pills   { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .store-set-pill    { white-space: nowrap; flex-shrink: 0; font-size: .64rem; padding: 3px 10px; }

  /* Grid */
  .store-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .store-card { padding: 12px 10px !important; border-radius: 12px !important; }
  .store-card-name  { font-size: .7rem !important; }
  .store-card-price { font-size: .65rem !important; }

  /* Filtros */
  .store-filter-row,
  .inv-filter-row { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; padding-bottom: 4px; }
  .filter-pill    { white-space: nowrap; flex-shrink: 0; }
}


/* ════════════════════════════════════════════════════════════
   LEADERBOARD
   ════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .lb-row  { padding: 11px 12px; gap: 9px; border-radius: 12px; }
  .lb-rank { font-size: .7rem; min-width: 22px; }
  .lb-name { font-size: .78rem; }
  .lb-xp   { font-size: .7rem; }
  .rank-icon { width: 34px !important; height: 34px !important; font-size: .9rem !important; }
}


/* ════════════════════════════════════════════════════════════
   PROFILE — Triptych
   ════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .pf-triptych { grid-template-columns: 1fr 1.2fr 1fr !important; gap: 10px; }
}

@media (max-width: 768px) {
  .pf-triptych { grid-template-columns: 1fr !important; max-width: 420px; }
  .pf-side     { display: none !important; }
  .pf-main     { padding: 16px 14px 80px; align-items: center; }
}

@media (max-width: 640px) {
  .pf-main { padding: 12px 12px 80px; }
  .sol-card-name { font-size: .82rem !important; }
  .sol-equip-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 5px !important; }
  .verse-search-row { grid-template-columns: 1fr 1fr !important; gap: 6px; }
  .verse-search-row button { grid-column: span 2; }
  .social-link { font-size: .72rem; padding: 4px 10px; }
}


/* ════════════════════════════════════════════════════════════
   MESSAGES — layout mobile ya está en messages.html inline
   Aquí solo complementos globales
   ════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .msg-layout { grid-template-columns: 260px 1fr; }
}

@media (max-width: 640px) {
  .msg-input        { font-size: .82rem; }
  .msg-bubble       { font-size: .8rem; }
  .msg-bubble-outer { max-width: 82%; }
}


/* ════════════════════════════════════════════════════════════
   CORE ORGANIZACIÓN (core.html)
   ════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .right-col { width: 200px !important; }
}

@media (max-width: 768px) {
  .core-wrap { padding: 14px 12px 12px !important; gap: 10px !important; }
  .core-main { flex-direction: column !important; }
  .right-col { width: 100% !important; flex-direction: row !important; flex-shrink: 0; max-height: 200px; }
  .side-panel { flex: 1 !important; }
  .core-day   { font-size: 1.6rem !important; }
}

@media (max-width: 640px) {
  .core-wrap  { padding: 12px 10px 10px !important; gap: 8px !important; height: 100vh !important; }
  .core-day   { font-size: 1.3rem !important; }
  .core-subdate { font-size: .42rem !important; }
  .right-col  { display: none !important; }

  /* Segmentado de vistas */
  .cv-seg     { flex-wrap: nowrap !important; overflow-x: auto; }
  .cv-btn     { font-size: .38rem !important; padding: 5px 8px !important; white-space: nowrap; }

  /* Bloques del día */
  .dv-block-name { font-size: .46rem !important; }
  .dv-block-time { display: none !important; }
  .dv-ruler-mark span { font-size: .44rem !important; }

  /* Vista mes */
  .mv-cell    { min-height: 44px !important; }
  .mv-cell-num { font-size: .52rem !important; }

  /* Modal pilar */
  .pm-box     { width: 98vw !important; border-radius: 18px !important; }
  .pm-head    { padding: 16px 18px 14px !important; }
  .pm-head-title { font-size: .9rem !important; }

  /* Modal schedule */
  .config-box { width: 98vw !important; border-radius: 18px !important; }
}


/* ════════════════════════════════════════════════════════════
   CORE HOME (core-home.html) + COMMUNITY (community.html)
   ════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .ch-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    height: auto !important;
    min-height: 100vh;
  }
  .ch-divider { height: 1px !important; width: 100% !important; }
  .ch-left    { padding: 48px 32px 28px !important; }
  .ch-right   { padding: 28px 32px 52px !important; }
  .ch-coming-title { font-size: 1.7rem !important; }
  .ch-verse   { font-size: 1.1rem !important; }
}

@media (max-width: 400px) {
  .ch-left  { padding: 36px 20px 24px !important; }
  .ch-right { padding: 20px 20px 44px !important; }
  .ch-coming-title { font-size: 1.4rem !important; }
}


/* ════════════════════════════════════════════════════════════
   PURPOSE
   ════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .pur-page   { padding: 20px 14px 80px !important; }
  .pur-grid   { grid-template-columns: 1fr !important; gap: 10px !important; }
  .pur-header { padding: 24px 0 16px !important; }
  .pur-title  { font-size: 1.3rem !important; }
  .pur-card   { padding: 16px 14px !important; border-radius: 16px !important; }
  .pur-btn-save { width: 100% !important; }
}


/* ════════════════════════════════════════════════════════════
   ADMIN
   ════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .admin-table { font-size: .75rem; }
  .admin-table th, .admin-table td { padding: 7px 9px; }
}

@media (max-width: 640px) {
  .admin-tabs { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .admin-tabs button { white-space: nowrap; }
}


/* ════════════════════════════════════════════════════════════
   PVP / ARENA
   ════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .pvp-player-card  { padding: 10px 12px; gap: 8px; border-radius: 12px; }
  .pvp-player-icon  { font-size: 1.3rem; }
  .pvp-player-name  { font-size: .72rem; }
  .pvp-player-sub   { font-size: .56rem; }
  .pvp-challenge-btn { font-size: .58rem; padding: 5px 8px; }
  .difficulty-grid  { grid-template-columns: repeat(2, 1fr); gap: 5px; }
  .diff-btn         { padding: 9px 5px; font-size: .6rem; }
}


/* ════════════════════════════════════════════════════════════
   MAP (Mapa de campaña)
   ════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .map-fragments-bar { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
  .map-frags-label   { white-space: nowrap; }
  #section-map       { overflow: hidden; }
}

@media (max-width: 640px) {
  body.map-mode .navbar { display: none !important; }
}


/* ════════════════════════════════════════════════════════════
   MOBILE NAV ANTIGUA — Eliminada, reemplazada por .mobile-bottom-nav
   ════════════════════════════════════════════════════════════ */

.mobile-nav { display: none !important; }


/* ════════════════════════════════════════════════════════════
   TOUCH — Targets mínimos
   ════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .btn, .camp-tab, .store-tab, .inv-set-pill { min-height: 40px; }
  .btn-sm { min-height: 34px; }
  .task-item { padding: 13px 14px; }
  .lp-link   { padding: 12px 14px; }
}