/**
 * El widget de la foto de perfil.
 *
 * Fichero propio porque lo usan TRES pantallas que no comparten hoja de estilos: el alta
 * pública y la ficha propia (que cargan gr-landing.css) y el panel (que carga gr-theme.css).
 * Las variables se declaran aquí con respaldo, para que el bloque se pinte igual en el
 * back, donde la paleta de la landing no existe.
 */
:root {
  --gr-foto-acento: var(--ambar, #c2410c);
  --gr-foto-error: var(--error, #c1121f);
  --gr-foto-error-tenue: var(--error-tenue, rgba(193, 18, 31, 0.08));
  --gr-foto-texto: var(--muted, #56718a);
}

/* ============================================================================
   LA FOTO DE PERFIL DEL FORMULARIO
   ----------------------------------------------------------------------------
   Portado de ../redbullaces. La foto se sube al elegirla, así que este bloque
   tiene tres estados —vacío, subiendo y lista— y el JavaScript los conmuta con
   `data-foto-modo`. El azul de aquel proyecto va aquí al ámbar de la marca.
   ========================================================================== */
.gr-foto__estado {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 4.5rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(8, 42, 77, 0.14);
  border-radius: 0.75rem;
  background: #f8fbfd;
}

.gr-foto[data-foto-modo="error"] .gr-foto__estado {
  border-color: var(--gr-foto-error);
  background: var(--gr-foto-error-tenue);
}

.gr-foto__vista {
  display: block;
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(8, 42, 77, 0.06);
}

.gr-foto__vista img { display: block; width: 100%; height: 100%; object-fit: cover; }

.gr-foto__cargando {
  display: grid;
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
}

.gr-foto__rueda {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  border: 2px solid rgba(8, 42, 77, 0.18);
  border-top-color: var(--gr-foto-acento);
  border-radius: 50%;
  animation: gr-foto-girar 700ms linear infinite;
}

@keyframes gr-foto-girar { to { transform: rotate(360deg); } }

/* Sin animación no se pierde el aviso: la rueda se queda quieta y el texto de al
   lado —«Subiendo tu foto…»— sigue diciendo lo mismo. */
@media (prefers-reduced-motion: reduce) {
  .gr-foto__rueda { animation: none; }
}

.gr-foto__medio { display: block; flex: 1 1 auto; min-width: 0; }

.gr-foto__texto {
  display: block;
  min-width: 0;
  color: var(--gr-foto-texto);
  font-size: 0.88rem;
  line-height: 1.4;
}

.gr-foto__barra {
  display: block;
  height: 0.35rem;
  margin-top: 0.45rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(8, 42, 77, 0.1);
}

.gr-foto__relleno {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--gr-foto-acento);
  transition: width 150ms linear;
}

/* Sin ancho conocido no hay porcentaje que enseñar: la barra se recorre sola para
   decir que sigue trabajando, en vez de quedarse a cero como si no pasara nada. */
.gr-foto__barra:not([aria-valuenow]) .gr-foto__relleno {
  width: 35%;
  animation: gr-foto-recorrer 1.1s ease-in-out infinite;
}

@keyframes gr-foto-recorrer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}

@media (prefers-reduced-motion: reduce) {
  .gr-foto__barra:not([aria-valuenow]) .gr-foto__relleno { animation: none; width: 100%; }
  .gr-foto__relleno { transition: none; }
}

.gr-foto[data-foto-modo="error"] .gr-foto__texto { color: var(--gr-foto-error); }

.gr-foto__cambiar {
  flex: none;
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(8, 42, 77, 0.18);
  border-radius: 0.5rem;
  color: var(--gr-foto-acento);
  background: #fff;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.gr-foto__cambiar:hover { border-color: var(--gr-foto-acento); }

/* La foto que ya tiene quien entra a su propia ficha. */
.gr-foto__actual { margin: 0 0 0.6rem; }
.gr-foto__actual img { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; }

/* ============================================================================
   EL AVATAR
   ----------------------------------------------------------------------------
   Lo pintan el listado, el panel lateral y la ficha completa, en tres tamaños.
   El tamaño entra por `--gr-avatar-px` desde la plantilla en vez de tener una
   clase por medida.
   ========================================================================== */
.gr-avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 var(--gr-avatar-px, 40px);
  width: var(--gr-avatar-px, 40px);
  height: var(--gr-avatar-px, 40px);
  overflow: hidden;
  border-radius: 50%;
  background: #e6ebef;
  color: #9aa9b6;
  /* El objeto se recorta al círculo en vez de deformarse: las fotos llegan en
     vertical, en horizontal y en cuadrado, y estirarlas deforma las caras. */
  object-fit: cover;
  /* Un borde tenue para que una foto clara no se confunda con el fondo de la fila. */
  box-shadow: inset 0 0 0 1px rgba(8, 42, 77, 0.08);
}

img.gr-avatar { display: block; }

.gr-avatar--sin-foto i {
  font-size: calc(var(--gr-avatar-px, 40px) * 0.44);
  line-height: 1;
}