/* Cloud sync & auth UI */

.cloud-status-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: var(--radio);
  background: var(--superficie);
  border: var(--regla-fina) solid var(--borde);}

.cloud-sync-pill {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
  gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--radio);
  border: var(--regla-fina) solid var(--acento);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s;}

.cloud-sync-pill:active {
  transform: scale(0.96);}

.cloud-sync-pill.cloud-syncing .cloud-icon {
  animation: cloud-spin 0.9s linear infinite;}

@keyframes cloud-spin {
  to { transform: rotate(360deg);}
}

.cloud-sync-pill.cloud-offline {
  opacity: 0.75;
  border-color: var(--texto-suave);}

.cloud-sync-pill.cloud-error {
  border-color: var(--interes);
  background: var(--interes-fondo);}

.cloud-sync-pill.cloud-success,
.cloud-sync-pill.cloud-live {
  border-color: var(--capital);}

.cloud-sync-pill.cloud-live {
  animation: cloud-live-glow 2.5s ease-in-out infinite;}

@keyframes cloud-live-glow {
}

.cloud-sync-pill.cloud-conflict {
  border-color: var(--urgencia-media);
  animation: cloud-conflict-pulse 1s ease-in-out 2;}

@keyframes cloud-conflict-pulse {
  50% { transform: scale(1.02);}
}

.cloud-sync-pill.cloud-waiting {
  border-color: var(--texto-suave);
  opacity: 0.85;}

.cloud-live-badge {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: var(--radio);
  color: var(--texto-invertido);
  letter-spacing: 0.06em;
  animation: live-badge-pulse 1.8s ease-in-out infinite;}

.cloud-live-badge.hidden {
  display: none !important;}

@keyframes live-badge-pulse {
  50% { opacity: 0.75; transform: scale(0.95);}
}

.cloud-device-hint {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  opacity: 0.85;}

.cloud-sync-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--texto-suave, var(--texto-suave));
  flex: 1;
  min-width: 140px;}

.cloud-auth-panel .auth-user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;}

.cloud-auth-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radio);
  object-fit: cover;
  border: var(--regla) solid var(--acento);}

.cloud-auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;}

.cloud-auth-actions .hidden {
  display: none !important;}

.profile-google-avatar {
  width: 88px;
  height: 88px;
  border-radius: var(--radio);
  object-fit: cover;
  border: var(--regla-activa) solid var(--acento);
  margin: 0 auto 12px;
  display: block;}

.profile-google-avatar.hidden {
  display: none !important;}

.profile-chibi-behind {
  font-size: 28px !important;
  margin-top: -8px;}

.cloud-loading-overlay .splash-subtitle {
  animation: cloud-pulse 1.2s ease-in-out infinite;}

@keyframes cloud-pulse {
  50% { opacity: 0.5;}
}

.cloud-sync-pill.cloud-local-mode {
  border-color: var(--texto-suave);
  background: var(--superficie-elevada);
  cursor: default;}

body.cloud-disabled .cloud-only,
.cloud-only.hidden {
  display: none !important;}

body.cloud-disabled .local-only:not(.hidden) {
  display: block;}

.local-only {
  display: none;}

.cloud-status-bar {
  background: var(--superficie-elevada);}