/* =========================================================
   PIPA STUDIO — Estilos compartidos para las apps mobile
   (personal.html para profesionales, mi-turno.html para clientas)
   ========================================================= */

body { background: var(--gray-bg); }

/* Evita que la página se pueda "correr"/rebotar hacia los costados en el
   celular (swipe horizontal). Solo se permite scroll vertical. Esto se
   aplica únicamente acá (no en styles.css general) porque el panel admin
   sí necesita scroll horizontal en el calendario y algunas tablas. */
html, body {
  touch-action: pan-y;
  overscroll-behavior-x: none;
}

.mobile-shell {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 16px 50px;
  min-height: 100vh;
}

.mobile-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}
.mobile-hello { font-size: 1.1rem; color: var(--navy); }
.mobile-today { font-size: .8rem; color: var(--text-muted); text-transform: capitalize; margin-top: 2px; }

.btn-icon-danger {
  background: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: 50%;
  width: 38px; height: 38px;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--text-muted);
}

.mobile-filter-tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.mobile-filter-tab {
  flex: 1;
  padding: 9px 4px;
  border: 1px solid var(--gray-border);
  background: var(--white);
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}
.mobile-filter-tab.active { background: var(--navy); color: var(--white); border-color: var(--navy); }

.mobile-appt-list { display: flex; flex-direction: column; gap: 12px; }
.mobile-appt-card {
  background: var(--white);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--blue);
}
.mobile-appt-card.status-no_asistio { border-left-color: var(--danger, #c23b3b); opacity: .75; }
.mobile-appt-card.status-asistio { border-left-color: var(--success); }
.mobile-appt-top { display: flex; justify-content: space-between; align-items: baseline; }
.mobile-appt-time { font-size: 1.35rem; font-weight: 700; color: var(--navy); }
.mobile-appt-date { font-size: .78rem; color: var(--text-muted); text-transform: capitalize; }
.mobile-appt-client { font-weight: 600; margin-top: 8px; font-size: 1rem; }
.mobile-appt-service { font-size: .88rem; color: var(--text-muted); margin-top: 2px; }
.mobile-appt-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .74rem;
  font-weight: 700;
  background: var(--gray-bg);
  color: var(--navy);
}

.mobile-empty { text-align: center; color: var(--text-muted); padding: 70px 20px; }

/* ---------- Portal de clientas ---------- */
.mobile-card {
  background: var(--white);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}
.mobile-card h3 { margin-bottom: 8px; font-size: .95rem; }
.mobile-points-value { font-size: 2rem; font-weight: 800; color: var(--pink); }
.mobile-points-note { font-size: .78rem; color: var(--text-muted); margin-top: 4px; }
.mobile-map-link { display: inline-block; margin-top: 8px; font-weight: 600; }

.mobile-rewards-list { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.mobile-reward-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--gray-border); }
.mobile-reward-name { font-weight: 600; font-size: .92rem; }
.mobile-reward-desc { font-size: .78rem; color: var(--text-muted); margin-top: 2px; }
.mobile-reward-btn { white-space: nowrap; }
.mobile-reward-btn:disabled { background: var(--gray-border); color: var(--text-muted); cursor: not-allowed; }

/* ---------- Menú de inicio (mi-turno.html) ---------- */
.mobile-menu-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.mobile-menu-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 16px 18px;
  text-decoration: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: transform .1s ease;
}
.mobile-menu-card:active { transform: scale(.98); }
.mmc-icon {
  font-size: 1.4rem;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-bg);
  border-radius: 12px;
  flex-shrink: 0;
}
.mmc-label { font-size: .95rem; font-weight: 700; color: var(--navy); flex: 1; }
.mobile-menu-card::after {
  content: '→';
  color: var(--text-muted);
  font-size: 1rem;
}

.mobile-back-link {
  display: inline-block;
  background: none;
  border: none;
  color: var(--text-muted);
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
  padding: 0;
  margin-bottom: 10px;
}
.mobile-view-title { font-size: 1.15rem; color: var(--navy); margin-bottom: 14px; }