/* =====================================================================
   PANEL DE SOCIO — modo "app" en móvil (≤768px)
   Barra de pestañas fija abajo, una sola sección visible cada vez y
   accesos directos en Inicio. En escritorio todo se queda como estaba.
   ===================================================================== */

/* Bloques exclusivos de móvil: ocultos en escritorio */
.app-home, .app-account, .app-seg, .app-tabbar { display: none; }

@media (max-width: 768px) {
  body.app { background: var(--bg-gray); -webkit-tap-highlight-color: transparent; }
  body.app .header { padding: 6px 0; }
  body.app .logo-img { width: 38px; height: 38px; }
  body.app .logo-sub { display: none; }

  .dash-wrap { padding: 70px 14px 100px; }
  body.app .dash-topbar { display: none; }
  body.app.needs-profile .dash-topbar { display: flex; margin-bottom: 8px; }
  body.app.needs-profile .dash-topbar #dash-user-email { display: none; }
  #dash-loading { padding: 40px 0; }

  /* Solo se ve la sección elegida en la barra de pestañas */
  body.app [data-panel] { display: none; }
  body.app[data-tab="inicio"] [data-panel="inicio"],
  body.app[data-tab="hijos"] [data-panel="hijos"],
  body.app[data-tab="cuota"] [data-panel="cuota"],
  body.app[data-tab="mas"] [data-panel="mas"] { display: block; }
  body.app[data-tab="ayudas"][data-sub="excursion"] [data-panel="ayudas"][data-sub="excursion"],
  body.app[data-tab="ayudas"][data-sub="reembolso"] [data-panel="ayudas"][data-sub="reembolso"] { display: block; }
  body.app[data-tab="ayudas"] .app-seg[data-panel="ayudas"] { display: flex; }

  /* Tarjetas más ligeras */
  .dash-card { padding: 18px 16px; border-radius: 20px; margin-bottom: 14px; }
  .dash-card h2 { font-size: 1.1rem; }
  .dash-card p.dash-sub { font-size: .86rem; margin-bottom: 14px; }

  /* Campos grandes y cómodos para el dedo (16px evita el zoom automático) */
  body.app input[type="text"], body.app input[type="tel"], body.app input[type="number"],
  body.app input[type="date"], body.app select, body.app textarea { font-size: 16px; min-height: 48px; }
  body.app .form-group input, body.app .form-group select, body.app .form-group textarea { font-size: 16px; padding: 12px 14px; }
  body.app .btn { min-height: 48px; justify-content: center; }
  #addChildForm { display: flex; flex-direction: column; gap: 10px; }
  #addChildForm > input, #addChildForm > select, #addChildForm > .btn { flex: 1 1 auto !important; width: 100%; min-width: 0 !important; }
  #excursionForm .btn, #reimbForm .btn, #profileForm .btn { width: 100%; }
  .btn-pay { min-height: 54px; font-size: 1.05rem; }

  /* Filas de hijos/as */
  .child-row-dash { padding: 12px 12px 12px 16px; gap: 6px; }
  .child-row-dash .btn-edit-child-dash, .child-row-dash .btn-remove-child-dash {
    width: 42px; height: 42px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center;
  }

  /* ---------- INICIO ---------- */
  .app-home { padding-top: 4px; }
  .app-hello { margin: 4px 2px 14px; }
  .app-hello-sub { font-size: .82rem; color: var(--text-muted); margin: 0 0 2px; }
  .app-hello h1 { font-family: var(--font-display); font-size: 1.7rem; color: var(--ink, #1d3a0b); line-height: 1.15; margin: 0; }

  .app-next {
    border-radius: 22px; padding: 20px 18px; margin-bottom: 20px; color: #fff;
    background: linear-gradient(140deg, #2e4608 0%, #4a7010 60%, #6a9e18 100%); box-shadow: var(--shadow);
    position: relative; overflow: hidden;
  }
  .app-next::after { content: ''; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(165,202,47,.3); }
  .app-next--ok { background: linear-gradient(140deg, #25621f 0%, #2e7d32 100%); }
  .app-next-label { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; opacity: .85; margin: 0 0 6px; position: relative; z-index: 1; }
  .app-next h2 { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.2; margin: 0 0 6px; color: #fff; position: relative; z-index: 1; }
  .app-next p { font-size: .88rem; opacity: .9; margin: 0 0 14px; position: relative; z-index: 1; line-height: 1.5; }
  .app-next .btn { background: var(--gold); color: #1d3a0b; width: 100%; position: relative; z-index: 1; font-size: 1rem; }
  .app-next--ok p { margin-bottom: 0; }

  .app-h2 { font-family: var(--font-display); font-size: 1rem; color: var(--text-muted); font-weight: 600; margin: 0 2px 10px; }
  .app-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
  .app-tile {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; background: #fff; border: 1px solid var(--border);
    border-radius: 18px; padding: 14px; min-height: 104px; font: inherit; color: var(--text); cursor: pointer; text-decoration: none;
    box-shadow: 0 2px 10px rgba(46,70,8,.06); transition: transform .12s;
  }
  .app-tile:active { transform: scale(.97); }
  .app-tile-ic { width: 40px; height: 40px; border-radius: 12px; background: rgba(165,202,47,.25); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: 8px; }
  .app-tile b { font-size: .92rem; line-height: 1.2; color: var(--ink, #1d3a0b); }
  .app-tile small { font-size: .76rem; color: var(--text-muted); line-height: 1.3; }
  .app-tile--admin .app-tile-ic { background: rgba(242,232,74,.45); }

  .app-kids { margin-bottom: 8px; }
  .app-kid { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px; margin-bottom: 8px; }
  .app-kid-av { width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .app-kid b { display: block; font-size: .92rem; }
  .app-kid small { color: var(--text-muted); font-size: .78rem; }

  /* ---------- Selector Excursión / Gasto ---------- */
  .app-seg { gap: 4px; background: #e5ebd6; padding: 4px; border-radius: 14px; margin-bottom: 14px; }
  .app-seg button { flex: 1; border: none; background: transparent; border-radius: 11px; padding: 11px 6px; font: 600 .85rem var(--font); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
  body.app[data-sub="excursion"] .app-seg button[data-sub="excursion"],
  body.app[data-sub="reembolso"] .app-seg button[data-sub="reembolso"] { background: #fff; color: var(--primary); box-shadow: 0 1px 6px rgba(0,0,0,.1); }

  /* ---------- MÁS ---------- */
  .app-list { background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; margin-bottom: 14px; }
  .app-list-item { display: flex; align-items: center; gap: 14px; padding: 16px; border-bottom: 1px solid var(--border); font-size: .92rem; color: var(--text); text-decoration: none; }
  .app-list-item:last-child { border-bottom: none; }
  .app-list-item > i:first-child { width: 22px; text-align: center; color: var(--primary); }
  .app-list-item span { flex: 1; word-break: break-all; }
  .app-chev { color: var(--text-muted); font-size: .75rem; }
  .app-list-item--danger { color: #c62828; }
  .app-list-item--danger > i:first-child { color: #c62828; }

  /* ---------- Barra de pestañas ---------- */
  body.app.has-household .app-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; background: #fff;
    border-top: 1px solid var(--border); box-shadow: 0 -6px 24px rgba(46,70,8,.1);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  }
  .app-tabbar button {
    flex: 1; border: none; background: none; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 2px; border-radius: 14px; font: 600 .68rem var(--font); color: var(--text-muted); cursor: pointer; position: relative;
  }
  .app-tabbar button i { font-size: 1.25rem; }
  .app-tabbar button.is-active { color: var(--primary); }
  .app-tabbar button.is-active::before { content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
  .app-tabbar .app-badge { position: absolute; top: 2px; right: 22%; min-width: 16px; height: 16px; border-radius: 999px; background: #e4572e; color: #fff; font-size: .62rem; display: flex; align-items: center; justify-content: center; padding: 0 4px; }

  /* El asistente flotante no debe tapar la barra de pestañas */
  body.app .chat-launcher { display: none; } /* se abre desde Más → Preguntar al asistente */
  body.app .chat-panel { bottom: 0; }
}

@media (max-width: 768px) {
  body.app .tramos-ref { flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin: 0 -4px 16px; padding: 0 4px 4px; scrollbar-width: none; }
  body.app .tramos-ref .tramo-chip { flex: 0 0 38%; min-width: 0; }
  body.app .tramos-ref::-webkit-scrollbar { display: none; }
}