/* Feedback del participante */
.fb-correct { color: var(--success); }
.fb-incorrect { color:#6b7280; }
.fb-incorrect .fb-typed { color:#dc3545; }
.fb-incorrect .fb-correct-word { color:#16a34a; }

/* Overlay de bloqueo del participante */
.participant-lock-overlay {
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.65); backdrop-filter:blur(3px);
  z-index:9999; display:flex; align-items:center; justify-content:center;
  pointer-events:all; animation: fadeInOverlay 0.3s ease-out;
}
.plo-card { background:#fff; padding:24px 28px; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,0.2); text-align:center; max-width:400px; }
.plo-emoji { font-size:48px; margin-bottom:16px; }
.plo-title { font-size:20px; font-weight:700; color:#dc2626; margin-bottom:12px; }
.plo-text { font-size:16px; color:#666; line-height:1.5; }
/* Participant UI */
.participant-input input { flex:1; min-width:0; }
.participant-input button { flex-shrink:0; min-width:120px; }

.participant-feedback { margin:16px 0; padding:12px 16px; border-radius:10px; font-weight:500; background:#f8fafc; border:1px solid rgba(2,6,23,.08); }
.participant-progress { margin:20px 0; }
.participant-card { background:#fff; border:1px solid rgba(2,6,23,.08); border-radius:12px; padding:24px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.participant-info p { margin:8px 0; line-height:1.5; }

/* Campo de ID de sesión (estilos movidos desde HTML) */
#sessionIdInput {
  text-align: center;
  font-family: monospace;
  text-transform: uppercase;
  margin-top: 6px;
  margin-bottom: 12px;
}

/* Acciones del reporte del participante */
#participantReport .actions { margin: 12px 0; }

/* Botones PDF y Práctica Manual en horizontal en móvil */
@media (max-width: 520px) {
  #participantReport .actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    align-items: stretch !important;
    justify-content: center !important;
  }
  
  #participantReport .actions button {
    flex: 1 1 calc(50% - 3px) !important;
    min-width: 0 !important;
    white-space: normal !important;
    padding: 10px 6px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Label del ID de sesión */
#page-participant label[for="sessionIdInput"] { display:block; margin-bottom:6px; }

/* Caja de advertencia debajo del ID (migrada desde inline) */
.session-id-hint { font-size:12px; color:#b91c1c; margin-top:12px; text-align:center; font-weight:600; }

/* Streak notification (centrada arriba, por debajo del botón de ayuda) */
.racha-notification {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg,#FF6B6B,#FF8E53);
  color: #fff;
  padding: 15px 25px;
  border-radius: 50px;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(255,107,107,.5);
  z-index: 9999;
  animation: slideInRight .5s cubic-bezier(.34,1.56,.64,1), pulse 2s ease infinite, fadeOut .5s ease 2.5s forwards;
  pointer-events: none;
  max-width: calc(100% - 40px);
  text-align: center;
}
@keyframes slideInRight { from { transform: translateX(400px); opacity:0;} to { transform: translateX(0); opacity:1;} }
@keyframes pulse { 0%,100%{transform:scale(1);}50%{transform:scale(1.05);} }
@keyframes fadeOut { to { opacity:0; transform: translateY(-20px);} }

@media (max-width: 768px) {
  .participant-input { flex-direction:column; align-items:stretch; }
  .participant-input input { width:100%; margin-bottom:8px; }
  .racha-notification {
    top: 56px;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    font-size: 16px;
    padding: 12px 20px;
    max-width: calc(100% - 20px);
  }
}

/* ====== Responsive (móvil/tablet) ====== */
@media (max-width: 480px) {
  .participant-input { gap: 8px; }
  .participant-input button { min-width: 120px; height: 42px; }
}

/* Evitar zoom en iOS al enfocar inputs */
#participantAnswer { font-size: 16px; }