/* =============================================
   HOME — Pantalla principal / Check In
   ============================================= */

/* ── Header ── */
.home-header {
  padding: 12px var(--gap-xl) 10px;
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  flex-shrink: 0;
}

.greeting-name { font-size: clamp(15px, 4vw, 18px); font-weight: 700; color: var(--text); }
.greeting-sub  { font-size: clamp(11px, 3vw, 13px); color: var(--text2); }

/* ── Tarjeta de estado ── */
.status-card {
  margin: 0 16px 14px;
  flex-shrink: 0;
}

.absent-pill {
  margin-bottom: 14px;
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.clock-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.clock-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--primary-100);
  flex-shrink: 0;
}

.time-big  { font-size: clamp(24px, 6vw, 32px); font-weight: 800; letter-spacing: -0.5px; }
.time-date { font-size: clamp(10px, 2.8vw, 12px); color: rgba(255, 255, 255, 0.55); margin-top: 2px; }

/* ── Anillo de meta ── */
.goal-ring {
  width:  clamp(52px, 13vw, 64px);
  height: clamp(52px, 13vw, 64px);
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.75);
}

.goal-ring strong { font-size: 13px; font-weight: 700; color: white; }

/* ── Stats row ── */
.card-stats {
  display: flex;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 12px;
  margin-bottom: 12px;
}

.stat-item {
  flex: 1;
  text-align: center;
  padding: 0 4px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.stat-item:last-child { border-right: none; }

.stat-label { font-size: clamp(8px, 2.2vw, 10px); color: rgba(255, 255, 255, 0.45); margin-bottom: 3px; }
.stat-sub   { font-size: clamp(7px, 2vw, 9px);   color: rgba(255, 255, 255, 0.3); }
.stat-value {
  font-size: clamp(11px, 3vw, 13px);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

/* ── Botón emergencia ── */
.btn-emergency {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  padding: 11px;
  color: white;
  font-size: clamp(12px, 3.5vw, 14px);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-emergency:active { background: rgba(255, 255, 255, 0.16); }

/* ── Botón Check In (círculos concéntricos) ── */
.checkin-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.circle-outer {
  width:  min(62vw, 240px);
  height: min(62vw, 240px);
  border-radius: 50%;
  background: rgba(83, 74, 183, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle-mid {
  width:  min(48vw, 188px);
  height: min(48vw, 188px);
  border-radius: 50%;
  background: rgba(83, 74, 183, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle-inner {
  width:  min(34vw, 136px);
  height: min(34vw, 136px);
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  font-size: clamp(13px, 3.5vw, 15px);
  font-weight: 700;
  gap: 6px;
  border: none;
  box-shadow: 0 8px 28px rgba(83, 74, 183, 0.45);
  transition: transform 0.15s;
  -webkit-user-select: none;
  user-select: none;
}

.circle-inner i { font-size: clamp(26px, 7vw, 32px); }

.circle-inner:active {
  transform: scale(0.94);
  background: #3C3489;
}