/* Página Mi perfil — solo usa los 5 colores de la marca:
   #0367A6 principal · #E6141E acento · #397093 secundario · #F2F2F2 fondo · #FFFFFF fondo alterno */
.pagina-perfil{
  --azul:#0367A6;
  --rojo:#E6141E;
  --azul2:#397093;
  --fondo:#F2F2F2;
  --blanco:#FFFFFF;
  font-family:"Clarity City",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--azul);
  background:var(--fondo);
}
.pagina-perfil header{border-bottom-color:var(--fondo)}
.pagina-perfil footer{border-top-color:var(--blanco);color:var(--azul2)}
.pagina-perfil .menu a[aria-current="page"]{color:var(--azul);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.pagina-perfil [hidden]{display:none!important}
.pagina-perfil .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Foco visible en todo lo interactivo */
.pagina-perfil a:focus-visible,
.pagina-perfil button:focus-visible,
.pagina-perfil input:focus-visible{outline:2px solid var(--azul);outline-offset:2px}

/* Botones: mismas clases que la landing, sin colores fuera de la paleta */
.pagina-perfil .btn{font-family:inherit;font-size:16px;min-height:48px}
.pagina-perfil .btn-principal:hover{background:var(--rojo);text-decoration:underline;text-underline-offset:3px}
.pagina-perfil .btn-principal:disabled{background:var(--fondo);color:var(--azul2);border-color:var(--azul2);cursor:not-allowed;text-decoration:none}
.pagina-perfil .btn-principal.guardando{background:var(--rojo);color:var(--blanco);border-color:transparent;cursor:wait}
.pagina-perfil .btn-secundario{background:var(--blanco)}
.pagina-perfil .btn-secundario:hover{background:var(--azul);color:var(--blanco)}
.enlace-boton{
  min-height:44px;padding:0 4px;background:none;border:0;font:inherit;font-size:16px;font-weight:600;
  color:var(--azul2);text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.enlace-boton:hover{color:var(--azul)}
.enlace-boton:disabled{text-decoration:none;cursor:not-allowed}

/* Estructura */
.perfil-main{padding:32px 0 56px}
.perfil-wrap{max-width:640px;margin:0 auto;padding:0 16px}
.pagina-perfil h1{font-size:36px;font-weight:700;color:var(--azul)}
.perfil-tarjeta{background:var(--blanco);border-radius:8px;padding:24px 20px;margin-top:24px}
.pagina-perfil .perfil-seccion{padding:0}
.perfil-seccion + .perfil-seccion{margin-top:36px}
.pagina-perfil h2{font-size:24px;font-weight:600;color:var(--azul)}

/* Estado de carga */
.perfil-estado{display:flex;flex-direction:column;align-items:center;gap:16px;padding:56px 0;text-align:center;font-size:17px}
.perfil-tarjeta.perfil-estado{padding:32px 20px;align-items:stretch;text-align:left}
.spinner{width:40px;height:40px;border-radius:50%;border:4px solid var(--blanco);border-top-color:var(--azul);animation:girar .9s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:3s}}

/* Avatar con iniciales o foto */
.foto-fila{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:20px}
.avatar{
  width:96px;height:96px;border-radius:50%;flex-shrink:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:#0367A6;color:#FFFFFF;font-size:36px;font-weight:700;letter-spacing:.02em;user-select:none;
}
.avatar img{width:100%;height:100%;object-fit:cover}
.foto-acciones{display:flex;flex-direction:column;gap:8px;width:100%}
.nota-foto{margin-top:8px;font-size:16px;color:var(--azul)}

/* Campos */
.campo{margin-top:22px}
.campo label{display:block;font-size:16px;font-weight:600;color:var(--azul);margin-bottom:8px}
.campo input{
  width:100%;min-height:48px;padding:10px 14px;font:inherit;font-size:17px;
  color:var(--azul);background:var(--blanco);border:1px solid var(--azul2);border-radius:8px;
}
.campo input[aria-invalid="true"]{border:2px solid var(--rojo);padding:9px 13px}
.ayuda{margin-top:8px;font-size:14px;color:var(--azul2)}

/* Correo de solo lectura: se ve claramente distinto, sin bajar la opacidad */
.solo-lectura{position:relative}
.solo-lectura svg{position:absolute;left:14px;top:50%;width:20px;height:20px;transform:translateY(-50%);fill:none;stroke:var(--azul2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.campo .solo-lectura input{padding-left:44px;background:var(--fondo);color:var(--azul2);border-style:dashed;cursor:default}

/* Mensajes: siempre sobre blanco y con ícono */
.campo-error,.mensaje-error,.mensaje-exito{display:flex;align-items:flex-start;gap:8px;font-size:16px}
.campo-error{margin-top:8px;color:var(--rojo);font-size:15px}
.mensaje-error{margin-top:24px;color:var(--rojo)}
.mensaje-exito{margin-top:24px;color:var(--azul);font-weight:600}
.mensaje-exito:empty{display:none}
.campo-error svg,.mensaje-error svg,.mensaje-exito svg{width:20px;height:20px;flex-shrink:0;margin-top:2px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Botones de acción */
.perfil-botones{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.perfil-botones .btn{width:100%}
.perfil-salir{margin-top:32px;padding-top:24px;border-top:1px solid var(--fondo)}
.perfil-salir .btn{width:100%}

/* Aviso antes de salir */
.perfil-dialogo{
  width:min(440px,calc(100% - 32px));margin:auto;padding:28px 24px;border:1px solid var(--azul2);border-radius:8px;
  background:var(--blanco);color:var(--azul);font-family:inherit;
}
.perfil-dialogo::backdrop{background:var(--azul2)}
.perfil-dialogo p{margin-top:12px;font-size:17px}

@media (min-width:600px){
  .perfil-tarjeta{padding:32px}
  .foto-fila{flex-direction:row;align-items:center;gap:24px}
  .foto-acciones{flex-direction:row;align-items:center;width:auto;gap:16px}
  .perfil-botones{flex-direction:row;align-items:center;gap:20px}
  .perfil-botones .btn,.perfil-salir .btn{width:auto}
}
@media (min-width:768px){
  .perfil-main{padding:56px 0 76px}
  .pagina-perfil h1{font-size:48px}
  .pagina-perfil h2{font-size:28px}
}